Files
stack/agents/dewey/work/wui/DESIGN.md
T
jason.woltjeandClaude Opus 5.5 1f4882d2b4 docs(wui): Dewey's design work: brand board, five mockups, slice 1 S5 views and checks
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]>
2026-10-09 17:54:50 -05:00

5.5 KiB

Five dashboard mockups: shared design spec (D02)

Author: Dewey. Date: 2026-09-12. Inputs: FEATURES.md, BRIEF.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.