feat(graph): Implement Graph View with Dagre Layout and Epic Scope (bb-18e)

tests/guards/graph-responsive-contract.test.mjs

@@ -0,0 +1,72 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import fs from 'node:fs/promises';
+import path from 'node:path';
+
+const ROOT = process.cwd();
+
+async function read(relativePath) {
+  return fs.readFile(path.join(ROOT, relativePath), 'utf8');
+}
+
+test('graph page defines tabbed layout, epic chips, and mobile fallback', async () => {
+  const graphPage = await read('src/components/graph/dependency-graph-page.tsx');
+
+  // Tabbed layout: Tasks and Dependencies tabs
+  assert.match(graphPage, /WorkflowTabs/, 'should use WorkflowTabs component');
+  assert.match(graphPage, /activeTab/, 'should track active tab state');
+
+  // Epic chip strip replaces sidebar
+  assert.match(graphPage, /EpicChipStrip/, 'should use EpicChipStrip component');
+
+  // Mobile panel toggle preserved
+  assert.match(graphPage, /Switch to Graph/);
+  assert.match(graphPage, /Back to Selection/);
+
+  // Task card grid extracted
+  assert.match(graphPage, /TaskCardGrid/, 'should use TaskCardGrid component');
+
+  // Task details drawer
+  assert.match(graphPage, /TaskDetailsDrawer/, 'should use TaskDetailsDrawer drawer');
+  assert.match(graphPage, /projectRoot=\{projectRoot\}/, 'drawer should receive project root for edits');
+  assert.match(graphPage, /onIssueUpdated=\{\(\) => router.refresh\(\)\}/, 'drawer should trigger refresh after edits');
+
+  // Dependency flow strip
+  assert.match(graphPage, /DependencyFlowStrip/, 'should use DependencyFlowStrip component');
+
+  // Graph section with ReactFlow
+  assert.match(graphPage, /GraphSection/, 'should use GraphSection component');
+  assert.match(graphPage, /ReactFlowProvider/, 'should wrap graph in ReactFlowProvider');
+
+  // Edge options and node types still configured
+  assert.match(graphPage, /defaultEdgeOptions/);
+  assert.match(graphPage, /nodeTypes/);
+
+  // Actionable node detection
+  assert.match(graphPage, /actionableNodeIds/, 'should compute actionable (unblocked) nodes');
+  assert.match(graphPage, /ui-field/, 'graph filters should use shared dark field styling');
+  assert.match(graphPage, /ui-select/, 'graph select should use shared dark select styling');
+});
+
+test('extracted graph section has viewport and legend', async () => {
+  const graphSection = await read('src/components/graph/graph-section.tsx');
+
+  assert.match(graphSection, /className=\"workflow-graph-flow\"/, 'graph should have workflow-graph-flow class');
+  assert.match(graphSection, /workflow-graph-legend/, 'should have legend');
+  assert.match(graphSection, /translateExtent=\{\[/, 'should set translate extent');
+  assert.match(graphSection, /defaultEdgeOptions=\{/, 'should pass edge options');
+  assert.match(graphSection, /blockerAnalysis/, 'should show blocker stats');
+  assert.match(graphSection, /hideClosed/, 'should support hideClosed state in legend');
+  assert.match(graphSection, /!hideClosed/, 'done legend should be hidden when closed items are hidden');
+});
+
+test('graph node card supports tooltips and actionable glow', async () => {
+  const nodeCard = await read('src/components/graph/graph-node-card.tsx');
+
+  assert.match(nodeCard, /isActionable/, 'should check actionable state');
+  assert.match(nodeCard, /ring-emerald-400/, 'actionable nodes should have green glow');
+  assert.match(nodeCard, /node-select-pulse/, 'selected nodes should pulse');
+  assert.match(nodeCard, /blockerTooltipLines/, 'should display blocker tooltip');
+  assert.match(nodeCard, /isDimmed/, 'should support dimming non-chain nodes');
+  assert.match(nodeCard, /Ready to work/, 'actionable tooltip text');
+});

tests/guards/kanban-responsive-contract.test.mjs

@@ -15,6 +15,8 @@ test('kanban board uses expandable vertical swimlanes', async () => {
   assert.match(board, /aria-expanded/);
   assert.match(board, /onActivateStatus/);
   assert.match(board, /max-h-\[50vh\]/);
+  assert.match(board, /showClosed/, 'board should accept showClosed control');
+  assert.match(board, /status !== 'closed' \|\| showClosed/, 'done lane should be hidden when showClosed is false');
 });
 
 test('kanban page defines mobile detail drawer behavior', async () => {
@@ -31,4 +33,20 @@ test('kanban controls use fluid full-width sizing on small viewports', async ()
 
   assert.match(controls, /w-full/);
   assert.match(controls, /sm:w-/);
+  assert.match(controls, /ui-field/, 'controls should use shared dark field styling');
+  assert.match(controls, /ui-select/, 'selects should use shared dark select styling');
+  assert.match(controls, /Next Actionable/);
+  assert.match(controls, /nextActionableFeedback/);
+});
+
+test('kanban detail includes execution checklist rendering', async () => {
+  const detail = await read('src/components/kanban/kanban-detail.tsx');
+
+  assert.match(detail, /Execution checklist/i);
+  assert.match(detail, /Summary/i);
+  assert.match(detail, /Task metadata/i);
+  assert.match(detail, /Timeline/i);
+  assert.match(detail, /Edit fields/i);
+  assert.match(detail, /Save changes/i);
+  assert.match(detail, /projectRoot\?/i);
 });