@leanspec/ui 0.2.9 → 0.2.10

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]/tags/route.ts

@@ -0,0 +1,25 @@
+/**
+ * GET /api/projects/[id]/tags - Get all unique tags from specs in a project
+ */
+
+import { NextResponse } from 'next/server';
+import { getAllTags } from '@/lib/db/service-queries';
+
+export async function GET(
+  _request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  try {
+    const { id: projectId } = await params;
+    
+    if (process.env.SPECS_MODE !== 'multi-project') {
+      return NextResponse.json({ error: 'Multi-project mode not enabled' }, { status: 400 });
+    }
+    
+    const tags = await getAllTags(projectId);
+    return NextResponse.json({ tags });
+  } catch (error) {
+    console.error('Failed to fetch tags:', error);
+    return NextResponse.json({ error: 'Failed to fetch tags' }, { status: 500 });
+  }
+}

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/api/specs/[id]/metadata/route.ts

@@ -0,0 +1,184 @@
+/**
+ * PATCH /api/specs/[id]/metadata - Update spec metadata (status, priority, tags, assignee)
+ */
+
+import { NextResponse } from 'next/server';
+import path from 'node:path';
+import { readFile, writeFile } from 'node:fs/promises';
+import { existsSync } from 'node:fs';
+import { createUpdatedFrontmatter } from '@leanspec/core';
+
+const ALLOWED_STATUSES = ['planned', 'in-progress', 'complete', 'archived'] as const;
+const ALLOWED_PRIORITIES = ['low', 'medium', 'high', 'critical'] as const;
+
+type AllowedStatus = (typeof ALLOWED_STATUSES)[number];
+type AllowedPriority = (typeof ALLOWED_PRIORITIES)[number];
+
+interface MetadataUpdateRequest {
+  status?: AllowedStatus;
+  priority?: AllowedPriority;
+  tags?: string[];
+  assignee?: string;
+}
+
+function resolveProjectRoot(): string {
+  if (process.env.LEANSPEC_REPO_ROOT) {
+    return process.env.LEANSPEC_REPO_ROOT;
+  }
+
+  let currentDir = process.cwd();
+  for (let i = 0; i < 6; i++) {
+    if (existsSync(path.join(currentDir, '.lean-spec'))) {
+      return currentDir;
+    }
+    const parentDir = path.resolve(currentDir, '..');
+    if (parentDir === currentDir) {
+      break;
+    }
+    currentDir = parentDir;
+  }
+
+  // Fallback to repo root relative to UI package
+  return path.resolve(process.cwd(), '..', '..');
+}
+
+const PROJECT_ROOT = resolveProjectRoot();
+
+/**
+ * Find spec directory by identifier (number or name)
+ */
+async function findSpecDirectory(specIdentifier: string): Promise<string | null> {
+  const specsDir = path.join(PROJECT_ROOT, 'specs');
+  
+  if (!existsSync(specsDir)) {
+    return null;
+  }
+
+  const { readdir } = await import('node:fs/promises');
+  const entries = await readdir(specsDir, { withFileTypes: true });
+  
+  // Match by spec number or full directory name
+  const specPattern = /^(\d{2,})-/;
+  const specNum = parseInt(specIdentifier.split('-')[0], 10);
+  
+  for (const entry of entries) {
+    if (!entry.isDirectory()) continue;
+    
+    // Match by full name or by spec number
+    if (entry.name === specIdentifier) {
+      return path.join(specsDir, entry.name);
+    }
+    
+    if (!isNaN(specNum) && specPattern.test(entry.name)) {
+      const dirNum = parseInt(entry.name.split('-')[0], 10);
+      if (dirNum === specNum) {
+        return path.join(specsDir, entry.name);
+      }
+    }
+  }
+  
+  return null;
+}
+
+/**
+ * Validate metadata update request
+ */
+function validateRequest(payload: MetadataUpdateRequest): { valid: boolean; error?: string } {
+  // At least one field must be provided
+  if (!payload.status && !payload.priority && !payload.tags && payload.assignee === undefined) {
+    return { valid: false, error: 'At least one metadata field must be provided' };
+  }
+
+  // Validate status if provided
+  if (payload.status && !ALLOWED_STATUSES.includes(payload.status)) {
+    return { valid: false, error: `Invalid status. Allowed: ${ALLOWED_STATUSES.join(', ')}` };
+  }
+
+  // Validate priority if provided
+  if (payload.priority && !ALLOWED_PRIORITIES.includes(payload.priority)) {
+    return { valid: false, error: `Invalid priority. Allowed: ${ALLOWED_PRIORITIES.join(', ')}` };
+  }
+
+  // Validate tags if provided
+  if (payload.tags !== undefined) {
+    if (!Array.isArray(payload.tags)) {
+      return { valid: false, error: 'Tags must be an array' };
+    }
+    if (!payload.tags.every(t => typeof t === 'string')) {
+      return { valid: false, error: 'All tags must be strings' };
+    }
+  }
+
+  // Validate assignee if provided
+  if (payload.assignee !== undefined && typeof payload.assignee !== 'string') {
+    return { valid: false, error: 'Assignee must be a string' };
+  }
+
+  return { valid: true };
+}
+
+export async function PATCH(
+  request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  try {
+    const { id } = await params;
+    if (!id) {
+      return NextResponse.json({ error: 'Spec id is required' }, { status: 400 });
+    }
+
+    let payload: MetadataUpdateRequest = {};
+    try {
+      payload = await request.json();
+    } catch {
+      return NextResponse.json({ error: 'Invalid JSON body' }, { status: 400 });
+    }
+
+    const validation = validateRequest(payload);
+    if (!validation.valid) {
+      return NextResponse.json({ error: validation.error }, { status: 400 });
+    }
+
+    const specIdentifier = decodeURIComponent(id);
+    const specDir = await findSpecDirectory(specIdentifier);
+    
+    if (!specDir) {
+      return NextResponse.json({ error: 'Spec not found' }, { status: 404 });
+    }
+    
+    const readmePath = path.join(specDir, 'README.md');
+    
+    if (!existsSync(readmePath)) {
+      return NextResponse.json({ error: 'Spec README.md not found' }, { status: 404 });
+    }
+    
+    // Read current content
+    const currentContent = await readFile(readmePath, 'utf-8');
+    
+    // Build updates object (only include fields that were provided)
+    const updates: Record<string, unknown> = {};
+    if (payload.status) updates.status = payload.status;
+    if (payload.priority) updates.priority = payload.priority;
+    if (payload.tags !== undefined) updates.tags = payload.tags;
+    if (payload.assignee !== undefined) updates.assignee = payload.assignee || undefined;
+    
+    // Update frontmatter using @leanspec/core
+    const { content: updatedContent, frontmatter } = createUpdatedFrontmatter(currentContent, updates);
+    
+    // Write back to file
+    await writeFile(readmePath, updatedContent, 'utf-8');
+
+    return NextResponse.json({ 
+      success: true,
+      frontmatter: {
+        status: frontmatter.status,
+        priority: frontmatter.priority,
+        tags: frontmatter.tags,
+        assignee: frontmatter.assignee,
+      }
+    });
+  } catch (error) {
+    console.error('Failed to update spec metadata:', error);
+    return NextResponse.json({ error: 'Failed to update spec metadata' }, { status: 500 });
+  }
+}

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

@@ -0,0 +1,16 @@
+/**
+ * GET /api/tags - Get all unique tags from specs
+ */
+
+import { NextResponse } from 'next/server';
+import { getAllTags } from '@/lib/db/service-queries';
+
+export async function GET() {
+  try {
+    const tags = await getAllTags();
+    return NextResponse.json({ tags });
+  } catch (error) {
+    console.error('Failed to fetch tags:', error);
+    return NextResponse.json({ error: 'Failed to fetch tags' }, { status: 500 });
+  }
+}

package/.next/standalone/packages/ui/src/app/context/page.tsx

@@ -4,13 +4,35 @@
  * Spec 131 - UI Project Context Visibility
  */
 
+import { redirect } from 'next/navigation';
 import { getProjectContext } from '@/lib/db/service-queries';
+import { projectRegistry } from '@/lib/projects/registry';
 import { ContextClient } from './context-client';
 
 // Force dynamic rendering - this page needs runtime data
 export const dynamic = 'force-dynamic';
 
 export default async function ContextPage() {
+  const specsMode = process.env.SPECS_MODE || 'filesystem';
+  
+  // In multi-project mode, redirect to the most recent project's context
+  if (specsMode === 'multi-project') {
+    const recentProjects = await projectRegistry.getRecentProjects();
+    
+    if (recentProjects.length > 0) {
+      redirect(`/projects/${recentProjects[0].id}/context`);
+    }
+    
+    // If no recent projects, check for any projects
+    const projects = await projectRegistry.getProjects();
+    if (projects.length > 0) {
+      redirect(`/projects/${projects[0].id}/context`);
+    }
+    
+    // No projects at all - redirect to projects page to add one
+    redirect('/projects');
+  }
+  
   const context = await getProjectContext();
 
   return <ContextClient context={context} />;

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
@@ -231,10 +201,20 @@ export function DashboardClient({ initialSpecs, initialStats }: DashboardClientP
       <div className="max-w-7xl mx-auto space-y-6 sm:space-y-8">
         {/* Header */}
         <div>
-          <h1 className="text-3xl sm:text-4xl font-bold tracking-tight">Dashboard</h1>
-          <p className="text-muted-foreground mt-2">
-            Project overview and recent activity
-          </p>
+          <div className="flex items-center gap-3">
+            {currentProject?.color && (
+              <div
+                className="h-8 w-2 rounded-full shrink-0"
+                style={{ backgroundColor: currentProject.color }}
+              />
+            )}
+            <div>
+              <h1 className="text-3xl sm:text-4xl font-bold tracking-tight">Dashboard</h1>
+              <p className="text-muted-foreground mt-2">
+                {currentProject ? `${currentProject.name} — overview and recent activity` : 'Project overview and recent activity'}
+              </p>
+            </div>
+          </div>
         </div>
 
         {/* Stats Cards */}
@@ -324,7 +304,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 +320,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 +341,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 +365,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

@@ -8,17 +8,18 @@ export const COMPACT_NODE_HEIGHT = 40;
 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/80 bg-blue-950/60 text-blue-200',
-  'in-progress': 'border-orange-500/80 bg-orange-950/60 text-orange-200',
-  complete: 'border-green-500/80 bg-green-950/60 text-green-200',
-  archived: 'border-gray-500/80 bg-gray-900/60 text-gray-400',
+  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: '#1e3a8a',     // blue-900
-  'in-progress': '#7c2d12', // orange-900
-  complete: '#14532d',    // green-900
-  archived: '#1f2937',
+  planned: '#3b82f6',     // blue-500 (works in both themes)
+  'in-progress': '#f97316', // orange-500
+  complete: '#22c55e',    // green-500
+  archived: '#6b7280',    // gray-500
 };