@leanspec/ui 0.2.8 → 0.2.9-dev.20251205030455

package/.next/standalone/packages/ui/src/app/api/projects/[id]/dependencies/route.ts

@@ -0,0 +1,69 @@
+import { NextResponse } from 'next/server';
+import { getSpecsWithMetadata } from '@/lib/db/service-queries';
+import type { ProjectDependencyGraph } from '@/app/api/dependencies/route';
+
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  try {
+    const { id: projectId } = await params;
+    const specs = await getSpecsWithMetadata(projectId);
+    
+    const nodes = specs
+      .filter(spec => spec.specNumber !== null)
+      .map(spec => ({
+        id: spec.id,
+        name: spec.title || spec.specName || `Spec ${spec.specNumber}`,
+        number: spec.specNumber!,
+        status: spec.status || 'planned',
+        priority: spec.priority || 'medium',
+        tags: spec.tags || [],
+      }));
+
+    const edges: ProjectDependencyGraph['edges'] = [];
+    const specIdByFolder = new Map<string, string>();
+    
+    specs.forEach(spec => {
+      if (spec.specNumber !== null) {
+        const folderName = spec.filePath
+          .replace(/^specs\//, '')
+          .replace(/\/README\.md$/, '');
+        specIdByFolder.set(folderName, spec.id);
+        
+        const paddedNumber = spec.specNumber.toString().padStart(3, '0');
+        specIdByFolder.set(paddedNumber, spec.id);
+        specIdByFolder.set(spec.specNumber.toString(), spec.id);
+      }
+    });
+
+    specs.forEach(spec => {
+      if (!spec.specNumber) return;
+      
+      spec.relationships.dependsOn.forEach(dep => {
+        const depTrimmed = dep.trim();
+        const match = depTrimmed.match(/^(\d+)/);
+        const targetId = match 
+          ? specIdByFolder.get(match[1]) || specIdByFolder.get(match[1].padStart(3, '0'))
+          : specIdByFolder.get(depTrimmed);
+        
+        if (targetId && targetId !== spec.id) {
+          edges.push({
+            source: targetId,
+            target: spec.id,
+            type: 'dependsOn',
+          });
+        }
+      });
+    });
+
+    const graph: ProjectDependencyGraph = { nodes, edges };
+    return NextResponse.json(graph);
+  } catch (error) {
+    console.error('Error fetching dependency graph:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch dependency graph' },
+      { status: 500 }
+    );
+  }
+}

package/.next/standalone/packages/ui/src/app/api/projects/[id]/route.ts

@@ -1,5 +1,11 @@
+/**
+ * Project API routes
+ * 
+ * Uses filesystem-based project registry for all modes.
+ * Database mode was planned for external GitHub repos (spec 035/082) but not yet implemented.
+ */
+
 import { NextResponse } from 'next/server';
-import { getProjectById } from '@/lib/db/queries';
 import { projectRegistry } from '@/lib/projects/registry';
 
 export async function GET(
@@ -8,8 +14,9 @@ export async function GET(
 ) {
   try {
     const { id } = await params;
+    const specsMode = process.env.SPECS_MODE || 'filesystem';
 
-    if (process.env.SPECS_MODE === 'multi-project') {
+    if (specsMode === 'multi-project') {
       const project = await projectRegistry.getProject(id);
       if (!project) {
         return NextResponse.json(
@@ -22,14 +29,23 @@ export async function GET(
       return NextResponse.json({ project });
     }
 
-    const project = await getProjectById(id);
-    if (!project) {
-      return NextResponse.json(
-        { error: 'Project not found' },
-        { status: 404 }
-      );
+    // Filesystem mode: return a virtual single project
+    if (id === 'local') {
+      const specsDir = process.env.SPECS_DIR || 'specs';
+      return NextResponse.json({ 
+        project: {
+          id: 'local',
+          displayName: 'Local Project',
+          specsDir,
+          isFeatured: true,
+        }
+      });
     }
-    return NextResponse.json({ project });
+
+    return NextResponse.json(
+      { error: 'Project not found' },
+      { status: 404 }
+    );
   } catch (error) {
     console.error('Error fetching project:', error);
     return NextResponse.json(

package/.next/standalone/packages/ui/src/app/api/projects/[id]/specs/[spec]/route.ts

@@ -1,6 +1,12 @@
+/**
+ * GET /api/projects/[id]/specs/[spec] - Get a single spec
+ * 
+ * Uses filesystem-based service-queries for all modes.
+ * Database mode was planned for external GitHub repos (spec 035/082) but not yet implemented.
+ */
+
 import { NextResponse } from 'next/server';
-import { getSpecById } from '@/lib/db/queries';
-import { specsService } from '@/lib/specs/service';
+import { getSpecById } from '@/lib/db/service-queries';
 
 export async function GET(
   request: Request,
@@ -8,25 +14,19 @@ export async function GET(
 ) {
   try {
     const { id, spec: specId } = await params;
+    const specsMode = process.env.SPECS_MODE || 'filesystem';
 
-    if (process.env.SPECS_MODE === 'multi-project') {
-      const spec = await specsService.getSpec(specId, id);
-      if (!spec) {
-        return NextResponse.json(
-          { error: 'Spec not found' },
-          { status: 404 }
-        );
-      }
-      return NextResponse.json({ spec });
-    }
-
-    const spec = await getSpecById(specId);
+    // Pass projectId only for multi-project mode
+    const projectId = specsMode === 'multi-project' ? id : undefined;
+    const spec = await getSpecById(specId, projectId);
+    
     if (!spec) {
       return NextResponse.json(
         { error: 'Spec not found' },
         { status: 404 }
       );
     }
+    
     return NextResponse.json({ spec });
   } catch (error) {
     console.error('Error fetching spec:', error);

package/.next/standalone/packages/ui/src/app/api/projects/[id]/specs/route.ts

@@ -1,10 +1,12 @@
 /**
  * GET /api/projects/[id]/specs - Get specs for a project
+ * 
+ * Uses filesystem-based service-queries for all modes.
+ * Database mode was planned for external GitHub repos (spec 035/082) but not yet implemented.
  */
 
 import { NextResponse } from 'next/server';
-import { getSpecsByProjectId } from '@/lib/db/queries';
-import { specsService } from '@/lib/specs/service';
+import { getSpecs } from '@/lib/db/service-queries';
 
 export async function GET(
   request: Request,
@@ -12,13 +14,12 @@ export async function GET(
 ) {
   try {
     const { id } = await params;
+    const specsMode = process.env.SPECS_MODE || 'filesystem';
 
-    if (process.env.SPECS_MODE === 'multi-project') {
-      const specs = await specsService.getAllSpecs(id);
-      return NextResponse.json({ specs });
-    }
-
-    const specs = await getSpecsByProjectId(id);
+    // Pass projectId only for multi-project mode
+    const projectId = specsMode === 'multi-project' ? id : undefined;
+    const specs = await getSpecs(projectId);
+    
     return NextResponse.json({ specs });
   } catch (error) {
     console.error('Error fetching specs:', error);

package/.next/standalone/packages/ui/src/app/api/projects/[id]/validate/route.ts

@@ -0,0 +1,49 @@
+/**
+ * Project Validation API route
+ * Re-validates a project path to check if it still exists and is valid
+ */
+
+import { NextResponse } from 'next/server';
+import { projectRegistry } from '@/lib/projects/registry';
+
+export async function POST(
+  request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  try {
+    if (process.env.SPECS_MODE !== 'multi-project') {
+      return NextResponse.json(
+        { error: 'Multi-project mode is not enabled' },
+        { status: 400 }
+      );
+    }
+
+    const { id } = await params;
+    const project = await projectRegistry.getProject(id);
+    
+    if (!project) {
+      return NextResponse.json(
+        { error: 'Project not found' },
+        { status: 404 }
+      );
+    }
+
+    const validation = await projectRegistry.validateProject(project.path);
+    
+    return NextResponse.json({
+      projectId: id,
+      path: project.path,
+      validation: {
+        isValid: validation.isValid,
+        error: validation.error,
+        specsDir: validation.specsDir,
+      }
+    });
+  } catch (error) {
+    console.error('Error validating project:', error);
+    return NextResponse.json(
+      { error: 'Failed to validate project' },
+      { status: 500 }
+    );
+  }
+}

package/.next/standalone/packages/ui/src/app/api/projects/route.ts

@@ -1,15 +1,22 @@
 /**
  * GET /api/projects - List all projects
+ * 
+ * Modes:
+ * - filesystem (default): returns a single virtual project for the local specs
+ * - multi-project: reads from project registry (filesystem-based)
+ * 
+ * Database mode was planned for external GitHub repos (spec 035/082) but not yet implemented.
  */
 
 import { NextResponse } from 'next/server';
-import { getProjects } from '@/lib/db/queries';
 import { projectRegistry } from '@/lib/projects/registry';
 
 export async function GET() {
   try {
-    // Check if running in multi-project mode
-    if (process.env.SPECS_MODE === 'multi-project') {
+    const specsMode = process.env.SPECS_MODE || 'filesystem';
+
+    // Multi-project mode: use project registry (filesystem-based)
+    if (specsMode === 'multi-project') {
       const projects = await projectRegistry.getProjects();
       const recentProjects = await projectRegistry.getRecentProjects();
       const favoriteProjects = await projectRegistry.getFavoriteProjects();
@@ -21,10 +28,16 @@ export async function GET() {
       });
     }
 
-    const projects = await getProjects();
+    // Filesystem mode: return a virtual single project (no database needed)
+    const specsDir = process.env.SPECS_DIR || 'specs';
     return NextResponse.json({ 
       mode: 'single-project',
-      projects 
+      projects: [{
+        id: 'local',
+        displayName: 'Local Project',
+        specsDir,
+        isFeatured: true,
+      }]
     });
   } catch (error) {
     console.error('Error fetching projects:', error);

package/.next/standalone/packages/ui/src/app/api/specs/[id]/dependency-graph/route.test.ts

@@ -30,12 +30,10 @@ describe('Dependency Graph API', () => {
     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 () => {

package/.next/standalone/packages/ui/src/app/api/specs/[id]/dependency-graph/route.ts

@@ -50,14 +50,6 @@ function loadAllSpecsWithRelationships(specsDir: string): SpecInfo[] {
           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;
@@ -146,13 +138,6 @@ export async function GET(
         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

package/.next/standalone/packages/ui/src/app/context/context-client.tsx

@@ -1,18 +1,20 @@
 /**
  * Project Context Client Component
  * Displays project-level context files (AGENTS.md, config, README, etc.)
+ * Uses sidebar + content layout similar to spec detail page
  * Phases 2 & 4: Spec 131 - UI Project Context Visibility
  */
 
 'use client';
 
 import * as React from 'react';
-import { BookOpen, Settings, FileText, Copy, Check, AlertCircle, Coins, Info, Search, X } from 'lucide-react';
+import { BookOpen, Settings, FileText, Copy, Check, AlertCircle, Coins, Info, Search, X, ChevronRight, ChevronDown } from 'lucide-react';
 import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Input } from '@/components/ui/input';
 import { ContextFileCard, countMatches } from '@/components/context-file-viewer';
+import { ContextFileDetail } from '@/components/context-file-detail';
 import type { ProjectContext, ContextFile } from '@/lib/specs/types';
 import { cn } from '@/lib/utils';
 
@@ -69,6 +71,7 @@ function ContextSection({
   defaultExpanded = true,
   searchQuery,
   projectRoot,
+  onFileSelect,
 }: {
   title: string;
   description: string;
@@ -79,6 +82,7 @@ function ContextSection({
   defaultExpanded?: boolean;
   searchQuery?: string;
   projectRoot?: string;
+  onFileSelect?: (file: ContextFile) => void;
 }) {
   const totalTokens = files.reduce((sum, f) => sum + f.tokenCount, 0);
   
@@ -149,6 +153,7 @@ function ContextSection({
                 lastModified={file.lastModified}
                 searchQuery={searchQuery}
                 projectRoot={projectRoot}
+                onViewDetail={onFileSelect ? () => onFileSelect(file) : undefined}
               />
             ))}
           </div>
@@ -161,6 +166,7 @@ function ContextSection({
 export function ContextClient({ context }: ContextClientProps) {
   const [copiedAll, setCopiedAll] = React.useState(false);
   const [searchQuery, setSearchQuery] = React.useState('');
+  const [selectedFile, setSelectedFile] = React.useState<ContextFile | null>(null);
 
   // Collect all content for "Copy All" feature
   const handleCopyAll = async () => {
@@ -211,6 +217,19 @@ export function ContextClient({ context }: ContextClientProps) {
     return total;
   }, [context, searchQuery]);
 
+  // If a file is selected, show the detail view
+  if (selectedFile) {
+    return (
+      <div className="min-h-screen bg-background">
+        <ContextFileDetail
+          file={selectedFile}
+          projectRoot={context.projectRoot}
+          onBack={() => setSelectedFile(null)}
+        />
+      </div>
+    );
+  }
+
   return (
     <div className="min-h-screen bg-background">
       <div className="container mx-auto px-4 py-8 max-w-5xl">
@@ -323,6 +342,7 @@ export function ContextClient({ context }: ContextClientProps) {
             defaultExpanded={context.agentInstructions.length <= 2}
             searchQuery={searchQuery}
             projectRoot={context.projectRoot}
+            onFileSelect={setSelectedFile}
           />
 
           {/* Configuration */}
@@ -336,6 +356,7 @@ export function ContextClient({ context }: ContextClientProps) {
             defaultExpanded={true}
             searchQuery={searchQuery}
             projectRoot={context.projectRoot}
+            onFileSelect={setSelectedFile}
           />
 
           {/* Project Documentation */}
@@ -349,6 +370,7 @@ export function ContextClient({ context }: ContextClientProps) {
             defaultExpanded={false}
             searchQuery={searchQuery}
             projectRoot={context.projectRoot}
+            onFileSelect={setSelectedFile}
           />
         </div>
 

package/.next/standalone/packages/ui/src/app/dashboard-client.tsx

@@ -19,7 +19,6 @@ import {
 import { StatusBadge } from '@/components/status-badge';
 import { PriorityBadge } from '@/components/priority-badge';
 import { Badge } from '@/components/ui/badge';
-import { extractH1Title } from '@/lib/utils';
 
 interface Spec {
   id: string;
@@ -31,7 +30,6 @@ interface Spec {
   tags: string[] | null;
   createdAt: Date | null;
   updatedAt: Date | null;
-  contentMd?: string;
 }
 
 interface Stats {
@@ -43,6 +41,7 @@ interface Stats {
 interface DashboardClientProps {
   initialSpecs: Spec[];
   initialStats: Stats;
+  projectId?: string;
 }
 
 function formatRelativeTime(date: Date | null): string {
@@ -60,14 +59,16 @@ function formatRelativeTime(date: Date | null): string {
   return date.toLocaleDateString();
 }
 
-function SpecListItem({ spec }: { spec: Spec }) {
-  // Extract H1 title from content if available, fallback to title or name
-  const h1Title = spec.contentMd ? extractH1Title(spec.contentMd) : null;
-  const displayTitle = h1Title || spec.title || spec.specName;
+function SpecListItem({ spec, projectId }: { spec: Spec; projectId?: string }) {
+  // Use title from server-side extraction, fallback to name
+  const displayTitle = spec.title || spec.specName;
+  const specUrl = projectId 
+    ? `/projects/${projectId}/specs/${spec.specNumber}`
+    : `/specs/${spec.specNumber}`;
   
   return (
     <Link 
-      href={`/specs/${spec.specNumber}`}
+      href={specUrl}
       className="block p-3 rounded-lg hover:bg-accent transition-colors"
       title={spec.specName} /* Show name as tooltip */
     >
@@ -108,9 +109,11 @@ function SpecListItem({ spec }: { spec: Spec }) {
   );
 }
 
-function ActivityItem({ spec, action, time }: { spec: Spec; action: string; time: Date | null }) {
-  const h1Title = spec.contentMd ? extractH1Title(spec.contentMd) : null;
-  const displayTitle = h1Title || spec.title || spec.specName;
+function ActivityItem({ spec, action, time, projectId }: { spec: Spec; action: string; time: Date | null; projectId?: string }) {
+  const displayTitle = spec.title || spec.specName;
+  const specUrl = projectId 
+    ? `/projects/${projectId}/specs/${spec.specNumber}`
+    : `/specs/${spec.specNumber}`;
   
   return (
     <div className="flex items-start gap-3 py-2">
@@ -118,7 +121,7 @@ function ActivityItem({ spec, action, time }: { spec: Spec; action: string; time
       <div className="flex-1 min-w-0">
         <p className="text-sm">
           <Link 
-            href={`/specs/${spec.specNumber}`}
+            href={specUrl}
             className="font-medium hover:underline"
             title={spec.specName}
           >
@@ -135,52 +138,23 @@ function ActivityItem({ spec, action, time }: { spec: Spec; action: string; time
   );
 }
 
-export function DashboardClient({ initialSpecs, initialStats }: DashboardClientProps) {
+export function DashboardClient({ initialSpecs, initialStats, projectId }: DashboardClientProps) {
   const { mode, currentProject, isLoading: isProjectLoading } = useProject();
   const [specs, setSpecs] = useState<Spec[]>(initialSpecs);
   const [stats, setStats] = useState<Stats>(initialStats);
-  const [isLoadingData, setIsLoadingData] = useState(false);
+  
+  // Use the projectId prop directly - it comes from the URL via server component
+  // and is always reliable, unlike currentProject from context during transitions
+  const effectiveProjectId = projectId;
 
+  // Update state when initialSpecs/initialStats change (e.g., on navigation)
   useEffect(() => {
-    if (mode === 'multi-project') {
-      if (currentProject) {
-        fetchProjectData(currentProject.id);
-      } else {
-        setSpecs([]);
-        setStats({ totalSpecs: 0, completionRate: 0, specsByStatus: [] });
-      }
-    }
-  }, [mode, currentProject]);
-
-  const fetchProjectData = async (projectId: string) => {
-    setIsLoadingData(true);
-    try {
-      const [specsRes, statsRes] = await Promise.all([
-        fetch(`/api/projects/${projectId}/specs`),
-        fetch(`/api/projects/${projectId}/stats`)
-      ]);
-      
-      if (specsRes.ok && statsRes.ok) {
-        const specsData = await specsRes.json();
-        const statsData = await statsRes.json();
-        
-        const parsedSpecs = specsData.specs.map((s: any) => ({
-            ...s,
-            createdAt: s.createdAt ? new Date(s.createdAt) : null,
-            updatedAt: s.updatedAt ? new Date(s.updatedAt) : null,
-        }));
-
-        setSpecs(parsedSpecs);
-        setStats(statsData.stats);
-      }
-    } catch (e) {
-      console.error(e);
-    } finally {
-      setIsLoadingData(false);
-    }
-  };
+    setSpecs(initialSpecs);
+    setStats(initialStats);
+  }, [initialSpecs, initialStats]);
 
-  if (mode === 'multi-project' && !currentProject) {
+  // Show loading state only when in multi-project mode and no project selected
+  if (mode === 'multi-project' && !projectId && !currentProject) {
      if (isProjectLoading) {
          return <div className="flex items-center justify-center h-screen"><Loader2 className="animate-spin" /></div>;
      }
@@ -191,10 +165,6 @@ export function DashboardClient({ initialSpecs, initialStats }: DashboardClientP
          </div>
      );
   }
-
-  if (isLoadingData) {
-      return <div className="flex items-center justify-center h-screen"><Loader2 className="animate-spin" /></div>;
-  }
   
   // Get specs by status
   const inProgressSpecs = specs
@@ -324,7 +294,7 @@ export function DashboardClient({ initialSpecs, initialStats }: DashboardClientP
             </CardHeader>
             <CardContent className="space-y-1">
               {recentlyAdded.slice(0, 5).map(spec => (
-                <SpecListItem key={spec.id} spec={spec} />
+                <SpecListItem key={spec.id} spec={spec} projectId={effectiveProjectId} />
               ))}
             </CardContent>
           </Card>
@@ -340,7 +310,7 @@ export function DashboardClient({ initialSpecs, initialStats }: DashboardClientP
             <CardContent className="space-y-1">
               {plannedSpecs.length > 0 ? (
                 plannedSpecs.map(spec => (
-                  <SpecListItem key={spec.id} spec={spec} />
+                  <SpecListItem key={spec.id} spec={spec} projectId={effectiveProjectId} />
                 ))
               ) : (
                 <p className="text-sm text-muted-foreground py-4 text-center">
@@ -361,7 +331,7 @@ export function DashboardClient({ initialSpecs, initialStats }: DashboardClientP
             <CardContent className="space-y-1">
               {inProgressSpecs.length > 0 ? (
                 inProgressSpecs.map(spec => (
-                  <SpecListItem key={spec.id} spec={spec} />
+                  <SpecListItem key={spec.id} spec={spec} projectId={effectiveProjectId} />
                 ))
               ) : (
                 <p className="text-sm text-muted-foreground py-4 text-center">
@@ -385,6 +355,7 @@ export function DashboardClient({ initialSpecs, initialStats }: DashboardClientP
                   spec={spec}
                   action="updated"
                   time={spec.updatedAt}
+                  projectId={effectiveProjectId}
                 />
               ))}
             </div>

package/.next/standalone/packages/ui/src/app/dependencies/constants.ts

@@ -0,0 +1,25 @@
+// Node dimensions
+export const NODE_WIDTH = 180;
+export const NODE_HEIGHT = 60;
+export const COMPACT_NODE_WIDTH = 120;
+export const COMPACT_NODE_HEIGHT = 40;
+
+// Edge colors
+export const DEPENDS_ON_COLOR = '#f59e0b';
+
+// Status tone classes for node styling (aligned with StatusBadge component)
+// Using light/dark mode compatible colors
+export const toneClasses: Record<string, string> = {
+  planned: 'border-blue-500 bg-blue-100 text-blue-800 dark:bg-blue-950/60 dark:text-blue-200',
+  'in-progress': 'border-orange-500 bg-orange-100 text-orange-800 dark:bg-orange-950/60 dark:text-orange-200',
+  complete: 'border-green-500 bg-green-100 text-green-800 dark:bg-green-950/60 dark:text-green-200',
+  archived: 'border-gray-400 bg-gray-100 text-gray-600 dark:border-gray-500/80 dark:bg-gray-900/60 dark:text-gray-400',
+};
+
+// Background colors for minimap (aligned with StatusBadge component)
+export const toneBgColors: Record<string, string> = {
+  planned: '#3b82f6',     // blue-500 (works in both themes)
+  'in-progress': '#f97316', // orange-500
+  complete: '#22c55e',    // green-500
+  archived: '#6b7280',    // gray-500
+};