# Five dashboard mockups: shared design spec (D02)

Author: Dewey. Date: 2026-09-12. Inputs: [FEATURES.md](FEATURES.md), [BRIEF.md](BRIEF.md), [DECISIONS.md](DECISIONS.md), brand.js tokens.
Prototype only. Local HTML, no build, no network, no backend. Every action is simulated in the browser and says so.

## Shared rules across all five

- Typography: Manrope from assets/fonts. Text wordmark "Mosaic Stack". Provisional labeled outline icons from brand.js; every icon has a visible or accessible text label.
- Color: the ten brand palettes and Light, Dim, Dark modes from brand.js tokens. Semantic status colors (success, warning, danger) stay stable across palettes.
- Landing route is the control board (MOSAIC-STACK-D-001). "Waiting on you" is above the fold in every design.
- Every session and work row shows agent, project, workspace.
- Feature legend in each mockup: implemented, planned, proposed, mockup, matching FEATURES.md.
- Widths: usable from 320 px to 3440 px. Layouts use available width; prose is bounded; ultrawide adds columns rather than stretching text.
- Keyboard: skip link, visible focus, all controls reachable in order, Escape closes overlays, hash routes work with the back button.
- States shown in every design: loading, empty, error with recovery, success, disabled, long content, and a refusal (fail-closed) notice.
- No fake completion: the demo "state" switch changes what is rendered; nothing is saved or sent.

## Routes (hash router, shared)

| Route | Name | Primary content |
| --- | --- | --- |
| #/ | Control board | Waiting on you; running sessions across projects; recent settled; quick launch |
| #/sessions | Sessions | All sessions with filters, controller, generation, config check |
| #/sessions/:id | Session detail | Transcript excerpt, goal footer, steering queue, attach as observe or control, config check, evidence |
| #/projects | Projects | Projects with their workspaces, registered agents, missions |
| #/projects/:id | Project detail | Workspaces, registrations, missions, decisions |
| #/agents | Agents | Agent definitions, harness, SOUL revision, where registered |
| #/work | Work | Missions, tasks, assignments, kanban columns |
| #/runs | Runs and evidence | Run records, result.json summary, prune receipts, releases |
| #/messages | Messages | Workspace-addressed threads; comms list |
| #/library | Library | Skills, extensions, packages lifecycle |
| #/settings | Settings | Appearance (palette, mode), accounts by metadata, roles, onboarding |
| #/launch | Launch | Agent, project, workspace, Resume or Fresh, work decision |
| any other | Not found | Recovery links |

## Primary flows to exercise

1. See what needs me: open home, read "waiting on you", open the item, act (approve, reply, connect) in simulation.
2. Check a running session: home row to session detail, request observe, note controller and generation.
3. Launch: pick agent, project, workspace; choose Resume; get an already-running conflict; choose connect.
4. Find work: Work route, filter by project, open a task, see assignment and dependencies.
5. Change appearance: Settings, choose palette and mode; persists locally.
6. Hit a refusal: Launch with missing workspace policy; fail-closed notice with next step.

## Sample data (shared/data.js)

- Projects: mosaic-stack (workspaces sessions, skills, wui), personal (journal, health), acme-ops (ops, social).
- Agents: darkwing (coordinator), dewey (design), rocko (coder), filbert (reviewer), sage (advisor), velma (research), topher (writer).
- Sessions: ten across projects with mixed states: running, waiting on owner, quiet wait, blocked, stalled, settled, stopped. One conflict candidate.
- Waiting on you: five items: acceptance gate, blocked goal report, quiet wait check-in, decision needed, config mismatch.
- Missions, tasks, assignments, decisions, runs, releases, accounts (metadata only, fake markers), skills, messages.

## The five styles

| ID | Name | Navigation | Home composition | Who it suits | Risk |
| --- | --- | --- | --- | --- | --- |
| d1 | Rail | Left icon rail with labels, collapsible; page header with breadcrumbs | Two-column: waiting list left, running sessions table right; ultrawide adds evidence column | Professionals used to Slack, Linear, T3 | Familiar; may feel generic |
| d2 | Deck | Top bar with tabs; content is cards on a fluid grid | Card deck: one card per session; "waiting on you" as a highlighted row of cards | Homemakers, students, mixed audiences | Cards can hide density |
| d3 | Console | Command bar first (Ctrl+K), left project tree, right inspector drawer | Dense table with keyboard row selection and an inspector pane | Developers, operators | Steeper learning curve |
| d4 | Board | Columns by state (kanban), project filter chips across the top | Columns: Waiting on you, Running, Quiet wait, Blocked, Settled; sessions as cards | Project managers, kanban users | Wide layouts; narrow screens scroll horizontally |
| d5 | Stream | Bottom tab bar on mobile, side tabs on desktop; conversation-first | Chronological stream of session events with a pinned "waiting on you" inbox | Personal assistant use, phones first | Weaker cross-project overview |

## Open questions recorded for the owner

- Which of the five to iterate (D05 gate). Answered 2026-09-12: d3 Console, MOSAIC-STACK-D-002.
- Whether the web client should offer control or only observe at first. Answered in the session-chat plan (Q1-Q22): full two-way chat, tools, attachments and native approvals, with enforced controller transfer.
- Default palette and mode remain unselected. Mockups default to Harbor and system preference.