activeStage 2 bake-offs + Stage 3 composed mocks built and deployed 2026-09-30, layer 0.9.23created 2026-09-28· last activity 2026-10-27· mode: archaeology → assemblage (alchemy for the new visual forms)
Design the three qdash "Design in progress" landings: Home `/`, `/inventory` and `/team`. Each is a 30 ft (300 ft for Home) view of its domain, made more of images than of text.
New in this cycle: Home composed as a showroom floor: six exhibits from the bake-offs in the qdash shell, re-lit through five specialist lenses (?as=)
Why
On 2026-09-26, c92's team-nav thread split the old Fleet Overview / Inventory into Home, /fleet, /inventory and /team, and all four became placeholders. About ten earlier cycles designed "the landing" under other names (Fleet Overview, Index Overview, Teams & Users, Users/Devices, Agent Inventory). Each was aimed at one surface that has now split in four, and none reached a pick. The children (11 listings) are built and each has its own band. What's missing is the overview a user lands on: the shape of each domain, and doors into it.
Objective
Stage 0 (done): a per-page design brief and a per-page block wireframe, grounded in prior work and in the data the app serves today. Then Mark's rulings → visual bake-offs → composed mocks for all states → a port into qdash.
kick-off (2026-09-28): four research sweeps (prior Home, Team and Inventory work; the Fable app's data surface) and a founding-docs review. Wrote plan.md, prior-work.md, viz-opportunities.md (altitude ladder; 20 opportunities T1–T7 / I1–I7 / H1–H6 with data status), the briefs (team · inventory · home) and the wireframes (team · inventory · home). Eight questions are open for Mark, led by what happens to /fleet, the fourth placeholder.
Home = showroom floor with portals, with specialist lenses later (Seen as:); the Home brief and wireframe were rewritten.
Explore beyond current data; X1–X9 were added to viz-opportunities.
Design site first, /pages pattern, overview registry group.
Endpoints and Sessions stay under Team.
plan.md now explains the altitude rule (pros and cons; recommends "labels yes, bands no"), c67, and the time-window question. Five items remain open.
rulings round 2 (2026-09-28):
The altitude rule is relaxed into the abstraction ladder: the same data is shown more abstractly at higher altitudes, and each number is still computed in one place.
c67's strip, lens set and horizon ideas are pulled in to the Team bake-off and the Home lenses.
Landings obey the period pill.
All five Home specialist lenses are in scope.
The factory floor is an idea, drawn eight ways (A–H) in landing-fleet-directions.
team-lens-bakeoff (2026-09-28): the shared fixture world app/data/landing-fixtures.ts has scale 20 / 200 / 1,500, state attention / clear / first-run, and period 24h / 7d / 30d. It carries eight team lenses with colour jobs (volume · share · risk · gap) and a derived verdict. Bake-off #1 is /pages/phase3/landing-team-lens-bakeoff (registry overview, phase 3), four forms on one control row: A tile map (squarified, area = people), B the c67 lever strip, C swarm rows (a dot per person), D team × lens matrix. It also has a lens ledger with my keep/move reads and six judging prompts. Early findings:
Worst-severity toning saturates at 1,500 people, when most teams hold one critical.
First run renders as one big box. It needs a designed attribution-debt state, not a lens.
phase3 (2026-09-30): Mark asked for "a phase 3 to the pages index". Added the phase3 PagePhase (registry type + pageHref, subjects.ts path match), a Phase 3 card on /pages, and /pages/phase3 listing the c100 pages. The bake-off moved to app/pages/pages/phase3/, and its old flat URL is retired (it was two days old and never captured). Every c100 mock goes here from now on.
tilemap-variations (2026-09-30): Mark asked for variations on Form A (prompt · plan). They are at /pages/phase3/landing-tile-map-variations, and every map is one design-local component, <LandingTileMap> (app/components/landing/TileMap.vue).
§1 Ink. Tiles can be grey, grey + status, or a hue picked from swatches or a free picker. The colour ramp is smooth or stepped (3 or 5).
§2 Size ladder. The map runs from full width × 380 down to a DataMachine (200 × 88), a table cell (120 × 36) and a 48 × 16 glyph inside a sentence.
§3 Labelling at DataMachine size. Six strategies: silent + note, numbered key, callouts, highlight, other bucket, paired list.
§4 Spin. Four layouts, area by people or by the lens, three fill styles, people nested inside the tiles, eight-lens small multiples, and morph.
Early findings:
Grey needs reversed text ink: in dark mode the strongest grey tiles are light.
Critical vs elevated survives grey only as a mark; the corner notch does that job.
At 1,500 people, Waste saturates just as Violations did in bake-off #1.
The other bucket's roll-up tile can become the hottest tile on the map.
matrix-variations (2026-09-30): "Apply same prompt to Team × lens matrix" (prompt · plan). The page is /pages/phase3/landing-matrix-variations, and every matrix is <LandingMatrix> (app/components/landing/Matrix.vue). Ink moved into app/data/landing-ink.ts, shared with the tile map, and adds diverging tones: worse is filled, better is hollow.
§1 Ink. Grey makes the matrix one picture. Per-job ink makes it read as eight separate charts.
§2 Size ladder. It runs from the table down to a DataMachine texture, with a one-row team fingerprint in a sentence and in a listing column.
§3 Labelling at DataMachine size. Six strategies, including labelling the short axis by transposing: lenses as named rows, teams as unlabelled columns.
§4 Spin. Normalisation (per column, per row, rank, deviation from median), Bertin ordering including greedy seriation, cell marks (fill, dot, bar, numerals), row height = people, reader groups + focus column, and morph.
Early findings:
A one-row fingerprint is the matrix's gift to other pages: a candidate /team/teams column.
At 1,500 people the flag count saturates ("40 of 40 teams flagged").
Unassigned has to be pinned last, or seriation leads with it.
leverstrip-variations (2026-09-30): "Same treatment to the lever strip, try adding a select to some variations for choosing the lens" (prompt · plan). The page is /pages/phase3/landing-lever-strip-variations. The chips are <LandingLeverStrip>, and the drawing inside each chip is <LandingLeverMicro>. A new app/data/landing-story.ts holds each lens's headline, one-line story, story order and lever verb. Lens selects (UxSelectInline) sit in every DataMachine's #title-right and on most variation headers. Each follows the page lens until you pin it to its own.
§1 Ink. Grey moves severity into shape: critical = a filled square, elevated = a hollow square, a hot person = a square.
§2 Size ladder. It runs from every chip down to a rail, the top four, DataMachine rows, one pill, and a glyph.
§3 Which chips at DataMachine size. The strip labels itself, so the small-size problem is selection, not labelling. Six strategies: top 3 + more, span, names only, micro only, lever verbs, ticker.
§4 Spin. Chip shape, a micro-form picker, chip ground, sort + pins, multi-lens chips per reader, department groups, and FLIP morph.
Early findings:
Only 5 of the 8 lenses are levers (Violations · Coverage · Waste · Active · Retention). Usage, Spend and Harness are readings.
Tinted chips are a sorted tile map with equal areas.
Follow-up, title switcher (2026-09-30): Mark asked for "a DataMachine pattern where the title is a dropdown", with the lever strip's cards as the first instance. It is two layer changes (released in 0.9.23):
DataMachine #title replaces the title text and keeps the title's type. The title prop becomes optional, and a standalone card is now max-w-full.
UxSelectInline inherit makes the select take the surrounding type, with the caret scaled to 0.5em.
The configuration is <template #title><UxSelectInline v-model … inherit /></template>.
The rule: use #title when the choice changes what the card is, and #title-right when it changes how the same subject is shown.
Documented as a copyable DataMachine demo preset (per component_philosophy §4 "base + curated presets") plus a #title overflow scenario, UxSelectInlineinherit scenarios, registry slot and prop entries, and layer CLAUDE.md migration notes. All 7 DataMachines on the lever-strip page now use it.
Follow-up, switch jitter (2026-09-30): switching the lens moved the card through four sources:
the card width (322–351 px)
the headline width (35–131 px, so the drawing started anywhere from 59 to 155 px)
the name column
the value column
The rule is to size to the domain, not the selection. Three pieces implement it:
layer DataMachine fill: the card takes its column; the default shrinks to fit
layer DataMachine reserve: the value slot is held at the widest option's headline
LeverStrip columnsFrom: row columns are sized over every team × lens
Mark chose "the value takes min space, the drawing expands" as the default. The card and columns stay fixed and the bar absorbs the difference; reserve stays as the no-motion alternative. §3 has Card width (Fill / Shrink to fit) and Value (Min / Reserve widest) controls.
Follow-up, fade (2026-09-30): a new layer prop, DataMachine fadeKey. When the key changes, the description and body fade out and back in (out-in, 250 + 250 ms, the brand's 500 ms content transition). The title row stays put, so the select keeps focus. It is on every title-switcher card and in the demo preset. Grouped cards still align.
Follow-up, Harness parameter (2026-09-30): the Harness lens was unreadable. It is "Claude Code's share of each team's tokens", but the card only said "Harness", and the harness was a hidden page-level picker. Mark's fix is a harness select in #title-right, shown only on Harness, with per-card harness state. The pattern rule is refined: #title picks the subject; #title-right picks a parameter or view of it; a subject with a parameter carries both. fadeKey covers subject + parameter. Also added: a DataMachine demo scenario and layer CLAUDE.md wording. Still open from the critique: the Harness row mixes token share (the value) with adoption (the dots), and the log-scale swarm is hard to read at 16 px, so a share meter would fit better.
Follow-up, the meter formalized (2026-09-30):
Harness now draws a share meter instead of the log-scale swarm. The value and the drawing say the same thing.
The black-and-white Coverage bar became a layer option, UxPercentBar outlined: the unfilled rest is an outlined surface track, and with solid + thin it's the meter. LeverMicro's meter now is<UxPercentBar solid outlined thin /> everywhere (Coverage, Active, Retention, Harness), and the design-local mono flag is gone.
"+N more teams" is a button: it opens the rest into the list and folds back ("Show top 6").
Also documented: a UxPercentBar demo scenario, the registry entry and a layer CLAUDE.md note.
bakeoffs (2026-09-30): Mark asked to "proceed to the next pages following the same deeply researched / introspective approach" (bakeoffs-prompt.md). Four research passes produced research-{people-field,inventory-estate,fleet-floor,home-lenses}.md, and bakeoffs-plan.md set the page contract and rules. The shared world grew landing-estate.ts (devices, installs incl. the shadow Hermes, harness → provider → model flows, accounts, MCP servers, skills, arrivals, exits by data class, shifts, attention reasons, identity-known-but-unseen people) and landing-viz.ts (inks, colour jobs, squarify, unit grid, frame components).
Built by the main thread: #2 landing-team-people-field (5 forms) and #8 landing-beyond-data (X1–X9 with keep / maybe / kill).
Built by parallel background builders: #3 landing-inventory-estate-bakeoff (alluvial · bowtie · switchboard · pixel body), #4 landing-inventory-supporting (4 cards × best-prior vs fresh), #5 landing-fleet-directions (A–H incl. live qmap), #6 landing-fleet-supporting (who-runs-what, shifts, loading dock), #7 landing-home-lenses (showroom + 5 lenses, ?as=, c67 graduates per lens).
All eight are registered as phase 3. Every page was checked headless at 1440 with no console or hydration errors, and #1, #2 and #8 were also checked in the browser pane.
bakeoffs-review.md collects every recommendation, the convergences (one pixel language for Home; the Claude Code question lives in Fleet F2; a first-run hero per page), five rulings to make, and the shared-module backlog.
Follow-up, hover breakdowns (2026-09-30): every lens's hover now breaks the row's drawing into its people, with the ones to act on first:
Coverage: devices per person
AI usage / Spend: people largest first, bar vs the team's top person, value + share
Violations: findings per person, critical then oldest
Waste: the reclaim list: idle seats, most money first
Retention: lapsed first
Active: idle first
Harness: each person's harness mix as a stacked bar
It's a design-local component, LandingHoverBreakdown (app/components/landing/HoverBreakdown.vue, a layer candidate beside UxPopover once qdash needs it). It provides the frame (24 px title, header lines), the columns (about 12 rows each, widening to the window, 28 px gap), the placement (above the pointer from its measured height, below when there's no room) and the extra bottom air. The page supplies #summary="{ width }" (the full-width drawing) and #row.
Follow-up, into the layer + shared (2026-09-30): the hover card became the layer's DataHoverBreakdown (components/data/HoverBreakdown.vue, released in 0.9.23), documented on the design site: registry entry, /components/data/data-hover-breakdown demo (interactive + pinned, empty / minimal / long-title / typical / overflow), index entry. Its width rules:
a one-line title, truncated only at maxWidth
the card sizes to its content, at least its columns, up to maxWidth
The per-lens builders moved out of the lever page into a design-local wrapper, LandingTeamBreakdown (app/components/landing/TeamBreakdown.vue). The three variation pages share it:
lever strip: every chip
tile map: every tile on the page lens; a folded "+N teams" tile gets a plain card
matrix: every cell on its column's lens, so one matrix gives all eight breakdowns
hover-breakdown (2026-09-30): "integrate DataHoverBreakdown into the various pages where appropriate" (prompt). The component is the layer's (released in 0.9.23) and was extracted by the sibling lever-strip thread. Every hand-rolled tooltip on the eight bake-offs is now DataHoverBreakdown. The rule: a mark that aggregates hovers into what it's made of, the ones to act on first; a single thing gets the same frame, plain.
#1 team marks and matrix cells use the sibling's LandingTeamBreakdown on the mark's lens.
#2 team labels → people, trouble first, with a state-composition bar.
#8 X2 seat rows → the idle seat-holders.
#3/#4 harness, provider and model nodes, ribbons, switchboard cells, body limbs, visibility rows, provenance buckets, arrival days and account bars → their installs, people or assets. Adds personChainOf / providerUsers / rollup to landing-inventory-data.ts.
#5/#6 zones, stations, loom cells, dial petals, matrix cells, heat cells and dock doors → people, machines, data classes and sending teams. Fleet builds its own cards, since its marks are per machine, and keeps them in landing-fleet-data.ts.
#7 every exhibit mark, lens-aware. Org tiles use LandingTeamBreakdown; queue rows stay plain.
Headless hover passes found no clipped cards and no console or hydration errors. Open: the Fleet directions page redraws in ~500 ms per pointer move in headless Chrome, likely qmap's software WebGL. Check it in a real browser.
mocks (2026-09-30): "create a place to mock up phase 3 landing pages (index, inventory, teams) … composing these out of our various experiments" (prompt · plan). Stage 3 workspace:
/pages/phase3/mock (Home), /mock/inventory, /mock/team, /mock/parts (the parts bin, every part live with its source).
The qdash shell: layouts/landing-mock.vue; LandingMockSidebar mirrors the current AppSidebar; LandingMockBar is mock-only (world knobs, show parts, parts bin).
One URL-backed world across the mocks (useLandingMock, ?scale/state/period/parts).
LandingMockSlot names each block's source and swaps variants in place (?v.<slot>=).
Parts manifest: landing-parts.ts + one per area. The Phase 3 index gains a "Composed mocks" section above the experiments.
First compositions (v1 per bakeoffs-review) by three parallel builders; the bake-off pages stay as the experiment record. 33 parts in the bin (3 shared · 6 team · 10 inventory · 17 home).
Team: verdict · lens hero (tile map · lever strip · matrix, via the sibling components; ?lens= / ?harness=) · people (field + needs you · blocks · skyline) · four doors.
Inventory: verdict with "Onboard" · estate hero (alluvial · switchboard · bowtie · pixel body; lens on the hero) · supporting 2×2 (collapses to one line when all clear) · census band (off by default) · seven doors · a designed first-run discovery strip.
Home: Seen-as with per-lens counts · verdict/caption · queue (lenses only) · six exhibits (floor + org: as built · pixels) · lens feature panel · week · trust (promoted when the eyes are broken) · first-run discovery.
Checked headless across states and variants with no console or hydration errors. Fixed one drift: the Teams door and the verdict ranked violation teams differently (22% vs 25% at 1,500); both now rank by open count.
Open for Mark: the Team hero is greyscale (the variation pages' XL setting) while Home's org exhibit is grape; the lever strip renders client-only (a server/client mismatch in the sibling's LeverMicro "clear" state); Home's floor-drawing code is copied from bake-off #7 into landing-home-parts.ts (not exported).
team-lens-cards (2026-09-30): Mark: "In the hero section, also add an option that pulls from the phase3/landing-lever-strip-variations option 1 … Create one for each of the lenses. Don't have title be dropdown … should create a three column layout."
New part LandingPartTeamLensCards: one DataMachine per lens (AI usage · Spend · Active · Violations · Coverage · Harness · Waste · Retention) in three columns. Each card holds the lever-strip §3 strategy 1 "Top 6 + more" rows (rows built as that page's buildStrip), with a plain title and the harness named in the Harness card's description.
Offered as the fourth Team hero variant, ?v.hero=cards. Team tiles and the people field are now grape (Mark, same day).
Open: the Active / Coverage / Harness / Retention meters stay black — they're the shared c100 meter (UxPercentBar solid, drawn by the sibling's LeverMicro), which doesn't take the ink.
team-lens-cards grouped (2026-09-30): Mark: "add another option with just three cards each with a title dropdown, maybe group the types of info per card." LandingPartTeamLensCards mode="grouped" (hero ?v.hero=cards3) shows three cards, each titled by a UxSelectInline scoped to its group. The picks live in the URL (?v.adoption= · ?v.cost= · ?v.risk=), a reserve of the group's headlines keeps the value slot steady, and the Harness pick adds the harness select in #title-right. Groups:
Adoption: AI usage · Active · Retention · Harness
Cost: Spend · Waste
Risk: Violations · Coverage
shipped + documented (2026-09-30):
Committed as design c3e9202a and deployed.
The live site lost every hover card and title switcher: npm run deploy builds against the published layer, and all of c100's layer work was still uncommitted. Released layer 0.9.23 (DataHoverBreakdown; DataMachine #title / fill / reserve / fadeKey; UxPercentBar outlined; UxSelectInline inherit), refreshed the lockfiles in all five consumers, and redeployed (design 56ce1068). Lesson: release the layer before deploying design pages that use it.
Visual record:
heroes + fulls of the 11 bake-off and variation pages
a 13-shot program of the composed mocks (scripts/shot-programs/c100-landing-mocks.json): Home showroom / Security / Finance / pixels / first run · Team matrix / lens cards / 3 cards / tile map at 1,500 · Inventory alluvial / switchboard / all clear · the parts bin
Archive entries 2026-09-30-c100-landing-bakeoffs and -landing-mocks.
Mark, same day: the Team mock's People slot defaults to skyline (?v.people=field keeps field + list), the Team hero defaults to the matrix (?v.hero=tilemap keeps the tile map), and /pages lists Phase 0 first and _meta last.
trend-variations (2026-10-01): origin c103 todos plan 03 Part B — Mark's 2026-09-30 Teams block, "explore showing Roll down and historic … Volume over perfection" (prompt · plan; record in c103 CYCLE.md). The page is /pages/phase3/landing-trend-variations, Now + Trend — Variations. New fixture app/data/landing-trend.ts gives c100's world the daily series it never had (person → install → harness type → provider → model, every rollup a sum) plus a dated seed snapshot of real Meridian per-team cost (landing-trend-seed.ts, :7882, 2026-10-01). Parts in app/components/landing/trend/: LandingTrendSpark (the qdash Spark replica), LandingTrendDraw, LandingTrendForm, LandingTrendRollDown.
§0 the Teams page as c103 Part A shipped it · §1 F0–F21 plus Activity's history row (AH, Mark's lean, 2026-10-01) · §2 seven roll-downs with history · §3 table cells · §4 breakdown over time (team → user · harness type → install · provider → model) · §5 toggles and title switchers · §6 a degradation lab with three auto-checks per cell · §7 keep / maybe / kill ledger.
Levers in the URL: metric · subject · grouping · world (seed / 20 / 200 / 1,500) · window · trend window (follow the pill ⇄ fixed 90d) · Δ basis · state · gaps · volatility · ink · labels. A day not collected is a gap or an em-dash, never a zero.
Shots scripts/shot-programs/c103-trend.json (cycle c103). Open: AH rides on uncommitted layer props (legendWrap, history-graph hover); the ledger reads are mine, for Mark to overrule.
superseded in part by c109 (2026-10-02): Mark ruled (c109 plan §9 Q9):
/inventory and /organization (was /team) are no longer pages. They become nav-only disclosures.
Their overview moves to / as sections of micro DataMachines.
c100's Inventory and Team landing designs are retired. The bake-offs and variation pages stay on the design site as reference; their size ladders and the trend parts feed c109's micro form.
c100 can close on its Home and Fleet findings. The "showroom floor" stays an idea for how / grows later.
Outcome
Visual record
19 captures — heroes, page slices, and full-page renders. Click to view.
Home, showroom: verdict caption over six exhibits (floor, estate, org, …) at 200 people, attention state open page →Team, matrix hero (Mark's default) over the coverage skyline (Mark's default) and the four doors open page →Home seen as Security: the same room re-lit, a needs-you queue and the lens feature panel lead open page →Team hero as lens cards: one DataMachine per lens, lever-strip §3 'Top 6 + more', three columns open page →Home seen as Finance: spend and waste exhibits carry the ink open page →Team hero as three grouped cards (adoption · cost · risk), each titled by a lens select — the DataMachine title-switcher pattern open page →Home with the pixel variants: floor as bake-off #5's pixel field, org as bake-off #2's one org field open page →Home on first run: the designed discovery strip instead of empty exhibits open page →Inventory, alluvial hero with the supporting 2×2 and doors open page →Inventory hero as the switchboard (bake-off #3 form 3) open page →Inventory all clear: the supporting row collapses to one line open page →Parts bin — 3 shared · 6 team · 10 inventory · 17 home, each live with its source open page →Team hero as the tile map at 1,500 people open page →open page →open page →open page →open page →open page →open page →
