Build UI Screens — V6 Tabbed Workspace

Full clickable prototype of the V6 "Tabbed Workspace" UX variation, built as the project-native route /workspace in the MVP-1 web app, backed by the same live server (WS + REST, mock GitHub mode, seeded fleet) as siblings V1–V5. Built + wired 2026-07-02.

Gate note. user-authorized V6 has no /ui-interview approval in the flow tree (only V2 does). The user's explicit build instruction is the branch authorization, recorded in design/flow-tree-personal-workstation.yaml as decision ui-v6-tabbed-workspace-user-build-2026-07-02. Because the ask was clickable, this pass covers both build-ui-screens (visual batches) and logic-wiring (wired).

What was built

Shell: VS Code-like workbench — persistent live-agent sidebar (full fleet: status dot, tool, repo@branch, elapsed, approval/error/PR badges, repo+branch conflict hints), top tab strip (pinned Board/Approvals + dynamic working set), tool-adaptive central panel.
Tab model: deterministic ids (agent:{id}, diff:{id}, approval:{id}, board, approvals, recap, new-agent) → open = focus-if-exists. Max 6 visible dynamic tabs, searchable overflow menu. MRU focus history drives close-returns-focus; last dynamic close lands on Board. Closing a tab never stops the agent; tabs reconcile only on true agent removal (done/stopped keep their tab as recap/diff starting point).
Server-canonical tabs: {v, tabs, activeTabId, sidebarCollapsed} persisted under settings key workspaceTabs (hydrate-before-write, 800 ms debounced whole-slice PATCH, last-write-wins across devices). Reload restores the exact working set.
S4 New Agent tab: chrome-free form over the shared useStartAgentForm with launch preview and batch-launch mode (repo/tool sticky, prompt clears).
S5/S6 folded detail: terminal-primary (xterm over /ws/term) when the agent has a tmux session, structured stream + timeline otherwise; sockets/subscriptions exist only for the active tab. Inline approval strip, prompt-injection bar, stop/restart, diff tab (per-file DiffViewer + PR link).
Approvals + errors: pinned Approvals queue (decide in place, focus stays in queue, review → detail tab with fetch-by-id fallback), badges in all three places (sidebar row, tab, pinned count); errors badge the Board tab + sidebar without stealing focus.
Keyboard: ⌘/Ctrl+⇧A/B/N (approvals / sidebar / new), ⌘/Ctrl+PageUp/Down (tab cycle), ⌘/Ctrl+1..9 (best-effort jump), ⌥↑/↓ + Enter (sidebar cursor), ARIA tablist roving-tabindex arrows + Delete-to-close.
Responsive: ≥1024 full workbench (collapsible 280px sidebar); 640–1024 icon rail + overlay drawer; <640 bottom nav (Board/Agents/Approvals/Tabs/Launch) + drawers, read-only terminal, short-text prompt bar. Mobile pane state is local; the tab working set stays server-canonical.

Files: 19 new under mvp-1/apps/web/src (stores/workspace.ts, routes/Workspace.tsx, components/workspace/**) + a route/nav edit in App.tsx. No server changes; zero new npm deps.

Build ledger

Batch	Scope	Verified check (live, seeded fleet)	Status
1	Shell + sidebar (S3)	82 seeded agents listed; row click opens/focuses tab; second click dedupes	wired
2	Board panel (S3)	Summary strip counts match store; urgency groups; row click opens agent tab	wired
3	Tab lifecycle + persistence	9 opened agents → 6 visible + searchable overflow (3 items); burst of tab ops = 1 settings PATCH; reload restores working set	wired
4	New Agent tab (S4)	Live simulator launch (approval-heavy) → agent tab active, sidebar row starting→running	wired
5	Agent + diff detail (S5/S6)	Structured stream + timeline update live; prompt injection lands; Open diff opens diff tab	wired
6	Approvals + errors	7 pending approvals badge sidebar rows + tabs + pinned count; approve → count decrements, focus stays in queue; error agents badge Board tab without focus steal	wired
7	Responsive + recap + handoff	1440 workbench / 800 icon rail / 390 bottom-nav postures; mobile Tabs sheet mirrors desktop working set; recap auto-pins after ≥30 min absence; ⌘⇧B rail toggle	wired

Evidence (Playwright walkthrough against the live stack)

Desktop Board tab — Desktop 1440 — pinned Board tab: summary strip, urgency groups, sidebar fleet with badges.

Tab overflow menu — Tab overflow — 6 visible dynamic tabs, searchable Open Tabs menu.

Live agent tab — Live-launched agent tab — structured stream, timeline, prompt bar, header actions.

Approvals queue — Pinned Approvals tab — decide in place; badges on sidebar rows and tabs.

Tablet posture — Tablet 800 — icon rail with status dots; tabs scroll.

Mobile posture — Mobile 390 — bottom nav, full-screen detail, badge counts.

Known deviations / notes

Paused-auth badges are specced but the Agent model has no credential-pause field yet — omitted (same data gap noted by earlier V-builds).
Dirty-diff badge approximated by the PR-open badge; the model does not track uncommitted-change dirtiness.
QR handoff renders on desktop/tablet detail headers (scan lands the phone on the same server-canonical workspace); the mobile posture relies on the shared working set rather than an extra "Open on Desktop" QR, since the tabs already follow the account.
⌘1..9 is best-effort — some browsers (Safari) reserve those; every action has a visible affordance.
Command-palette registration of workspace actions (optional batch-7 nicety) was cut as planned.

Run it: cd mvp-1 && pnpm dev && pnpm seed → http://localhost:5173/workspace. Spec: design/ux-variations-monitoring-start/v6-tabbed-workspace.md.