Five dashboard mockups for the web interface
Each design is a complete, navigable prototype of the same feature set with the same sample data. The landing page in every one is the control board from owner decision MOSAIC-STACK-D-001: running agent sessions across projects, with a section for what is waiting on you. Pick the shape you want to iterate; the details inside it change next.
Prototype only. Every button and form is simulated and says so. No backend, no credentials, no v1 code. Feature status tags come from FEATURES.md; the design brief is in DESIGN.md.
Appearance for all designs
These choices open each design with that palette, mode, and state. Inside a design you can change them again from Settings. Manrope is the typeface throughout; the wordmark is a text placeholder until identity work lands.
The five designs
Review script (about ten minutes per design)
- See what needs you. Land on the control board. Can you tell within three seconds how many things are waiting and which one to open first?
- Check a running session. Open Darkwing in mosaic-stack/sessions. Notice the configuration-changed notice. It should inform, not block.
- Launch with a conflict. Go to Launch, keep Dewey in mosaic-stack/wui, submit. You should get a conflict with an offer to connect, and nothing launched twice. Then pick the retired workspace archive-2025 and submit to see a refusal.
- Find work. Open Work and filter by project. Expand a task to see mission, dependencies, and evidence.
- Change appearance. Settings: change palette and mode. Reload the page; the choice should persist.
- Break it. Set the demo state to Error and look at the control board. The message should say what failed and what is unchanged.
- Phone width. Narrow the window to under 700 px. Navigation should still reach every page.
- Keyboard only. Tab from the top. Skip link, navigation, every action, and Escape to close anything open. In Console, press Ctrl+K.
What differs, what is shared
Shared across all five: route map, sample data, feature status tags, states (loading, empty, error, refusal, disabled), Manrope, ten palettes, three modes, keyboard access, and the simulated-action rule. What differs is the shell and how the control board organizes attention.
| Design | Best when | Trade-off |
|---|---|---|
| Rail | You live in it all day and want stable navigation on any width. | The rail costs width on phones; it becomes a drawer there. |
| Deck | You glance at it a few times a day and want the waiting row to shout. | Cards use more vertical space than a table for ten or more sessions. |
| Console | You run many sessions and prefer keyboard and density. | Densest and least forgiving on a phone; the inspector becomes a sheet. |
| Board | You think in states and want to see load per column at a glance. | Five columns need 1440 px or more to sit side by side; below that they scroll. |
| Stream | You check from a phone often and want an inbox plus a timeline. | Less structure for comparing sessions side by side. |