jason.woltjeandClaude Opus 5.5
1f4882d2b4
Brand board revisions, the five dashboard mockups with their verify
script and evidence, the slice 1 S5 design note (SLICE1-VIEWS.md, rev 3
plus the S2c section 10 update), the Console mockup of inbox, tasks,
agents and trail (mockups/slice1/) and checks/slice1-verify.mjs (16
checks; check 16 pinned to bus at d27042fa). Also the CHAT-03 progress
log and the 2026-09-26 dirty-tree manifest. Design and evidence only;
no package code. Row 40 (#1522), committed on its own at Sage's
direction, 2026-10-09.
Co-Authored-By: Claude Opus 5.5 <[email protected]>
68 lines
5.5 KiB
Markdown
68 lines
5.5 KiB
Markdown
# 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.
|