feat(desktop): transcript visual redesign — de-chromed feed, turn structure, chat-grade affordances (ChatGPT/Claude/Kimi bar)

[agentfleets]

Design audit of the agent transcript (desktop/src/surfaces/AgentTranscript.tsx, desktop/src/ui/EventCard.tsx, desktop/src/ui/Composer.tsx, desktop/src/styles/partials/05-transcript-boards.css) against the ChatGPT / Claude / Kimi bar. The engineering underneath is strong (virtualized feed, tool folding, lenses, insight navigator); what's missing is the visual discipline of a commercial chat surface. Related behavioral issues already filed: #331 (open-at-bottom), #323 (composer multiline/voice HUD), #315 (skeletons/toasts), #314 (lifecycle confirmations), #317 (contrast).

Core problem: everything is a card

Every event — including each assistant text block — renders as a bordered, shadowed box with a 3px colored left spine and an uppercase micro-tag (.ev, 05-transcript-boards.css:2-12; accentVar assigns 9 different colors across kinds, EventCard.tsx:43-70). At 500 events the feed reads as a wall of boxes: high chrome-to-content ratio, and the rainbow of spines (terminal-blue/cyan/yellow/purple) gives a debug-console feel, not a conversation.

In ChatGPT/Claude/Kimi, assistant prose is borderless full-measure text; structure comes from typography and whitespace, and chrome appears only where action lives (tool calls, code blocks, errors).

Recommendations:

1. Borderless assistant text — no box, no spine, no shadow for text/thought kinds; reserve boxes for tool calls/results, diffs, plans, and errors.
2. Collapse the spine palette to 3 semantics: neutral (tools/system), error red, accent (user). Drop per-kind rainbow coloring.
3. Retire the uppercase micro-tags (ev-tag: tool/result/thinking/turn/session/system/done, 05-transcript-boards.css:259-270) in favor of icon + natural-language affordances ("Ran bash", "Read file", "Thinking"); demote raw kind labels to verbose mode.
4. Center a readable measure (~720–760px) instead of max-width: 92% cards stretching edge-to-edge (05-transcript-boards.css:5) — long lines on wide monitors are unreadable today. User bubbles and tool cards live inside the same measure.

Turn structure & live status

5. Group events into turns. Today a turn boundary is a tiny muted turn done · 123ms tag row (EventCard.tsx:286-296). Commercial agent UIs give each turn a quiet header (timestamps, duration, model) and visual separation. FeedEvent.ts is parsed (EventCard.tsx:20,30) but never rendered — add timestamps (relative, absolute on hover).
6. Add a persistent status line. Running state is only inferable mid-feed from tiny usage/lifecycle rows. Add a header status: ● running · model · elapsed · tokens (the data already exists in session.init/usage payloads, EventCard.tsx:298-317), plus a shimmer/"agent is working" row at the feed tail while streaming — and make the composer's primary action Stop while running.
7. Rebalance the lifecycle bar. Five equal-weight text buttons (pause/resume/stop/terminate/archive, AgentTranscript.tsx:342-348) crowd the header; show one contextual primary action (stop while running) and move the rest into an overflow menu. (Confirmation gaps already filed in fix(desktop): destructive actions lack consistent confirmation (connections, sessions, agents, runs, profiles, SFTP, vault sync) #314.)

Tool calls & code

8. Per-tool inline summaries. Tool input currently shows as a mono-font first line of raw JSON in a <details> (EventCard.tsx:143-166). Claude-Code-grade presentation shows the key argument inline: bash → the command; read/write/edit → the file path; search → the pattern — with the full JSON behind the expansion. This one change removes most of the feed's visual noise.
9. Code block header with copy. .md pre is a bare box (05-transcript-boards.css:57-63) — no language label, no copy button. ChatGPT/Claude/Kimi all have a header strip (language + copy). Cheapest, most-felt affordance available.
10. Diff gutters. Diffs are plain red/green -/+ lines (EventCard.tsx:168-191, 05-transcript-boards.css:304-309); give full-line background tints (del/add gutter backgrounds) so hunks scan as blocks.
11. Tame the collapse nesting. Tool card → <details> input → <details> result is a Russian doll of disclosures with mono first-line previews. Single-level collapse with a clean one-line summary (chevron + "N lines"); for long assistant text prefer a gradient fade + "Show more" (Kimi/Claude idiom) over <details> with a redundant dimmed preview line (EventCard.tsx:102-121, 05-transcript-boards.css:243-247).

Chat-grade affordances

12. Scroll-to-latest pill. When the user scrolls up, followOutput releases (AgentTranscript.tsx:398) and new messages arrive invisibly. Commercial apps show a floating "↓ new messages" button with an unread count that jumps to the bottom.
13. Hover actions on messages — copy message text, quote into composer (and for the assistant, the existing "insert into note" pattern from AgentCompanion). Today there are zero per-message actions.
14. Skeleton cards on load instead of text "Loading…" (AgentTranscript.tsx:411) — matches feat(desktop): feedback systems — toast notifications, skeleton loading, surface silent data-layer failures #315.
15. Composer polish beyond feat(desktop): voice dictation HUD + composer multiline & persistent drafts #323: icon send button (arrow) instead of a text "Send" button, Enter-to-send hint, and drop the linear-gradient wrapper (05-transcript-boards.css:353-357) for a flat surface + hairline (gradients read dated next to the rest of the shell).

Smaller items

16. Insight rail rows use raw unicode/emoji glyphs (⚒, ✕, ◐ — AgentTranscript.tsx:467-468; plan marks ☑◐☐ at EventCard.tsx:200) instead of the Icon system — same discipline gap as the 🎤 mic (filed in feat(desktop): voice dictation HUD + composer multiline & persistent drafts #323).
17. .feed-item gutters use the phantom var(--spacing-s20, 20px) fallback (part of feat(desktop): design-token governance — semantic-layer leaks, phantom tokens, z-index scale, responsive strategy #318); ev accents use raw --color-terminal-* vars that bypass the semantic layer and break light theme (fix(desktop): WCAG AA contrast failures (esp. light theme), theme FOUC, dead transition + undefined token #317/feat(desktop): design-token governance — semantic-layer leaks, phantom tokens, z-index scale, responsive strategy #318) — the redesign should route all new colors through semantic tokens from the start.
18. Digest mode's RunReport is hardcoded English (RunReport.tsx:97,128) — include it in the i18n sweep (feat(desktop): design-token governance — semantic-layer leaks, phantom tokens, z-index scale, responsive strategy #318) when restyling.

Acceptance criteria

• Assistant prose renders borderless at a centered readable measure in both themes; boxes appear only for tools/diffs/plans/errors.
• A code block anywhere in the feed has a language + copy header.
• Tool calls show a one-line natural-language summary with the key argument inline; raw JSON is one click away, not the default.
• A persistent status line shows running state, model, elapsed time, and tokens; the composer offers Stop while running.
• Scrolling up during streaming reveals a "↓ new messages" pill with count; clicking it returns to the live tail.
• No raw emoji/unicode glyphs remain in the transcript chrome (all Icon system); all colors resolve through semantic tokens in both themes.

[physercoe]

First pass landed on main (6a833249) — the visual-discipline core. Issue kept open; remaining items below.

Shipped:

• De-chrome: assistant prose + telemetry render borderless at a centered ~760px measure; a card box appears only where action lives (tools/diffs/plans/errors/user input). The 9-colour per-kind spine collapses to 3 semantics (accent = user, red = error, neutral = rest). (recs 1, 2, 4)
• Tool calls: one-line natural-language summary — icon + verb + key argument inline (bash → command, read/write/edit → path, search → pattern); raw JSON behind a single "Arguments" disclosure. (rec 8)
• Fenced code blocks: language + copy header. (rec 9)
• Diff hunks: full-line gutter tints. (rec 10)
• Scroll-to-latest pill with unread count. (rec 12)
• Status line: model · turns · tokens · elapsed (feed-derived). (rec 6, partial)
• Raw unicode glyphs (⚒ ✕ ☑ ◐ ☐) → Icon system; composer icon send button + flat surface; new colours through semantic tokens. (recs 15 partial, 16, 17)

Deferred (need the agent's lifecycle status and/or device testing):

• Live running-state indicator + composer Stop while running (rec 6/7 dynamic half) — the transcript only has agentId, not the agent's lifecycle status; wiring that in is the next slice.
• Lifecycle-bar overflow menu (rec 7).
• Per-message hover actions — copy / quote / insert-to-note (rec 13).
• Turn-grouping headers with timestamps/duration/model — FeedEvent.ts rendered (rec 5).
• Skeleton cards on load (rec 14 = feat(desktop): feedback systems — toast notifications, skeleton loading, surface silent data-layer failures #315).
• Single-level collapse rework + "Show more" gradient fade (rec 11).
• Transcript-chrome i18n (rec 18) stays part of the feat(desktop): design-token governance — semantic-layer leaks, phantom tokens, z-index scale, responsive strategy #318 sweep.

Build (tsc + vite) + lint-desktop-tokens clean; not device-tested — the WebKit feed wants a manual once-over on a heavy transcript.

[physercoe]

Deferred list burned down — second pass on main (60d713fa).

• Running-state + composer Stop (rec 6/7): agent lifecycle status polled (getAgent, 5s); status strip gains a running dot + status word; lifecycle bar shows a contextual primary (Stop while running / Resume while paused); the composer's primary action becomes Stop when running with an empty draft (typing swaps back to Send).
• Lifecycle-bar overflow (rec 7): five always-on buttons → one primary + an overflow (⋯) menu (pause/resume/stop + terminate/archive as ConfirmButtons); closes on outside-click / Escape.
• Per-message hover actions (rec 13): copy + quote-into-composer on assistant text and director input. insert-to-note is an AgentCompanion affordance — N/A in this surface (no note target).
• Timestamps (rec 5): message rows show a relative time (absolute on hover) — the ts the hub already emits. Full turn-grouping containers remain a heavier follow-up; turn.result dividers + per-row time cover the immediate ask.
• Skeleton feed (rec 14 / feat(desktop): feedback systems — toast notifications, skeleton loading, surface silent data-layer failures #315): shimmer cards replace the "Loading…" line.
• Collapse rework (rec 11): long assistant text clamps behind a fade with a Show more/less toggle instead of a <details> + redundant preview.
• Chrome i18n: tool verbs, labels, and the code-block copy button route through i18n (en + zh). RunReport i18n stays part of feat(desktop): design-token governance — semantic-layer leaks, phantom tokens, z-index scale, responsive strategy #318.

Build (tsc + vite) + lint-desktop-tokens clean. Not device-tested — the running/Stop path + hover actions want a manual once-over on WebKit.

Remaining for #332 (heavier / lower-priority): full turn-grouping containers with per-turn header (duration/model), and the RunReport i18n (#318). Everything else in the audit is landed. Closing candidate once device-tested — leaving open pending that.