archivedcreated 2026-10-02· last activity 2026-10-02· mode: assemblage: the summary is built from machines that already exist, at a higher altitude. The micro form is a little alchemy.
Replace the Inventory and Organization landings with nav disclosures, and make the index page a stack of sections, each summarised by micro versions of the DataMachines on its listings.
New in this cycle: DataIndexSection: one nav section on an index page — title (not a link), lede, a dot-separated row of listing links, a hairline and a default auto-fill grid, so columns line up from section to section
Why
/inventory and /organization are "Design in progress" placeholders. About ten cycles tried to design them, c100's bake-offs most recently, and none reached a pick. Mark's reframe (initial-prompt.md):
the two nav items only open their submenus;
the overview job moves to one index page, whose sections show at-a-glance micro versions of the listings' own DataMachines.
That keeps every number computed in one place (c100's abstraction ladder) and gives the home page real content.
Objective
Inventory and Organization in the qdash sidebar open their submenus and navigate nowhere.
Their index pages are gone. Old URLs and crumbs land somewhere sensible.
The index page renders one section per nav section, each with a title, a link and a summary of micro DataMachines.
R31 holds on that page: loading, failed and empty can be told apart.
The two new components (section shell and micro machine) are in the layer and demoed on the design site across empty, minimal, typical, overflow, loading and failed.
Scope
qcontrol:crates/qdash/ui/app/: AppSidebar, lib/moved-routes, the link and crumb sweep (41 refs), / page, a page composable, lib/index-micros.ts and its spec.
layer: a micro DataMachine and a section shell (names in Q6), plus micro renderings of the band devices.
design: this directory; component demos and registry entries.
Out of scope: new metrics; a backend summary endpoint; fixing the bands' own R31 states (c108); Cost Center (c105).
Key Changes
kick-off (2026-10-02): read the founding docs (component philosophy, design methodology), the layer's DataMachine, DataSurfaceSection and NavVerticalSubmenu, c100 and c108. Inventoried every DataMachine on the 10 listings: 27 machines, a vocabulary of three or four devices, 6 with no headline value, 2 with switchers, most reading 0 while loading. Findings:
NavVerticalSubmenu already supports a toggle-only parent (no to, plus match), so the nav change needs no layer work.
About 16 feeds at listing cadence on one page is the main risk.
Wrote plan.md: nav, components, page, six phases, risks and Q1–Q9 for Mark.
decisions (2026-10-02): Mark answered Q1–Q9 and a Q10 (plan §9).
Defaults: index at /, a listing-links row under each section title, /inventory and /organization → /#section, a new DataMachineMicro component, all machines, component demos before qdash, c100 closes on a note, history graphs become spark + period total.
Changed from the defaults:Activity joins as a third section (35 micros), and the nav is open-only (a click never closes a submenu).
Phase 1a (2026-10-02): done on qdash in the files c108 isn't touching. Uncommitted.
Sidebar: Inventory and Organization are disclosure buttons (controlled NavVerticalSubmenu with no to). Q5 changed mid-phase from open-only to toggle: a second click closes.
Landings:pages/inventory/index.vue and pages/organization/index.vue are deleted. movedTarget() in lib/moved-routes sends /inventory, /organization and /team to /#section in one hop.
Section data:INDEX_SECTIONS in lib/working-nav, shared with the sidebar.
/ page: an interim index (Home: three anchored sections, each with its links row). The summaries arrive in Phase 4.
Stale links fixed: "All harnesses" and the surface fallback → /inventory/harnesses; LISTING_KEYS re-keyed; MCP adoption → /inventory/mcp-servers; the DLP tile → harnesses; connectors → /#inventory; /overview links and the Users crumb → /#section.
Checks: specs pass (27, including new movedTarget and INDEX_SECTIONS cases) and npm run check is clean. In the browser: the redirect, toggle, persistence and arriving-in-a-section all work on the seed backend.
Phase 1b (deferred until c108 commits): crumbs on the 21 listing and detail pages c108 has dirty, plus ToolAgents.vue / AccountHarnesses.vue "All harnesses →". Until then they work through the redirect.
Phase 2 (2026-10-02): layer and demos built. Uncommitted; no version bump.
Layer, new:DataMachineMicro (data/machine/Micro.vue) and DataIndexSection (data/index-section/).
Layer docs: CLAUDE.md catalog rows, plus migration notes for v0.9.28.
Micro:
Title 12 / med / muted (truncates), hairline, value 20 bold, the device filling the rest; about 188 × 53.
val: null renders "—", not DataMetricValue's spinner. The whole card is a real NuxtLink.
A #mark slot holds the projected glyph.
It is the same 4-row subgrid as DataMachine, so DataMachineGroup needs no change.
Section: title (not a link), lede, dot-separated listing links, hairline, and a default auto-fill grid (180 px minimum per column), so columns line up across sections. :grid="false" hands the layout back.
Devices:
segment bar legend="none" 8 px;
ranked bars micro: top-1 label · share over a 3 px meter (recommended), with micro bare (3 hairlines) as the alternative;
donut → its segment bar (recommended), with a 20 px ring as the alternative;
Design site: demos at /components/data-machine/data-machine-micro and /components/data-machine/data-index-section, with six scenarios plus every device form, and a composed three-section page. Fixtures in app/data/index-micro-fixtures.ts (35 micros, in the shape Phase 4 will use). Demo helpers: components/index/MicroDevice.vue and ProjectedMark.vue.
Verified light and dark at 1280, 800 and 375 px.
Found along the way: DataMetricValue's null state is a spinner, not "—". That affects c108's plan, so it was flagged there.
Phase 1a pushed (2026-10-02, from another session): Mark wanted the new nav in the branch going to a colleague, so the Phase 1a qdash work is committed as qcontrol 7b732d7d ("Inventory and Organization are disclosures; / is the index") and pushed to origin feat/new-pages.
What's in it: the 19 files under crates/qdash/ui/app as they stood at 13:10, including the two staged landing deletions.
Checked before committing: 572 specs, bible-check clean. In the browser on :3030, /inventory → /#inventory, Inventory toggles closed → open → closed on /, and it opens on its own inside /inventory/*.
Published layer: 0.9.27 (be148b37) already has NavVerticalSubmenumatch / v-model:open, so the commit runs on the published layer.
Still to do: Phase 1b and Phase 2 (the layer DataMachineMicro / DataIndexSection and the design-site demos) are untouched and still uncommitted.
The demo fixtures turned out to cover only 20 of the 35 machines, so they now hold all 35, each with a listing and its listingTitle, plus byListing().
The DataIndexSection demo gained a layout switch: flat with prefixed titles, or clustered with listing titles.
3 bars are the default in both demos and in IndexMicroDevice.
The layer and registry wording now names 3 bars as the pick.
Checked in the browser: both layouts across Inventory, Organization and Activity.
Next: Mark picks a layout → release 0.9.28 → Phase 4.
Layout pick + promotion (2026-10-02): Mark picked the flat grid with prefixed titles ("I already love this one, let's promote to qcontrol"). Phase 1a had already been committed as qcontrol 7b732d7d.
Phase 3: layer df57642 and 9a2df40 (v0.9.28), published by CI. Lockfiles refreshed in design, bob-wire, app.qpoint.io, www.qpoint.io, qflow and qdash (committed in each, not pushed).
Toggle defaults: Mark asked mid-phase that the Working and Experimental toggles start off. They now keep their choice in sessionStorage, and the old localStorage value is removed (98853509).
Phase 4 (52df31b6):
lib/index-micros.ts + spec (11 tests): 20 / 7 / 8 micros; null until ready with an empty device; Tool success with nothing judged reads null.
composables/fleet/indexSummary.ts wires the listings' own composables; useSkillListing exposes a five-feed state.
New components/index/MicroDevice.vue and components/lib/ProjectedRing.vue. / renders three DataIndexSections.
Checked on the seed backend: 35 micros render, and the 7 listings checked match their machines value for value.
Full suite 586 passing; npm run check clean.
Built and pushed: dist regenerated (ba39df37, layer 0.9.28) and pushed to feat/new-pages (PR #713), bf351751..ba39df37.
Still open:
Phase 1b crumbs on 21 pages + 2 "All harnesses" links (unblocked now that c108 has committed);
R-1 poll load: ~24 feeds at listing cadence, no shared requests;
Phase 5 docs;
design-site c109 files uncommitted.
Phase 5, documentation (2026-10-02):
Captures: 8 shots, from c109-index-qdash.json (:3030; subjects page/index, component/nav-vertical-submenu, page/teams) and c109-index-design.json (the demos).
Archive entry 2026-10-02-c109-index.
Phase 1b + nav (2026-10-02): done and pushed to feat/new-pages (ba39df37..d05ebdd7).
Breadcrumbs (7133a7e8): the Inventory and Organization crumbs on 21 listing and detail pages link /#inventory / /#organization directly. The two "All harnesses →" links and the empty harness-install detail → /inventory/harnesses. In the browser, a crumb lands on its section, scrolled under the header.
Overview leaves the nav (d37698ff, Mark): the index behind the logo is the overview now, and /overview stays routable by URL.
Dist regenerated after each (4d6e4605, d05ebdd7).
Gotcha: the shared :3030 dev server's watcher missed batch edits. Touching each file one at a time (with a short pause) got them picked up.
Micro-cards thread (2026-10-02, after close):prompt · plan.
On qdash via the local layer (uncommitted): roll-down labels (DataRankedBars microLabels="beside", ending at 10 px Inter bold); micro titles 12 → 16 px bold; section grid gaps 20 / 32 → 48 / 48.
Then in the design prototype space:/pages/phase3/index-micro-variations, with presets A–E (today · micro cards · micro cards with small data · section card · section card with tiles) and every knob live.
Each micro can be a white, rounded, soft-shadowed card, or the whole section can be. The data shrinks to 13 px titles, 16 px values, 6 px bars and 12 px sparks.
Section titles are a knob too, defaulting to 28 px (Mark: "a bit bigger").
Design-local parts:IndexMicroProto and IndexProtoSection.
Captures: threads rollup-labels (3) and micro-cards (6).
Dev servers: watchers on this machine missed edits repeatedly, so I worked against my own restartable servers (design :3000, a qdash clone on :3034).
Pick (Mark): preset B, micro cards ("excellent, let's go with the default at the top").
Layer 0.9.29 (87835a1, 7e8a6b2): DataIndexSectioncards (default on) makes its micros white cards (12 px corners, 14 px padding, soft shadow, a hairline border in dark mode) with 16 / 16 px gaps, minColumn 190 and a 28 px title. DataMachineMicrocard (inherits) and a 14 px bold title. DataRankedBarsmicroLabels="beside".
Lockfiles committed in all six consumers.
qdash:0fbee449 (roll-down labels); dist 5d7dd5da, built from a clean worktree of HEAD so the c110 session's in-progress Activity files stay out. Verified on the :3034 clone. Pushed to feat/new-pages (d05ebdd7..5d7dd5da).
Record: capture c109-qdash-index-cards (thread micro-cards) is now the archive entry's hero; HISTORY's c109 entry has an after-close note; the DataMachineMicro demo has a card control.
Outcome
Closed 2026-10-02.
Inventory and Organization are nav disclosures: a click toggles the list, and their landings are gone.
/ is the index: three DataIndexSections holding all 35 listing machines as DataMachineMicros, in a flat grid with prefixed titles. Ranked lists show as 3 bare bars and history graphs as spark + period total.
Every micro reads its listing's own band, so it equals its machine. All 7 listings checked matched value for value on the seed backend.
The layer's two components and their micro props shipped in q-nuxt-layer 0.9.28.
qdash work landed on feat/new-pages (PR #713), from 7b732d7d through d05ebdd7: index, nav toggle, toggle defaults, breadcrumbs, Overview off the rail.
Follow-up: R-1, the poll load. The index runs about 24 feeds at listing cadence (3 s), and installations, agents and teams are fetched more than once. It needs shared requests, or a slower cadence for the index, before real traffic.
Learnings:
Inventory the existing machines before designing a micro. 35 machines came down to four device forms.
Keep the micro's props a strict subset of the full component's, so mapping one to the other means deleting props, never renaming them.
Fixtures that cover only part of the set hide the very problem being judged: the repeated titles appeared only with all 35.
A capture hideCss of nav also hides component <nav>s.
A shared dev server's watcher misses batch edits. Touch the files one at a time.
Visual record
32 captures — heroes, page slices, and full-page renders. Click to view.
Micro cards (design prototype space)
2026-10-02· 14 captureslatest
B · micro cards: every micro on white with 12 px rounded corners and a soft two-layer shadow, on the app's page colour; 14 px bold titles, data as today, 16 px gaps; section titles at 28 px open page →qdash / on layer 0.9.29 — Mark's pick, preset B: every micro a white card (12 px corners, 14 px padding, soft shadow) with a 14 px bold title, 16 px gaps, 28 px section titles, roll downs with 10 px bold labels. (Activity here carries the c110 session's in-progress rework.) history · 3 moments →C · micro cards with the data shrunk: 13 px titles, 16 px values, 6 px segment bars, 12 px sparks, 10 px corners, 12 px gaps open page →D · the whole section on a white card (16 px corners, soft shadow), micros flat inside at the small data sizes open page →E · white section card holding the micros as sunken tiles, small data, 10 px gaps open page →A · today, for reference: qdash after the labels pass — flat micros, 16 px bold titles, 48 px gaps, 24 px section titles open page →Every preset side by side: Inventory's first ten micros under A–E as each ships open page →open page →history · 3 moments →open page →open page →open page →open page →open page →
Small labels on the roll downs
2026-10-02· 6 captures
Trying small labels on the roll downs (Mark, after close): each ranked micro keeps its top 3 hairline bars, now with an 11 px name beside each — DataRankedBars `micro microLabels="beside"`, the label column as wide as the longest label up to 45 % of the device. Names read whole (Anthropic, Claude Code, Payments); ids in mono truncate at micro width (claude-so…, payments-…) history · 3 moments →Second pass on the roll-down labels, from Mark's notes: labels a tick smaller and in Inter bold (10 px, no mono — the sans fits more of an id), 2 px between rows; micro titles up to 14 px bold ink; the grid opened to 36 px between rows and 40 px between columns. Truncated labels fell from 18 to 8, all ids (claude-sonnet-4-6, postgres-readonly, payments-migration) history · 3 moments →Third pass (Mark: "even more gap, bigger titles"): micro titles 16 px bold ink, the grid at 48 px between rows and between columns; roll-down labels stay 10 px Inter bold beside each hairline bar. (Activity shows 6 micros here: another session is reworking its band at the same time.) history · 3 moments →history · 3 moments →history · 3 moments →history · 3 moments →
Earlier captures
2026-10-02· 12 captures
The DataMachineMicro demo: the interactive card on DevCanvas controls, every device form (segment bar, ranked as 3 bare bars or top-1 label · share, donut as segment or ring, spark, attention, projected mark), and the scenarios — loading, failed, empty (honest zeros), minimal, typical, overflow — plus micros aligned with full DataMachines in one DataMachineGroup open page →qdash / on the seed backend: three sections of micros in the flat grid, titles prefixed where the bare name repeats (Provider spend, Model tokens, MCP tool calls). Ranked devices are the top 3 as bare bars, Activity's history graphs are sparks with the period total, User coverage and Providers used carry the dashed projected ring. Every micro links to its listing and matches its machine value for value history · 3 moments →The composed index on fixtures — all 35 machines, flat grid with prefixed titles and 3 bare bars: the layout Mark picked ("I already love this one") and the one qdash ships open page →The rail outside both sections: MONITOR starts at Inventory (Overview left the nav — the index behind the logo is the overview now). Inventory and Organization are disclosure buttons, not links; neither has a page any more history · 2 moments →The alternative tried side by side: micros clustered under their listing (PROVIDERS, HARNESSES…), titled exactly as the listing titles them. Easier to map back to the listings, taller; Activity, a one-page section, stays one grid open page →One click on Inventory opens its submenu without navigating (still on Cost Center); a second click would close it. The choice holds as you move around for the rest of the visit history · 2 moments →The ranked alternative Mark passed over: the top row as label · share over a 3 px meter (anthropic · 71 %). It names who leads; the 3 bare bars he chose show how concentrated the list is open page →Inside a section its list opens itself, and the Organization breadcrumb now links /#organization — the index's Organization section — where the retired landing used to be. Teams' Coverage and Spend are the same 100 % and $331 the index's Team coverage and Team spend micros show history · 14 moments →open page →history · 3 moments →open page →open page →
