feat(desktop): developer mode display style — prompt-first UI with pinned/recent channel list, palette, and split-pane side chats

[joahg]

Adds a developer mode display style to the Buzz desktop app (AGNTOPS-354): a prompt-first, keyboard-driven, Amp/Claude-Code-style surface layered on the existing channel structure.

Core flow

• One monospace composer. Tab / Shift+Tab cycles the target between plain human chat and every available agent (managed + shared relay agents).
• Enter on a fresh prompt spawns a new channel, attaches/tags the selected agent, and sends the prompt there. Agents are not limited to a single channel.
• Agent-directed prompts carry an @Agent prefix on the wire (plus the mention tag) so the standard UI and other clients see who a prompt is for — but dev mode lifts it out of the message body and renders it as a small “to Agent” line (in the agent's chat color) under the author name. The composer shows its Tab-cycled target the same way: a “to Agent” line at the top of the chat box (no more bordered pill), with “chat” / “working…” for the other states.
• Prompts render as cards in the channel (borderless until ↑/↓ selects one); agent replies land in the card's thread on the same indent as the prompt. ↑/↓ (empty composer) walk cards with zero layout shift; Enter on a card opens a split-screen side chat scoped to that prompt's thread.
• Kind-7 reactions render as chips on prompts and replies — agents react while working, so the chips double as a working/loading indicator without any architecture change.

Channel list: pinned chats, recency order, unread indicators

• The channel list is always visible on the left; it dims while a channel is focused. The composer covers only the channel pane — full width when creating a new session or navigating the channel list.
• Per-channel pin toggle (hover a row → pin/unpin): pinned chats render in their own pinned section at the top; all other chats sit beneath. Pins are device-local (localStorage) — the channel protocol has no pin field.
• Both sections auto-order by last activity, newest first; new channels start unpinned near the top of the lower section.
• Unread indicators: unread channels render with a brighter, bold name plus a dot. Dev mode tracks unread channel-level posts only — a new top-level prompt lights the dot, unopened thread replies don't. Opening a channel marks its top-level timeline read (same passive NIP-RS path the standard channel screen uses); standard UI unread behavior is unchanged.
• Draggable channel-list width: a vertical divider on the list's right edge (pointer + keyboard, clamped 200–480px, persisted per device); the keyboard-hint footer never wraps.
• ↑ from the fresh composer highlights/previews channels (transcript previews behind), Enter opens, Escape backs out; Escape inside a channel returns to the list.

Command palette

• Ctrl+O anywhere (or / on an empty composer) opens an Amp-style palette: channel search across all sessions, agent configuration, appearance/profile/notifications/shortcuts settings, switch to standard UI, and a name-color picker.
• With a channel focused or previewed, the palette offers add someone to # channel (searches people & agents; local managed agents are attached with a running harness, others added with the right role) and leave # channel (archives instead when you're the last human member, since the relay refuses to remove the last owner). While typing, matching channels rank above commands.

Window chrome & focus

• Developer mode replaces the shared top chrome: its gray surface stretches to the top of the window, with fixed-px clearance so the title never sits under the macOS traffic lights.
• The title is vertically aligned with the traffic lights (same 3px optical offset the standard chrome uses) and the active/previewed channel name renders in the top bar, always visible. The transcript itself carries no duplicate channel name/topic header.
• Refocusing the window restores the last-focused input; clicks on dead space never blur the active composer.
• Prompt-card selection is keyboard-only (↑/↓ + Enter); clicking a card or message never selects it or steals focus — message text stays drag-selectable, and a click that ends without a selection returns focus to the composer. While a card is selected the caret leaves the message box entirely (typing is disabled); the shell drives ↑/↓/Enter/Escape, and clicking the box clears the selection to resume typing.

Split-pane side chat

• Channel and side-chat composers sit side by side; draggable divider (pointer + keyboard, clamped 25–75%, persisted per device).
• Both composers auto-grow upward with their content (wrapped lines included), capped at 40% of the window before scrolling internally; the top border doubles as a drag handle (pointer + keyboard) that sets a persisted minimum height.
• Inactive pane dims; ←/→ on an empty composer switches panes.
• ⌥↑/⌥↓ steps through the visible channel list (pinned then recent) directly from the composer — the caret never leaves the textbox, works mid-draft, and from the fresh composer ⌥↑ opens the nearest channel.
• ⌘N jumps to the fresh composer to start a new channel from anywhere in dev mode. ⌘T opens a draft side chat in the open channel: the pane opens before any thread exists; the first send posts a root message to the channel (exactly like the main composer) and the pane attaches to that new thread for follow-ups.

Channel naming

• Channel names are generated by an agent: a new buzz-acp complete subcommand runs a bounded one-shot ACP prompt through the tagged agent's own harness (same command/model/env resolution as agent spawn), bridged by a generate_agent_completion Tauri command. The exchange is a private subprocess — it never appears in any channel.
• Channels are created instantly under a neutral unique new-session placeholder and renamed asynchronously when the title arrives; a lingering placeholder makes naming failures visible instead of masquerading as generated titles.
• Falls back to the mesh LLM node's OpenAI-compatible endpoint when no managed agent completion is available.

Color

• Deterministic per-author name colors hashed from pubkey into a curated palette, with a device-local hex override settable from the palette (a synced profile color field would need schema/event changes).
• The composer's “to Agent” line and caret wear the selected agent's chat color.
• Conservative keyword highlighting rendered as React spans: inline code, @mentions. Mid-message mentions matching one of the message's p-tag members render as a bordered pill in that author's chat color, in that author's chat color; multi-word agent names like amp (local) are matched longest-first. A leading mention is treated as direction, not prose — stripped from the body (side-chat header preview included) and shown as the “to Agent” line.
• #channel references: typing # in either composer autocompletes known channel names (↑/↓ select, Tab/Enter insert, Esc dismiss); accepted references serialize as plain #channel-name text (the same format the standard UI links), and known references in the transcript render as clickable links that open that channel without stealing composer focus. Multi-word names match longest-first, same as mentions.
• URLs render as clickable Slack-style links (link icon + fetched page title when available, else the scheme-stripped URL truncated at 64 chars) opening in the system browser; a new generic fetch_page_title Tauri command (https-only, 4s timeout, 256KB cap) resolves og:/twitter:/<title> titles.

Layout containment

• Chat content can no longer push the layout past the right edge of the window: the dev-mode shell (a flex item) now has min-w-0 so nowrap content (truncated link labels, thread-header previews) can't inflate its intrinsic width, and the transcript/side-chat scroll viewports clip residual horizontal overflow. Long unbroken words wrap; links truncate inside their pane.
• New Playwright regression test (dev-mode-overflow.spec.ts, smoke project) sends a long unbroken message, opens the side chat, and asserts nothing extends past the window.

Markdown rendering

• Agent markdown renders as rich formatting in dev-mode transcripts: a block-level layer (fenced code blocks, headings, bullet/numbered lists with hanging indents, blockquotes, horizontal rules) over the existing span-based inline highlighter, which now also handles bold, italic, strikethrough, and [label](url) links (labeled links render via the Slack-style link component using the written label, skipping the title fetch). Emphasis delimiters are strict so snake_case and arithmetic stay plain prose; everything renders as React nodes — never HTML — and plain human chat renders exactly as typed.

Notes

• Display style persisted in localStorage (⌘⇧D toggles); standard UI untouched.
• Validation: pnpm typecheck, pnpm check, pnpm test (3792 pass), cargo test -p buzz-acp (639 pass), pnpm build all green.

Linear: AGNTOPS-354