# Dashboard Design Exploration — Visual Diary

**Purpose:** Durable record of the July 2026 dashboard design exploration — 10 divergent concepts converged over 4 rounds into the Altitude Model (Map Ops v4), with screenshots, decisions, and rationale at each gate.

**Dates:** 2026-07-03 to 2026-07-05. **Method:** parallel Fable design agents, one concept each, all working from the shared fixture brief ([BRIEF.md](BRIEF.md)) so concepts compare on design alone. All mockups are self-contained HTML in this directory — serve locally (`python3 -m http.server -d .`) to view; several are interactive.

**Outcome:** converged on **08 Map Ops v4 — the Altitude Model** as the lead candidate for the real dashboard. Next step (open as of 2026-07-07): v2 amendment to `docs/specs/fxit-dashboard-calendar-ui-v1.md` capturing the converged decisions, then Sonnet build dispatch.

---

## Round 1 — 10 divergent concepts (2026-07-03)

Brief: full app shell + dashboard home, desktop-first 1440px, shared Zen fixture data (Fri 3 July: 4 jobs / $1,600, July $18,420 invoiced / $15,960 collected, 6 pending approvals, real 16-agent roster). Voice spread deliberate: some full F*IT cheek, some straight.

| # | Concept | Organising idea | File |
|---|---|---|---|
| 01 | Mission Control | Dark dense command centre, every gauge one screen | [html](01-mission-control.html) / [shot](shots/01-mission-control.png) |
| 02 | The Crew | Nav = staff roster of the 16 agents; home = morning stand-up | [html](02-the-crew.html) / [shot](shots/02-the-crew.png) |
| 03 | Money Cockpit | Cash position is the hero; everything priced | [html](03-money-cockpit.html) / [shot](shots/03-money-cockpit.png) |
| 04 | The Day Board | Today as a 7am-5pm horizontal timeline | [html](04-day-board.html) / [shot](shots/04-day-board.png) |
| 05 | The Morning Brief | Dashboard as a broadsheet The Secretary typeset overnight | [html](05-morning-brief.html) / [shot](shots/05-morning-brief.png) |
| 06 | Triage Deck | Approvals queue IS the dashboard; keyboard triage | [html](06-triage-deck.html) / [shot](shots/06-triage-deck.png) |
| 07 | Ask the Office | Ask bar + agent-attributed answer cards | [html](07-ask-the-office.html) / [shot](shots/07-ask-the-office.png) |
| 08 | Map Ops | Gold Coast coastline as canvas; jobs/leads/rank as territory | [html](08-map-ops.html) / [shot](shots/08-map-ops.png) |
| 09 | The Calm One | Anti-dashboard: one number, one CTA, disclosure | [html](09-calm-focus.html) / [shot](shots/09-calm-focus.png) |
| 10 | The Shed Whiteboard | Shed-wall whiteboard digitised: magnets, marker, stickies | [html](10-shed-whiteboard.html) / [shot](shots/10-shed-whiteboard.png) |

**Gate decision (Rhys):** winners = **03, 07, 08**, with **08 the standout**. Correction applied to round 2: all winners must become **calendar-centric** — the shipped dashboard spec (§5.2) already makes a full-month calendar the cockpit body.

## Round 2 — winners, calendar-centric (2026-07-04)

Added July-month fixture to the brief ($21,340 / 41 jobs, gap days Wed 15+22, rain-risk Sat 4, recurring clients, 6 Aug insurance horizon). Each winner integrated the calendar through its own metaphor:

- **03 v2 — Revenue Calendar** ([html](03-money-cockpit-v2.html) / [shot](shots/03-money-cockpit-v2.png)): month as financial instrument; day values + revenue heat; Coach prices the gap days (~$2,400 unfilled vs the 5 open quotes).
- **07 v2 — Dispatcher's Calendar** ([html](07-ask-the-office-v2.html) / [shot](shots/07-ask-the-office-v2.png)): month as the office's biggest answer card; reschedule-by-conversation with pencil-then-approve round-trip onto the grid.
- **08 v2 — Territory Ledger** ([html](08-map-ops-v2.html) / [shots](shots/08-map-ops-v2.png), [month](shots/08-map-ops-v2-month.png), [Sat-4 rain](shots/08-map-ops-v2-sat4.png)): day scrubber re-renders the map route per day; month = "territory ledger" overlay, revenue as heat, day cells verified to sum to the fixture totals.

**Gate decision (Rhys):** "those 3 are excellent." One improvement named: **see at a glance how booked each day is, so a customer can be slotted while on the phone.**

## Round 3 — availability lens / booking-call mode (2026-07-05)

Added per-day time blocks to the brief (7am-5pm bookable window; durations derived from real rates — window $150/hr, pressure $300/hr; 30-min travel buffers). Three requirements: month cells read time-fill at a glance; one-click day drill to bookable slots; a working find-a-slot mode (job size 2h / 4h / full day highlights fitting days).

- **03 v3** ([html](03-money-cockpit-v3.html) / [shots](shots/03-money-cockpit-v3.png), [call mode](shots/03-money-cockpit-v3-callmode.png)): capacity as unsold inventory — "95h still open to sell" ≈ $17,300 at the month's blended $180/hr; find-a-slot prices what the booking adds.
- **07 v3** ([html](07-ask-the-office-v3.html) / [shots](shots/07-ask-the-office-v3.png), [call mode](shots/07-ask-the-office-v3-callmode.png)): the booking call as literal conversation — ask the Dispatcher mid-call, tappable day+time chips pencil a hold awaiting sign-off.
- **08 v3** ([html](08-map-ops-v3.html) / [shots](shots/08-map-ops-v3.png), [month](shots/08-map-ops-v3-month.png), [call mode](shots/08-map-ops-v3-callmode.png)): fill strips on every ledger + scrubber cell; "Land a job" green-rings fitting days on both surfaces with earliest starts; day drill prices open slots ("fits up to $X window / $Y pressure").

Known seam: the three files disagree on the half-day fit count (16 vs 20 days) — divergent readings of the rest-of-month fill rule. Cosmetic for judging; normalise in the spec.

**Gate decision (Rhys):** loving Map Ops, but structural correction: **the calendar is the most important thing (your future), the map is the day-planning view** — how do we start at calendar month and get to map day?

## Round 4 — the Altitude Model (2026-07-05)

Decision: not a mode toggle, not a permanent overlay — **zoom level is the bridge**. Month = calendar (home screen), day = map (ground level), week = the hinge; transitions animate as altitude change. Map stays ambient behind the month grid so the shell keeps its cartographic identity.

**08 v4 — lead candidate** ([html](08-map-ops-v4.html)):
- [Month home](shots/08-v4-month-home.png) — territory ledger as the landing screen, coastline dimmed behind, MONTH/WEEK/DAY control in the header.
- [Week](shots/08-v4-week.png) — map rises; 8-day strip over day-numbered ghost pins ($7,410 / 19 jobs).
- [Day](shots/08-v4-day.png) — the v3 ground view intact: glowing route, run sheet, priced timeline, intel.
- [Booking-call at month](shots/08-v4-month-callmode.png) — "Land the job" row in the ledger header; fitting days ring green; descending into one lands with the candidate slot pulsing.

All altitude paths verified headless (36/36): month→week→day, month cell direct to day, ESC/breadcrumb ascent, day switching, booking-call descent.

---

## Converged feature set (feed the spec amendment)

1. **Calendar-primary shell** — month view is home; "what's my future" is the first read.
2. **Time-fill month cells** — 7am-5pm booked-vs-open micro-strip per day is the primary signal; revenue value secondary; markers for rain risk, recurring, gap days, overflow Saturdays, Sundays off.
3. **Day drill** — any day one click from month; timeline of booked blocks (client/job/value) + open slots priced by capacity.
4. **Booking-call mode** — job-size in (small ~2h / half ~4h / full day), fitting days highlighted with earliest start; slot selection pencils a tentative hold that rides the approvals queue.
5. **Altitude navigation** — MONTH/WEEK/DAY as one continuous world; map ambient at month, interactive at week, full at day; transitions are altitude changes (300-500ms), not page swaps.
6. **Persistent right rail** — sign-offs + money position at every altitude.
7. **Agent attribution everywhere** — every surfaced insight names its agent (Watcher intel, Coach nudges, Dispatcher weather/route, Shield horizon).

## Process notes (for the next exploration)

- Parallel one-concept-per-agent with a shared fixture brief worked: 10 genuinely different ideas, directly comparable, ~25 min wall-clock per round.
- Winning cadence: diverge wide (10) → pick 3 → iterate the trio against one named improvement per round → converge on 1. Each round's user correction became a brief section, so later rounds stayed comparable.
- Screenshot everything at the gate (including interactive states via scripted clicks) — the stills are what make this diary reviewable without a server.
- Verification discipline: agents self-verified in headless Chrome (render at 1440/1200, zero console errors, banned-character + absolute-claims greps). One agent caught its own quirks-mode bug this way.
- Watch for: parallel agents interpreting a prose fill rule differently (the 16-vs-20 seam) — canonical numbers belong in the brief as data, not rules.