Merge pull request #37 from huggingface/design/trace-unify

docs/conversation-view.md

@@ -0,0 +1,443 @@
+# One conversation, three depths — unifying the Overview card and the trace viewer
+
+Status: **draft implementation** · Branch `design/trace-unify` · Written 2026-08-05
+
+The Overview reads well and shows too little. The trace viewer shows everything and reads
+badly. They render the same thing — one agent's conversation — through two components, two
+data paths and two visual languages. This document proposes collapsing that into **one
+renderer used at four depths**, says exactly which affordance moves where, and records how each
+choice was arrived at (§9). §10 tracks what of it is built.
+
+Companion docs: `docs/trace-panel-spec.md` (how the reader and the viewer were built, and why
+the digest is not enough), `docs/session-sharing.md` (share/receive).
+
+---
+
+## 1. What is actually wrong
+
+**Two renderers.** The Overview card (`web/src/components/Overview.tsx:29`) draws
+prompt → answer from a *digest*. The viewer (`web/src/components/TracePane.tsx:166`, `Row`)
+draws role-badged turns from *trace pages*. Nothing is shared but `renderMarkdown`.
+
+**The card cannot show the middle.** Its history control (`Overview.tsx:45,57,122-140`)
+*replaces* the answer with an earlier one — a stepper, not an unfold. And the data it steps
+through, `digest.turnsLog` (`server/src/traces.js:57-81`), holds only assistant **text** turns
+from the **current** request. Tool calls, thinking, and everything before the last prompt are
+not in the payload at all. So "unfold the messages in between" is not a UI tweak: the card
+has to read the trace (§5).
+
+**The sidebar carries four trace affordances** that all belong to a session it already lists:
+read-trace and share on every agent row (`Sidebar.tsx:245-247`), share and handover on every
+`trace` row (`Sidebar.tsx:237-238`). Worse, reading a trace *creates a session record*
+(`App.tsx:openTrace`) — a second sidebar row for a session that already has one. On mobile,
+where row actions are always visible (`styles.css:831`), each row is a cluster of five glyphs.
+
+**The viewer is dressed as a terminal.** `.trace-body { background: var(--term-bg) }`
+(`styles.css:895`), uppercase role pills, a mono chip per model and per-row token counts. The
+card uses panel background, hairlines, one accent `❯`, 13px text. Same content, two registers —
+and the terminal register is the one nobody likes.
+
+**The card is boxed in on a phone.** `.ovw-backdrop { padding: 7vh 20px 20px }` +
+`.ovw-win { max-width: 640px; max-height: 85vh }` (`styles.css`) is a desktop dialog. On a
+390pt screen it wastes ~15 % of the height and 40pt of width, and being `position: fixed` it
+ignores `--vvh`, so an open keyboard can sit over the reply line.
+
+---
+
+## 2. The idea
+
+> An agent's conversation is a list of **exchanges**. An exchange is *your prompt*, *the work*,
+> and *the answer*. Every surface in this app shows exchanges — one or many, shallow or deep.
+
+```
+Exchange = { prompt, steps[], answer }
+```
+
+Four depths of one component:
+
+| Depth | Surface | Shows |
+|---|---|---|
+| **D0** brief | Overview tile | prompt (1 line) + state |
+| **D1** card | Overview card, collapsed | prompt, one meta line, answer, reply box |
+| **D2** open | Overview card, unfolded | + the steps between prompt and answer; `↑ show previous turn` walks back one exchange at a time |
+| **D3** full | Session pane, reader mode | every exchange, windowed, each expandable to D2 |
+
+The viewer stops being a different thing and becomes **a vertical stack of the card**. That is
+the whole design; the rest is consequences.
+
+---
+
+## 3. Surface by surface
+
+### 3.1 Overview tile — unchanged
+
+Still digest-fed, still one line of prompt and a state word. It is the only thing on screen in
+numbers, and it is already right.
+
+### 3.2 Overview card
+
+Collapsed, it looks exactly like today: `❯ prompt`, one meta line, the answer as markdown, the
+reply line. **Everything about the turn is on that one line, under the prompt** — nothing above
+it. The line is also the fold control, so it names what it is hiding:
+
+```
+        ↑ show previous turn
+
+▒▒ ❯ rebuild the fixture generator so it merges index.json ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
+
+  ▸ 14 steps · 9 tools · 42s · 18.4k tok
+
+  Done — `scripts/lab-fixtures.mjs` now merges by name …
+
+  ❯ reply…                                                                    ⬆
+```
+
+The composer is the same everywhere: `❯`, a growing textarea, and a square send key. No
+"↵ send · ⇧↵ newline" caption — it appeared the moment you typed, which is the moment you
+already knew.
+
+In the viewer the same line carries the turn's identity on its right — one row, two halves:
+
+```
+▒▒ ❯ rebuild the fixture generator so it merges index.json ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
+  ▸ 14 steps · 9 tools · 42s · 18.4k tok            turn 6/13  01:32 PM
+```
+
+The prompt is a **band**: a faint accent tint between two hairlines, with the `❯` hanging in
+a 16px gutter to its left. Nothing else in the exchange sits outside that column — the answer
+has no rail, the work has no rail — so scrolling a long conversation, the arrow and the band
+are the only things your eye has to track, and they mean exactly one thing: *you said this*.
+
+Unfolded (D2), the steps appear **between** prompt and answer, one line each, chronological:
+
+```
+▒▒ ❯ rebuild the fixture generator so it merges index.json ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
+  ▾ 14 steps · 9 tools · 42s · 18.4k tok
+  ▸ thinking  weighing a merge against a rewrite…
+  ✓ Read   scripts/lab-fixtures.mjs
+  ✓ Edit   scripts/lab-fixtures.mjs · +6 −1
+  ▸ I'll also cap the candidate list before statting…
+  ✓ Bash   node scripts/lab-fixtures.mjs …
+  ✗ Bash   git -c core.hooksPath=… commit
+  Done — `scripts/lab-fixtures.mjs` now merges by name …
+```
+
+Rules that keep this from becoming the ugly viewer in a small box:
+
+- **One line per step**, always. Nothing expands by default.
+- **One left column, two meanings.** A tool reports its outcome there (`✓` / `✗`); everything
+  else offers a disclosure triangle, greyed when there is nothing more to see. The fold control
+  above uses the same column and the same triangle, so it reads as the head of the list.
+- **Expanding never repeats itself.** Text steps (thinking, an aside, a compaction) simply stop
+  being truncated — same font, same colour, more of it. Only a tool has genuinely *different*
+  material below: its input and what came back.
+- Consecutive calls to the same tool collapse (`✓ Read ×4  App.tsx, api.ts, +2`). The grouping
+  logic exists — `ToolGroup` in `TracePane.tsx:86` — and gets reused, not rewritten.
+- **Thinking is one line** with a preview; system/harness turns are not shown at all in the card
+  (they are the harness talking to itself).
+- No badges, no per-step timestamps, no per-step tokens.
+- **A failed result is a box with a red border**, not a red bar down one side. The bar reads as
+  decoration bolted onto the left edge; the border says *this block is the failure*.
+- **Something is always at the bottom while the agent works.** With no answer yet — or a partial
+  one — a `working` line sits below the last thing said and above the reply box.
+- **The card opens on the latest turn**, its prompt at the top of the body and the answer
+  reading downward; while the agent is working it pins to the tail instead. Asking for the
+  previous turn scrolls to the **top** — you asked for that turn, so the body lands on it rather
+  than leaving you where you were. The body is
+  the scroll region, sized by the window (`flex: 1; min-height: 0; overflow-y: auto`) — **never**
+  by a `vh` number, which is measured against the viewport and leaves a full-screen phone card
+  two-thirds empty.
+- **Only the card you opened reads the trace.** Inline in the Overview list a card is a
+  summary — one prompt, one clamped answer — and the digest already has that. Reading the trace
+  per visible agent, and polling it every three seconds for the working ones, would turn the
+  Overview from one `/api/meta` poll into one transcript read per row. The window (and reader mode)
+  is where the middle gets fetched.
+- **A card says nothing the surface around it already says.** No turn number (there is one turn),
+  no clock (its header carries `·6m`), no model, no harness. In the viewer the same line's right
+  half adds `turn 6/13` and the time, and names the model *only* when that turn's model differs
+  from the session's.
+
+**Going back in history** — the part you were least sure about. The card grows by **one
+exchange per click**, never by "load everything":
+
+- A centred `↑ show previous turn` at the top of the body prepends the previous exchange,
+  collapsed to prompt + answer (its steps fold behind the same `▸ n steps`). Centred, because it
+  belongs to the whole card rather than to the column of text under it.
+- After the second one, `full history ↗` joins it, opening the pane in reader mode at that
+  exchange. The card is for "what just happened"; archaeology has a bigger room, and the handoff
+  is one click.
+- Cap the card at, say, 5 exchanges regardless — past that the card is the wrong tool and says so.
+
+This replaces the `↑ ↓` turn stepper entirely. Stepping through turns *in place of* the answer
+was a workaround for not having the middle; with the middle visible it has nothing left to do.
+
+**Mobile.** The card window becomes the screen, with a small margin:
+
+```css
+@media (max-width: 720px) {
+  .ovw-backdrop { padding: 6px; height: var(--vvh, 100dvh); align-items: stretch; }
+  .ovw-win { max-width: none; width: 100%; max-height: none; height: 100%; border-radius: 12px; }
+}
+```
+
+`--vvh` is already maintained from `window.visualViewport` (`App.tsx:106-114`); the backdrop
+must use it, or an open keyboard covers the reply line it is there to serve.
+
+### 3.3 The session pane: terminal ⇄ reader
+
+The bottom bar gets a two-state control, next to the zoom:
+
+```
+                                        [ terminal | reader ]   − 100% +
+```
+
+**It is one setting for the whole app, like zoom** — not a per-pane toggle. Reading a fleet means
+reading it the same way, and a per-session switch was a preference nobody wanted to manage. A
+pane with nothing to render (a shell) simply stays a terminal.
+
+- **Only an agent has a conversation.** A shell stays a terminal whatever the switch says, and
+  the files/trace panels are not sessions at all — same rule the Overview uses to decide what is
+  an agent (`cli !== 'shell' && !isPassive(cli)`).
+- **terminal** — today's terminal, untouched.
+- **reader** — the same session, laid out: the exchange renderer over `/api/trace/:id`, at D3.
+  The two modes show the *same content*; what differs is the form, which is why the labels name
+  the form. "Conversation" would have described the terminal just as well.
+- The mode is a **view preference**, kept in `localStorage` for the app, not in the store.
+- The terminal element stays mounted and connected underneath; the reader draws over it. Toggling
+  must not detach tmux — a reattach costs a repaint and can trip the handoff path
+  (`HANDOFF_CODE`, `TerminalPane.tsx`). **Verify** this before shipping: xterm needs layout to
+  fit, so "cover, don't unmount" is the low-risk option, and a refit on return is required.
+- The reader's toolbar is a second header row, not a squeeze into the first — on a phone the
+  first row has no spare width. It carries only what is true of the whole session and said
+  nowhere else: the model, `13 turns`, the token totals abbreviated (`2.2M↓ 654k↑`), `▲▼`, and
+  the search box. The harness is the logo in the row above; the raw message count and the cached
+  tokens are details, so they live in `title` attributes. There is no "expand everything" — each
+  turn folds itself, and search opens what it needs to.
+- **Search has to be followable.** Filtering to matching turns is not finding: the term is
+  highlighted wherever it lands, a turn whose only match is inside its folded work *unfolds it*
+  (and opens the step holding it, body included), the box reports `3/17`, and `▲▼` switch from
+  walking turns to walking hits. With no query, `▲▼` put the next turn's prompt at the top of
+  the reading area — measured against the scroller's rect, not `offsetTop`, which is relative to
+  the nearest positioned ancestor and lands a few rows off.
+- Vocabulary: a **turn** is one exchange, a **message** is a raw transcript row. Each turn's meta
+  line says `turn 6/13`, so the bar counts the same things the reader does.
+- **The terminal must not keep the keyboard** while reader mode covers it. A mounted xterm with focus
+  swallows keystrokes into the agent's TTY, invisibly — and several paths grab focus back (the
+  pane becoming active, the header, the key bar), some of them *after* the mode changes, so the
+  guard belongs at each call rather than at the switch.
+- **A failed refresh must not blank the conversation.** The poll's error is a strip above the
+  turns, not a replacement for them: this mount answers `EIO` now and then, and going stale for
+  three seconds beats losing your place mid-read.
+- **A search survives a refresh.** Only a new query jumps to the first hit; a poll landing keeps
+  your position among the matches.
+- **While the agent is working the viewer follows the tail**, and stops the moment you scroll up
+  (`< 48px from the bottom` is "still following"). A viewer that yanks you back down on every
+  tool call is unusable while a task runs; one that never moves makes you chase it.
+- **The prompt band sticks to the top** while you read a long turn. What you want overhead deep
+  in someone's 67-step answer is the question it is answering — not a row of numbers.
+- **The reader fills the pane.** A fixed reading column left a gutter of nothing on each
+  side while the prompt band still spanned the full width, so the two disagreed about where the
+  conversation began. The pane is the measure: narrow the pane and the conversation narrows.
+- **Reader mode can be replied to.** Reading a conversation and answering it are the same act — the
+  card has always known that, and a rendered session that could only be read would send you back
+  to the terminal to type. It is the card's own composer (`.ov-live`), the same `sendInput`, and the
+  same optimistic echo: your prompt appears at the bottom with a `working` line until the
+  transcript catches up. Only a trace with **no agent behind it** — a shared file, an import — is
+  read-only, which is what `readOnly` is for.
+- **Share** moves here from the sidebar. One session, one place.
+- **Handover** ("continue from this trace in a new agent") lives in the conversation footer, beside
+  the provenance line — the only place where its meaning is obvious.
+
+### 3.4 What leaves the sidebar
+
+| Today | Tomorrow |
+|---|---|
+| `Read this session's trace` on every agent row (`Sidebar.tsx:245`) | bottom bar → **reader** |
+| `Share this session` on every agent row (`Sidebar.tsx:246`) | pane header → **share** |
+| A `trace` **session row per read** (`App.tsx:openTrace`) | **gone** — no duplicate rows |
+| Trace row's `Share` (`Sidebar.tsx:237`) | trace pane header (imported traces keep a pane) |
+| Trace row's `Handover` (`Sidebar.tsx:238`) | reader / trace-pane footer |
+| Quick-add **Trace** = open a shared dataset (`Sidebar.tsx:482`) | **stays** |
+
+The last row is deliberate: an **imported** trace has no session behind it, so it is a genuine
+object that needs a row of its own. Same for a transcript opened from the Files pane
+(`getFileTracePage`). What disappears is the *local* trace pane — a session's own history is
+now a mode of its own pane, not a second entity.
+
+Agent rows keep stop/play and delete. Three glyphs less per row, which is most visible exactly
+where the sidebar is worst: on a phone.
+
+---
+
+## 4. The renderer
+
+### 4.1 Turns → exchanges
+
+Pure client-side, no new server concept:
+
+```ts
+// split at each operator prompt; the answer is the turn the server already marked
+splitExchanges(turns: TraceTurn[]): Exchange[]
+  new exchange at every turn where role === 'user' && !isHarnessNoise(turn)
+  answer  = last turn in the exchange with kind === 'final'      // markFinalTurns, traces.js:1371
+  steps   = everything else, in order, minus role === 'system'
+```
+
+`kind: 'final'` is already derived for every harness (`markFinalTurns`), which is why this works
+uniformly and why codex's `task_complete` needs no special case.
+
+### 4.2 Block vocabulary — one line each
+
+| Block | Collapsed line | Expanded |
+|---|---|---|
+| `thinking` | `⋯ thought for 12s` + preview | plain text, no markdown |
+| `tool_use` (+`tool_result`) | `⌗ <Tool>  <arg summary>` + `✓`/`✗` | args and result, `.tv-pre` style |
+| run of same tool | `⌗ Read ×4  App.tsx, api.ts, +2` | each call in turn |
+| `text` (non-final) | `· <one line>` muted | full markdown |
+| `shell` | `$ <command>` + `✓`/`✗ exit n` | stdout/stderr |
+| `compaction` | `↺ context compacted` | the summary |
+| `image` | thumbnail chip | full image |
+| `system` | *not rendered* in card; behind a toggle in D3 | — |
+| `more` (truncation) | `+412 KB not retained` — **never** silently dropped | — |
+
+### 4.3 Visual grammar — the overview's, everywhere
+
+Role is expressed by typography and position, not by a badge.
+
+- Background `--panel`, never `--term-bg`. Hairlines at **exchange** boundaries only, not per turn.
+- Prompt: `❯` in accent, 13px/550, `pre-wrap` (`.ov-prompt`).
+- Answer: markdown at 13px, no rail — the tinted prompt band above it is what separates turns
+  (`styles.css:966`) — the one thing the viewer does better than the card today. Keep it in both.
+- Steps: 11px mono label + 12px muted detail, single line, ellipsised.
+- Model chip, token counts and timestamp move to the **exchange header**, right-aligned, muted,
+  `tabular-nums`. Per-turn usage survives as a `title` on hover.
+- Uppercase role pills (`.tv-badge`), per-row model chips and per-row token counts are removed.
+- D3 gets a **max reading width** (~720px, centered) when the pane is wide. Line length is most
+  of why the card reads better than the viewer.
+
+Kept as-is: fold behaviour, height-measured windowing, search-says-what-it-searched, prompt
+navigation, image blocks, the "not retained" and "reasoning was encrypted" honesty notes.
+
+---
+
+## 5. Data: which depth reads what
+
+| Depth | Source | Cadence |
+|---|---|---|
+| D0 tile, D1 collapsed card | `/api/meta` digest — already polled for the whole Space | 1.5 s while the Overview is open (`App.tsx:200`) |
+| D2 open card | `/api/trace/:id?offset=-40` — the tail | on unfold; every 3 s **only while that agent is running**; stops on collapse |
+| card `↑ earlier` | `/api/trace/:id` around the previous prompt index | on click |
+| D3 pane | `/api/trace/:id` paged, unchanged | on scroll |
+
+The digest stays exactly what it is: the cheap, always-on summary. The moment you ask for the
+middle, we read the real trace. No third data path, and no growth in what the 1 Hz Space-wide
+pass retains (`docs/trace-panel-spec.md` §2 forbids that, for good reason).
+
+**Two small server changes**, both in `pageOf()` (`server/src/traces.js:1404`):
+
+1. **`prompts: [{ i, ts, text }]`** beside today's `userTurns: number[]`. Clipped to ~200 chars.
+   It lets any surface draw the exchange skeleton — including the label on `↑ earlier` — without
+   fetching pages it will not render. Same single pass that already builds `userTurns`.
+2. **Negative offset** = from the end (`offset=-40` → last 40 turns), so a tail read is one
+   request instead of "fetch page 0 to learn `total`, then fetch the tail".
+
+**The live-parse cost is the one number to watch.** `viewMemo` keys on mtime+size
+(`traces.js:1437`), so every fetch against a *running* session re-parses the whole file — 634 ms
+for a 9.46 MB transcript per the spec's measurements. At 3 s for one unfolded card that is
+~20 % of a core, bounded to one session (the memo holds exactly one), and it stops when the card
+closes. Acceptable for a foreground action. If it bites, the fix is a **tail parser** that reads
+only the last N lines: results whose call is off-window simply render as standalone rows, which
+the block model already supports.
+
+---
+
+## 6. What this buys
+
+- One component to style, so "the overview is more pleasant" becomes true everywhere at once.
+- The card answers "what did it actually do?" without leaving the Overview.
+- A session's history is reachable from the session, not from a second sidebar row.
+- Three glyphs less per sidebar row, and a full-screen card on a phone.
+- Removed code: the `turnsLog` stepper in the card, `openTrace`'s pane-creation path, two
+  sidebar buttons, `.tv-badge` and the terminal-styled viewer chrome.
+
+---
+
+## 7. Risks
+
+| Risk | Mitigation |
+|---|---|
+| Re-parsing a live transcript every 3 s | one session at a time; running-only; tail parser in reserve |
+| Covering the terminal breaks xterm fit / trips tmux handoff | keep mounted + refit on return; verify against a live session before shipping |
+| The unfolded card becomes the ugly viewer in a small box | one line per step, nothing expanded by default, system turns hidden, hard cap of 5 exchanges |
+| Losing an affordance someone used (share from the sidebar) | every removal has a named new home (§3.4); no capability drops |
+| `trace` sessions already in the store | the pane type stays for imported bundles and Files-pane transcripts; existing local trace panes keep working, we just stop creating new ones |
+
+---
+
+## 8. Open questions (operator)
+
+1. **How far back in the card?** Proposal: one exchange per click, hard cap 5, then hand off to
+   the conversation. Alternative: one, then straight to the full conversation.
+2. **Does the app open in reader mode**, or always start on the terminal?
+3. **Kill the `↑ ↓` turn stepper?** Proposal: yes — unfolding replaces it.
+4. **Unfolded card of a running agent**: live-refresh every 3 s, or freeze until it finishes
+   (cheaper, less alive)?
+5. **Harness/system turns in D3**: hidden behind a toggle (proposal), or collapsed rows as today?
+6. **Does the Overview's list view survive?** With a full-screen card on mobile and tiles on
+   desktop, the list view may be redundant.
+
+---
+
+## 9. How this was designed
+
+Every choice above was made by looking at it, not by reasoning about it: a local
+harness (not committed — it carries real transcripts, and this repo is public) renders these
+components against **captured conversations** in phone, tablet and desktop frames, in both
+themes, with six scenarios — done, running, just-sent, failed tool, truncated, never-prompted.
+Fixtures are captured by running the app's own reader (`readTraceByPath`), so the harness cannot
+drift from the payload shape.
+
+It also **replays a turn block by block** — a tool call lands, its result comes back, thinking
+between them, the answer only at the end — which is how the live rules in §3.2 and §3.3 were
+found. Three of them exist only because the replay made them obvious:
+
+- The viewer has to follow the tail while the agent works, and stop the moment you scroll up.
+- Mid-task there is *no answer*: an agent's aside is not a reply, so promoting the last message
+  to the answer slot moved it below the tool calls that came after it.
+- The card's `working` line and reply box have to survive the middle of a turn, not just its end.
+
+**One lesson worth keeping:** a frame is a container, not a viewport, so `@media (max-width:
+720px)` never fires inside one — and neither does it fire for a 390px-wide *pane* on a desktop.
+Pane chrome therefore wraps by default rather than at a breakpoint, and the card body is sized by
+its window (`flex: 1; min-height: 0`) rather than by any `vh` number.
+
+## 10. Sequencing
+
+Built (this branch):
+
+1. `web/src/components/conversation/` — `exchanges.ts` (turns → exchanges → step lines),
+   `Exchange.tsx` (one exchange at any depth), `ToolCall.tsx` (an expanded call as a command, an
+   edit, a file — not as JSON), `ConversationView.tsx` (D3), `web/src/conversation.css`.
+2. The Overview card reads the trace tail and renders exchanges: the work unfolds, history grows
+   one turn per click, the `turnsLog` stepper is gone. The digest still drives the card when
+   there is no transcript to read.
+3. `pageOf()` takes a negative offset — "the last N turns" without a round trip to learn `total`
+   (`server/test/trace-tail.test.mjs`).
+4. The session pane gets terminal ⇄ reader, from the bottom bar, app-wide. It draws over the terminal, which stays mounted and
+   connected but loses the keyboard; the mode is a per-session view preference in `localStorage`
+   (`web/src/lib/paneMode.ts`), and its event reaches a pane that is already open — which is what
+   the card's "full history ↗" needs.
+5. Tests for the one piece of judgement in the renderer — what counts as the answer, and what
+   stays in the work (`web/test/exchanges.test.mjs`, `npm test` in `web/`).
+
+Not yet, in the order I would do it:
+
+6. `head.prompts[]` (§5) — index, first line and timestamp per prompt, so a surface can draw the
+   skeleton and label "show previous turn" before fetching the page that holds it.
+7. The sidebar loses its trace buttons and `openTrace`; share moves into the pane header (§3.4).
+8. Windowing by exchange in reader mode: a collapsed turn is 2–3 rows, so the DOM stays small,
+   `head.prompts[]` gives the skeleton up front, and only an opened turn needs its page. The
+   measured-height machinery in `TraceView` is reused as-is — what changes is what a "row" means.
+   Until then it reads the last 400 turns in one request.
+9. The mobile card sizing block (§3.2) — the lab's `.lab-mfix` mirror of it is not the real
+   `@media` rule, and the real one has not landed.

server/package.json

@@ -14,7 +14,7 @@
     "start": "node src/index.js",
     "dev": "node --watch src/index.js",
     "test:ui": "node terminal-ui.test.mjs",
-    "test": "node test/repin.test.mjs && node test/opencode-resume.test.mjs && node test/terminal-modes.test.mjs && node migration.test.mjs && node resize.test.mjs"
+    "test": "node test/repin.test.mjs && node test/opencode-resume.test.mjs && node test/terminal-modes.test.mjs && node test/trace-tail.test.mjs && node migration.test.mjs && node resize.test.mjs"
   },
   "engines": {
     "node": ">=20.19"

server/src/traces.js

@@ -1430,7 +1430,11 @@ function pageOf(parsed, offset, limit) {
   // before the page holding it has been fetched.
   const userTurns = [];
   for (let i = 0; i < total; i++) if (parsed.messages[i].role === 'user') userTurns.push(i);
-  const from = Math.max(0, Math.min(offset | 0, total));
+  // A negative offset reads from the END — what any surface showing the tail of
+  // a conversation wants (the Overview card, RENDER mode) without first making a
+  // round trip just to learn `total`.
+  const off = offset | 0;
+  const from = off < 0 ? Math.max(0, total + off) : Math.max(0, Math.min(off, total));
   const to = Math.min(total, from + Math.max(1, Math.min(limit | 0 || 200, 500)));
   return {
     harness: parsed.harness, harnessLabel: parsed.harnessLabel, sessionId: parsed.sessionId,

server/test/trace-tail.test.mjs

@@ -0,0 +1,60 @@
+// Reading the TAIL of a trace: a negative offset counts back from the end.
+//
+// The Overview card and RENDER mode both show the end of a conversation. Without
+// this they would have to fetch once just to learn `total`, then fetch again —
+// two round trips per card, on a FUSE-backed transcript. Run with:
+//   node test/trace-tail.test.mjs
+import fs from 'node:fs';
+import path from 'node:path';
+import os from 'node:os';
+import assert from 'node:assert/strict';
+
+const TMP = fs.mkdtempSync(path.join(os.tmpdir(), 'trace-tail-'));
+process.env.DATA_DIR = path.join(TMP, 'data');
+fs.mkdirSync(process.env.DATA_DIR, { recursive: true });
+
+const { readTraceByPath } = await import('../src/traces.js');
+
+// A minimal Claude transcript: 12 alternating turns, each one identifiable.
+const file = path.join(TMP, 'session.jsonl');
+const lines = [];
+for (let i = 0; i < 12; i++) {
+  const user = i % 2 === 0;
+  lines.push(JSON.stringify({
+    type: user ? 'user' : 'assistant',
+    cwd: TMP,
+    timestamp: new Date(Date.UTC(2026, 0, 1, 0, i)).toISOString(),
+    message: {
+      role: user ? 'user' : 'assistant',
+      content: [{ type: 'text', text: `turn ${i}` }],
+    },
+  }));
+}
+fs.writeFileSync(file, `${lines.join('\n')}\n`);
+
+const textOf = (t) => t.blocks.filter((b) => b.type === 'text').map((b) => b.text).join('');
+
+const all = await readTraceByPath(file, { offset: 0, limit: 200 });
+assert.equal(all.total, 12, 'twelve turns were written');
+
+// The tail: the last four turns, in order, without knowing `total` first.
+const tail = await readTraceByPath(file, { offset: -4, limit: 4 });
+assert.equal(tail.offset, 8, 'a negative offset resolves against the end');
+assert.deepEqual(tail.turns.map(textOf), ['turn 8', 'turn 9', 'turn 10', 'turn 11']);
+
+// Asking for more tail than exists starts at the beginning rather than wrapping.
+const over = await readTraceByPath(file, { offset: -500, limit: 500 });
+assert.equal(over.offset, 0, 'a too-large tail clamps to the start');
+assert.equal(over.turns.length, 12);
+
+// Positive offsets are untouched by the change.
+const mid = await readTraceByPath(file, { offset: 4, limit: 2 });
+assert.equal(mid.offset, 4);
+assert.deepEqual(mid.turns.map(textOf), ['turn 4', 'turn 5']);
+
+// `userTurns` indexes the WHOLE conversation, not the page — jumping to a prompt
+// has to work before the page holding it has been fetched.
+assert.deepEqual(tail.userTurns, [0, 2, 4, 6, 8, 10]);
+
+fs.rmSync(TMP, { recursive: true, force: true });
+console.log('trace-tail: ok');

web/package.json

@@ -13,6 +13,7 @@
     "dev": "vite",
     "build": "tsc --noEmit && vite build",
     "typecheck": "tsc --noEmit",
+    "test": "node test/exchanges.test.mjs",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -38,8 +39,8 @@
     "@codemirror/view": "^6.43.7",
     "@lezer/highlight": "^1.2.3",
     "@xterm/addon-clipboard": "^0.1.0",
-    "@xterm/addon-web-links": "^0.12.0",
     "@xterm/addon-fit": "^0.10.0",
+    "@xterm/addon-web-links": "^0.12.0",
     "@xterm/xterm": "^5.5.0",
     "codemirror": "^6.0.2",
     "dompurify": "^3.4.11",
@@ -53,6 +54,7 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
+    "playwright": "^1.62.1",
     "typescript": "^5.5.3",
     "vite": "^5.4.0"
   }

web/src/App.tsx

@@ -15,6 +15,7 @@ import BackupBanner from './components/BackupBanner';
 import Welcome from './components/Welcome';
 import * as api from './api';
 import type { Cli, GridSpec, MoveTarget, OverviewFilter, Session, Tree } from './types';
+import { onPaneMode, readPaneMode, writePaneMode } from './lib/paneMode';
 import { isPassive, isRemote } from './types';
 import { GridGlyph, ListGlyph } from './components/icons';
 
@@ -78,6 +79,11 @@ export default function App() {
   // stored — flipping the setting instantly (un)archives.
   const [showArchived, setShowArchived] = useState(false);
   const [archiveAfter, setArchiveAfter] = useState<'week' | 'month' | 'never'>('month');
+  // How every pane is read — the terminal itself, or reader mode over the same
+  // session. App-wide, like zoom, and remembered the same way.
+  const [paneMode, setPaneMode] = useState(readPaneMode);
+  useEffect(() => onPaneMode(setPaneMode), []);
+  const showPaneMode = (m: 'terminal' | 'reader') => { setPaneMode(m); writePaneMode(m); };
   const [zoom, setZoom] = useState<number>(() => {
     const z = parseInt(localStorage.getItem('am-zoom') || '100', 10);
     return Number.isFinite(z) ? z : 100;
@@ -515,7 +521,21 @@ export default function App() {
       setActiveRef(`g:${g.id}`);
     } catch (e) { showErr('Couldn’t create the group')(e); }
   };
-  const doMove = (ref: string, to: MoveTarget) => api.move(ref, to).then(refresh).catch(showErr('Couldn’t move that'));
+  // Merging two agents, or dropping one into a group, changes what the pane you
+  // are looking at IS — it is now part of a grid. Follow it there rather than
+  // leaving you on a single view of a session that has moved.
+  const doMove = (ref: string, to: MoveTarget) => api.move(ref, to)
+    .then(async () => {
+      const next = await api.getTree().catch(() => null);
+      if (!next) return refresh();
+      setTree(next);
+      const watching = activeRef?.startsWith('s:') ? activeRef.slice(2) : null;
+      if (!watching) return undefined;
+      const home = next.groups.find((g) => g.sessionIds.includes(watching));
+      if (home) setActiveRef(`g:${home.id}`);
+      return undefined;
+    })
+    .catch(showErr('Couldn’t move that'));
   const renameGroup = (id: string, name: string) => api.renameGroup(id, name).then(refresh).catch(showErr('Couldn’t rename'));
   const renameSession = (id: string, name: string) => { if (name.trim()) api.renameSession(id, name.trim()).then(refresh).catch(showErr('Couldn’t rename')); };
   const deleteGroup = (id: string) => api.deleteGroup(id).then(() => { if (activeRef === `g:${id}`) setActiveRef(null); refresh(); }).catch(showErr('Couldn’t delete the group'));
@@ -718,6 +738,7 @@ export default function App() {
                 cli={cliMap[s.cli]}
                 theme={theme}
                 zoom={zoom}
+                mode={paneMode}
                 focused={shown && sessions.length > 1 && s.id === focusedId}
                 visible={shown && deckVisible}
                 active={shown && deckVisible && s.id === focusedId}
@@ -965,6 +986,15 @@ export default function App() {
               </span>
             )}
             <span className="spacer" />
+            {/* Reader mode sits with zoom because it is the same kind of
+                setting: how you are looking at everything, not what any one
+                pane is. The content is identical either way — this is form. */}
+            <span className="seg modebar">
+              <button className={paneMode === 'terminal' ? 'on' : ''} title="The terminal itself"
+                onClick={() => showPaneMode('terminal')}>terminal</button>
+              <button className={paneMode === 'reader' ? 'on' : ''} title="Reader mode — the same session, laid out"
+                onClick={() => showPaneMode('reader')}>reader</button>
+            </span>
             <button className="zbtn" title="Zoom out" onClick={() => setZoom((z) => Math.max(50, z - 10))}>−</button>
             <button className="zlvl" title="Reset to 100%" onClick={() => setZoom(100)}>{zoom}%</button>
             <button className="zbtn" title="Zoom in" onClick={() => setZoom((z) => Math.min(200, z + 10))}>+</button>

web/src/components/Overview.tsx

@@ -1,11 +1,15 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import type { CSSProperties, ReactNode } from 'react';
 import * as api from '../api';
-import type { MetaSession } from '../api';
+import type { MetaSession, TraceTurn } from '../api';
 import type { Cli, OverviewFilter, Session, SessionState, Tree } from '../types';
 import { isPassive } from '../types';
 import { renderMarkdown } from '../lib/markdown';
 import Logo from './Logo';
+import { SendGlyph } from './icons';
+import ExchangeView from './conversation/Exchange';
+import { writePaneMode } from '../lib/paneMode';
+import { splitExchanges } from './conversation/exchanges';
 
 const fmtAgo = (ts: number) => {
   if (!ts) return '';
@@ -22,11 +26,71 @@ const eligible = (s: Session) => s.cli !== 'shell' && !isPassive(s.cli);
 const bucket = (state: SessionState): OverviewFilter =>
   state === 'working' ? 'working' : state === 'waiting' ? 'waiting' : 'quiet';
 
+/** How much of the conversation the card reads. Cheap: one page, from the end. */
+const CARD_TAIL = 120;
+const CARD_TURNS = 5;   // past this the card is the wrong tool, and says so
+const POLL_MS = 3_000;
+const MISSING_MS = 30_000;  // a session with no trace: check back, but rarely
+
+/**
+ * The tail of a session's conversation (docs/conversation-view.md §5).
+ *
+ * The digest cannot answer "what happened in the middle": `turnsLog` holds only
+ * assistant TEXT from the current request — no tool calls, no thinking, nothing
+ * before the last prompt. So the card reads the trace itself, and falls back to
+ * the digest when there is no transcript yet (a session that never started, an
+ * unsupported harness).
+ *
+ * `on` is false for the card inline in the list: a summary does not need the
+ * middle, and one trace read per visible agent — every three seconds for the
+ * working ones — is a lot to spend on something nobody asked to see.
+ */
+function useConversationTail(id: string, on: boolean, live: boolean) {
+  const [turns, setTurns] = useState<TraceTurn[] | null>(null);
+  // No transcript for this session: back off hard rather than 404 on a loop.
+  const [missing, setMissing] = useState(false);
+  const load = useCallback(async () => {
+    try {
+      const page = await api.getTracePage(id, -CARD_TAIL, CARD_TAIL);
+      setTurns(page.turns);
+      setMissing(false);
+    } catch {
+      setMissing(true);
+    }
+  }, [id]);
+  useEffect(() => {
+    setTurns(null);
+    setMissing(false);
+    if (on) load();
+  }, [load, on]);
+  // While the agent works the transcript is still being written.
+  useEffect(() => {
+    if (!on || !live) return undefined;
+    const h = window.setInterval(load, missing ? MISSING_MS : POLL_MS);
+    return () => window.clearInterval(h);
+  }, [on, live, missing, load]);
+  return { turns, missing };
+}
+
+/** Opening this session's pane in reader mode rather than on the TTY. */
+const openRendered = (id: string, onOpen: (sid: string) => void) => {
+  writePaneMode('reader');   // app-wide, and it reaches open panes too
+  onOpen(id);
+};
+
 const Caret = () => (
   <svg className="ov-caret" viewBox="0 0 10 10" aria-hidden="true"><path d="M1.8 3.2h6.4L5 7.4z" fill="currentColor" /></svg>
 );
 
-function Card({ s, color, pending, isMobile, onOpen, onClose }: {
+/**
+ * One exchange plus a reply box (docs/conversation-view.md §3.2).
+ *
+ * Collapsed it reads as it always did — your prompt, the answer, the reply line.
+ * What is new is the middle: `▸ 14 steps · 9 tools` unfolds the work between the
+ * two, and history grows one turn at a time instead of a stepper that replaced
+ * the answer with an older one.
+ */
+export function Card({ s, color, pending, isMobile, onOpen, onClose }: {
   s: MetaSession;
   color?: string;
   pending?: boolean; // digest still loading — show a shimmer instead of "no prompt yet"
@@ -42,8 +106,15 @@ function Card({ s, color, pending, isMobile, onOpen, onClose }: {
   // send succeeds — the digest round-trip (CLI writes transcript → rebuild →
   // poll) can take seconds, and a frozen card reads as "did that get lost?".
   const [sent, setSent] = useState<{ text: string; at: number } | null>(null);
-  const [histIdx, setHistIdx] = useState(0); // 0 = live view, n = n-th exchange back
+  const [histIdx, setHistIdx] = useState(0); // digest fallback only: n-th answer back
+  const [back, setBack] = useState(0);       // how many earlier turns are shown
+  const [openWork, setOpenWork] = useState(false);
   const inputRef = useRef<HTMLTextAreaElement>(null);
+  const bodyRef = useRef<HTMLDivElement>(null);
+  const latestRef = useRef<HTMLDivElement>(null);
+  // The window is the only place the card can grow; inline in the list it stays
+  // a summary, so the answer is clamped and history stays behind the pane.
+  const windowed = !!onClose;
 
   // After you send (or when the transcript shows a prompt newer than the last
   // answer), the old answer is stale — a spinner takes its place.
@@ -58,6 +129,15 @@ function Card({ s, color, pending, isMobile, onOpen, onClose }: {
   const idx = Math.min(histIdx, hist.length);
   const entry = idx > 0 ? hist[idx - 1] : null;
 
+  const { turns } = useConversationTail(s.id, windowed, running || awaiting);
+  const exchanges = useMemo(() => (turns ? splitExchanges(turns) : []), [turns]);
+  const cap = windowed ? CARD_TURNS : 1;
+  const shownX = exchanges.slice(Math.max(0, exchanges.length - 1 - back));
+  const latestX = shownX[shownX.length - 1];
+  const earlierX = shownX.slice(0, -1);
+  const remainingX = exchanges.length - shownX.length;
+  const atCap = back + 1 >= cap;
+
   const send = async () => {
     const text = draft.trim();
     if (!text || sending) return;
@@ -76,6 +156,22 @@ function Card({ s, color, pending, isMobile, onOpen, onClose }: {
     setSending(false);
   };
 
+  // Where the body sits after a change:
+  //  · asked for the previous turn → the top, at the turn you asked for
+  //  · working → the tail, where the newest line is
+  //  · otherwise → the latest turn's prompt, reading downward from there
+  const wasBack = useRef(back);
+  useLayoutEffect(() => {
+    const el = bodyRef.current;
+    if (!el || !latestX) return;
+    const prepended = back > wasBack.current;
+    wasBack.current = back;
+    if (prepended) { el.scrollTop = 0; return; }
+    if (running) { el.scrollTop = el.scrollHeight; return; }
+    const tgt = latestRef.current;
+    if (tgt) el.scrollTop += tgt.getBoundingClientRect().top - el.getBoundingClientRect().top;
+  }, [back, sent, running, latestX]);
+
   const ago = fmtAgo(Math.max(d?.lastAssistantTs || 0, d?.lastPromptTs || 0) || Date.parse(s.createdAt) || 0);
   const promptText = sent ? sent.text : d?.lastPromptText || '';
   const answerText = entry ? entry.answer : d?.lastAssistantText || '';
@@ -99,7 +195,7 @@ function Card({ s, color, pending, isMobile, onOpen, onClose }: {
   const answerHtml = showAnswer ? renderMarkdown(answerMd || answerText) : '';
 
   return (
-    <div className="ov-card">
+    <div className={`ov-card${windowed ? '' : ' ov-compact'}`}>
       <div className="ov-id" onClick={() => onOpen(s.id)} title="Open pane">
         <span className={`status ${s.state}`} />
         <Logo cli={s.cli} size={12} tint={color} />
@@ -111,40 +207,81 @@ function Card({ s, color, pending, isMobile, onOpen, onClose }: {
       </div>
 
       {/* the card body is the ONLY scroll region (window mode); input stays put */}
-      <div className="ov-body">
-        {promptText ? (
-          <div className="ov-prompt">{sent ? sent.text : (d?.lastPromptRaw || promptText)}</div>
-        ) : pending ? (
-          <div className="ov-prompt-skel"><span className="skel" style={{ width: '70%' }} /></div>
+      <div className="ov-body" ref={bodyRef}>
+        {latestX ? (
+          <>
+            {/* History grows upward, one turn per click — never a transcript dump. */}
+            {windowed && (remainingX > 0 || back > 0) && (
+              <div className="cx-earlier mono">
+                {remainingX > 0 && !atCap && (
+                  <button className="cx-earlier-btn" onClick={() => setBack((b) => b + 1)}>
+                    ↑ show previous turn
+                  </button>
+                )}
+                {(atCap || back > 0) && (
+                  <button className="cx-earlier-btn" onClick={() => openRendered(s.id, onOpen)}>
+                    full history ↗
+                  </button>
+                )}
+                {atCap && <span className="cx-earlier-note">card holds {cap} turns</span>}
+              </div>
+            )}
+            {earlierX.map((x) => <ExchangeView key={x.key} x={x} dim />)}
+            <div ref={latestRef}>
+              <ExchangeView
+                x={latestX}
+                open={openWork}
+                onToggle={() => setOpenWork((o) => !o)}
+                running={running && !justSent}
+              />
+            </div>
+            {/* Optimistic echo: the digest round-trip can take seconds, and a
+                frozen card reads as "did that get lost?". */}
+            {justSent && sent && (
+              <>
+                <div className="cx-prompt">{sent.text}</div>
+                <div className="cx-running mono">working</div>
+              </>
+            )}
+          </>
         ) : (
-          <div className="ov-prompt ov-prompt-none">no prompt yet</div>
-        )}
-        {(metaBits.length > 0 || hist.length > 0) && (
-          <div className="ov-meta mono">
-            <span className="ov-meta-bits">{metaBits.join(' · ')}</span>
-            <span className="spacer" />
-            {hist.length > 0 && (
-              <span className="ov-nav">
-                {idx > 0 && <span className="ov-nav-pos">turn {totalTurns - idx}/{totalTurns}</span>}
-                <button
-                  className="ov-nav-btn" title="Earlier turn" disabled={idx >= hist.length}
-                  onClick={() => setHistIdx(Math.min(idx + 1, hist.length))}
-                >↑</button>
-                <button
-                  className="ov-nav-btn" title="Later turn" disabled={idx === 0}
-                  onClick={() => setHistIdx(Math.max(idx - 1, 0))}
-                >↓</button>
-              </span>
+          /* No transcript to read yet (never started, or a harness with no
+             trace): the digest still knows the last prompt and answer. */
+          <>
+            {promptText ? (
+              <div className="ov-prompt">{sent ? sent.text : (d?.lastPromptRaw || promptText)}</div>
+            ) : pending ? (
+              <div className="ov-prompt-skel"><span className="skel" style={{ width: '70%' }} /></div>
+            ) : (
+              <div className="ov-prompt ov-prompt-none">no prompt yet</div>
             )}
-          </div>
-        )}
-
-        {answerHtml && (
-          <div className="ov-answer-wrap">
-            <div className="markdown ov-md" dangerouslySetInnerHTML={{ __html: answerHtml }} />
-          </div>
+            {(metaBits.length > 0 || hist.length > 0) && (
+              <div className="ov-meta mono">
+                <span className="ov-meta-bits">{metaBits.join(' · ')}</span>
+                <span className="spacer" />
+                {hist.length > 0 && (
+                  <span className="ov-nav">
+                    {idx > 0 && <span className="ov-nav-pos">turn {totalTurns - idx}/{totalTurns}</span>}
+                    <button
+                      className="ov-nav-btn" title="Earlier turn" disabled={idx >= hist.length}
+                      onClick={() => setHistIdx(Math.min(idx + 1, hist.length))}
+                    >↑</button>
+                    <button
+                      className="ov-nav-btn" title="Later turn" disabled={idx === 0}
+                      onClick={() => setHistIdx(Math.max(idx - 1, 0))}
+                    >↓</button>
+                  </span>
+                )}
+              </div>
+            )}
+            {answerHtml && (
+              <div className="ov-answer-wrap">
+                <div className="markdown ov-md" dangerouslySetInnerHTML={{ __html: answerHtml }} />
+              </div>
+            )}
+            {showLiveProgress && <div className="ov-busy mono">running</div>}
+          </>
         )}
-        {showLiveProgress && <div className="ov-busy mono">running</div>}
       </div>
 
       <div className="ov-live">
@@ -170,8 +307,7 @@ function Card({ s, color, pending, isMobile, onOpen, onClose }: {
             if (e.key === 'Escape') { setDraft(''); inputRef.current?.blur(); }
           }}
         />
-        {draft.trim() && <button className="ov-send" title="Send" onClick={send} disabled={sending}>↑</button>}
-        {draft.trim() && !isMobile && <span className="ov-hint">↵ send · ⇧↵ newline</span>}
+        {draft.trim() && <button className="ov-send" title="Send" onClick={send} disabled={sending}><SendGlyph /></button>}
       </div>
       {failed && <div className="ov-note">failed to reach the agent</div>}
     </div>

web/src/components/TerminalPane.tsx

@@ -7,6 +7,9 @@ import '@xterm/xterm/css/xterm.css';
 import type { Cli, Session } from '../types';
 import { STATE_LABEL } from '../types';
 import Logo from './Logo';
+import ConversationView from './conversation/ConversationView';
+import { isPassive } from '../types';
+import type { PaneMode } from '../lib/paneMode';
 import { CloseGlyph, RefreshGlyph } from './icons';
 
 const THEMES: Record<'light' | 'dark', ITheme> = {
@@ -177,7 +180,7 @@ if (typeof window !== 'undefined') {
 }
 
 export default function TerminalPane({
-  session, cli, theme, focused, visible, active, zoom = 100, dragId, isMobile, onDragActive, onFocus, onRename, onClose,
+  session, cli, theme, focused, visible, active, zoom = 100, mode = 'terminal', dragId, isMobile, onDragActive, onFocus, onRename, onClose,
 }: {
   session: Session;
   cli?: Cli;
@@ -186,6 +189,7 @@ export default function TerminalPane({
   visible?: boolean;
   active?: boolean;
   zoom?: number;
+  mode?: PaneMode;          // app-wide reading mode, from the bottom bar
   dragId?: string;          // set when the pane can be rearranged (group view)
   isMobile?: boolean;       // show the on-screen control-key bar
   onDragActive?: (dragging: boolean) => void;
@@ -194,6 +198,11 @@ export default function TerminalPane({
   onClose: () => void;
 }) {
   const hostRef = useRef<HTMLDivElement>(null);
+  // Focus, unless the conversation is covering the terminal. Several paths grab
+  // it — becoming active, the header, the key bar — and some fire after the mode
+  // changes, so the guard lives with the call rather than with the switch.
+  const modeRef = useRef<PaneMode>('terminal');
+  const focusTerm = () => { if (modeRef.current !== 'reader') termRef.current?.focus(); };
   const frameRef = useRef<HTMLDivElement>(null);
   const termRef = useRef<Terminal | null>(null);
   const resyncRef = useRef<() => void>(() => {});
@@ -203,6 +212,12 @@ export default function TerminalPane({
   const controllerRef = useRef(false);
   const previousZoomRef = useRef(zoom);
   const [preview] = useState<TerminalPreview | null>(() => loadTerminalPreview(session.id));
+  // The mode is app-wide (the bottom bar owns it, like zoom), but only an agent
+  // has a conversation to read: a shell is a shell, and files/trace panels are
+  // not this component's business at all.
+  const canRender = session.cli !== 'shell' && !isPassive(session.cli);
+  const reading = mode === 'reader' && canRender;
+  modeRef.current = reading ? 'reader' : 'terminal';
   // Send a raw byte string to the PTY (for the mobile key-bar: arrows, Esc…).
   const sendKeyRef = useRef<(d: string) => void>(() => {});
   const [conn, setConn] = useState<ConnState>('connecting');
@@ -228,7 +243,7 @@ export default function TerminalPane({
     if (!text) return;
     setPasteOpen(false);
     termRef.current?.paste(text);
-    termRef.current?.focus();
+    focusTerm();
   };
 
   // Phones have no Ctrl+V, so the key-bar needs an explicit paste. Two paths,
@@ -779,11 +794,19 @@ export default function TerminalPane({
     const t = setTimeout(() => {
       claimRef.current();
       resyncRef.current();
-      termRef.current?.focus();
+      focusTerm();
     }, 0);
     return () => clearTimeout(t);
   }, [active]);
 
+  // In reader mode the terminal is covered but still mounted — and a mounted xterm
+  // with focus swallows every keystroke into the agent's TTY, invisibly. Hand
+  // focus back when the terminal is on top again.
+  useEffect(() => {
+    if (reading) termRef.current?.blur();
+    else if (focused) termRef.current?.focus();
+  }, [reading, focused]);
+
   // Focused panes tint toward THEIR agent's brand color, not the app accent.
   const tint = cli?.color;
   const pathLabel = workspaceLabel(session.path);
@@ -802,7 +825,7 @@ export default function TerminalPane({
         draggable={!!dragId}
         onDragStart={dragId ? (e) => { e.dataTransfer.setData('text/plain', dragId); e.dataTransfer.effectAllowed = 'move'; onDragActive?.(true); } : undefined}
         onDragEnd={dragId ? () => onDragActive?.(false) : undefined}
-        onMouseDown={(e) => { if (!dragId) e.preventDefault(); onFocus?.(); termRef.current?.focus(); }}
+        onMouseDown={(e) => { if (!dragId) e.preventDefault(); onFocus?.(); focusTerm(); }}
       >
         <div className="ph-left">
           <Logo cli={session.cli} size={16} tint={tint} />
@@ -821,11 +844,21 @@ export default function TerminalPane({
         )}
         <div className="ph-right">
           <span className="ph-path" title={pathLabel}>{pathLabel}</span>
+          {/* The trace stops being a separate thing you open: it is this
+              session, read instead of watched. */}
           <button className="mini-btn ph-close" title="Close" onClick={(e) => { e.stopPropagation(); onClose(); }}><CloseGlyph /></button>
         </div>
       </div>
       <div className="term-host" ref={frameRef}>
         <div className="term-fill" ref={hostRef} />
+        {/* Reader mode draws OVER the terminal rather than replacing it: xterm needs
+            layout to fit, and detaching tmux costs a repaint and can trip the
+            handoff path. The terminal stays mounted and connected underneath. */}
+        {reading && (
+          <div className="pane-reader" onMouseDown={(e) => e.stopPropagation()}>
+            <ConversationView session={session} paused={visible === false} isMobile={isMobile} />
+          </div>
+        )}
       </div>
       {isMobile && conn === 'connected' && (
         // Control keys the phone keyboard lacks — needed for TUI menus (model
@@ -840,7 +873,7 @@ export default function TerminalPane({
             <button
               key={label}
               className="tk-btn"
-              onPointerDown={(e) => { e.preventDefault(); e.stopPropagation(); sendKeyRef.current(seq); termRef.current?.focus(); }}
+              onPointerDown={(e) => { e.preventDefault(); e.stopPropagation(); sendKeyRef.current(seq); focusTerm(); }}
             >{label}</button>
           ))}
           {/* Unlike the key buttons this must NOT preventDefault: the clipboard
@@ -875,14 +908,14 @@ export default function TerminalPane({
             // Typed text (or a paste some browsers deliver as plain input) still
             // needs a way out; Enter sends, Shift+Enter keeps the newline.
             onKeyDown={(e) => {
-              if (e.key === 'Escape') { setPasteOpen(false); termRef.current?.focus(); }
+              if (e.key === 'Escape') { setPasteOpen(false); focusTerm(); }
               if (e.key === 'Enter' && !e.shiftKey) {
                 e.preventDefault();
                 commitPaste((e.target as HTMLTextAreaElement).value);
               }
             }}
           />
-          <button className="tp-x" onClick={() => { setPasteOpen(false); termRef.current?.focus(); }}>cancel</button>
+          <button className="tp-x" onClick={() => { setPasteOpen(false); focusTerm(); }}>cancel</button>
         </div>
       )}
       {booting && preview && conn !== 'exited' && (

web/src/components/conversation/ConversationView.tsx

@@ -0,0 +1,278 @@
+// Conversation mode: a session's trace, as a stack of exchanges.
+// (docs/conversation-view.md §3.3)
+//
+// The pane header above this belongs to the session; everything here is the
+// reader's own: a line of session facts, search, turn navigation, and the same
+// ExchangeView the Overview card shows one of.
+//
+// Draft scope: this reads the tail of the trace in one request and renders every
+// turn in it. Windowing by exchange (§10.7) is the next step — a collapsed turn
+// is 2–3 rows, so the DOM stays small, but the measured-height machinery in
+// TraceView is what makes it survive a 5,000-turn session.
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import * as api from '../../api';
+import type { TracePage, TraceTurn } from '../../api';
+import type { Session } from '../../types';
+import { fmtTok, splitExchanges } from './exchanges';
+import ExchangeView from './Exchange';
+import { SendGlyph } from '../icons';
+
+/** How much of the tail RENDER mode reads. The server caps a page at 500. */
+export const RENDER_TAIL = 400;
+const POLL_MS = 3_000;
+
+const fmtNum = (n: number) => n.toLocaleString();
+const fmtUsage = (u?: { in: number; out: number } | null) =>
+  (u ? `${fmtTok(u.in)}↓ ${fmtTok(u.out)}↑` : '');
+
+export default function ConversationView({ session, paused, isMobile, readOnly, onHandover }: {
+  session: Session;
+  /** The pane is off-screen: stop asking the server for a trace nobody sees. */
+  paused?: boolean;
+  isMobile?: boolean;
+  /** A trace with no agent behind it — a shared file, an import. Read-only. */
+  readOnly?: boolean;
+  onHandover?: () => void;
+}) {
+  const [page, setPage] = useState<TracePage | null>(null);
+  const [error, setError] = useState<string>('');
+  const [query, setQuery] = useState('');
+  const [hits, setHits] = useState(0);
+  const [hit, setHit] = useState(0);
+  const scroller = useRef<HTMLDivElement | null>(null);
+  const rows = useRef(new Map<number, HTMLElement>());
+  // Follow the work while it arrives — but only while the reader is already at
+  // the bottom. Scrolling up to read something is a decision, and yanking the
+  // view back down on the next tool call would undo it.
+  const stick = useRef(true);
+  // Reading a conversation and answering it are the same act — the card has
+  // always known that. Only a trace with no agent behind it is read-only.
+  const [draft, setDraft] = useState('');
+  const [sending, setSending] = useState(false);
+  const [failed, setFailed] = useState(false);
+  const [sent, setSent] = useState<{ text: string; at: number } | null>(null);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+
+  const live = session.state === 'working' && !paused;
+
+  const load = useCallback(async () => {
+    try {
+      // A negative offset reads from the end (server/src/traces.js pageOf).
+      const p = await api.getTracePage(session.id, -RENDER_TAIL, RENDER_TAIL);
+      setPage(p);
+      setError('');
+    } catch (e) {
+      // A failed REFRESH must not throw away the conversation on screen: this
+      // mount answers EIO now and then, and blanking mid-read is worse than
+      // going stale for three seconds.
+      setError(e instanceof Error ? e.message : 'could not read this trace');
+    }
+  }, [session.id]);
+
+  useEffect(() => { setPage(null); setError(''); load(); }, [load]);
+  // While the agent works, the trace is still being written.
+  useEffect(() => {
+    if (!live) return undefined;
+    const h = window.setInterval(load, POLL_MS);
+    return () => window.clearInterval(h);
+  }, [live, load]);
+  // Coming back into view, catch up at once rather than waiting for a tick.
+  useEffect(() => { if (!paused && page) load(); }, [paused]);  // eslint-disable-line react-hooks/exhaustive-deps
+
+  const turns: TraceTurn[] = useMemo(() => page?.turns || [], [page]);
+  const exchanges = useMemo(() => splitExchanges(turns), [turns]);
+  const last = exchanges[exchanges.length - 1];
+
+  // The optimistic echo stands until the transcript catches up: a CLI writes it,
+  // the reader picks it up, the poll lands — seconds, during which a card that
+  // showed nothing would read as "did that get lost?".
+  const promptOf = (x?: typeof last) =>
+    (x?.prompt?.blocks || []).filter((b) => b.type === 'text').map((b) => ('text' in b ? b.text : '')).join('').trim();
+  if (sent && promptOf(last) === sent.text) setSent(null);
+
+  const send = async () => {
+    const text = draft.trim();
+    if (!text || sending) return;
+    setSending(true); setFailed(false);
+    try {
+      await api.sendInput(session.id, text);
+      setDraft(''); setSent({ text, at: Date.now() });
+      if (inputRef.current) { inputRef.current.style.height = 'auto'; inputRef.current.blur(); }
+      stick.current = true;
+      load();
+    } catch { setFailed(true); window.setTimeout(() => setFailed(false), 4000); }
+    setSending(false);
+  };
+  const q = query.trim().toLowerCase();
+  const shown = useMemo(() => {
+    if (!q) return exchanges;
+    return exchanges.filter((x) =>
+      [x.prompt, ...x.answer, ...x.steps].some((t) =>
+        t && t.blocks.some((b) => JSON.stringify(b).toLowerCase().includes(q))));
+  }, [exchanges, q]);
+
+  // Highlighting happens inside ExchangeView; finding the marks is this
+  // component's job, so it counts them and walks them in document order.
+  const marks = () => [...(scroller.current?.querySelectorAll('mark.cx-hit') || [])] as HTMLElement[];
+  const goMark = (found: HTMLElement[], i: number) => {
+    found.forEach((m) => m.classList.remove('on'));
+    const el = found[i];
+    if (!el) return;
+    el.classList.add('on');
+    el.scrollIntoView({ block: 'center', behavior: 'smooth' });
+  };
+  // Recount after every render that can change the marks — but a poll landing
+  // must not throw you back to the first hit while you are walking them, so only
+  // a NEW query jumps.
+  const lastQuery = useRef(q);
+  useEffect(() => {
+    const found = marks();
+    const fresh = lastQuery.current !== q;
+    lastQuery.current = q;
+    setHits(found.length);
+    if (!found.length) { setHit(0); return; }
+    const i = fresh ? 0 : Math.min(hit, found.length - 1);
+    setHit(i);
+    if (fresh) goMark(found, i);
+    else found[i]?.classList.add('on');
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [q, shown]);
+
+  const stepHit = (dir: -1 | 1) => {
+    const found = marks();
+    if (!found.length) return;
+    const i = (hit + dir + found.length) % found.length;
+    setHit(i);
+    goMark(found, i);
+  };
+
+  /**
+   * Put the next turn's top at the top of the reading area. offsetTop is wrong
+   * here — it is measured against the nearest positioned ancestor, not the
+   * scroller — so this measures both rects and moves by the difference.
+   */
+  const goTurn = (dir: -1 | 1) => {
+    const el = scroller.current;
+    if (!el) return;
+    const base = el.getBoundingClientRect().top - el.scrollTop;
+    const tops = [...rows.current.entries()]
+      .sort((a, b) => a[0] - b[0])
+      .map(([, node]) => node.getBoundingClientRect().top - base);
+    const cur = el.scrollTop;
+    const next = dir < 0
+      ? tops.filter((t) => t < cur - 8).pop()
+      : tops.find((t) => t > cur + 8);
+    if (next != null) el.scrollTo({ top: Math.max(0, next - 4), behavior: 'smooth' });
+  };
+  const nav = (dir: -1 | 1) => (q && hits ? stepHit(dir) : goTurn(dir));
+
+  useLayoutEffect(() => {
+    const el = scroller.current;
+    if (el && live && stick.current) el.scrollTop = el.scrollHeight;
+  }, [turns, live]);
+
+  if (!page) return <div className="cxv-empty mono">{error || 'reading the trace…'}</div>;
+
+  return (
+    <div className="cxv">
+      {/* The reader's own controls, on their own row: on a phone the pane
+          header above has no spare width. */}
+      <div className="cxv-bar mono">
+        {page.model && <span className="cxv-chip">{page.model}</span>}
+        <span className="cxv-count" title={`${fmtNum(page.total)} messages`}>
+          {fmtNum(exchanges.length)} turn{exchanges.length === 1 ? '' : 's'}
+        </span>
+        {page.usage && (
+          <span className="cxv-tok" title={page.usage.cacheRead ? `${fmtNum(page.usage.cacheRead)} cached` : undefined}>
+            {fmtUsage(page.usage)}
+          </span>
+        )}
+        <span className="spacer" />
+        <span className="cxv-nav">
+          <button className="cxv-mini" onClick={() => nav(-1)} title={q && hits ? 'Previous match' : 'Previous turn'}>▲</button>
+          <button className="cxv-mini" onClick={() => nav(1)} title={q && hits ? 'Next match' : 'Next turn'}>▼</button>
+        </span>
+        <input className="cxv-search" placeholder="Search…" value={query}
+          onChange={(e) => setQuery(e.target.value)} />
+        {q && <span className="cxv-hits">{hits ? `${hit + 1}/${hits}` : '0'}</span>}
+      </div>
+
+      <div className="cxv-body" ref={scroller}
+        onScroll={(e) => {
+          const el = e.currentTarget;
+          stick.current = el.scrollHeight - el.scrollTop - el.clientHeight < 48;
+        }}>
+        <div className="cxv-col">
+          {error && <div className="cxv-msg bad mono">{error} · showing the last read</div>}
+          {(page.truncated || page.offset > 0) && (
+            <div className="cxv-msg mono">
+              {page.offset > 0 ? `${fmtNum(page.offset)} earlier messages are not shown` : 'earlier turns are not shown'}
+            </div>
+          )}
+          {page.note && <div className="cxv-msg mono">{page.note}</div>}
+          {q && (
+            <div className="cxv-msg mono">
+              {shown.length} of {exchanges.length} turns match “{query}”
+              {hits ? ` · ${hits} highlighted, ▲▼ walks them` : ''}
+            </div>
+          )}
+          {shown.map((x, i) => (
+            <div key={x.key} ref={(el) => { if (el) rows.current.set(i, el); else rows.current.delete(i); }}>
+              <ExchangeView
+                x={x}
+                n={exchanges.indexOf(x) + 1}
+                total={exchanges.length}
+                q={q || undefined}
+                baseModel={page.model || undefined}
+                running={live && x === exchanges[exchanges.length - 1]}
+              />
+            </div>
+          ))}
+          {sent && (
+            <>
+              <div className="cx-prompt">{sent.text}</div>
+              <div className="cx-running mono">working</div>
+            </>
+          )}
+          {!exchanges.length && !sent && <div className="cxv-msg mono">nothing in this trace yet</div>}
+        </div>
+      </div>
+
+      {!readOnly && (
+        <div className="ov-live cxv-live">
+          <span className="ov-p mono">❯</span>
+          <textarea
+            ref={inputRef}
+            rows={1}
+            value={draft}
+            disabled={sending}
+            placeholder={sending ? 'sending…' : 'reply…'}
+            autoComplete="off" autoCorrect="off" autoCapitalize="off" spellCheck={false}
+            onChange={(e) => { setDraft(e.target.value); e.currentTarget.style.height = 'auto'; e.currentTarget.style.height = `${e.currentTarget.scrollHeight}px`; }}
+            onKeyDown={(e) => {
+              // Desktop: Enter sends, Shift+Enter newlines. Mobile keyboards
+              // cannot do Shift+Enter, so there the button sends.
+              if (e.key === 'Enter' && !e.shiftKey && !isMobile) { e.preventDefault(); send(); }
+              if (e.key === 'Escape') { setDraft(''); inputRef.current?.blur(); }
+            }}
+          />
+          {draft.trim() && <button className="ov-send" title="Send" onClick={send} disabled={sending}><SendGlyph /></button>}
+        </div>
+      )}
+      {failed && <div className="ov-note cxv-note">failed to reach the agent</div>}
+
+      <div className="cxv-foot mono">
+        <span className="cxv-path" title={page.cwd || undefined}>
+          {page.cwd}
+          {page.firstTs ? ` · ${new Date(page.firstTs).toLocaleDateString()}` : ''}
+        </span>
+        <span className="spacer" />
+        {onHandover && (
+          <button className="cxv-mini" onClick={onHandover} title="Start a new agent from this conversation">
+            continue in a new agent ↗
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

web/src/components/conversation/Exchange.tsx

@@ -0,0 +1,236 @@
+// One exchange, at whatever depth the surface needs. (docs/conversation-view.md §2)
+//
+// The Overview card is one of these plus a reply box; RENDER mode is a stack of
+// them. Nothing here knows which — that is the point, and it is why the two
+// surfaces cannot drift apart again.
+//
+// Left edge: the prompt's ❯ is the ONLY thing outside the text column. No rail
+// on the answer, no rail on the work — scrolling, you find turns by that arrow
+// and the tinted prompt bar, and everything else lines up in one column.
+import { useMemo, useState } from 'react';
+import type { ReactNode } from 'react';
+import type { TraceTurn } from '../../api';
+import { renderMarkdown } from '../../lib/markdown';
+import type { Exchange, Step } from './exchanges';
+import { fmtClock, fmtDur, fmtTok, oneLine, stepSummary, stepText, stepsOf } from './exchanges';
+import ToolCall from './ToolCall';
+
+const blocksOf = (t: TraceTurn | TraceTurn[] | null) =>
+  (Array.isArray(t) ? t : [t]).flatMap((x) => x?.blocks || []);
+const textOf = (t: TraceTurn | TraceTurn[] | null) =>
+  blocksOf(t).filter((b) => b.type === 'text').map((b) => ('text' in b ? b.text : '')).join('\n\n').trim();
+const moreOf = (t: TraceTurn | TraceTurn[] | null) =>
+  blocksOf(t).reduce((n, b) => n + (('more' in b && b.more) || 0), 0);
+
+const moreLabel = (more?: number) =>
+  (more ? `+${more > 1024 ? `${Math.round(more / 1024)} KB` : `${more} chars`} not retained` : '');
+
+/** Search hits in plain text. The answer's HTML gets the same treatment below. */
+function Hi({ text, q }: { text: string; q?: string }) {
+  if (!q) return <>{text}</>;
+  const out: ReactNode[] = [];
+  const hay = text.toLowerCase();
+  let i = 0;
+  for (let j = hay.indexOf(q); j >= 0; j = hay.indexOf(q, i)) {
+    if (j > i) out.push(text.slice(i, j));
+    out.push(<mark className="cx-hit" key={j}>{text.slice(j, j + q.length)}</mark>);
+    i = j + q.length;
+  }
+  if (!out.length) return <>{text}</>;
+  out.push(text.slice(i));
+  return <>{out}</>;
+}
+
+/** Same, inside rendered markdown: text nodes only, so the tags survive untouched. */
+function highlightHtml(html: string, q?: string): string {
+  if (!q) return html;
+  const doc = new DOMParser().parseFromString(html, 'text/html');
+  const walk = doc.createTreeWalker(doc.body, NodeFilter.SHOW_TEXT);
+  const nodes: Text[] = [];
+  while (walk.nextNode()) nodes.push(walk.currentNode as Text);
+  for (const n of nodes) {
+    if (!n.data.toLowerCase().includes(q)) continue;
+    const frag = doc.createDocumentFragment();
+    let rest = n.data;
+    for (let j = rest.toLowerCase().indexOf(q); j >= 0; j = rest.toLowerCase().indexOf(q)) {
+      if (j) frag.appendChild(doc.createTextNode(rest.slice(0, j)));
+      const m = doc.createElement('mark');
+      m.className = 'cx-hit';
+      m.textContent = rest.slice(j, j + q.length);
+      frag.appendChild(m);
+      rest = rest.slice(j + q.length);
+    }
+    if (rest) frag.appendChild(doc.createTextNode(rest));
+    n.parentNode?.replaceChild(frag, n);
+  }
+  return doc.body.innerHTML;
+}
+
+/**
+ * One line of work. The left column carries the row's status and nothing else:
+ * a tool's ✓/✗, or a disclosure triangle — greyed when there is nothing more.
+ *
+ * Text steps (thinking, an aside, a compaction) expand *in place*: the preview
+ * keeps its font and simply stops being truncated, so nothing is said twice.
+ * Only a tool has something genuinely different below — its input and result.
+ */
+function StepRow({ s, q }: { s: Step; q?: string }) {
+  const [selfOpen, setSelfOpen] = useState(false);
+  // A search you cannot follow is a tease: a step holding the term opens itself,
+  // body and all, so the hit is on screen and the ▲▼ nav can reach it.
+  const hit = !!q && stepText(s).toLowerCase().includes(q);
+  const open = selfOpen || hit;
+  let label = '';
+  let preview = '';
+  let full = '';        // set for the kinds that expand in place
+  if (s.kind === 'tools') {
+    label = s.count > 1 ? `${s.name} ×${s.count}` : s.name;
+    preview = s.details.join(', ');
+  } else if (s.kind === 'think') {
+    label = 'thinking';
+    preview = oneLine(s.text, 120);
+    full = s.text;
+  } else if (s.kind === 'note') {
+    preview = oneLine(s.text, 140);
+    full = s.text;
+  } else if (s.kind === 'shell') {
+    label = 'shell';
+    preview = oneLine(s.command, 100);
+  } else if (s.kind === 'compact') {
+    label = 'context compacted';
+    preview = oneLine(s.text, 120);
+    full = s.text;
+  } else {
+    label = 'image';
+  }
+
+  const more = 'more' in s ? s.more || 0 : 0;
+  const can = s.kind === 'tools' ? s.blocks.length > 0
+    : s.kind === 'shell' ? !!s.out.trim()
+      : s.kind === 'image' ? true
+        : full.trim().length > preview.length || more > 0;
+  const shown = open && full ? full : preview;
+
+  return (
+    <div className={`cs${open ? ' open' : ''} ${s.kind}`}>
+      <button className="cs-head" disabled={!can} onClick={() => setSelfOpen((o) => !o)}>
+        {s.kind === 'tools'
+          ? <span className={`cs-mark ${s.failed ? 'bad' : 'ok'}`}>{s.failed ? '✗' : '✓'}</span>
+          : <span className={`cs-tri${can ? '' : ' off'}`}>{open ? '▾' : '▸'}</span>}
+        {label && <span className="cs-label mono">{label}</span>}
+        <span className={`cs-detail${open && full ? ' full' : ''}`}><Hi text={shown} q={q} /></span>
+      </button>
+      {open && (
+        <div className="cs-body">
+          {/* the text already expanded above; only its cut tail is left to say */}
+          {!!full && !!more && <div className="cs-more mono">…{moreLabel(more)}</div>}
+          {s.kind === 'tools' && s.blocks.map((b, i) => (
+            b.type === 'tool_use' ? (
+              <div key={i} className="cs-call">
+                <ToolCall name={b.name} text={b.text} />
+                {!!b.more && <div className="cs-more mono">…{moreLabel(b.more)}</div>}
+              </div>
+            ) : b.type === 'tool_result' ? (
+              <pre key={i} className={`cs-pre out${b.failed ? ' bad' : ''}`}><Hi text={b.text.trim()} q={q} />{b.more ? `\n…${moreLabel(b.more)}` : ''}</pre>
+            ) : null
+          ))}
+          {s.kind === 'shell' && <pre className="cs-pre out"><Hi text={s.out} q={q} /></pre>}
+          {s.kind === 'image' && <img className="cs-img" src={s.src} alt="" />}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** The last step, as one line of status: "Bash cd /home/…", "Now the scan itself:". */
+function nowDoing(s?: Step): string {
+  if (!s) return '';
+  if (s.kind === 'tools') return oneLine(`${s.name} ${s.details[s.details.length - 1] || ''}`, 70);
+  if (s.kind === 'shell') return oneLine(s.command, 70);
+  if (s.kind === 'image') return 'image';
+  if (s.kind === 'think') return oneLine(s.text, 70);
+  if (s.kind === 'compact') return 'context compacted';
+  return oneLine(s.text, 70);
+}
+
+export function ExchangeView({
+  x, n, total, open, onToggle, running, dim, q, baseModel,
+}: {
+  x: Exchange;
+  n?: number;            // 1-based position — the viewer numbers turns, a card does not
+  total?: number;
+  open?: boolean;        // controlled fold of the work
+  onToggle?: () => void;
+  running?: boolean;     // no answer yet, and one is coming
+  dim?: boolean;         // an earlier exchange, prepended above the current one
+  q?: string;            // lowercased search term, highlighted where it lands
+  baseModel?: string;    // the session's model; a turn only names its own if it differs
+}) {
+  const [selfOpen, setSelfOpen] = useState(false);
+  const toggle = onToggle ?? (() => setSelfOpen((o) => !o));
+
+  const steps = useMemo(() => stepsOf(x.steps), [x.steps]);
+  // A turn whose match is buried in the work unfolds it, or the search would
+  // report a hit with nothing on screen to look at.
+  const hitInWork = useMemo(
+    () => (q ? steps.some((s) => stepText(s).toLowerCase().includes(q)) : false), [steps, q]);
+  const isOpen = open ?? (selfOpen || hitInWork);
+  const prompt = textOf(x.prompt);
+  const answer = textOf(x.answer);
+  const answerHtml = useMemo(
+    () => (answer ? highlightHtml(renderMarkdown(answer), q) : ''), [answer, q]);
+  const answerMore = moreOf(x.answer);
+  const summary = stepSummary(x, steps);
+  const latest = running ? nowDoing(steps[steps.length - 1]) : '';
+  // Naming the model on every turn is noise when it never changes; when it DOES
+  // change mid-session that is worth a word, so say it only then.
+  const model = x.model && x.model !== baseModel ? x.model : '';
+
+  return (
+    <section className={`cx${dim ? ' dim' : ''}`}>
+      {prompt ? <div className="cx-prompt"><Hi text={prompt} q={q} /></div> : null}
+
+      {/* Everything about the turn on ONE line, under the prompt: what the work
+          was on the left, which turn it is on the right. Nothing above. */}
+      {(summary || n != null) && (
+      <div className="cx-meta mono">
+        {steps.length > 0 ? (
+          <button className={`cx-fold${isOpen ? ' on' : ''}`} onClick={toggle} title={isOpen ? 'Hide the work' : 'Show the work'}>
+            <span className="cs-tri">{isOpen ? '▾' : '▸'}</span>
+            {summary}
+          </button>
+        ) : <span className="cx-fold flat">{summary}</span>}
+        {/* Which turn, when, and on what — the viewer's business. A card shows one
+            turn, dated in its own header, so it says none of this. */}
+        {n != null && (
+          <>
+            <span className="spacer" />
+            {model && <span className="cx-model">{model}</span>}
+            <span className="cx-n">turn {n}{total ? `/${total}` : ''}</span>
+            {x.startTs ? <span className="cx-time">{fmtClock(x.startTs)}</span> : null}
+          </>
+        )}
+      </div>
+      )}
+      {isOpen && steps.length > 0 && (
+        <div className="cx-steps">{steps.map((s, i) => <StepRow key={i} s={s} q={q} />)}</div>
+      )}
+
+      {answerHtml ? (
+        <div className="cx-answer">
+          <div className="markdown cx-md" dangerouslySetInnerHTML={{ __html: answerHtml }} />
+          {!!answerMore && <div className="cx-note mono">…{moreLabel(answerMore)}</div>}
+        </div>
+      ) : null}
+      {/* Mid-task there is no answer — an agent's aside is not a reply — so the
+          running line carries the latest thing that happened instead. */}
+      {running && (
+        <div className="cx-running mono">
+          working{latest && <span className="cx-running-at">· {latest}</span>}
+        </div>
+      )}
+    </section>
+  );
+}
+
+export default ExchangeView;

web/src/components/conversation/ToolCall.tsx

@@ -0,0 +1,120 @@
+// An expanded tool call, rendered as what it is rather than as its wire format.
+// (docs/conversation-view.md §4.3)
+//
+// The JSON a harness sends is an argument object, not a thing to read: a Bash
+// call is a command, an Edit is a before and an after, a Read is a file and a
+// range. Anything unrecognised still renders — as fields, and as JSON only where
+// the value really is structured.
+import type { ReactNode } from 'react';
+
+const isScalar = (v: unknown) =>
+  v === null || typeof v === 'string' || typeof v === 'number' || typeof v === 'boolean';
+
+const Block = ({ kind, children }: { kind?: string; children: ReactNode }) => (
+  <pre className={`cs-pre${kind ? ` ${kind}` : ''}`}>{children}</pre>
+);
+
+const Caption = ({ children }: { children: ReactNode }) => (
+  <div className="ct-cap mono">{children}</div>
+);
+
+/** "lines 170–210" reads; `{offset: 170, limit: 40}` does not. */
+function range(o: Record<string, unknown>): string {
+  const off = typeof o.offset === 'number' ? o.offset : null;
+  const lim = typeof o.limit === 'number' ? o.limit : null;
+  if (off == null && lim == null) return '';
+  if (off != null && lim != null) return `lines ${off}–${off + lim}`;
+  return off != null ? `from line ${off}` : `first ${lim} lines`;
+}
+
+const SHOWN_ELSEWHERE = new Set([
+  'command', 'description', 'file_path', 'path', 'notebook_path', 'content',
+  'old_string', 'new_string', 'offset', 'limit', 'replace_all',
+]);
+
+/** Whatever is left, as fields — scalars inline, structure as JSON. */
+function Fields({ o, skip }: { o: Record<string, unknown>; skip?: Set<string> }) {
+  const rows = Object.entries(o).filter(([k, v]) =>
+    !(skip?.has(k)) && v !== undefined && v !== '' && !(Array.isArray(v) && !v.length));
+  if (!rows.length) return null;
+  return (
+    <dl className="ct-fields mono">
+      {rows.map(([k, v]) => (
+        <div key={k} className="ct-row">
+          <dt>{k}</dt>
+          <dd>
+            {isScalar(v)
+              ? (typeof v === 'string' && v.includes('\n')
+                ? <Block>{v}</Block>
+                : String(v))
+              : <Block>{JSON.stringify(v, null, 2)}</Block>}
+          </dd>
+        </div>
+      ))}
+    </dl>
+  );
+}
+
+export default function ToolCall({ name, text }: { name: string; text: string }) {
+  let parsed: unknown;
+  try { parsed = JSON.parse(text); } catch { return <Block>{text}</Block>; }
+  if (!parsed || typeof parsed !== 'object') return <Block>{String(parsed)}</Block>;
+  const o = parsed as Record<string, unknown>;
+
+  const file = [o.file_path, o.path, o.notebook_path].find((v) => typeof v === 'string') as string | undefined;
+  const note = typeof o.description === 'string' ? o.description : '';
+
+  // A shell call is a command.
+  if (typeof o.command === 'string') {
+    return (
+      <>
+        {note && <Caption>{note}</Caption>}
+        <Block kind="ct-cmd">{o.command}</Block>
+        <Fields o={o} skip={SHOWN_ELSEWHERE} />
+      </>
+    );
+  }
+
+  // An edit is a before and an after.
+  if (typeof o.old_string === 'string' && typeof o.new_string === 'string') {
+    return (
+      <>
+        {file && <Caption>{file}{o.replace_all ? ' · every occurrence' : ''}</Caption>}
+        <Block kind="ct-was">{o.old_string}</Block>
+        <Block kind="ct-now">{o.new_string}</Block>
+        <Fields o={o} skip={SHOWN_ELSEWHERE} />
+      </>
+    );
+  }
+
+  // A write is a file and its contents.
+  if (file && typeof o.content === 'string') {
+    return (
+      <>
+        <Caption>{file}</Caption>
+        <Block>{o.content}</Block>
+        <Fields o={o} skip={SHOWN_ELSEWHERE} />
+      </>
+    );
+  }
+
+  // A read is a file and a range.
+  if (file) {
+    const r = range(o);
+    return (
+      <>
+        <Caption>{file}{r ? ` · ${r}` : ''}</Caption>
+        {note && <div className="ct-note">{note}</div>}
+        <Fields o={o} skip={SHOWN_ELSEWHERE} />
+      </>
+    );
+  }
+
+  // Everything else — a search, a fetch, an agent — is its fields.
+  return (
+    <>
+      {note && <Caption>{note}</Caption>}
+      <Fields o={o} skip={new Set(['description'])} />
+    </>
+  );
+}

web/src/components/conversation/exchanges.ts

@@ -0,0 +1,227 @@
+// Turns → exchanges → step lines. (docs/conversation-view.md §4)
+//
+// One prompt, the work, the answer. Every surface in the app is some depth of
+// this, so the grouping lives here and not in a component.
+import type { TraceBlock, TraceTurn } from '../../api';
+
+export interface Exchange {
+  key: string;
+  /** Index into the turn array — what a "jump to this exchange" needs. */
+  at: number;
+  prompt: TraceTurn | null;
+  steps: TraceTurn[];
+  /** Everything the agent said after its last action — usually one turn. */
+  answer: TraceTurn[];
+  startTs: number;
+  endTs: number;
+  tokens: number;
+  toolCalls: number;
+  model?: string;
+}
+
+// Mirrors the digest's rule in server/src/traces.js: a "user" line that opens
+// with a tag or an interrupt marker is the harness talking, not the operator.
+export const isOperatorPrompt = (t: TraceTurn) => {
+  if (t.role !== 'user') return false;
+  const text = t.blocks.filter((b) => b.type === 'text').map((b) => ('text' in b ? b.text : '')).join('').trim();
+  if (!text) return t.blocks.some((b) => b.type === 'image');
+  return !text.startsWith('<') && !text.startsWith('[Request interrupted');
+};
+
+const usageOf = (t: TraceTurn) => (t.usage ? (t.usage.in || 0) + (t.usage.out || 0) : 0);
+
+export function splitExchanges(turns: TraceTurn[]): Exchange[] {
+  const out: Exchange[] = [];
+  let cur: Exchange | null = null;
+  const open = (at: number, prompt: TraceTurn | null) => {
+    cur = {
+      key: `x${at}`, at, prompt, steps: [], answer: [],
+      startTs: prompt?.ts || 0, endTs: prompt?.ts || 0, tokens: 0, toolCalls: 0,
+    };
+    out.push(cur);
+  };
+  // Everything lands in `steps` in the order it happened; the answer is chosen
+  // afterwards and lifted out. Promoting as we go used to reorder the middle:
+  // a superseded answer was appended wherever the NEXT one arrived, so an
+  // intermediate message jumped below the tool calls that came after it.
+  turns.forEach((t, i) => {
+    if (isOperatorPrompt(t)) { open(i, t); return; }
+    if (!cur) open(i, null);
+    const x = cur!;
+    if (t.ts) { if (!x.startTs) x.startTs = t.ts; x.endTs = Math.max(x.endTs, t.ts); }
+    x.tokens += usageOf(t);
+    x.toolCalls += t.blocks.filter((b) => b.type === 'tool_use').length;
+    if (t.model && !x.model) x.model = t.model;
+    if (t.role !== 'system') x.steps.push(t);
+  });
+
+  const saidSomething = (t: TraceTurn) =>
+    t.role === 'assistant' && t.blocks.some((b) => b.type === 'text' && b.text.trim());
+  // …and stopped there. A message followed by more tool calls is the agent
+  // thinking out loud mid-task, not its reply — which is most of what you see
+  // while one is still working.
+  const endedOnIt = (t: TraceTurn) => {
+    const said = t.blocks.filter((b) => b.type !== 'text' || b.text.trim());
+    return said.length > 0 && said[said.length - 1].type === 'text';
+  };
+  const spoke = (t: TraceTurn) => saidSomething(t) && endedOnIt(t);
+
+  for (const x of out) {
+    // The answer is the trailing RUN of messages: everything the agent said
+    // after its last action. Taking only the last one buried real answers —
+    // a harness marks the last assistant text of a request as `final`, and
+    // that is sometimes a throwaway ("No response requested.") written in
+    // reply to a notification, with the actual answer in the turn above it.
+    let from = x.steps.length;
+    while (from > 0 && spoke(x.steps[from - 1])) from--;
+    if (from < x.steps.length) {
+      x.answer = x.steps.slice(from);
+      x.steps.length = from;
+      continue;
+    }
+    // Nothing at the end: an agent that answered and then went back to work
+    // (a resumed task) still answered. Its last `final` stands, where it is.
+    for (let i = x.steps.length - 1; i >= 0; i--) {
+      if (x.steps[i].kind === 'final' && saidSomething(x.steps[i])) {
+        x.answer = [x.steps[i]];
+        x.steps.splice(i, 1);
+        break;
+      }
+    }
+  }
+  return out;
+}
+
+// ---------- step lines ----------
+
+export type Step =
+  | { kind: 'think'; text: string; more?: number }
+  | { kind: 'tools'; name: string; count: number; details: string[]; failed: boolean; blocks: TraceBlock[] }
+  | { kind: 'note'; text: string; more?: number }
+  | { kind: 'shell'; command: string; out: string; failed: boolean }
+  | { kind: 'image'; src: string }
+  | { kind: 'compact'; text: string };
+
+// The one field of a tool call worth a line: what it acted on.
+const ARG_KEYS = ['file_path', 'path', 'notebook_path', 'command', 'pattern', 'glob', 'url', 'query', 'prompt', 'description', 'subagent_type'];
+const shortPath = (p: string) => {
+  const parts = p.split('/').filter(Boolean);
+  return parts.length > 2 ? `…/${parts.slice(-2).join('/')}` : p;
+};
+
+export function argSummary(text: string): string {
+  let v: unknown = null;
+  try { v = JSON.parse(text); } catch {
+    // A block the reader had to cut mid-JSON still names what it acted on.
+    for (const k of ARG_KEYS) {
+      const m = new RegExp(`"${k}"\\s*:\\s*"((?:[^"\\\\]|\\\\.)*)`).exec(text);
+      if (m && m[1].trim()) return oneLine(m[1].replace(/\\n/g, ' ').replace(/\\"/g, '"'), 70);
+    }
+    return oneLine(text.replace(/^[{\s"]+/, ''), 70);
+  }
+  if (!v || typeof v !== 'object') return oneLine(String(v), 70);
+  const o = v as Record<string, unknown>;
+  for (const k of ARG_KEYS) {
+    const raw = o[k];
+    if (typeof raw !== 'string' || !raw.trim()) continue;
+    return oneLine(k.includes('path') ? shortPath(raw) : raw, 70);
+  }
+  return oneLine(Object.keys(o).join(', '), 70);
+}
+
+/** Everything in a step a search could reasonably land on, including bodies. */
+export function stepText(s: Step): string {
+  if (s.kind === 'tools') return [s.name, ...s.details, ...s.blocks.map((b) => ('text' in b ? b.text : ''))].join('\n');
+  if (s.kind === 'shell') return `${s.command}\n${s.out}`;
+  if (s.kind === 'image') return '';
+  return s.text;
+}
+
+export const oneLine = (s: string, n = 90) => {
+  const t = (s || '').replace(/\s+/g, ' ').trim();
+  return t.length > n ? `${t.slice(0, n)}…` : t;
+};
+
+export function stepsOf(turns: TraceTurn[]): Step[] {
+  const out: Step[] = [];
+  const pushTool = (name: string, detail: string, blocks: TraceBlock[], failed: boolean) => {
+    const last = out[out.length - 1];
+    // Consecutive calls to the SAME tool read as one line: "Read ×4".
+    if (last && last.kind === 'tools' && last.name === name) {
+      last.count++;
+      if (detail && last.details.length < 4) last.details.push(detail);
+      last.blocks.push(...blocks);
+      last.failed = last.failed || failed;
+      return;
+    }
+    out.push({ kind: 'tools', name, count: 1, details: detail ? [detail] : [], failed, blocks });
+  };
+
+  for (const t of turns) {
+    const bs = t.blocks;
+    for (let i = 0; i < bs.length; i++) {
+      const b = bs[i];
+      if (b.type === 'tool_use') {
+        // Sweep up this call's results (the server files them next to the call).
+        const group: TraceBlock[] = [b];
+        let failed = false;
+        let j = i + 1;
+        while (j < bs.length && bs[j].type === 'tool_result') {
+          const r = bs[j] as Extract<TraceBlock, { type: 'tool_result' }>;
+          group.push(r);
+          failed = failed || !!r.failed;
+          j++;
+        }
+        i = j - 1;
+        pushTool(b.name, argSummary(b.text), group, failed);
+      } else if (b.type === 'tool_result') {
+        pushTool('result', oneLine(b.text, 60), [b], !!b.failed);
+      } else if (b.type === 'thinking') {
+        out.push({ kind: 'think', text: b.text, more: b.more });
+      } else if (b.type === 'shell') {
+        out.push({ kind: 'shell', command: b.command, out: `${b.stdout || ''}${b.stderr || ''}`, failed: !!b.exitCode });
+      } else if (b.type === 'compaction') {
+        out.push({ kind: 'compact', text: b.text });
+      } else if (b.type === 'image') {
+        out.push({ kind: 'image', src: b.src });
+      } else if (b.type === 'text' && b.text.trim()) {
+        out.push({ kind: 'note', text: b.text, more: b.more });
+      }
+    }
+  }
+  return out;
+}
+
+// ---------- formatting ----------
+
+/** 954 · 21.0k · 654k · 2.2M · 1.4B — one decimal only where it says something. */
+export const fmtTok = (n = 0) => {
+  const [v, unit] = n >= 1e9 ? [n / 1e9, 'B'] : n >= 1e6 ? [n / 1e6, 'M'] : n >= 1e3 ? [n / 1e3, 'k'] : [n, ''];
+  if (!unit) return String(Math.round(v));
+  return `${v >= 100 ? Math.round(v) : v.toFixed(1)}${unit}`;
+};
+
+export const fmtDur = (ms: number) => {
+  if (!ms || ms < 0) return '';
+  const s = Math.round(ms / 1000);
+  if (s < 60) return `${s}s`;
+  const m = Math.floor(s / 60);
+  return m < 60 ? `${m}m ${s % 60}s` : `${Math.floor(m / 60)}h ${m % 60}m`;
+};
+
+export const fmtClock = (ms?: number) =>
+  ms ? new Date(ms).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : '';
+
+/**
+ * "14 steps · 9 tools · 42s · 21.0k tok" — the whole turn in one line. There is
+ * no header above the prompt any more, so this carries the numbers everywhere.
+ */
+export function stepSummary(x: Exchange, steps: Step[]): string {
+  const bits: string[] = [];
+  if (steps.length) bits.push(`${steps.length} step${steps.length === 1 ? '' : 's'}`);
+  if (x.toolCalls) bits.push(`${x.toolCalls} tool${x.toolCalls === 1 ? '' : 's'}`);
+  const d = fmtDur(x.endTs - x.startTs);
+  if (d) bits.push(d);
+  if (x.tokens) bits.push(`${fmtTok(x.tokens)} tok`);
+  return bits.join(' · ');
+}

web/src/components/icons.tsx

@@ -285,3 +285,13 @@ export const HandoverGlyph = ({ className }: { className?: string }) => (
     <path d="M8.9 5.8 12.1 9l-3.2 3.2" />
   </G>
 );
+
+// Send: an upward arrow with a little more weight than the rest of the set —
+// it sits alone on a filled button, where 1.2px reads as thin.
+export const SendGlyph = ({ className }: { className?: string }) => (
+  <svg className={className} viewBox="0 0 16 16" fill="none" stroke="currentColor"
+    strokeWidth="1.9" strokeLinejoin="round" strokeLinecap="round" aria-hidden="true">
+    <path d="M8 12.8V3.6" />
+    <path d="M4.1 7.4 8 3.4l3.9 4" />
+  </svg>
+);

web/src/conversation.css

@@ -0,0 +1,226 @@
+/* The conversation grammar (docs/conversation-view.md §4.3), shared by the
+   Overview card and the pane's RENDER mode. App tokens only — --panel, --border,
+   --accent, --muted, --font-mono. Nothing terminal-flavoured: no --term-bg, no
+   uppercase role pills, no per-row chips. */
+
+/* ---------- one exchange ---------- */
+/* padding-left is the gutter the prompt's ❯ hangs into. Everything else —
+   answer, work, fold control — starts at the content edge, so the arrow is the
+   only mark outside the column and turns are findable while scrolling. */
+.cx { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 2px 0 2px 16px; }
+.cx.dim { opacity: 0.72; }
+.cx.dim .cx-answer { -webkit-line-clamp: 6; }
+
+/* one meta row, under the prompt: the work on the left, which turn on the right.
+   Nothing sits above the prompt any more. */
+.cx-meta {
+  display: flex; align-items: baseline; gap: 8px; min-width: 0;
+  font-size: 11px; color: var(--muted);
+}
+.cx-meta .spacer { flex: 1; min-width: 4px; }
+.cx-n, .cx-time, .cx-model { flex: none; font-variant-numeric: tabular-nums; }
+.cx-n { color: color-mix(in srgb, var(--accent) 65%, var(--muted)); }
+.cx-model { opacity: 0.8; }
+
+/* the prompt: a lightly tinted band between hairlines, with the chevron hanging
+   in the gutter — what your eye lands on when scrolling a long conversation */
+.cx-prompt {
+  position: relative; margin-left: -16px; padding: 6px 10px 7px 16px;
+  background: color-mix(in srgb, var(--accent) 7%, transparent);
+  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
+  font-size: 13px; font-weight: 550; color: var(--text);
+  white-space: pre-wrap; overflow-wrap: break-word;
+}
+.cx-prompt::before {
+  content: '❯'; position: absolute; left: 3px; top: 6px;
+  font-family: var(--font-mono); color: var(--accent); font-weight: 700;
+}
+
+/* the fold control names what it hides — never a bare caret */
+.cx-fold {
+  display: inline-flex; align-items: baseline; gap: 6px; min-width: 0;
+  background: none; border: none; padding: 0; margin: 0;
+  font: inherit; color: var(--muted); cursor: pointer; text-align: left;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.cx-fold.flat { cursor: default; padding-left: 19px; }
+.cx-fold:hover { color: var(--text); }
+.cx-fold.on { color: var(--text); }
+.cx-fold .cs-tri { color: var(--muted); }
+.cx-fold.on .cs-tri { color: var(--accent); }
+
+/* ---------- the work: a rail of one-line steps ---------- */
+.cx-steps { display: flex; flex-direction: column; padding: 1px 0; }
+.cs { min-width: 0; }
+.cs-head {
+  display: flex; align-items: baseline; gap: 6px; width: 100%; min-width: 0;
+  background: none; border: none; padding: 2px 4px 2px 0; margin: 0;
+  font: inherit; font-size: 12px; color: var(--text); text-align: left; cursor: pointer;
+  border-radius: var(--r-sm);
+}
+.cs-head:hover:not(:disabled) { background: color-mix(in srgb, var(--border) 45%, transparent); }
+.cs-head:disabled { cursor: default; }
+/* one column, two meanings: a tool reports its outcome, everything else offers
+   to open. Greyed triangle = nothing more to see. */
+.cs-tri, .cs-mark {
+  flex: none; width: 13px; font-size: 10px; line-height: 1.6;
+  font-family: var(--font-mono); color: var(--muted);
+}
+.cs-tri.off { color: color-mix(in srgb, var(--border-strong) 65%, transparent); }
+.cs-mark { font-size: 11px; }
+.cs-mark.ok { color: color-mix(in srgb, var(--ok, #4b9e6a) 85%, var(--muted)); }
+.cs-mark.bad { color: var(--danger, #c05353); }
+.cs-label { flex: none; font-size: 11px; font-weight: 600; color: var(--muted); }
+.cs.tools .cs-label { color: color-mix(in srgb, var(--accent) 70%, var(--muted)); }
+.cs.think .cs-label { color: #8b73c4; }
+.cs-detail {
+  min-width: 0; flex: 1; font-size: 11.5px; color: var(--muted);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+/* expanded in place: same font, same colour, just no longer cut */
+.cs-detail.full { white-space: pre-wrap; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }
+.cs.note .cs-detail { color: var(--text); opacity: 0.78; }
+.cs-more { font-size: 10px; color: var(--muted); padding: 2px 0 0; }
+.cs-body { padding: 2px 0 6px 13px; }
+.cs-pre {
+  white-space: pre-wrap; word-break: break-word; margin: 3px 0; padding: 6px 8px;
+  background: var(--panel-2); border-radius: var(--r-sm);
+  font-family: var(--font-mono); font-size: 11px; line-height: 1.5;
+  max-height: 20rem; overflow: auto;
+}
+.cs-pre.out { color: var(--muted); }
+.cs-pre.out.bad {
+  border: 1px solid color-mix(in srgb, var(--danger, #c05353) 55%, transparent);
+  background: color-mix(in srgb, var(--danger, #c05353) 7%, var(--panel-2));
+}
+.cs-pre.think { color: color-mix(in srgb, #8b73c4 70%, var(--text)); }
+.cs-img { max-width: 100%; max-height: 18rem; border-radius: var(--r-sm); }
+
+/* ---------- the answer: the one thing written for the reader ---------- */
+.cx-answer { min-width: 0; }
+.markdown.cx-md { border: none; background: none; padding: 0; font-size: 12.5px; line-height: 1.55; }
+.cx-md > :first-child { margin-top: 0; }
+.cx-md > :last-child { margin-bottom: 0; }
+.cx-md pre { font-size: 11px; }
+.cx-note { font-size: 10.5px; color: var(--muted); padding-top: 4px; }
+
+.cx-running {
+  display: flex; align-items: baseline; min-width: 0; font-size: 12.5px; color: var(--muted);
+}
+.cx-running-at { margin-left: 7px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.85; }
+.cx-running::before {
+  content: '⠋'; display: inline-block; width: 1.2em; color: var(--accent);
+  animation: ov-spin 0.9s steps(1) infinite;
+}
+
+/* ---------- card: history grows upward, one exchange at a time ---------- */
+.cx-earlier { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 11px; }
+.cx-earlier-btn {
+  background: none; border: none; padding: 0; font: inherit; font-size: 10.5px;
+  color: var(--accent); cursor: pointer;
+}
+.cx-earlier-btn:hover { text-decoration: underline; }
+.cx-earlier-n { color: var(--muted); }
+.cx-earlier-note { color: var(--muted); }
+
+/* ---------- search hits ---------- */
+mark.cx-hit {
+  background: color-mix(in srgb, var(--accent) 28%, transparent);
+  color: inherit; border-radius: 2px; padding: 0 1px;
+}
+mark.cx-hit.on { background: var(--accent); color: var(--panel); }
+
+/* ---------- RENDER mode: the same thing, stacked ---------- */
+.cxv { display: flex; flex-direction: column; min-height: 0; }
+
+.cxv-bar {
+  /* wraps at ANY width, not behind a media query: a pane is a container, and
+     a 390px pane on a desktop never triggers a viewport media query */
+  display: flex; align-items: center; gap: 7px 8px; flex: none; flex-wrap: wrap;
+  padding: 5px 9px; background: var(--panel-2); border-bottom: 1px solid var(--border);
+  font-size: 10.5px; color: var(--muted);
+}
+.cxv-bar .spacer { flex: 1; }
+.cxv-chip { padding: 0 5px; border: 1px solid var(--border); border-radius: var(--r-sm); white-space: nowrap; }
+.cxv-count, .cxv-tok { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
+.cxv-tok { flex: 0 1 auto; }
+.cxv-mini {
+  flex: none; white-space: nowrap; background: none; border: 1px solid transparent; border-radius: var(--r-sm);
+  padding: 1px 5px; font: inherit; font-size: 10.5px; color: var(--muted); cursor: pointer;
+}
+.cxv-mini:hover { color: var(--text); border-color: var(--border); }
+.cxv-mini.on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
+.cxv-nav { display: inline-flex; gap: 2px; }
+.cxv-hits { flex: none; font-variant-numeric: tabular-nums; color: var(--muted); }
+.cxv-search {
+  flex: 1 1 7rem; width: auto; min-width: 4.5rem; max-width: 22rem;
+  padding: 2px 6px; font: inherit; font-size: 11px;
+  background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-sm);
+}
+
+/* Panel background, and a column that FILLS the pane. A fixed reading width
+   left a gutter of nothing on each side while the prompt band — which is what
+   you scan for — still spanned the full width, so the two disagreed about where
+   the conversation began. The pane is the measure: make it narrow and the
+   conversation is narrow. */
+.cxv-body { flex: 1; min-height: 0; overflow-y: auto; background: var(--panel); padding: 4px 14px 30px; }
+.cxv-col { display: flex; flex-direction: column; min-width: 0; }
+.cxv-msg { font-size: 11px; color: var(--muted); padding: 6px 0; }
+.cxv-foot {
+  display: flex; align-items: center; gap: 8px; flex: none;
+  padding: 5px 10px; border-top: 1px solid var(--border); background: var(--panel);
+  color: var(--muted); font-size: 10.5px; overflow: hidden;
+}
+.cxv-foot .cxv-path { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cxv-foot .spacer { flex: 1; min-width: 4px; }
+
+/* the prompt band sticks: deep inside a long turn, the thing you want overhead
+   is what you asked for — not a row of numbers */
+.cxv-col .cx-prompt {
+  position: sticky; top: 0; z-index: 2;
+  background: color-mix(in srgb, var(--accent) 7%, var(--panel));
+}
+
+/* ---------- phone ---------- */
+@media (max-width: 720px) {
+  .cxv-body { padding: 4px 8px 24px; }
+  .cs-detail { font-size: 12px; }
+}
+
+/* ---------- reader mode inside a session pane ---------- */
+/* Drawn over the live terminal, which stays mounted underneath. */
+.pane-reader { position: absolute; inset: 0; z-index: 3; display: flex; background: var(--panel); }
+.pane-reader > .cxv { flex: 1; min-width: 0; }
+.cxv-empty { margin: auto; padding: 24px; font-size: 11.5px; color: var(--muted); text-align: center; }
+.ph-modes { flex: none; }
+.ph-modes button { padding: 1px 7px; font-size: 9.5px; letter-spacing: 0.06em; }
+
+/* The overlay needs a positioned host; .term-host is otherwise plain. */
+.slot .term-host { position: relative; }
+
+/* ---------- the card inline in the Overview list ---------- */
+/* There it is a summary, not a room: one turn, the answer clamped. The window
+   (and RENDER mode) is where a conversation gets to be long. */
+.ov-card.ov-compact .cx-answer .markdown {
+  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
+}
+
+/* ---------- an expanded tool call ---------- */
+.cs-call { display: flex; flex-direction: column; }
+.ct-cap { font-size: 10.5px; color: var(--muted); padding: 3px 0 1px; overflow-wrap: anywhere; }
+.ct-note { font-size: 11px; color: var(--muted); padding: 1px 0 2px; }
+.cs-pre.ct-cmd { color: var(--text); }
+.cs-pre.ct-cmd::before { content: '$ '; color: var(--accent); }
+/* a before and an after — tinted, not barred */
+.cs-pre.ct-was { background: color-mix(in srgb, var(--danger, #c05353) 8%, var(--panel-2)); }
+.cs-pre.ct-now { background: color-mix(in srgb, var(--ok, #4b9e6a) 9%, var(--panel-2)); }
+.ct-fields { margin: 3px 0 0; font-size: 11px; }
+.ct-row { display: grid; grid-template-columns: minmax(4.5rem, auto) 1fr; gap: 8px; padding: 1px 0; align-items: baseline; }
+.ct-row dt { color: var(--muted); }
+.ct-row dd { margin: 0; min-width: 0; color: var(--text); overflow-wrap: anywhere; }
+.ct-row dd .cs-pre { margin: 2px 0; }
+
+/* The reply line under a rendered conversation — the card's own composer, so
+   answering an agent looks the same wherever you are reading it. */
+.cxv-live { flex: none; padding: 6px 12px; border-top: 1px solid var(--border); background: var(--panel); }
+.cxv-note { flex: none; padding: 0 12px 6px; }

web/src/lib/paneMode.ts

@@ -0,0 +1,27 @@
+// How every session pane is being read: the terminal itself, or reader mode.
+// (docs/conversation-view.md §3.3)
+//
+// One setting for the whole app, like zoom — not per session. Reading a fleet
+// means reading it the same way; flipping panes one at a time was a preference
+// nobody wanted to manage. Kept in localStorage so a reload does not undo it,
+// and announced so an already-mounted pane hears about it.
+export type PaneMode = 'terminal' | 'reader';
+
+const KEY = 'am-pane-mode';
+const EVENT = 'am:pane-mode';
+
+export function readPaneMode(): PaneMode {
+  try { return localStorage.getItem(KEY) === 'reader' ? 'reader' : 'terminal'; } catch { return 'terminal'; }
+}
+
+export function writePaneMode(mode: PaneMode): void {
+  try { localStorage.setItem(KEY, mode); } catch { /* private mode: this session only */ }
+  window.dispatchEvent(new CustomEvent(EVENT, { detail: mode }));
+}
+
+/** Someone else changed it — the Overview card asking for the full history. */
+export function onPaneMode(apply: (m: PaneMode) => void): () => void {
+  const h = (e: Event) => apply((e as CustomEvent<PaneMode>).detail);
+  window.addEventListener(EVENT, h);
+  return () => window.removeEventListener(EVENT, h);
+}

web/src/main.tsx

@@ -3,6 +3,7 @@ import type { ReactNode } from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App';
 import './styles.css';
+import './conversation.css';
 
 // Last-resort guard: React unmounts the WHOLE tree on an uncaught render
 // error, which reads as a blank white page. Show a reload card instead.

web/src/styles.css

@@ -344,7 +344,10 @@ body {
 .ov-live textarea::placeholder { color: var(--muted); opacity: 0.7; }
 .ov-hint { font-size: 10.5px; color: var(--muted); flex: none; }
 /* send button — essential on mobile (no Shift+Enter), handy on desktop */
-.ov-send { flex: none; width: 26px; height: 26px; border: none; border-radius: 999px; background: var(--accent); color: var(--accent-fg); font-size: 14px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
+/* A square key, not a bubble: it sits at the end of a line of type, and the
+   rounded pill read as a chat app rather than as a prompt. */
+.ov-send { flex: none; width: 26px; height: 26px; padding: 0; border: none; border-radius: 7px; background: var(--accent); color: var(--accent-fg); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
+.ov-send svg { width: 15px; height: 15px; }
 .ov-send:disabled { opacity: 0.5; cursor: default; }
 .ov-note { font-size: 11px; color: var(--danger); }
 
@@ -1067,6 +1070,10 @@ a.btn-ghost { text-decoration: none; }
 /* mobile stage top bar (back + agent chips) — rendered only on mobile */
 .mbar { display: flex; align-items: center; gap: 8px; padding: 0 0 8px; flex: none; }
 .mback { flex: none; font-size: 19px; padding-bottom: 3px; }
+/* Reading mode, in the zoom bar: the same weight as the controls beside it. */
+.modebar { flex: none; margin-right: 6px; }
+.modebar button { padding: 2px 8px; font-size: 10.5px; letter-spacing: 0.02em; }
+
 .mtitle { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .mchips { display: flex; gap: 6px; overflow-x: auto; flex: 1; padding: 2px; }
 .mchip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); cursor: pointer; flex: none; }

web/test/exchanges.test.mjs

@@ -0,0 +1,172 @@
+// What counts as the ANSWER, and what stays in the work.
+//
+// This is the one piece of judgement in the conversation renderer, and it has
+// already been wrong twice: a superseded answer was re-inserted wherever the
+// next one arrived (so an intermediate message rendered below the tool calls
+// that came after it), and mid-task the last message was promoted to the answer
+// slot (so an agent's aside read as its reply, in the wrong place).
+//
+// No test runner: esbuild is already here for vite, so the module is transpiled
+// and imported directly. Run with:  node test/exchanges.test.mjs
+import assert from 'node:assert/strict';
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+import { build } from 'esbuild';
+
+const HERE = path.dirname(fileURLToPath(import.meta.url));
+const out = path.join(fs.mkdtempSync(path.join(os.tmpdir(), 'exch-')), 'exchanges.mjs');
+await build({
+  entryPoints: [path.join(HERE, '../src/components/conversation/exchanges.ts')],
+  outfile: out, format: 'esm', bundle: false, logLevel: 'error',
+});
+const { splitExchanges, stepsOf, stepSummary, fmtTok } = await import(pathToFileURL(out).href);
+
+let ts = 1_700_000_000_000;
+const at = () => (ts += 30_000);
+const text = (t) => ({ type: 'text', text: t });
+const call = (name, arg) => ({ type: 'tool_use', name, text: JSON.stringify(arg) });
+const result = (t, failed) => ({ type: 'tool_result', text: t, ...(failed ? { failed: true } : {}) });
+const user = (t) => ({ role: 'user', ts: at(), blocks: [text(t)] });
+const agent = (blocks, kind) => ({ role: 'assistant', ts: at(), ...(kind ? { kind } : {}), blocks });
+// a prompt is one turn; an answer is the RUN of turns said after the last action
+const said = (t) => {
+  const turns = Array.isArray(t) ? t : [t].filter(Boolean);
+  if (!turns.length) return null;
+  return turns.map((x) => x.blocks.filter((b) => b.type === 'text').map((b) => b.text).join('')).join('\n\n');
+};
+const kinds = (steps) => steps.map((s) => (s.kind === 'tools' ? `${s.name}×${s.count}` : s.kind));
+
+// ---------------------------------------------------------------- mid-task
+// The agent has spoken twice and is still working: neither message is a reply,
+// and both keep their place among the tool calls.
+{
+  const [x] = splitExchanges([
+    user('why is the scan slow?'),
+    agent([text('Let me look at what runs on an interval.'), call('Grep', { pattern: 'setInterval' }), result('runner.js:184')]),
+    agent([text('There it is — a sync stat sweep.'), call('Read', { file_path: 'runner.js' }), result('statSync(f)')]),
+    agent([call('Edit', { file_path: 'runner.js' }), result('Applied 1 edit')]),
+  ]);
+  assert.deepEqual(x.answer, [], 'work in flight is not an answer');
+  assert.deepEqual(kinds(stepsOf(x.steps)),
+    ['note', 'Grep×1', 'note', 'Read×1', 'Edit×1'],
+    'messages stay above the calls they introduced');
+  assert.equal(x.toolCalls, 3);
+}
+
+// ---------------------------------------------------------------- finished
+// The last turn ended on words: that is the reply, and it leaves the work.
+{
+  const [x] = splitExchanges([
+    user('why is the scan slow?'),
+    agent([text('Looking.'), call('Read', { file_path: 'runner.js' }), result('…')]),
+    agent([text('Found it: the tick stats synchronously.')]),
+  ]);
+  assert.equal(said(x.answer), 'Found it: the tick stats synchronously.');
+  assert.deepEqual(kinds(stepsOf(x.steps)), ['note', 'Read×1'], 'the answer is not also a step');
+}
+
+// A turn that says something and then calls a tool has not answered yet.
+{
+  const [x] = splitExchanges([
+    user('go'),
+    agent([text('One more check.'), call('Bash', { command: 'npm test' }), result('ok')]),
+  ]);
+  assert.deepEqual(x.answer, [], 'ending on a tool call is not ending on words');
+}
+
+// ------------------------------------------------------- a superseded final
+// Two finals (a resumed task): the later one answers, the earlier one stays
+// where it happened rather than being appended after the work that followed it.
+{
+  const [x] = splitExchanges([
+    user('ship it'),
+    agent([text('Pushed.')], 'final'),
+    agent([call('Bash', { command: 'gh pr create' }), result('#37')]),
+    agent([text('PR is up: #37.')], 'final'),
+  ]);
+  assert.equal(said(x.answer), 'PR is up: #37.');
+  assert.deepEqual(kinds(stepsOf(x.steps)), ['note', 'Bash×1'], 'the earlier final keeps its position');
+}
+
+// ------------------------------------------------- a throwaway after the answer
+// Seen live: the harness marks the last assistant text of a request `final`,
+// and that was "No response requested." — written in reply to a notification,
+// with the real answer in the turn above. Taking only the last `final` buried
+// the answer in the work and showed the boilerplate as the reply.
+{
+  const [x] = splitExchanges([
+    user('any news on hugging face?'),
+    agent([text("I'll search the web for this."), call('WebSearch', { query: 'hugging face' }), result('…')]),
+    agent([text("Here's the latest on the incident: …")]),
+    agent([text('No response requested.')], 'final'),
+  ]);
+  assert.equal(said(x.answer),
+    "Here's the latest on the incident: …\n\nNo response requested.",
+    'everything said after the last action is the answer');
+  assert.deepEqual(kinds(stepsOf(x.steps)), ['note', 'WebSearch×1'], 'and none of it is left in the work');
+}
+
+// --------------------------------------------------------------- splitting
+// One exchange per operator prompt; harness-authored "user" lines are not
+// prompts, and neither is an interrupt marker.
+{
+  const xs = splitExchanges([
+    user('first'),
+    agent([text('a')], 'final'),
+    { role: 'user', ts: at(), blocks: [text('<system-reminder>budget</system-reminder>')] },
+    { role: 'user', ts: at(), blocks: [text('[Request interrupted by user]')] },
+    user('second'),
+    agent([text('b')], 'final'),
+  ]);
+  assert.equal(xs.length, 2, 'two prompts, two turns');
+  assert.deepEqual(xs.map((x) => said(x.prompt)), ['first', 'second']);
+  assert.equal(xs[0].steps.length, 2, 'the harness lines belong to the first turn, as work');
+}
+
+// Turns before any prompt (a tail that starts mid-conversation) still render.
+{
+  const xs = splitExchanges([agent([text('…continuing')], 'final')]);
+  assert.equal(xs.length, 1);
+  assert.equal(xs[0].prompt, null);
+  assert.equal(said(xs[0].answer), '…continuing');
+}
+
+// ------------------------------------------------------------- step lines
+// Consecutive calls to the SAME tool collapse; a different tool breaks the run,
+// and a failed result marks the group.
+{
+  const [x] = splitExchanges([
+    user('read them'),
+    agent([call('Read', { file_path: '/a/b/one.ts' }), result('…'), call('Read', { file_path: '/a/b/two.ts' }), result('…')]),
+    agent([call('Bash', { command: 'false' }), result('exit 1', true)]),
+    agent([call('Read', { file_path: '/a/b/three.ts' }), result('…')]),
+    agent([text('done')], 'final'),
+  ]);
+  const steps = stepsOf(x.steps);
+  assert.deepEqual(kinds(steps), ['Read×2', 'Bash×1', 'Read×1']);
+  assert.equal(steps[0].details[0], '…/b/one.ts', 'a path keeps its last two parts');
+  assert.equal(steps[1].failed, true, 'a failed result marks its group');
+  assert.equal(steps[2].failed, false);
+  assert.equal(stepSummary(x, steps).startsWith('3 steps · 4 tools'), true, stepSummary(x, steps));
+}
+
+// A tool call the reader had to cut mid-JSON still names what it acted on.
+{
+  const [x] = splitExchanges([
+    user('edit it'),
+    agent([{ type: 'tool_use', name: 'Edit', text: '{"file_path": "server/src/runner.js", "old_str' }]),
+  ]);
+  assert.equal(stepsOf(x.steps)[0].details[0], 'server/src/runner.js');
+}
+
+// ------------------------------------------------------------- formatting
+assert.equal(fmtTok(954), '954');
+assert.equal(fmtTok(21_000), '21.0k');
+assert.equal(fmtTok(654_321), '654k', 'no decimal where it says nothing');
+assert.equal(fmtTok(2_200_000), '2.2M');
+assert.equal(fmtTok(1_400_000_000), '1.4B');
+
+fs.rmSync(path.dirname(out), { recursive: true, force: true });
+console.log('exchanges: ok');