UX sprint — progressive-disclosure polish (follow-ups to v0.3.0) #6

Closed
opened 2026-07-20 06:24:50 +00:00 by mathias · 4 comments
Owner

Core progressive disclosure shipped in v0.3.0 (plain-language default, labelled transitions, Plain⇄Technical toggle — punch list #1–4 from docs/UX-REVIEW.md). Remaining polish (#5–8 + a few found while implementing):

From the UX review

  • #5 Gate glyphs — the two real gates (human @04, CI @06) get a lock/shield glyph, not just gold text. (Currently gold + "▸" prefix only.)
  • #6 Legend — always-visible key for pill colours + the three gate types (integrity/eligibility/correctness). Colour currently carries meaning nobody can decode.
  • #7 Stage-06 plain placeholder — when no live CI data, show the plain "what happens" text so the CI column never reads as a no-op (Build fills cd.yml job-ids on cold load, which aren't plain).
  • #8 Feedback-bus honesty — dashed 08→TELOS gets a "partly manual" tag (matches PROJECT.md dogfooding-honesty); suppress homelab proper nouns (koala/iguana/agentsquad/TELOS/dma-cli) in Plain mode — plain substrate + node titles, surface the tech names only in Technical.

Found while implementing

  • Arrow labels truncate at the far-right stage and long labels can clip; consider wrapping or shortening, and keep the last transition on-screen.
  • Technical mode verified by code but not screenshot-checked end-to-end; confirm hover-to-reveal detail + the full transition sentence tooltip.
  • Three-gate overlay (stretch, review §5) — a "show governance gates" toggle for the compliance/exec audience; ties to the audit-chain thesis.

Close the loop

  • Re-run the fresh-eyes UX reviewer on the deployed v0.3.0 (reviewer≠implementer) and fold its critique — the second lap of the loop.

Ref: docs/UX-REVIEW.md, brain wiki/homelab/decisions/cad-atlas-audit-chain-is-viz-data.md.

Core progressive disclosure shipped in **v0.3.0** (plain-language default, labelled transitions, Plain⇄Technical toggle — punch list #1–4 from `docs/UX-REVIEW.md`). Remaining polish (#5–8 + a few found while implementing): ## From the UX review - [ ] **#5 Gate glyphs** — the two real gates (human @04, CI @06) get a lock/shield glyph, not just gold text. (Currently gold + "▸" prefix only.) - [ ] **#6 Legend** — always-visible key for pill colours + the three gate types (integrity/eligibility/correctness). Colour currently carries meaning nobody can decode. - [ ] **#7 Stage-06 plain placeholder** — when no live CI data, show the plain "what happens" text so the CI column never reads as a no-op (Build fills cd.yml job-ids on cold load, which aren't plain). - [ ] **#8 Feedback-bus honesty** — dashed 08→TELOS gets a "partly manual" tag (matches PROJECT.md dogfooding-honesty); suppress homelab proper nouns (koala/iguana/agentsquad/TELOS/dma-cli) in Plain mode — plain substrate + node titles, surface the tech names only in Technical. ## Found while implementing - [ ] Arrow labels **truncate at the far-right stage** and long labels can clip; consider wrapping or shortening, and keep the last transition on-screen. - [ ] **Technical mode** verified by code but not screenshot-checked end-to-end; confirm hover-to-reveal detail + the full transition sentence tooltip. - [ ] **Three-gate overlay** (stretch, review §5) — a "show governance gates" toggle for the compliance/exec audience; ties to the audit-chain thesis. ## Close the loop - [ ] Re-run the fresh-eyes UX reviewer on the deployed v0.3.0 (reviewer≠implementer) and fold its critique — the second lap of the loop. Ref: `docs/UX-REVIEW.md`, brain `wiki/homelab/decisions/cad-atlas-audit-chain-is-viz-data.md`.
Author
Owner

Done (v0.3.1):

  • #6 Legend — keys live-status colours + governance-gate colour + dashed feedback loop, always visible.
  • #8 Feedback-bus honesty ("partly manual today" on the loop) + proper-noun suppression in Plain (substrate ribbon + technical footer hidden; still shown in Technical).

Still open:

  • #5 gate glyphs (lock/shield — currently gold styling only)
  • #7 stage-06 plain placeholder
  • arrow-label truncation at the far-right stage
  • Technical-mode hover verification (deferred — reviewer was on a phone)
  • three-gate overlay (stretch)
  • re-run the fresh-eyes reviewer on the deployed build (close the loop)
**Done (v0.3.1):** - ✅ #6 Legend — keys live-status colours + governance-gate colour + dashed feedback loop, always visible. - ✅ #8 Feedback-bus honesty ("partly manual today" on the loop) + proper-noun suppression in Plain (substrate ribbon + technical footer hidden; still shown in Technical). **Still open:** - #5 gate glyphs (lock/shield — currently gold styling only) - #7 stage-06 plain placeholder - arrow-label truncation at the far-right stage - Technical-mode hover verification (deferred — reviewer was on a phone) - three-gate overlay (stretch) - re-run the fresh-eyes reviewer on the deployed build (close the loop)
Author
Owner

Done (v0.3.2): #7 stage-06 plain nodes (Build tolerant + placeholder, test-first) · arrow-label truncation (shortened two labels) · re-review loop closed → docs/UX-REVIEW-2.md.

Lap-2 re-review verdict: B/B+ — phases nailed, transitions half.

New prioritized punch list (supersedes the earlier open items):

  1. Plain node titles — add plain_t, demote technical name to a dim in-card subtitle (node titles are still jargon; the lap-1 disease one level down).
  2. Transitions on mobile — the label layer is inside svg.spine (display:none <820px) and the rationale is hover-only (dead on touch). The #1 win vanishes on phones. Render transition labels as HTML in the stacked layout + surface trans without hover.
  3. Horizontal-scroll blindness — stage 04 (the human gate) is off-screen on load; add an overview / affordance / minimap so the pipeline's shape is visible.
  4. Real gate glyphs (lock/shield, not "▸"); make the feedback-loop legible in-viewport.
  5. Reconcile the legend with the actual Plain pill colours (violet/blue/coral).
  6. Attached label chips + consistent transition grammar.

Full scorecard (each lap-1 item → Shipped/Half/Weak) in docs/UX-REVIEW-2.md.

**Done (v0.3.2):** ✅ #7 stage-06 plain nodes (Build tolerant + placeholder, test-first) · ✅ arrow-label truncation (shortened two labels) · ✅ re-review loop closed → `docs/UX-REVIEW-2.md`. ## Lap-2 re-review verdict: **B/B+** — phases nailed, transitions half. New prioritized punch list (supersedes the earlier open items): 1. **Plain node titles** — add `plain_t`, demote technical name to a dim in-card subtitle (node titles are still jargon; the lap-1 disease one level down). 2. **Transitions on mobile** — the label layer is inside `svg.spine` (`display:none` <820px) and the rationale is hover-only (dead on touch). The #1 win vanishes on phones. Render transition labels as HTML in the stacked layout + surface `trans` without hover. 3. **Horizontal-scroll blindness** — stage 04 (the human gate) is off-screen on load; add an overview / affordance / minimap so the pipeline's shape is visible. 4. Real gate glyphs (lock/shield, not "▸"); make the feedback-loop legible in-viewport. 5. Reconcile the legend with the actual Plain pill colours (violet/blue/coral). 6. Attached label chips + consistent transition grammar. Full scorecard (each lap-1 item → Shipped/Half/Weak) in `docs/UX-REVIEW-2.md`.
Author
Owner

Done (v0.3.3):

  • Lap-2 #1 plain node titles — plain_t on every node ("var-go Oath"→"Definition of done", "Admission controller"→"Tamper-proof seal", …), technical name demoted to dim in-card subtitle; guard-tested.
  • Lap-2 #2 mobile transitions — stacked-layout HTML transition rows (always-visible, full rationale, no hover) restore the #1 win on phones; desktop header band scoped to ≥821px.

Still open (lap-2):

  • #3 horizontal-scroll blindness — stage 04 (the human gate) off-screen on load; needs an overview/minimap/affordance so the pipeline's shape is visible.
  • #4 real gate glyphs (lock/shield) + legible in-viewport feedback loop.
  • #5 reconcile legend colours with the actual Plain pills (violet/blue/coral).
  • #6 attached label chips + consistent transition grammar.

Next data-plane phase (deferred per "authored first"): IaC-wired verification (auto aspirational-vs-real) + Prometheus health on stage 07/substrate.

**Done (v0.3.3):** - ✅ Lap-2 #1 **plain node titles** — plain_t on every node ("var-go Oath"→"Definition of done", "Admission controller"→"Tamper-proof seal", …), technical name demoted to dim in-card subtitle; guard-tested. - ✅ Lap-2 #2 **mobile transitions** — stacked-layout HTML transition rows (always-visible, full rationale, no hover) restore the #1 win on phones; desktop header band scoped to ≥821px. **Still open (lap-2):** - #3 horizontal-scroll blindness — stage 04 (the human gate) off-screen on load; needs an overview/minimap/affordance so the pipeline's shape is visible. - #4 real gate glyphs (lock/shield) + legible in-viewport feedback loop. - #5 reconcile legend colours with the actual Plain pills (violet/blue/coral). - #6 attached label chips + consistent transition grammar. Next data-plane phase (deferred per "authored first"): IaC-wired verification (auto aspirational-vs-real) + Prometheus health on stage 07/substrate.
Author
Owner

Sprint closed (v0.3.4). All authored-layer items done:

  • #3 overview rail — always-visible "PIPELINE" chips (00 Notice → 08 Learn), colour-coded, click-to-jump; fixes scroll blindness (whole shape visible even when columns are off-frame).
  • #4 real gate glyph — 🔒 on the human (@04) + CI (@06) transitions, desktop + mobile.
  • #5 legend/pill reconcile — decorative node pills dropped in Plain; colour now only means live status, which the legend keys.
  • #6 attached chips/grammar: decided — the question-vs-statement label mix is meaningful (decisions vs milestones), kept; the SVG chip-background is low-value, skipped.

Intentionally deferred (open new issues if wanted): three-gate governance overlay (stretch); Technical-mode hover verification (needs a desktop).

Reusable pattern persisted: brain wiki/homelab/decisions/progressive-disclosure-for-technical-diagrams.md. Closing.

**Sprint closed (v0.3.4).** All authored-layer items done: - ✅ #3 overview rail — always-visible "PIPELINE" chips (00 Notice → 08 Learn), colour-coded, click-to-jump; fixes scroll blindness (whole shape visible even when columns are off-frame). - ✅ #4 real gate glyph — 🔒 on the human (@04) + CI (@06) transitions, desktop + mobile. - ✅ #5 legend/pill reconcile — decorative node pills dropped in Plain; colour now only means live status, which the legend keys. - #6 attached chips/grammar: decided — the question-vs-statement label mix is *meaningful* (decisions vs milestones), kept; the SVG chip-background is low-value, skipped. **Intentionally deferred (open new issues if wanted):** three-gate governance overlay (stretch); Technical-mode hover verification (needs a desktop). Reusable pattern persisted: brain `wiki/homelab/decisions/progressive-disclosure-for-technical-diagrams.md`. Closing.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: mathias/cad-atlas#6