UI Interview - V1 Operator Console
Review-state branch packet and visual mockup for the dense desktop Operator Console variation.
Interview stage: `$ui-interview v1-operator-console`, full UI branch-review mode. Stage-zero interrogation completed over two rounds. The current round-2 checkpoint confirmed coverage is complete enough to advance into this UI packet and alignment review.
Interview provenance: live-ui-interview. This page is a pre-approval review surface. It does not write canonical `design/ui-v1-operator-console.md`, the interview log, or flow-tree decision metadata until final compiled YAML approval is provided.
Review Summary
v1-operator-consoleDense data table, persistent split-pane, inline launch row, desktop-dense posture.
Approve, request another iteration, or reject this UI experiment branch.
Approval validates this branch for later prototype screen building. It is not production implementation approval.
Visual Mockup
The mockup renders the intended desktop-dense posture directly. Source artifact:
research/_working/ui-interview-v1-operator-console-mockup.html.
| Status | Name | Tool | Repo | Elapsed | Tokens | Stdout | Actions |
|---|---|---|---|---|---|---|---|
| + New Agent: repo / tool / prompt, then Cmd+Enter | |||||||
Source Evidence
| # | Source | What it provides | Confidence |
|---|---|---|---|
| E1 | design/ux-variations-monitoring-start/v1-operator-console.md | Primary V1 UX variation spec: dense table, split-pane detail, inline launch row, keyboard model, responsive degrade, and prototype scope. | High |
| E2 | design/flow-tree-personal-workstation.yaml | Flow-tree state and sibling branch metadata. | High |
| E3 | design/ux-variations-monitoring-start.md | Sibling comparison and shared branch axes. | High |
| E4 | design/_working/ux-variations-monitoring-start-brief.md | Shared reframe: two-layer surface, folded tool-adaptive detail, all-web PWA. | High |
| E5 | interrogation/ui-interview-r1-v1-operator-console.html | Round-1 assumptions and open UI questions. | High |
| E6 | interrogation/ui-interview-r2-v1-operator-console.html + sidecar | Coverage checkpoint confirmed complete. | High |
| E7 | design/ui-v2-card-mosaic.md | Confirmed sibling/control branch and approval triage caution. | High |
Assumptions Manifest
| ID | Source | Assumption | Decision |
|---|---|---|---|
| A1 | spec | V1 is the desktop-dense Operator Console branch for 8-12 concurrent agents. | Confirmed |
| A2 | spec + brief | S3, S4, and folded S5/S6 collapse into one persistent console route with table plus split-pane. | Confirmed |
| A3 | spec | Dense table, persistent split-pane, inline launch row plus command palette, and desktop-dense posture are fixed for this proposal. | Confirmed |
| A4 | brief | Detail is tool-adaptive, with no user-facing Mode A/B toggle. | Confirmed |
| A5 | research + spec | Single-user personal workstation; no sharing, collaboration, team permissions, or multi-tenant admin UI. | Confirmed |
| A6 | prompt + checkpoint | Coverage is complete enough to build this packet and handle remaining issues as alignment feedback. | Confirmed |
Rendered UI Packet
Parent Flow and Coordination
V1 belongs to monitoring-start, covering the board-monitoring and one-click-start path. It is measured against the already approved V2 control branch and the still-proposed V3/V4/V5 siblings.
Touched flows are approval, recovery, device handoff, diff review, and settings. The V2 approval-triage finding carries forward: V1 can show inline and next approval actions, but blind global approval remains out of scope.
Page Inventory
| Surface | Route / form | Purpose | Success condition |
|---|---|---|---|
| S3 Console table | Single persistent console route | Scan, sort, filter, and triage the fleet. | User identifies waiting, error, and running agents across 8-12 rows in one glance. |
| S4 Inline launch | Pinned editable top row plus command palette | Start another agent without hiding the fleet. | New starting row appears from valid repo, tool, and prompt. |
| Folded S5/S6 Detail | Right split-pane bound by selected row | Work one agent while keeping the fleet visible. | User steers the selected agent and still notices other rows changing. |
| Mobile degrade | Stacked list plus full-screen detail sheet | Preserve monitoring and approval on phone. | User can approve, inspect, and hand off to desktop. |
| Empty state | Single centered start surface | Teach vocabulary before rows exist. | User launches first agent without empty table intimidation. |
Layout and Navigation
- Header: product mark, count chips, approval count, command palette, tunnel state, QR/open-on-mobile, settings.
- Toolbar: first-class global table search, repo/tool/status filters, sort selector, optional recap strip.
- Left pane: fleet table. Right pane: selected agent detail. Default split is about 58/42.
- Primary navigation: row cursor with keyboard and click equivalents; selection binds detail without route change.
- Command palette accelerates launch, jump, filter, sort, approval, stop/retry, and settings, while global search remains visible in the toolbar.
Components and Controls
Fleet Table; Row Cursor; Status Badge; Status Count Chips; Global Table Search; Repo/Tool/Status Filters; Sort Selector; Inline Launch Row; Command Palette; Split Pane; Tool-Adaptive Detail; Terminal Renderer; Structured Stream Renderer; Prompt Injection Footer; Approval Inline Actions; Diff Micro-preview; Guarded Stop; Retry/Restart; Recap Strip; Connection/Tunnel Banner; Empty Console State; QR/Open-on-Mobile; Mobile Stacked Agent Row; Full-screen Mobile Detail Sheet.
| Control | Behavior |
|---|---|
| New Agent row | Expands pinned row into launch inputs; Esc cancels; Cmd+Enter submits. |
| Command palette | Keyboard launcher for new agent, jump, filter, sort, next approval, and selected-row actions. |
| Global search | Filters visible rows across agent name, repository, tool, status, and stdout/stream text; combines with repo/tool/status filters. |
| Row selection | Binds row to right detail pane without navigating away. |
| Row action cell | Performs contextual action without changing current detail selection. |
| Approve | Expands diff peek or confirmation; final confirm resumes row and advances cursor to next waiting row. |
| Reject | Opens inline reason input before sending feedback. |
| Stop | Arm-confirm within 3 seconds for mouse and keyboard. |
| Retry / Restart | Retries failed agent with same prompt or adjusted prompt from detail. |
| Pop-out detail | Gives terminal full width while preserving selected agent and route. |
| QR / Open on Mobile | Generates short-lived handoff link with current selection encoded. |
States and Accessibility
States covered: empty, loading repos, launching, starting, running, waiting, error, paused, idle, done, backend unreachable, tunnel reconnecting, credential expired, OAuth expired, disk warning, browser reconnect, concurrent-device update, hover, focus, selected, disabled, validation error, success, and reduced motion.
Accessibility is baseline: visible focus rings, logical keyboard order, non-color-only state labels, 44px mobile targets, reduced-motion support, icon labels/tooltips, and table semantics that survive virtualization.
Prototype Boundary and Batch Plan
- Batch S3: console shell, header, toolbar, populated dense table, status chips, selected-row styling.
- Batch S4: inline launch row, validation, loading/launching/error states, command-palette equivalent.
- Batch S5/S6: split-pane detail, CLI terminal fixture, API structured fixture, prompt footer.
- Batch States: approval diff peek, guarded stop, retry, backend/tunnel/credential banners, empty state.
- Batch Responsive: tablet column shedding and mobile stacked-list/detail-sheet degrade.
Coverage Checkpoint
- Pages/routes/entry points: covered.
- Primary tasks: scan, triage, approve/reject, retry/restart, launch, drill into detail, hand off to mobile, and recover from connection/credential errors: covered.
- Navigation, hierarchy, density, components, controls, form validation, states, responsive behavior, accessibility, and prototype boundary: covered.
Review risks: dense table intimidation, one-line stdout lossiness, mobile degrade acceptance, and split-pane terminal crampedness.
Proposed Canonical Destinations
These files are proposed only. They are not written until final approval YAML is consumed.
design/ui-v1-operator-console.md- approved UI branch packet.design/ui-v1-operator-console-interview.md- interview log and branch decision record.design/flow-tree-personal-workstation.yaml- V1ui_reviews[],ui_experiments[], and decision metadata.
Approval Gates
Compile Responses
Answer one or more gates, then compile YAML. Complete approval requires all gates answered with no unresolved revision request.