Implements item 11 of epic #204 — job dependency visualisation. Ships
both a primary surface and a stretch surface per the proposal at
`docs/proposals/jobs-dependencies-viz.md`:
PRIMARY — pure-SVG topological-layered DAG inline on the JobDetail
Dependencies tab. Color-coded by status (succeeded / running
/ failed / pending), click-a-node to navigate, keyboard
accessible (Enter / Space). 350-450px clamp.
STRETCH — fullscreen Gantt timeline at /sovereign/provision/$id/jobs/
timeline. One row per job, bars from startedAt → finishedAt
(or now if running), nice-tick time axis, hover tooltips.
New files:
• src/widgets/job-deps-graph/JobDependenciesGraph.tsx — SVG DAG widget,
structurally typed against any Job-like shape so it works with both
today's jobs.ts model and the evolved-but-not-yet-merged backend
contract from #205.
• src/shared/lib/depsLayout.ts — pure topological-layered layout. Kahn
topo-sort + cycle break + within-layer sort by descendant count.
Zero external graph deps (no reactflow / cytoscape / d3-dag — per
the issue hard rules + INVIOLABLE-PRINCIPLES.md #2).
• src/pages/sovereign/JobsTimeline.tsx — Gantt page chrome.
• src/test/fixtures/deps-graph.fixture.ts — shared mock graph for
sibling agents per the contract in the epic.
• src/pages/designs/JobsDepsVizDemo.tsx — visual lock-in surface at
/sovereign/designs/jobs-deps-viz for reviewer eye-checks.
• docs/proposals/jobs-dependencies-viz.md — recommendation rationale.
Integration into the merged JobDetail surface (PR #208):
• src/components/JobDependencies.tsx — replaces the placeholder list-
only surface with DAG-on-top-of-list. List preserved for keyboard
accessibility + screen readers.
Tests:
• depsLayout.test.ts (15 cases): topo order, no overlap, cycle break,
unknown-id drop, custom options, edge geometry.
• JobDependenciesGraph.test.tsx (8 cases): render counts, status data
attribute, click + keyboard handlers, height clamp.
Cosmetic verification: 4 screenshots at 1440px under
`.playwright-mcp/jobs-deps-viz/` showing the DAG (5-job + 3-node
fixtures), the integrated Dependencies tab on a real JobDetail page,
and the Gantt timeline route.
Refs #204Closes#206
Co-authored-by: hatiyildiz <hatice.yildiz@openova.io>
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
896dc041d7