T-54ZE-sdf-overview-graph-screen

State: planning/draft · Impact: medium · Complexity: large

Goal

Build the system overview, SDF’s signature intro screen: a layered graph of the project (structure, capability, work, run) with live operational overlays.

Today

/ redirects to /work. DispatchGraphPanel.vue shows dispatch only. The @sdlc/exp-system-graph experience already has diagram, flow, chord, matrix, hierarchy, inspector and saved views behind ports, but no layered overview.

Proposed

A new overview projection over the existing experience, rendered with @sksizer/graph-canvas <GraphCanvas> fed by @sksizer/system-model SystemGraph, reusing the experience’s helpers (capability projection, styles) through the layer’s auto-imports. For an adopted project / renders it; /overview is the same page. Work stays one click away in the nav.

Approach

1. Add lib/overview/layers.ts: project SystemGraph + capability graph + DashboardState to layered nodes structure, capability, work, run; with tests.
2. Add lib/overview/overlays.ts and styles.ts: overlays (leases, run status, PR verdicts) as node style fields, with categorical --d-viz-* slots per layer. Gotcha: the 3D renderer ignores shape, icon, glow and dashed edges, so also encode overlays in color and size.
3. Add components/overview/{SystemOverviewGraph,OverviewLegend,OverviewOverlayToggles,OverviewInspector}.vue; the graph takes props and polling stays in a thin wrapper.
4. Node click emits a route to the experience’s node page or the SDF entity page.
5. Add pages/overview.vue; make pages/index.vue render the overview for an adopted project. If an experience helper is not exported, export it there, never copy it.
6. Add stories Overview/Full, OverlaysOnly, Empty, 3D. Force layouts get a deterministic seed and a settle wait.

Areas

Area	Note
solutions/ontological/desktop/src-nuxt/app/components/overview/	graph, legend, toggles, inspector
solutions/ontological/desktop/src-nuxt/app/lib/overview/	layers, overlays, styles and tests
solutions/ontological/desktop/src-nuxt/app/pages/overview.vue	new page
solutions/ontological/desktop/src-nuxt/app/pages/index.vue	renders overview for an adopted project
solutions/ontological/desktop/src-nuxt/app/plugins/system-graph.client.ts	read only; boot-time transport use

Acceptance criteria

• AC-1: Full, OverlaysOnly, Empty and 3D stories render and screenshots are stable across two runs.
• AC-2: Node click routes to the right page.
• AC-3: layers.ts projections are covered by tests, including empty input.
• AC-4: / renders the overview for an adopted project and still redirects nowhere else.
• AC-5: moon run sdf:check and moon run sdf:test pass, run detached one at a time; nuxi typecheck and vue-tsc are never run locally (CI typechecks).
• AC-6: Every new story renders at the tauriMedium viewport in light and dark, and a screenshot pair is committed under docs/screenshots/sdf-overview-graph-screen/{light,dark}.png and embedded in the PR body.
• AC-7: Only --d-* tokens, no raw colors; D* components come from @determined/ui; app/generated/*, app.vue, nuxt.config.ts and package.json are untouched unless this task says so.
• AC-8: Fixture timestamps are constants; any force layout has a deterministic seed and a cooldown.

Out of scope

• Real data wiring and DispatchGraphPanel.vue (not replaced).

Dependencies

• Depends on T-GTKM and T-YHMF.

Discovery context

• Plan: /Users/sksizer/.claude/plans/toasty-soaring-ullman.md (the adoption wizard and operator screens, built in SDF) and N-6DUQ.
• Control spec: docs/planning/strategy/wizard-prototype.html; strategy: N-HETB-adopting-a-project.
• Rules every agent follows are in the plan and the shared acceptance criteria above; the derive step later replaces fixtures with generated transport.

Depends on

T-GTKM, T-YHMF

---

← Back to Tasks