@leanspec/ui 0.2.3 → 0.2.4

package/dist/standalone/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 }
+    );
+  }
+}

package/dist/standalone/packages/web/src/app/api/specs/[id]/route.ts

@@ -0,0 +1,36 @@
+/**
+ * GET /api/specs/[id] - Get a specific spec
+ */
+
+import { NextResponse } from 'next/server';
+import { getSpecById } from '@/lib/db/service-queries';
+
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  try {
+    const { id } = await params;
+    const spec = await getSpecById(id);
+    
+    if (!spec) {
+      return NextResponse.json(
+        { error: 'Spec not found' },
+        { status: 404 }
+      );
+    }
+    
+    // Tier 2: Add cache headers for client-side caching
+    return NextResponse.json({ spec }, {
+      headers: {
+        'Cache-Control': 'public, s-maxage=60, stale-while-revalidate=120'
+      }
+    });
+  } catch (error) {
+    console.error('Error fetching spec:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch spec' },
+      { status: 500 }
+    );
+  }
+}

package/dist/standalone/packages/web/src/app/api/specs/[id]/subspecs/[file]/route.ts

@@ -0,0 +1,46 @@
+/**
+ * GET /api/specs/[id]/subspecs/[file] - Get a specific sub-spec file
+ */
+
+import { NextResponse } from 'next/server';
+import { getSpecById } from '@/lib/db/service-queries';
+
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ id: string; file: string }> }
+) {
+  try {
+    const { id, file } = await params;
+    const spec = await getSpecById(id);
+    
+    if (!spec) {
+      return NextResponse.json(
+        { error: 'Spec not found' },
+        { status: 404 }
+      );
+    }
+
+    // Find the requested sub-spec file
+    const subSpec = spec.subSpecs?.find(s => s.file === file);
+    
+    if (!subSpec) {
+      return NextResponse.json(
+        { error: 'Sub-spec not found' },
+        { status: 404 }
+      );
+    }
+    
+    // Tier 2: Add cache headers for client-side caching
+    return NextResponse.json({ subSpec }, {
+      headers: {
+        'Cache-Control': 'public, s-maxage=60, stale-while-revalidate=120'
+      }
+    });
+  } catch (error) {
+    console.error('Error fetching sub-spec:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch sub-spec' },
+      { status: 500 }
+    );
+  }
+}

package/dist/standalone/packages/web/src/app/api/stats/route.ts

@@ -0,0 +1,19 @@
+/**
+ * GET /api/stats - Get project and spec statistics
+ */
+
+import { NextResponse } from 'next/server';
+import { getStats } from '@/lib/db/service-queries';
+
+export async function GET() {
+  try {
+    const stats = await getStats();
+    return NextResponse.json(stats);
+  } catch (error) {
+    console.error('Error fetching stats:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch stats' },
+      { status: 500 }
+    );
+  }
+}

package/dist/standalone/packages/web/src/app/board/board-client.tsx

@@ -0,0 +1,162 @@
+'use client';
+
+import Link from 'next/link';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Clock, PlayCircle, CheckCircle2, Archive } from 'lucide-react';
+import { PriorityBadge } from '@/components/priority-badge';
+import { cn } from '@/lib/utils';
+
+interface Spec {
+  id: string;
+  specNumber: number | null;
+  specName: string;
+  title: string | null;
+  status: string | null;
+  priority: string | null;
+  tags: string[] | null;
+}
+
+interface BoardClientProps {
+  initialSpecs: Spec[];
+}
+
+export function BoardClient({ initialSpecs }: BoardClientProps) {
+  const statusConfig = {
+    'planned': {
+      icon: Clock,
+      title: 'Planned',
+      colorClass: 'text-blue-600 dark:text-blue-400',
+      bgClass: 'bg-blue-50 dark:bg-blue-900/20',
+      borderClass: 'border-blue-200 dark:border-blue-800'
+    },
+    'in-progress': {
+      icon: PlayCircle,
+      title: 'In Progress',
+      colorClass: 'text-orange-600 dark:text-orange-400',
+      bgClass: 'bg-orange-50 dark:bg-orange-900/20',
+      borderClass: 'border-orange-200 dark:border-orange-800'
+    },
+    'complete': {
+      icon: CheckCircle2,
+      title: 'Complete',
+      colorClass: 'text-green-600 dark:text-green-400',
+      bgClass: 'bg-green-50 dark:bg-green-900/20',
+      borderClass: 'border-green-200 dark:border-green-800'
+    },
+    'archived': {
+      icon: Archive,
+      title: 'Archived',
+      colorClass: 'text-gray-600 dark:text-gray-400',
+      bgClass: 'bg-gray-50 dark:bg-gray-900/20',
+      borderClass: 'border-gray-200 dark:border-gray-800'
+    }
+  };
+
+  const statuses = ['planned', 'in-progress', 'complete', 'archived'] as const;
+  const columns = statuses.map(status => ({
+    status,
+    config: statusConfig[status],
+    specs: initialSpecs.filter(spec => spec.status === status),
+  }));
+
+  return (
+    <div className="min-h-screen bg-background">
+      <section className="container mx-auto px-4 py-8">
+        <div className="mb-8">
+          <h1 className="text-4xl font-bold tracking-tight">Kanban Board</h1>
+          <p className="text-muted-foreground mt-2">Track spec progress across all statuses</p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+          {columns.map(column => {
+            const Icon = column.config.icon;
+            return (
+              <div key={column.status} className="flex flex-col">
+                <div className={cn(
+                  "sticky top-14 z-40 mb-4 p-3 rounded-lg border-2 bg-background",
+                  column.config.bgClass,
+                  column.config.borderClass
+                )}>
+                  <h2 className={cn(
+                    "text-lg font-semibold flex items-center gap-2",
+                    column.config.colorClass
+                  )}>
+                    <Icon className="h-5 w-5" />
+                    {column.config.title}
+                    <Badge variant="outline" className="ml-auto">{column.specs.length}</Badge>
+                  </h2>
+                </div>
+
+                <div className="space-y-3 flex-1">
+                  {column.specs.map(spec => {
+                    // Get priority color for left border
+                    const priorityColors = {
+                      'critical': 'border-l-red-500',
+                      'high': 'border-l-orange-500',
+                      'medium': 'border-l-blue-500',
+                      'low': 'border-l-gray-400'
+                    };
+                    const borderColor = priorityColors[spec.priority as keyof typeof priorityColors] || priorityColors.medium;
+
+                    return (
+                      <Card 
+                        key={spec.id} 
+                        className={cn(
+                          "hover:shadow-lg transition-all duration-150 hover:scale-[1.02] border-l-4 cursor-pointer border-gray-200 dark:border-gray-800",
+                          borderColor
+                        )}
+                        onClick={() => window.location.href = `/specs/${spec.specNumber || spec.id}`}
+                      >
+                        <CardHeader className="pb-3">
+                          <Link href={`/specs/${spec.specNumber || spec.id}`}>
+                            <CardTitle className="text-sm font-medium hover:text-primary transition-colors">
+                              {spec.specNumber ? `#${spec.specNumber}` : spec.specName}
+                            </CardTitle>
+                          </Link>
+                        </CardHeader>
+                        <CardContent className="space-y-2">
+                          <p className="text-sm text-muted-foreground line-clamp-2">
+                            {spec.title || spec.specName}
+                          </p>
+                          
+                          <div className="flex items-center gap-2 flex-wrap">
+                            {spec.priority && <PriorityBadge priority={spec.priority} />}
+                            
+                            {spec.tags && spec.tags.length > 0 && (
+                              <>
+                                {spec.tags.slice(0, 2).map(tag => (
+                                  <Badge key={tag} variant="outline" className="text-xs">
+                                    {tag}
+                                  </Badge>
+                                ))}
+                                {spec.tags.length > 2 && (
+                                  <Badge variant="outline" className="text-xs">
+                                    +{spec.tags.length - 2}
+                                  </Badge>
+                                )}
+                              </>
+                            )}
+                          </div>
+                        </CardContent>
+                      </Card>
+                    );
+                  })}
+
+                  {column.specs.length === 0 && (
+                    <Card className="border-dashed border-gray-300 dark:border-gray-700">
+                      <CardContent className="py-8 text-center">
+                        <Icon className={cn("mx-auto h-8 w-8 mb-2", column.config.colorClass, "opacity-50")} />
+                        <p className="text-sm text-muted-foreground">No {column.config.title.toLowerCase()} specs</p>
+                      </CardContent>
+                    </Card>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </section>
+    </div>
+  );
+}

package/dist/standalone/packages/web/src/app/board/loading.tsx

@@ -0,0 +1,43 @@
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+
+export default function BoardLoading() {
+  return (
+    <div className="min-h-screen bg-background">
+      <section className="container mx-auto px-4 py-8">
+        <div className="mb-8">
+          <Skeleton className="h-10 w-48 mb-2" />
+          <Skeleton className="h-5 w-96" />
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+          {[...Array(4)].map((_, colIdx) => (
+            <div key={colIdx} className="flex flex-col">
+              <div className="mb-4">
+                <Skeleton className="h-7 w-32" />
+              </div>
+
+              <div className="space-y-3 flex-1">
+                {[...Array(3)].map((_, i) => (
+                  <Card key={i}>
+                    <CardHeader className="pb-3">
+                      <Skeleton className="h-5 w-24" />
+                    </CardHeader>
+                    <CardContent className="space-y-2">
+                      <Skeleton className="h-4 w-full" />
+                      <Skeleton className="h-4 w-3/4" />
+                      <div className="flex gap-2 pt-2">
+                        <Skeleton className="h-5 w-16" />
+                        <Skeleton className="h-5 w-16" />
+                      </div>
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}

package/dist/standalone/packages/web/src/app/board/page.tsx

@@ -0,0 +1,18 @@
+/**
+ * Board page - Redirects to unified specs page with board view
+ */
+
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+
+export default function Board() {
+  const router = useRouter();
+  
+  useEffect(() => {
+    router.replace('/specs?view=board');
+  }, [router]);
+
+  return null;
+}