feat(ui): refactor the chat interface around a modern design

[gaby]

Rebuilds the chat interface around what someone actually watches an agent do: what it is thinking, which tools it reached for, what each one cost, and where it needs a decision. The shell, the message column, the tool cards and the failure states were all reworked; Chat.tsx and Part.tsx are left as composition orchestrators with the pieces in their own files, per CLAUDE.md.

Every screenshot below is driven by the deterministic test server rather than a live provider, so each one is reproducible from the same FunctionModel fixtures the E2E suite runs.

Light	Dark

The shell

sidebar → AppHeader → conversation → ChatComposer.

• AppHeader — sidebar toggle, conversation title (also the tab title, and the app's only h1), new chat, theme toggle, keyboard help
• WelcomeScreen — an empty chat opens as one centred column with the composer and suggested prompts, instead of a blank page with the input pinned to the floor
• AssistantTurn / UserBubble — a turn is one avatar-gutter column holding that turn's work and its reply
• Sidebar — search (above six conversations), pinning, date buckets, rename, per-row menu, and relative times that refresh on their own. On a phone it is a sheet, and choosing a conversation now closes it rather than leaving it over the chat it was used to pick
• KeyboardShortcutsDialog — one table behind both the dialog and the tooltips, so they cannot contradict each other

Conversation history	Keyboard shortcuts

A turn's work, folded

Thinking and tool calls collect into a single foldable block rather than stacking a card per step above the reply. Folded, it is one line that still names what ran — Worked for 1s · get_weather, calculate. Opened, every step keeps its own card, arguments, result and copy actions: the detail is a click away, not summarised out of existence.

Folded	Opened

It opens itself while the work is happening and folds up once the answer lands. Anything needing a person holds it open instead — a pending approval reads "Waiting for your approval", a failed call "Ran into a problem" — and opening it by hand cancels the auto-collapse so it cannot shut under a reader. A whole tool loop stays in one block even though the SDK marks each model step, sources are cited between the calls they came from without splitting it, and the timer counts from the first thinking token rather than from the first tool call. A turn that works, answers, then works again gets a second block, and only the one still being worked on reads as live. A turn that only thinks keeps its own single reasoning line rather than being wrapped in a second fold.

A tool's arguments and result	Thinking, as steps

Approvals and failures

• The approval gate names the tool, states plainly that nothing has run yet, and puts the two outcomes side by side. Once decided it shrinks to a one-line record of what was chosen — which survives the tool then failing
• A failed call reads in place. It used to sit behind a "View Error" button that opened a modal: two clicks and a context switch to reach the one thing that explains the run
• A failed run separates what broke from how to recover, with the provider's raw text one click away
• Tool cards carry their state on the left edge, so a run of cards can be scanned for the one that needs attention without reading a word
• Repeated calls to the same tool collapse into one group; noisy tools can be hidden by name and revealed inline

Waiting on a decision	A call that failed

Token usage

The UI reads UIMessage.metadata.usage off assistant messages and shows a per-reply count plus a running conversation total with the breakdown behind a click. Agent.to_web() has no seam to write that metadata today, so agents served that way fall back to a locally-derived estimate, labelled ~. That estimate charges each turn for the conversation it was sent plus what it produced, since a reported total sums per-request usage and every request carries the history again. A partial history — only some replies reporting — is labelled ~ too rather than presented as an exact total it would undercount, and a backend that reports only a total gets the total rather than a breakdown of zeroes.

tests/server/server.py grew a ~20-line UsageEventStream showing what a backend has to write.

Usage, broken down	Thinking effort

Composer

Model select, an effort meter built as a radiogroup with roving tabindex rather than a dropdown, builtin tools as inline toggle chips (checkbox items once they overflow into a menu, so their state is not carried by an unlabelled icon), and a stop control — there was previously no way to abandon a run. Submission is blocked until a model the backend still advertises is selected, rather than sending an empty or withdrawn model id.

Markdown

Math was rendering three times over: Streamdown typesets $$…$$ with KaTeX, whose HTML output is class-driven, then sanitises with an allowlist that permits className on code alone — so the MathML copy and the LaTeX source the stylesheet exists to hide both rendered as text beside the visual one. It now typesets to MathML, which browsers lay out natively, with those elements and the layout attributes matrices need allowed through sanitisation. Class names on span are deliberately still stripped: this renders model output, and a reply could otherwise style itself into a full-page overlay out of the app's own utility classes.

Light	Dark

On a phone

The same turn, and the sidebar as a sheet that closes when a conversation is picked.

Conversation	Drawer

Alignment

Every edge in the conversation column was measured at 1440 and on emulated iPhone/Pixel rather than eyeballed. The composer's padding sat outside its max-w-3xl box while the conversation's sat inside, so the box you type into overhung the column it lands in by 16px a side; the message action icons were inset 7px from the text above them by their own button padding; and the composer changed width when the first message was sent. All three now share one set of edges.

Correctness

Most of the diff's risk is in conversation persistence, and the defects found in review are fixed here: a stream contaminating whichever conversation is now on screen, history written under the wrong id, a load persisted back as a write, a tail lost when leaving within the save throttle, a rename or a pin reverting a concurrent activity stamp, a superseded read landing on top of the conversation that replaced it, a deferred send delivered into the wrong conversation, sending before a history had loaded, a failed read overwritten by the next reply, a deleted conversation restored by the flush that followed it, and a migration that aborted partway leaving what it had already written invisible. Storage moved to IndexedDB with a localStorage migration that keeps each conversation's own timestamp, and every consumer of the conversation list now shares one read rather than opening its own.

Tests

• tests/e2e/deterministic/ — 73 Playwright specs against FunctionModel fixtures, no API keys
• tests/headless/ — 77 Vitest tests exercising the wire protocol via TestChat, plus the parsing and usage helpers
• tests/e2e/offline/ — the built single-file artifact rendered with every non-loopback request aborted, so an asset that stops being inlined fails the run

New fixtures: slow, reasoning, reasoning-tool, failure, approval-error, repeated-approval, two-step, large-output, run-code, total-only-usage, sourced-tools, interleaved.

Popover was pulled from the radix-ui umbrella rather than the granular package the other primitives use, which shipped a second copy of react-dismissable-layer, react-focus-scope and react-primitive; the offline artifact is ~400kB smaller without it. bun.lock is regenerated alongside pnpm-lock.yaml.

AI Usage

• This refactor was completed through a multi-day task with Claude Opus 5 (MAX effort) and Codex/Codex Security reviewing each commit.

Fixes #10

[gaby]

Ping @DouweM @dsfaccini

[dsfaccini]

This comment was posted by Claude Code using claude-opus-5 on behalf of David.

Reviewed, and pushed the findings to the branch as b91e9b1 rather than leaving them as a list. #37 (mobile sidebar + viewport units) is closed as superseded by this PR — the one thing it fixed that this branch did not is carried over in that commit.

Carried over from #37. svh sizes the shell to the small viewport, but the on-screen keyboard does not resize that viewport without interactive-widget=resizes-content in the meta tag, so the composer was still covered while typing. Added to index.html.

Correctness

• useConversations.ts — when the last subscriber unmounts, the cleanup removes the conversations-changed listener but leaves state.loaded true. A later remount then hits if (!state.loaded) refresh() and serves the snapshot from before the gap, permanently. Not reachable today, since AppSidebar and AppHeader are always mounted, but it is a trap for the first consumer that mounts conditionally. Now re-reads whenever the first subscriber arrives.
• chat-db.ts updateConversation — IDB aborts a transaction when a request handler throws, and fires abort alone with no error event. With only tx.onerror wired, the promise never settled: patchConversation would hang and the caller's catch never run. decide cannot throw as written, so this is latent, but a hung await is an expensive way to find that out. tx.onabort handled here and in deleteConversation, where it also rolls back the deletedConversations guard.
• config.ts isRemoteConfig checked array-ness only, so {models: [{id: 'a'}], builtinTools: []} passed validation and reached the model select as options with no name — indistinguishable from each other, and sending one produces a request the backend rejects. Rejecting the response instead puts the retry banner this PR added in front of it. Elements are now checked; three cases added to tests/headless/config.test.ts.

Polish

• The delete confirmation cleared conversationToDelete alongside open, which blanked the name mid-animation — the last thing seen of a delete was a dialog asking about "Untitled chat". The entry now outlives the dialog.

Coverage

• Every spec ran at desktop width, so the shell below md — rebuilt in this PR around a header and an off-canvas sheet — had no coverage at all. tests/e2e/deterministic/mobile-layout.spec.ts runs at 390x844 and asserts the trigger is reachable outside the drawer, that the sheet closes on a selection, and that the composer stays inside the viewport.

Verified on the pushed head: typecheck, typecheck:test, lint, 79 headless tests, 78 deterministic E2E and the offline artifact suite all pass.

Two things left alone deliberately. useMinuteTick re-renders the whole conversation list every 60s for the life of the tab even when the sidebar is collapsed — the tradeoff is documented in the code and gating it costs more than it saves. And src/lib/markdown-plugins.ts allowing MathML through the sanitiser while withholding class on span is exactly right: a reply that could name utility classes could style itself into a full-page overlay. Worth keeping that reasoning where it is.