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). The default target is the first managed (local) agent — chat mode is only the default when no agents exist.
• 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.
• Every prompt card shows the leading run of agent replies inline in the channel — everything the agent said before a human responded, no matter how old the prompt; from the first human reply onward, messages collapse into a "… N more replies" affordance that opens the thread pane (replaces the old newest-three auto-expand model).

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 top bar's columns track the width live while dragging.
• ↑ from the fresh composer highlights/previews channels (transcript previews behind), Enter opens, Escape backs out; Escape inside a channel returns to the list. Clicking a channel row opens it immediately on the first click — keyboard navigation stays preview-first.

Command palette

• ⌘K anywhere (or / on an empty composer) opens an Amp-style palette: channel search across all sessions, agent configuration, appearance/profile/notifications settings, a keyboard shortcuts pane, 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), leave # channel (archives instead when you're the last human member, since the relay refuses to remove the last owner), archive # channel, and pin/unpin. While typing, an action verb typed literally ("archive", "leave", "pin"…) ranks first, then matching channels, then incidental action matches.
• Archiving or leaving a chat lands on the most recently active non-pinned chat (fresh composer only when none remain).

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 (~32px residual clearance when the 56px community rail absorbs most of their footprint).
• The top bar is two columns aligned with the panes below: "buzz · developer mode" sits over the channel list and the active/previewed channel name + member summary sit left-aligned over the transcript — tracking the navigator divider live while it's dragged. The transcript itself carries no duplicate channel name/topic header.
• No key hints in the UI: the composer hint footer, navigator footer, and top-bar shortcut labels are gone. Typing ? in an empty composer (or the palette's "keyboard shortcuts" entry) opens a shortcuts pane listing every dev-mode binding.
• 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. Mentions matching one of the message's p-tag members render as plain colored text in that author's chat color (no box); multi-word agent names like amp (local) are matched longest-first. On human-authored messages, 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. Agent-authored messages keep their mentions inline in the body as normal colored text.
• #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 and link labels wrap 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.

Channel members & join/leave narration

• The top bar shows who is in the chat at any scale: small channels (≤4 members) list every name in its author color; larger ones collapse to a compact N members count read straight off the channel record — a 1000-member channel never fetches its roster just to render the header. Both refresh live off the same membership invalidation the standard UI uses.
• Clicking the member summary (or the palette's view members action) opens a searchable member browser in the command palette: colored names with role/agent details, filtered as you type, rendering capped at 40 rows with a "type to narrow" overflow hint so huge rosters stay responsive.
• Member joins/leaves render in the channel: kind:40099 membership system messages (already fetched in the channel timeline) now render as muted narration rows (→ alice joined, ← bob left, removed by …) interleaved chronologically with the prompt cards. Card ↑/↓ navigation skips them.
• Departed members no longer appear in the member list, so their names resolve through a batch profile lookup fallback in useMemberNameResolver.
• New Playwright regression test (dev-mode-members.spec.ts, smoke project) plus unit tests for the 40099 payload parser.

@user mentions

• Typing @ in either dev-mode composer autocompletes users: current channel members rank first, then relay-wide search_users results (self excluded). ↑/↓ select, Tab/Enter insert @Display Name , Esc dismisses — same keyboard contract as #channel autocomplete.
• Accepted mentions stay as plain text in the message; at send time any accepted @Name still present emits a ["p", pubkey] tag (multi-word names match longest-first; editing a mention away drops its tag; user@example.com never triggers).
• Mentioning a non-member best-effort adds them to the channel (mirroring how the targeted agent is auto-attached); a failed add never blocks the send — the p tag still goes out.
• New Playwright regression test (dev-mode-mentions.spec.ts, smoke project) plus unit tests for mention extraction.

Notes

• Monospace text renders in JetBrains Mono (bundled via @fontsource-variable/jetbrains-mono, wired into Tailwind's font-mono stack with the system stack as fallback).
• Display style persisted in localStorage (⌘⇧D toggles); standard UI untouched.
• Validation: pnpm typecheck, pnpm check, pnpm test (3826 pass), cargo test -p buzz-acp (639 pass), pnpm build all green.

Linear: AGNTOPS-354

Parent & sub-channels (agent sessions)

• Channels can now have sub-channels, identified purely by naming convention — parent-slug--sub-slug, one nesting level — so the relay is completely untouched and existing clients keep working.
• Only main channels appear in the left navigator; a parent row aggregates its whole family's latest activity and unread state. Opening a channel shows tabs across the top (main, then each sub's suffix, unread dots, + sub) — horizontally scrollable and built off a single-pass parent/child index, so parents with hundreds of subs stay cheap.
• + sub (tab strip or palette "new sub-channel" action) drafts a prompt; Enter creates the child (inheriting the parent's visibility/type), sends the prompt there, posts a spawn announcement in the parent, and records the relationship + report-back contract in both channels' canvases. Children get LLM-generated names via the same naming path as new channels (renaming only the suffix); sanitizeChannelName now guarantees generated names can never contain --.
• Membership invariant: every sub-channel member must belong to the parent (parent members need not join every child). Enforced client-side — the palette's add-member search inside a child only offers parent members, the selected agent is added to the parent first, and mentioned non-parent users are skipped from auto-add.
• Renaming a parent cascades to all children (suffixes preserved) with bounded concurrency; partial failures warn without rolling back the parent rename.
• CLI/agents: buzz channels create --parent <channel> mirrors the same contract — parent resolution by id or name, caller-membership check, slug sanitization, no nested children, inherited type/visibility, spawn announcement + canvas updates. The ACP base prompt documents how agents spawn sub-channels and report completion back to the parent.
• New Playwright suite (dev-mode-sub-channels.spec.ts): children hidden from the navigator + exposed as tabs, + sub creation with parent announcement, palette action.

Tabs UX: keyboard cycling & terminology

• User-facing "sub-channel" copy is now "tab" — the tab strip button reads + tab (test id dev-mode-new-tab), and the palette action is "new tab in # channel" with a ⌘⇧T hint. Internal naming (parent--sub slug convention, canvas metadata, CLI --parent) is unchanged for relay compatibility.
• ⌘⇧T starts a new-tab draft; ⌘[ / ⌘] cycle backward/forward through a channel's tabs (main + subs), wrapping at the ends.
• New-tab drafts get an obvious visual treatment: a highlighted banner above the composer ("new tab in # channel · esc cancels") plus a tinted composer background, instead of only a placeholder change.
• Window-level dev-mode shortcuts (⌘K, ⌘N, ⌘T, ⌘⇧T, ⌘[/⌘]) are consolidated into a new useDevModeShortcuts hook.
• E2E coverage extended: draft banner + Escape cancel, palette "new tab" search, ⌘⇧T, and ⌘[/⌘] wrap-around cycling.
• Palette rename: "rename # channel" switches the palette into a rename mode — type the new name, Enter applies. Names are sanitized to kebab-case and de-duped. Renaming a tab edits only its suffix (the parent-- prefix is the parent link); renaming a main cascades to its tabs via the existing useUpdateChannelMutation plan, with an active channel-list refetch so the family stays intact in the mounted dev-mode UI.

Contextual unread indicators that bubble up

• Unread state bubbles up the hierarchy: a main channel's navigator row lights up when any of its tabs has an unread post or any thread in the family has unread replies — not just for top-level posts in the main channel. Channel-level and thread-level read state stay distinct (topLevelUnreadChannelIds vs. full unread set).
• Contextual indicators at every level: tabs keep their unread dot while a nested thread inside them is unread (even the active tab); prompt cards show a thread-unread dot; the collapsed "… N more replies" affordance gets unread styling when hidden replies are unread.
• Attention routing: opening an unread channel from the navigator (click or Enter) routes directly to the unread tab. The newest unread thread's side chat auto-opens only when its unread replies are collapsed (a human already responded in the thread); unread replies that render inline in the main chat view — the leading agent run — are marked read just by viewing the channel, so no side chat is forced open for them. Direct destinations stay exact — tab clicks, palette opens, ⌘[/⌘], and ⌥↑/⌥↓ never reroute.
• Precise read advancement: rendering a card's inline replies advances thread read state only through the visible run (shared selectInlineVisibleCount helper) — collapsed replies stay unread until the side chat is actually opened. Channel previews from the navigator never clear read state.
• New projection helpers (unreadThreads.ts: selectUnreadThreadRoots / findUnreadFamilyTarget) with unit tests, a useUnreadRouting hook resolving families via the existing single-pass SubChannelIndex, and a new Playwright suite (dev-mode-unread.spec.ts) covering bubbling, routing, and read-state distinctions. Shell focus/refocus logic extracted to useShellFocusGuards to keep DevModeShell under the file-size limit (no behavior change).

Included from PR #3335

• Cherry-picked the notification-sound cleanup from fix(desktop): clean up clicks and artifacts in all notification sounds #3335 (de-clicked/faded all 12 sounds, regenerated waveform SVGs) so this branch's builds ship the fixed audio.

Media attachments

• Paste an image or video into either composer (main channel or side chat) to attach it: pending attachments render above the composer with image previews / video filename labels, per-file upload progress, error state, and remove buttons. Enter is gated while uploads are in flight; failed sends restore both text and attachments.
• Sends use the existing pipeline — useMediaUpload + buildOutgoingMessage with NIP-92 imeta tags plus standalone markdown media lines — so attachments are fully compatible with the standard UI and other clients.
• In both transcript panes, imeta-tagged media and standalone ![alt](url) lines render through the shared Markdown renderer: images open in the standard lightbox, videos get native controls, and everything stays constrained to pane width. Media-only sends work inside an existing channel (a brand-new channel still needs prompt text for naming).

Palette: join channels you haven't joined

• Palette search now includes open channels the user hasn't joined (already returned by get_channels): they surface only while typing (a relay can have hundreds), labeled "not joined · enter to join", ranked below joined channels. Enter joins and opens in one step. Foreign parent--sub tabs stay hidden unless you're a member of the parent (membership invariant). The left navigator still shows joined channels only.

Developer-mode community rail

• The community picker (multi-community rail) gets a developer variant when dev mode is active: flat squared monospace tiles with border-based active/hover states, squared unread badge/dot, dashed-border add button, and the dev shell's gray background — no Discord-style rounding or color pop. Standard mode is untouched, and all behavior (switching, drag-reorder, context menu, unread indicators) is shared between variants.

Authenticated link labels (Slack, Google) + copyable link URLs

• Slack permalinks and private Google files sit behind auth walls, so the generic title fetch showed "Sign in to Block". A new fetch_agent_link_label Tauri command resolves labels through the locally installed sq agent-tools CLI first: Slack channel messages label as author in #channel, DM messages as author with partner, bare channel links as #channel, and Google Docs/Drive/Sheets/Slides show their real file title. Everything is best-effort — missing sq, CLI errors, and timeouts fall back to the generic page-title path, and CLI errors never surface in the UI.
• The generic HTML title extractor now rejects auth-wall titles ("Sign in…", "Log in…", "Login…") so an unauthenticated fallback renders the bare URL instead of a login page title.
• Copying a selection containing a transformed link now keeps the URL: dev-mode links carry a data-dev-link marker, and a shell-level copy handler rewrites text/plain so each link serializes as its href (surrounding text preserved) while text/html keeps the pretty labels for rich paste targets. Previously copying a link title could paste as nothing.
• Native text selection includes links: the link anchor previously rendered as an atomic inline-flex box with a truncating span, so double-click-drag / triple-click selection skipped it entirely. It now flows as plain inline text (labels wrap with the message instead of truncating), so system selection gestures pick up the link — and the copy handler puts its URL on the clipboard.

Per-channel composer drafts

• Message drafts are scoped per channel instead of following you across channels (AGNTOPS-396, requested in #buzz-dev-mode--per-channel-message-drafts): an in-memory draft map keyed by channel ID stashes the composer text when you switch away and restores that channel's own draft when you return. The fresh/new-session composer keeps its own separate draft slot.
• Sending consumes the origin channel's draft; a failed send restores the prompt to the channel it was sent from, even if you've navigated elsewhere meanwhile. Switching channels mid-e edit preserves the pre-edit channel draft rather than leaking the abandoned edit buffer.
• Drafts survive display-style toggles (module-level store, not component state) but intentionally do not persist across app restarts.