Side panel: visible close buttons + drag-to-resize, and artifact surface routing

[vjvarada]

Two reported side-panel bugs, plus the routing rule that decides when an agent should render an artifact and where it should go.

1. Side panel fixes (00f2fe5)

Close button was invisible. Each tab's × was opacity-0 until you hovered that exact tab — unreachable on touch, and undiscoverable on a pointer device unless you already knew it was there. Now always rendered: dimmed at rest, full strength on hover/focus, with an aria-label and a visible focus ring.

Panel had a fixed width. It was hard-coded w-[30rem], so a wide table or dashboard had nowhere to go. The right edge is now a drag handle:

• drag to resize, double-click to reset
• arrow keys (Shift = coarse step) for keyboard users
• role="separator" with aria-valuenow/min/max
• clamped 320–1100px, persisted per browser
• a 7px hit area straddling the edge, since a 1px border is impossible to grab

Content reflows on its own — the panel was already flex throughout.

Why pointer capture, not the existing window-listener pattern

TimeGrid does drags with window listeners, and I deliberately didn't copy it. This panel renders artifacts inside an iframe, and a window listener stops receiving pointermove the moment the cursor crosses it — the drag dies mid-gesture, which is exactly the path a user takes when narrowing the panel.

Measured both approaches on the same 200px leftward drag across an iframe:

Approach	Samples received	Panel width
Pointer capture (shipped)	9	480px → 280px ✅
Window listeners	1	480px → 480px ❌

The conventional pattern would have been visibly broken here.

A latent bug this surfaced

openDoc built its next state without spreading the previous one:

_emit({ open: true, docs, activePath: doc.path });   // width dropped

Adding width to the store would have silently reset a user's resized panel every time a document opened. Fixed, and pinned by a test. TypeScript caught it, but only because the field was required.

Also: width is not seeded from localStorage at module load — that module is evaluated during SSR too and would desync hydration. hydratePanelWidth() applies it after mount, invisible in practice since the panel starts closed.

2. Artifact surface routing (161eb9f)

The kit shipped, but nothing told an agent when to reach for it. The guidance said "reach for UI eagerly" with no threshold and said nothing about inline vs panel — so the default stayed a markdown table in chat no matter how much data there was.

Added a rule keyed on volume, with numbers rather than judgement calls, because vague advice doesn't change model behaviour:

The answer is…	Surface
A one-line fact, or narrative	Prose
≤8 rows · ≤4 metrics · one chart	Inline card
>12 rows · several sections · scrolled/sorted/kept	Side panel
A deliverable they'll keep	Saved outputs/*.jsx
Something they must act on	React + @cc/ui
Genuinely could be either	Ask (optionPicker + hitl)

Two tests that settle most cases: would this need its own scrollbar inside a chat bubble? (→ panel), and am I about to type a markdown table? (→ render it).

The rule goes in the always-injected addendum (~7 lines) because it has to fire unprompted; the fuller table lives in design.md, which loads on demand. load_artifact_kit's docstring now says outright to reach for it without being asked whenever real data is about to be presented.

Verification

Check	Result
Python unit tests	2472 passed, 8 skipped
vitest	63 passed (9 new for panel width)
tsc --noEmit	clean
eslint	clean
next build	passes
Browser drag-across-iframe	pass (table above)

New tests cover clamping, non-finite input, snapshot stability (React #185), no-emit when pinned at a bound during a drag, width surviving open/close, storage round-trip, out-of-bounds stored values, and unreadable storage.

Note

The drag was verified as an isolated browser repro of the exact handler pattern, not by driving the real panel — that needs an authenticated session with open documents. The store logic underneath it is unit-tested directly.

---

Generated by Claude Code