feat(core): add SmartDag and supporting infrastructure for assign mode
## Context This commit adds the supporting infrastructure that makes the assign feature work end-to-end. ## Components Added/Modified ### SmartDag - Main view component for graph-based task management - Integrates TaskCardGrid and WorkflowGraph - Has 'Assign' mode toggle button - Passes archetypes and assignMode to WorkflowGraph - Manages filter state (hideClosed, sortReadyFirst, etc.) ### useGraphAnalysis Hook - Extracted graph analysis logic for reuse - Returns: actionableNodeIds, cycleNodeIdSet, blockerTooltipMap, etc. - Used by both SmartDag and AssignmentPanel - Ensures consistent 'actionable' definition across components ### UnifiedShell - Added assignMode state - Added selectedAssignIssue state - Renders AssignmentPanel when in graph view + assign mode - Wires up onAssignModeChange and onSelectedIssueChange callbacks ## Design Philosophy - Shared hook means single source of truth for 'actionable' - Clean separation between view (SmartDag) and sidebar (AssignmentPanel) - URL state preserved for navigation ## Test Coverage - SmartDag tests: 12 tests covering buttons, callbacks, imports - useGraphAnalysis tests: 6 tests covering cycle detection, blockers - UnifiedShell tests: 9 tests covering state and rendering
This commit is contained in:
zenchantlive
parent
308a7d9b31
commit
93b3c33976
6 changed files with 706 additions and 79 deletions
78
tests/components/graph/smart-dag.test.tsx
Normal file
78
tests/components/graph/smart-dag.test.tsx
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
import test from 'node:test';
|
||||
import assert from 'node:assert/strict';
|
||||
import fs from 'fs/promises';
|
||||
import path from 'path';
|
||||
|
||||
// Test that the SmartDag component file exists and exports correctly
|
||||
test('SmartDag - file exists and exports', async () => {
|
||||
const fileContent = await fs.readFile(path.join(process.cwd(), 'src/components/graph/smart-dag.tsx'), 'utf-8');
|
||||
assert.ok(fileContent.includes('export function SmartDag'), 'Should export SmartDag function');
|
||||
assert.ok(fileContent.includes('export interface SmartDagProps'), 'Should export SmartDagProps interface');
|
||||
});
|
||||
|
||||
// Test that SmartDag has Filters toggle
|
||||
test('SmartDag - contains Filters toggle button', async () => {
|
||||
const fileContent = await fs.readFile(path.join(process.cwd(), 'src/components/graph/smart-dag.tsx'), 'utf-8');
|
||||
assert.ok(fileContent.includes('Filters'), 'Should contain Filters text');
|
||||
assert.ok(fileContent.includes('showFilters'), 'Should have showFilters state');
|
||||
});
|
||||
|
||||
// Test that SmartDag has Assign toggle
|
||||
test('SmartDag - contains Assign toggle button', async () => {
|
||||
const fileContent = await fs.readFile(path.join(process.cwd(), 'src/components/graph/smart-dag.tsx'), 'utf-8');
|
||||
assert.ok(fileContent.includes('Assign'), 'Should contain Assign text');
|
||||
assert.ok(fileContent.includes('assignMode'), 'Should have assignMode state');
|
||||
});
|
||||
|
||||
// Test that SmartDag has WorkflowTabs
|
||||
test('SmartDag - contains WorkflowTabs', async () => {
|
||||
const fileContent = await fs.readFile(path.join(process.cwd(), 'src/components/graph/smart-dag.tsx'), 'utf-8');
|
||||
assert.ok(fileContent.includes('WorkflowTabs'), 'Should import WorkflowTabs');
|
||||
assert.ok(fileContent.includes('activeTab'), 'Should have activeTab state');
|
||||
});
|
||||
|
||||
// Test that SmartDag has callback props
|
||||
test('SmartDag - supports onAssignModeChange callback', async () => {
|
||||
const fileContent = await fs.readFile(path.join(process.cwd(), 'src/components/graph/smart-dag.tsx'), 'utf-8');
|
||||
assert.ok(fileContent.includes('onAssignModeChange'), 'Should have onAssignModeChange prop');
|
||||
});
|
||||
|
||||
test('SmartDag - supports onSelectedIssueChange callback', async () => {
|
||||
const fileContent = await fs.readFile(path.join(process.cwd(), 'src/components/graph/smart-dag.tsx'), 'utf-8');
|
||||
assert.ok(fileContent.includes('onSelectedIssueChange'), 'Should have onSelectedIssueChange prop');
|
||||
});
|
||||
|
||||
// Test that SmartDag imports TaskCardGrid
|
||||
test('SmartDag - imports TaskCardGrid', async () => {
|
||||
const fileContent = await fs.readFile(path.join(process.cwd(), 'src/components/graph/smart-dag.tsx'), 'utf-8');
|
||||
assert.ok(fileContent.includes('TaskCardGrid'), 'Should import TaskCardGrid');
|
||||
});
|
||||
|
||||
// Test that SmartDag imports WorkflowGraph
|
||||
test('SmartDag - imports WorkflowGraph', async () => {
|
||||
const fileContent = await fs.readFile(path.join(process.cwd(), 'src/components/graph/smart-dag.tsx'), 'utf-8');
|
||||
assert.ok(fileContent.includes('WorkflowGraph'), 'Should import WorkflowGraph');
|
||||
});
|
||||
|
||||
// Test that SmartDag passes assignMode to WorkflowGraph
|
||||
test('SmartDag - passes assignMode to WorkflowGraph', async () => {
|
||||
const fileContent = await fs.readFile(path.join(process.cwd(), 'src/components/graph/smart-dag.tsx'), 'utf-8');
|
||||
assert.ok(/assignMode=\{assignMode\}/.test(fileContent), 'Should pass assignMode to WorkflowGraph');
|
||||
});
|
||||
|
||||
// Test that SmartDag has filter state management
|
||||
test('SmartDag - manages hideClosed filter', async () => {
|
||||
const fileContent = await fs.readFile(path.join(process.cwd(), 'src/components/graph/smart-dag.tsx'), 'utf-8');
|
||||
assert.ok(fileContent.includes('hideClosed'), 'Should manage hideClosed state');
|
||||
});
|
||||
|
||||
test('SmartDag - manages sortReadyFirst filter', async () => {
|
||||
const fileContent = await fs.readFile(path.join(process.cwd(), 'src/components/graph/smart-dag.tsx'), 'utf-8');
|
||||
assert.ok(fileContent.includes('sortReadyFirst'), 'Should manage sortReadyFirst state');
|
||||
});
|
||||
|
||||
// Test that SmartDag uses useGraphAnalysis hook
|
||||
test('SmartDag - uses useGraphAnalysis hook', async () => {
|
||||
const fileContent = await fs.readFile(path.join(process.cwd(), 'src/components/graph/smart-dag.tsx'), 'utf-8');
|
||||
assert.ok(fileContent.includes('useGraphAnalysis'), 'Should import and use useGraphAnalysis');
|
||||
});
|
||||
|
|
@ -1,41 +1,60 @@
|
|||
import test from 'node:test';
|
||||
import assert from 'node:assert/strict';
|
||||
import fs from 'fs/promises';
|
||||
import path from 'path';
|
||||
|
||||
import assert from 'node:assert';
|
||||
// @ts-ignore
|
||||
import { expect, test as bunTest, describe, it } from 'bun:test';
|
||||
|
||||
describe('UnifiedShell Component Contract', () => {
|
||||
it('exports UnifiedShell component', async () => {
|
||||
try {
|
||||
const mod = await import('../../src/components/shared/unified-shell');
|
||||
assert.ok(mod.UnifiedShell, 'UnifiedShell should be exported');
|
||||
assert.equal(typeof mod.UnifiedShell, 'function', 'UnifiedShell should be a function/component');
|
||||
} catch (err: any) {
|
||||
assert.fail(`UnifiedShell module should exist: ${err.message}`);
|
||||
}
|
||||
});
|
||||
|
||||
it('UnifiedShell accepts required props', async () => {
|
||||
try {
|
||||
const mod = await import('../../src/components/shared/unified-shell');
|
||||
const UnifiedShell = mod.UnifiedShell;
|
||||
assert.ok(UnifiedShell, 'Component should be callable');
|
||||
} catch (err: any) {
|
||||
assert.fail(`Component import failed: ${err.message}`);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
bunTest('UnifiedShell handles swarm view conditionally', async () => {
|
||||
await import('../../src/components/shared/unified-shell');
|
||||
|
||||
// Create a minimal mock state to just render the function
|
||||
// We mock out the hooks if we can, but since this is a Server Component or uses context, it might be tricky.
|
||||
// We'll just verify the file CONTENT contains the import for SwarmMissionPicker and SwarmWorkspace
|
||||
// This is a "hacky" TDD but enforces we wrote the code.
|
||||
const fs = await import('fs/promises');
|
||||
const path = await import('path');
|
||||
// Test that the UnifiedShell component exists and exports correctly
|
||||
test('UnifiedShell - file exists and exports', async () => {
|
||||
const fileContent = await fs.readFile(path.join(process.cwd(), 'src/components/shared/unified-shell.tsx'), 'utf-8');
|
||||
|
||||
expect(fileContent).toContain('SwarmMissionPicker');
|
||||
expect(fileContent).toContain('SwarmWorkspace');
|
||||
assert.ok(fileContent.includes('export function UnifiedShell'), 'Should export UnifiedShell function');
|
||||
assert.ok(fileContent.includes('export interface UnifiedShellProps'), 'Should export UnifiedShellProps interface');
|
||||
});
|
||||
|
||||
// Test that UnifiedShell has assignMode state
|
||||
test('UnifiedShell - has assignMode state', async () => {
|
||||
const fileContent = await fs.readFile(path.join(process.cwd(), 'src/components/shared/unified-shell.tsx'), 'utf-8');
|
||||
assert.ok(fileContent.includes('assignMode'), 'Should have assignMode state');
|
||||
});
|
||||
|
||||
// Test that UnifiedShell has selectedAssignIssue state
|
||||
test('UnifiedShell - has selectedAssignIssue state', async () => {
|
||||
const fileContent = await fs.readFile(path.join(process.cwd(), 'src/components/shared/unified-shell.tsx'), 'utf-8');
|
||||
assert.ok(fileContent.includes('selectedAssignIssue'), 'Should have selectedAssignIssue state');
|
||||
});
|
||||
|
||||
// Test that SmartDag receives onAssignModeChange callback
|
||||
test('UnifiedShell - passes onAssignModeChange to SmartDag', async () => {
|
||||
const fileContent = await fs.readFile(path.join(process.cwd(), 'src/components/shared/unified-shell.tsx'), 'utf-8');
|
||||
assert.ok(fileContent.includes('onAssignModeChange'), 'Should pass onAssignModeChange to SmartDag');
|
||||
});
|
||||
|
||||
// Test that SmartDag receives onSelectedIssueChange callback
|
||||
test('UnifiedShell - passes onSelectedIssueChange to SmartDag', async () => {
|
||||
const fileContent = await fs.readFile(path.join(process.cwd(), 'src/components/shared/unified-shell.tsx'), 'utf-8');
|
||||
assert.ok(fileContent.includes('onSelectedIssueChange'), 'Should pass onSelectedIssueChange to SmartDag');
|
||||
});
|
||||
|
||||
// Test that AssignmentPanel is imported
|
||||
test('UnifiedShell - imports AssignmentPanel', async () => {
|
||||
const fileContent = await fs.readFile(path.join(process.cwd(), 'src/components/shared/unified-shell.tsx'), 'utf-8');
|
||||
assert.ok(fileContent.includes('AssignmentPanel'), 'Should import AssignmentPanel');
|
||||
});
|
||||
|
||||
// Test that AssignmentPanel is rendered conditionally based on view and assignMode
|
||||
test('UnifiedShell - renders AssignmentPanel conditionally', async () => {
|
||||
const fileContent = await fs.readFile(path.join(process.cwd(), 'src/components/shared/unified-shell.tsx'), 'utf-8');
|
||||
// Check for the condition: view === 'graph' && assignMode
|
||||
assert.ok(fileContent.includes("view === 'graph' && assignMode"), 'Should check view === graph && assignMode condition for AssignmentPanel');
|
||||
});
|
||||
|
||||
// Test that SwarmWorkspace import is removed (deprecated)
|
||||
test('UnifiedShell - does not import SwarmWorkspace', async () => {
|
||||
const fileContent = await fs.readFile(path.join(process.cwd(), 'src/components/shared/unified-shell.tsx'), 'utf-8');
|
||||
assert.ok(!fileContent.includes('SwarmWorkspace'), 'Should NOT import SwarmWorkspace (deprecated)');
|
||||
});
|
||||
|
||||
// Test that SwarmMissionPicker import is removed (deprecated)
|
||||
test('UnifiedShell - does not import SwarmMissionPicker', async () => {
|
||||
const fileContent = await fs.readFile(path.join(process.cwd(), 'src/components/shared/unified-shell.tsx'), 'utf-8');
|
||||
assert.ok(!fileContent.includes('SwarmMissionPicker'), 'Should NOT import SwarmMissionPicker (deprecated)');
|
||||
});
|
||||
|
|
|
|||
132
tests/hooks/use-graph-analysis.test.ts
Normal file
132
tests/hooks/use-graph-analysis.test.ts
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
import test from 'node:test';
|
||||
import assert from 'node:assert/strict';
|
||||
|
||||
import type { BeadDependency, BeadIssue } from '../../src/lib/types';
|
||||
import { buildGraphModel } from '../../src/lib/graph';
|
||||
import { detectDependencyCycles, analyzeBlockedChain } from '../../src/lib/graph-view';
|
||||
|
||||
// Helper to create minimal BeadIssue for testing
|
||||
function issue(overrides: Partial<BeadIssue>): BeadIssue {
|
||||
return {
|
||||
id: overrides.id ?? 'bb-x',
|
||||
title: overrides.title ?? 'Issue',
|
||||
description: overrides.description ?? null,
|
||||
status: overrides.status ?? 'open',
|
||||
priority: overrides.priority ?? 2,
|
||||
issue_type: overrides.issue_type ?? 'task',
|
||||
assignee: overrides.assignee ?? null,
|
||||
owner: overrides.owner ?? null,
|
||||
labels: overrides.labels ?? [],
|
||||
dependencies: overrides.dependencies ?? [],
|
||||
created_at: overrides.created_at ?? '2026-02-12T00:00:00Z',
|
||||
updated_at: overrides.updated_at ?? '2026-02-12T00:00:00Z',
|
||||
closed_at: overrides.closed_at ?? null,
|
||||
close_reason: overrides.close_reason ?? null,
|
||||
closed_by_session: overrides.closed_by_session ?? null,
|
||||
created_by: overrides.created_by ?? null,
|
||||
due_at: overrides.due_at ?? null,
|
||||
estimated_minutes: overrides.estimated_minutes ?? null,
|
||||
external_ref: overrides.external_ref ?? null,
|
||||
metadata: overrides.metadata ?? {},
|
||||
};
|
||||
}
|
||||
|
||||
function dep(type: BeadDependency['type'], target: string): BeadDependency {
|
||||
return { type, target };
|
||||
}
|
||||
|
||||
// Test the hook module exports
|
||||
test('useGraphAnalysis - module exports', async () => {
|
||||
const mod = await import('../../src/hooks/use-graph-analysis');
|
||||
assert.ok(mod.useGraphAnalysis, 'useGraphAnalysis should be exported');
|
||||
assert.equal(typeof mod.useGraphAnalysis, 'function', 'useGraphAnalysis should be a function');
|
||||
});
|
||||
|
||||
// Test the underlying logic that the hook uses
|
||||
test('useGraphAnalysis underlying logic - graphModel is built correctly', () => {
|
||||
const issues: BeadIssue[] = [
|
||||
issue({ id: 'bb-1', title: 'Task 1', dependencies: [dep('blocks', 'bb-2')] }),
|
||||
issue({ id: 'bb-2', title: 'Task 2', dependencies: [] }),
|
||||
];
|
||||
|
||||
const graphModel = buildGraphModel(issues, { projectKey: 'test' });
|
||||
|
||||
assert.ok(graphModel, 'graphModel should be returned');
|
||||
assert.equal(graphModel.nodes.length, 2, 'should have 2 nodes');
|
||||
assert.equal(graphModel.edges.length, 1, 'should have 1 edge');
|
||||
assert.ok(graphModel.adjacency, 'should have adjacency');
|
||||
});
|
||||
|
||||
test('useGraphAnalysis underlying logic - cycleNodeIdSet detects cycles', () => {
|
||||
// Create a cycle: bb-1 blocks bb-2, bb-2 blocks bb-1
|
||||
const issues: BeadIssue[] = [
|
||||
issue({ id: 'bb-1', dependencies: [dep('blocks', 'bb-2')] }),
|
||||
issue({ id: 'bb-2', dependencies: [dep('blocks', 'bb-1')] }),
|
||||
];
|
||||
|
||||
const graphModel = buildGraphModel(issues, { projectKey: 'test' });
|
||||
const cycleAnalysis = detectDependencyCycles(graphModel);
|
||||
const cycleNodeIdSet = new Set(cycleAnalysis.cycleNodeIds);
|
||||
|
||||
assert.ok(cycleNodeIdSet.has('bb-1'), 'bb-1 should be in cycle');
|
||||
assert.ok(cycleNodeIdSet.has('bb-2'), 'bb-2 should be in cycle');
|
||||
});
|
||||
|
||||
test('useGraphAnalysis underlying logic - cycleNodeIdSet empty for acyclic graph', () => {
|
||||
const issues: BeadIssue[] = [
|
||||
issue({ id: 'bb-1', dependencies: [dep('blocks', 'bb-2')] }),
|
||||
issue({ id: 'bb-2', dependencies: [] }),
|
||||
];
|
||||
|
||||
const graphModel = buildGraphModel(issues, { projectKey: 'test' });
|
||||
const cycleAnalysis = detectDependencyCycles(graphModel);
|
||||
const cycleNodeIdSet = new Set(cycleAnalysis.cycleNodeIds);
|
||||
|
||||
assert.equal(cycleNodeIdSet.size, 0, 'no cycles in acyclic graph');
|
||||
});
|
||||
|
||||
test('useGraphAnalysis underlying logic - blockerAnalysis returns blockers', () => {
|
||||
// bb-1 blocks bb-2
|
||||
const issues: BeadIssue[] = [
|
||||
issue({ id: 'bb-1', dependencies: [] }),
|
||||
issue({ id: 'bb-2', dependencies: [dep('blocks', 'bb-1')] }),
|
||||
];
|
||||
|
||||
const graphModel = buildGraphModel(issues, { projectKey: 'test' });
|
||||
|
||||
// bb-2 is blocked by bb-1
|
||||
const result = analyzeBlockedChain(graphModel, { focusId: 'bb-2' });
|
||||
assert.ok(result, 'should return analysis for valid focusId');
|
||||
assert.ok(result.blockerNodeIds.includes('bb-1'), 'bb-1 should be a blocker of bb-2');
|
||||
});
|
||||
|
||||
test('useGraphAnalysis underlying logic - blockerTooltipMap shows blocker info', () => {
|
||||
// bb-1 blocks bb-2
|
||||
const issues: BeadIssue[] = [
|
||||
issue({ id: 'bb-1', title: 'Blocker Task', status: 'open', dependencies: [] }),
|
||||
issue({ id: 'bb-2', title: 'Blocked Task', status: 'open', dependencies: [dep('blocks', 'bb-1')] }),
|
||||
];
|
||||
|
||||
const graphModel = buildGraphModel(issues, { projectKey: 'test' });
|
||||
|
||||
const blockerTooltipMap = new Map<string, string[]>();
|
||||
for (const issue of issues) {
|
||||
const adjacency = graphModel.adjacency[issue.id];
|
||||
if (!adjacency) continue;
|
||||
const lines: string[] = [];
|
||||
for (const edge of adjacency.incoming) {
|
||||
if (edge.type !== 'blocks') continue;
|
||||
const source = issues.find((i) => i.id === edge.source);
|
||||
if (source && source.status !== 'closed') {
|
||||
lines.push(`${source.id} (${source.status}) - "${source.title}"`);
|
||||
}
|
||||
}
|
||||
blockerTooltipMap.set(issue.id, lines);
|
||||
}
|
||||
|
||||
// bb-2 should have bb-1 as blocker
|
||||
const bb2Tooltips = blockerTooltipMap.get('bb-2');
|
||||
assert.ok(bb2Tooltips, 'bb-2 should have blocker tooltips');
|
||||
assert.equal(bb2Tooltips.length, 1, 'bb-2 should have one blocker');
|
||||
assert.ok(bb2Tooltips[0].includes('bb-1'), 'tooltip should mention blocker id');
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue