Merge branch 'main' of github.com:codervisor/lean-spec

Author: tikazyq

packages/web/src/app/api/specs/[id]/dependency-graph/route.test.ts

@@ -0,0 +1,51 @@
+/**
+ * Test the dependency-graph API endpoint
+ */
+
+import { describe, it, expect } from 'vitest';
+import { GET } from './route';
+import { NextRequest } from 'next/server';
+
+describe('Dependency Graph API', () => {
+  it('should return complete dependency graph for spec 097', async () => {
+    // Mock params
+    const params = Promise.resolve({ id: '097' });
+    
+    // Create mock request
+    const request = new Request('http://localhost:3000/api/specs/097/dependency-graph');
+    
+    // Call the endpoint
+    const response = await GET(request, { params });
+    
+    // Parse response
+    const data = await response.json();
+    
+    // If spec not found in test environment, skip detailed assertions
+    if (response.status === 404) {
+      expect(data).toHaveProperty('error');
+      return;
+    }
+    
+    // Verify structure
+    expect(data).toHaveProperty('current');
+    expect(data).toHaveProperty('dependsOn');
+    expect(data).toHaveProperty('requiredBy');
+    expect(data).toHaveProperty('related');
+    
+    // Verify arrays
+    expect(data.dependsOn).toBeInstanceOf(Array);
+    expect(data.requiredBy).toBeInstanceOf(Array);
+    expect(data.related).toBeInstanceOf(Array);
+  });
+
+  it('should return 404 for non-existent spec', async () => {
+    const params = Promise.resolve({ id: '999' });
+    const request = new Request('http://localhost:3000/api/specs/999/dependency-graph');
+    
+    const response = await GET(request, { params });
+    
+    expect(response.status).toBe(404);
+    const data = await response.json();
+    expect(data).toHaveProperty('error');
+  });
+});

packages/web/src/app/api/specs/[id]/dependency-graph/route.ts

@@ -0,0 +1,171 @@
+/**
+ * GET /api/specs/[id]/dependency-graph - Get complete dependency graph for a spec
+ * 
+ * Returns upstream dependencies, downstream dependents, and related specs
+ * for the specified spec using the SpecDependencyGraph from @leanspec/core
+ */
+
+import { NextResponse } from 'next/server';
+import { getSpecById } from '@/lib/db/service-queries';
+import { SpecDependencyGraph, type SpecInfo } from '@/lib/dependency-graph';
+import { readFileSync, readdirSync, statSync } from 'node:fs';
+import { join } from 'node:path';
+import matter from 'gray-matter';
+
+/**
+ * Load all specs with relationships from filesystem
+ */
+function loadAllSpecsWithRelationships(specsDir: string): SpecInfo[] {
+  const specInfos: SpecInfo[] = [];
+  
+  try {
+    const entries = readdirSync(specsDir);
+    
+    for (const entry of entries) {
+      const specPath = join(specsDir, entry);
+      const stat = statSync(specPath);
+      
+      if (!stat.isDirectory()) continue;
+      if (entry === 'archived') continue; // Skip archived
+      if (!/^\d{2,}-/.test(entry)) continue; // Must be spec pattern (e.g., 001-name)
+      
+      try {
+        const readmePath = join(specPath, 'README.md');
+        const raw = readFileSync(readmePath, 'utf-8');
+        const { data } = matter(raw);
+        
+        if (!data || !data.status) continue;
+        
+        const frontmatter: any = {
+          status: data.status || 'planned',
+          created: data.created_at || data.created || new Date().toISOString().split('T')[0],
+        };
+        
+        // Parse relationships - normalize to arrays
+        if (data.depends_on) {
+          frontmatter.depends_on = Array.isArray(data.depends_on) 
+            ? data.depends_on 
+            : [data.depends_on];
+        } else {
+          frontmatter.depends_on = [];
+        }
+        
+        if (data.related) {
+          frontmatter.related = Array.isArray(data.related) 
+            ? data.related 
+            : [data.related];
+        } else {
+          frontmatter.related = [];
+        }
+        
+        // Add optional fields
+        if (data.priority) frontmatter.priority = data.priority;
+        if (data.tags) frontmatter.tags = data.tags;
+        if (data.assignee) frontmatter.assignee = data.assignee;
+        
+        specInfos.push({
+          path: entry,
+          fullPath: specPath,
+          filePath: readmePath,
+          name: entry,
+          frontmatter,
+        });
+      } catch (err) {
+        console.warn(`Failed to parse spec ${entry}:`, err);
+      }
+    }
+  } catch (error) {
+    console.error('Failed to load specs:', error);
+  }
+  
+  return specInfos;
+}
+
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  try {
+    const { id } = await params;
+    
+    // Get the target spec
+    const spec = await getSpecById(id);
+    if (!spec) {
+      return NextResponse.json(
+        { error: 'Spec not found' },
+        { status: 404 }
+      );
+    }
+
+    // Load all specs from filesystem with relationships
+    const specsDir = join(process.cwd(), '../../specs');
+    const specInfos = loadAllSpecsWithRelationships(specsDir);
+    
+    // Build dependency graph
+    const graph = new SpecDependencyGraph(specInfos);
+    
+    // Get complete graph for the target spec
+    const completeGraph = graph.getCompleteGraph(spec.specName);
+    
+    // Helper to extract spec number from name
+    const getSpecNumber = (name: string): number | null => {
+      const match = name.match(/^(\d+)/);
+      return match ? parseInt(match[1], 10) : null;
+    };
+    
+    // Helper to extract title from name
+    const getTitle = (name: string): string => {
+      const parts = name.split('-');
+      if (parts.length > 1) {
+        return parts.slice(1).join('-').replace(/-/g, ' ');
+      }
+      return name;
+    };
+    
+    // Format response with simplified spec metadata
+    const response = {
+      current: {
+        id: spec.id,
+        specNumber: spec.specNumber,
+        specName: spec.specName,
+        title: spec.title,
+        status: spec.status,
+        priority: spec.priority,
+      },
+      dependsOn: completeGraph.dependsOn.map(s => ({
+        specNumber: getSpecNumber(s.name),
+        specName: s.name,
+        title: getTitle(s.name),
+        status: s.frontmatter.status,
+        priority: s.frontmatter.priority,
+      })),
+      requiredBy: completeGraph.requiredBy.map(s => ({
+        specNumber: getSpecNumber(s.name),
+        specName: s.name,
+        title: getTitle(s.name),
+        status: s.frontmatter.status,
+        priority: s.frontmatter.priority,
+      })),
+      related: completeGraph.related.map(s => ({
+        specNumber: getSpecNumber(s.name),
+        specName: s.name,
+        title: getTitle(s.name),
+        status: s.frontmatter.status,
+        priority: s.frontmatter.priority,
+      })),
+    };
+    
+    // Return with cache headers
+    return NextResponse.json(response, {
+      headers: {
+        'Cache-Control': 'public, s-maxage=60, stale-while-revalidate=120'
+      }
+    });
+  } catch (error) {
+    console.error('Error fetching dependency graph:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch dependency graph' },
+      { status: 500 }
+    );
+  }
+}

packages/web/src/components/spec-dependency-graph.tsx

@@ -22,8 +22,9 @@ const NODE_WIDTH = 280;
 const NODE_HEIGHT = 110;
 const precedenceColor = '#f59e0b';
 const relatedColor = '#38bdf8';
+const requiredByColor = '#ef4444'; // Red color for downstream dependents
 
-type GraphTone = 'precedence' | 'related' | 'current';
+type GraphTone = 'precedence' | 'related' | 'current' | 'required-by';
 
 interface SpecNodeData {
   label: string;
@@ -38,6 +39,7 @@ const toneClasses: Record<GraphTone, string> = {
   current: 'border-primary/70 bg-primary/5 text-foreground',
   precedence: 'border-amber-400/70 bg-amber-400/10 text-amber-900 dark:text-amber-200',
   related: 'border-sky-400/70 bg-sky-400/10 text-sky-900 dark:text-sky-200',
+  'required-by': 'border-red-400/70 bg-red-400/10 text-red-900 dark:text-red-200',
 };
 
 const dagreConfig: dagre.GraphLabel = {
@@ -198,6 +200,45 @@ function buildGraph(relationships: SpecRelationships, specNumber: number | null
     });
   });
 
+  // Required By: Specs that depend on this one (downstream, blocked)
+  relationships.requiredBy?.forEach((value, index) => {
+    const id = nodeId('required-by', value, index);
+    nodes.push({
+      id,
+      type: 'specNode',
+      data: {
+        label: formatRelationshipLabel(value),
+        badge: 'Required By',
+        subtitle: 'Blocked by this spec',
+        tone: 'required-by',
+        href: buildRelationshipHref(value),
+        interactive: true,
+      },
+      position: { x: 0, y: 0 },
+      draggable: false,
+      selectable: true,
+      sourcePosition: Position.Right,
+      targetPosition: Position.Left,
+    });
+
+    edges.push({
+      id: `edge-current-${id}`,
+      source: currentNode.id,
+      target: id,
+      type: 'smoothstep',
+      markerEnd: {
+        type: MarkerType.ArrowClosed,
+        color: requiredByColor,
+        width: 28,
+        height: 28,
+      },
+      style: {
+        stroke: requiredByColor,
+        strokeWidth: 3,
+      },
+    });
+  });
+
   // Related: Bidirectional informational connections
   relationships.related?.forEach((value, index) => {
     const id = nodeId('related', value, index);
@@ -310,6 +351,10 @@ export function SpecDependencyGraph({ relationships, specNumber, specTitle }: Sp
           <span className="inline-block h-2.5 w-8 rounded-full bg-amber-400/80" />
           Depends On → blocks until complete
         </span>
+        <span className="inline-flex items-center gap-2 font-medium">
+          <span className="inline-block h-2.5 w-8 rounded-full bg-red-400/80" />
+          Required By ← blocked by this spec
+        </span>
         <span className="inline-flex items-center gap-2 font-medium">
           <span className="inline-block h-2.5 w-8 rounded-full bg-sky-400/80" />
           Related ↔ connected work (bidirectional)

packages/web/src/components/spec-detail-client.tsx

@@ -103,10 +103,35 @@ export function SpecDetailClient({ initialSpec, initialSubSpec }: SpecDetailClie
     }
   );
 
+  // Fetch complete dependency graph when dialog opens
+  const { data: dependencyGraphData } = useSWR<{
+    current: any;
+    dependsOn: any[];
+    requiredBy: any[];
+    related: any[];
+  }>(
+    dependenciesDialogOpen ? `/api/specs/${initialSpec.specNumber || initialSpec.id}/dependency-graph` : null,
+    fetcher,
+    {
+      revalidateOnFocus: false,
+      dedupingInterval: 60000, // Cache for 1 minute
+    }
+  );
+
   const spec = specData?.spec || initialSpec;
   const tags = spec.tags || [];
   const updatedRelative = spec.updatedAt ? formatRelativeTime(spec.updatedAt) : 'N/A';
   const relationships = spec.relationships;
+  
+  // Use complete graph if available, otherwise fall back to basic relationships
+  const completeRelationships = dependencyGraphData
+    ? {
+        dependsOn: dependencyGraphData.dependsOn.map(s => s.specName),
+        requiredBy: dependencyGraphData.requiredBy.map(s => s.specName),
+        related: dependencyGraphData.related.map(s => s.specName),
+      }
+    : relationships;
+  
   const hasRelationships = Boolean(
     relationships && ((relationships.dependsOn?.length ?? 0) > 0 || (relationships.related?.length ?? 0) > 0)
   );
@@ -263,9 +288,9 @@ export function SpecDetailClient({ initialSpec, initialSubSpec }: SpecDetailClie
                   </DialogDescription>
                 </DialogHeader>
                 <div className="min-h-0 flex-1">
-                  {relationships && (
+                  {completeRelationships && (
                     <SpecDependencyGraph
-                      relationships={relationships}
+                      relationships={completeRelationships}
                       specNumber={spec.specNumber}
                       specTitle={displayTitle}
                     />