@leanspec/ui 0.2.9-dev.20251205030455 → 0.2.10

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

@@ -1,17 +1,16 @@
 'use client';
 
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
-import { Plus, Search, FolderOpen, Star, MoreVertical, Trash2, Pencil, RefreshCw, Check, X, AlertTriangle, CheckCircle2 } from 'lucide-react';
+import { Plus, Search, FolderOpen, Star, MoreVertical, Trash2, Pencil, RefreshCw, Check, X, AlertTriangle, CheckCircle2, ArrowLeft } from 'lucide-react';
+import Link from 'next/link';
 import { useProject } from '@/contexts/project-context';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import {
   Card,
   CardContent,
-  CardDescription,
   CardHeader,
-  CardTitle,
 } from '@/components/ui/card';
 import {
   DropdownMenu,
@@ -35,19 +34,97 @@ interface ProjectValidationState {
   error?: string;
 }
 
+// Project stats cache
+interface ProjectStats {
+  totalSpecs: number;
+  specsByStatus: { status: string; count: number }[];
+  completionRate: number;
+}
+
 export default function ProjectsPage() {
   const router = useRouter();
-  const { projects, switchProject, toggleFavorite, removeProject, updateProject } = useProject();
+  const { projects, currentProject, switchProject, toggleFavorite, removeProject, updateProject, isLoading } = useProject();
   const [searchQuery, setSearchQuery] = useState('');
   const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
   const [editingProjectId, setEditingProjectId] = useState<string | null>(null);
   const [editingName, setEditingName] = useState('');
   const [validationStates, setValidationStates] = useState<Record<string, ProjectValidationState>>({});
+  const [statsCache, setStatsCache] = useState<Record<string, ProjectStats>>({});
 
   const filteredProjects = projects.filter((p) =>
     p.name.toLowerCase().includes(searchQuery.toLowerCase())
   );
 
+  // Auto-validate projects on load
+  useEffect(() => {
+    const validateAll = async () => {
+      for (const project of projects) {
+        // Skip if already validated
+        if (validationStates[project.id]?.status === 'valid' || validationStates[project.id]?.status === 'invalid') {
+          continue;
+        }
+        
+        // Validate each project
+        try {
+          setValidationStates(prev => ({
+            ...prev,
+            [project.id]: { status: 'validating' }
+          }));
+          
+          const response = await fetch(`/api/projects/${project.id}/validate`, {
+            method: 'POST'
+          });
+          
+          if (response.ok) {
+            const data = await response.json();
+            setValidationStates(prev => ({
+              ...prev,
+              [project.id]: {
+                status: data.validation.isValid ? 'valid' : 'invalid',
+                error: data.validation.error
+              }
+            }));
+          }
+        } catch {
+          setValidationStates(prev => ({
+            ...prev,
+            [project.id]: { status: 'invalid', error: 'Validation failed' }
+          }));
+        }
+      }
+    };
+    
+    if (projects.length > 0) {
+      validateAll();
+    }
+  }, [projects]);
+
+  // Fetch stats for projects
+  useEffect(() => {
+    const fetchStats = async () => {
+      for (const project of projects) {
+        if (statsCache[project.id]) continue;
+        
+        try {
+          const response = await fetch(`/api/projects/${project.id}/stats`);
+          if (response.ok) {
+            const data = await response.json();
+            setStatsCache(prev => ({
+              ...prev,
+              [project.id]: data.stats
+            }));
+          }
+        } catch {
+          // Ignore stats fetch errors
+        }
+      }
+    };
+    
+    if (projects.length > 0) {
+      fetchStats();
+    }
+  }, [projects]);
+
   const handleProjectClick = async (projectId: string) => {
     await switchProject(projectId);
     router.push(`/projects/${projectId}/specs`);
@@ -147,45 +224,65 @@ export default function ProjectsPage() {
   };
 
   return (
-    <div className="container max-w-5xl py-8 space-y-8">
-      <div className="flex items-center justify-between">
-        <div>
-          <h1 className="text-3xl font-bold tracking-tight">Projects</h1>
-          <p className="text-muted-foreground mt-2">
-            Manage your LeanSpec projects and workspaces.
-          </p>
-        </div>
-        <Button onClick={() => setIsCreateDialogOpen(true)}>
-          <Plus className="mr-2 h-4 w-4" />
-          Add Project
-        </Button>
-      </div>
+    <div className="min-h-screen bg-background">
+      {/* Header Section */}
+      <div className="border-b bg-card/50 backdrop-blur-sm sticky top-0 z-10">
+        <div className="container max-w-7xl mx-auto py-6 space-y-6">
+          {/* Back navigation */}
+          {currentProject && (
+            <Link 
+              href={`/projects/${currentProject.id}/specs`}
+              className="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
+            >
+              <ArrowLeft className="h-4 w-4" />
+              Back to {currentProject.name}
+            </Link>
+          )}
 
-      <div className="flex items-center space-x-2">
-        <div className="relative flex-1 max-w-sm">
-          <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
-          <Input
-            placeholder="Search projects..."
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            className="pl-8"
-          />
+          <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+            <div>
+              <h1 className="text-3xl font-bold tracking-tight text-foreground">Projects</h1>
+              <p className="text-muted-foreground mt-1 text-lg">
+                Manage your LeanSpec projects and workspaces.
+              </p>
+            </div>
+            <Button onClick={() => setIsCreateDialogOpen(true)} size="lg" className="shadow-sm">
+              <Plus className="mr-2 h-4 w-4" />
+              New Project
+            </Button>
+          </div>
+
+          <div className="flex items-center space-x-2 max-w-md">
+            <div className="relative flex-1">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder="Search projects..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="pl-9 bg-background/50"
+              />
+            </div>
+          </div>
         </div>
       </div>
 
-      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-        {filteredProjects.map((project) => (
-          <Card key={project.id} className="group relative hover:border-primary/50 transition-colors">
-            <CardHeader className="pb-4">
-              <div className="flex items-start justify-between">
-                <div className="flex items-center space-x-2">
-                  <ColorPicker
-                    value={project.color}
-                    onChange={(color) => handleColorChange(project.id, color)}
-                  />
-                  <div className="space-y-1 flex-1 min-w-0">
+      <div className="container max-w-7xl mx-auto py-8">
+        <div className="grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+          {filteredProjects.map((project) => {
+            const stats = statsCache[project.id];
+            return (
+            <Card 
+              key={project.id} 
+              className="group relative flex flex-col transition-all duration-200 hover:shadow-md hover:border-primary/20 overflow-hidden cursor-pointer bg-card"
+              onClick={() => handleProjectClick(project.id)}
+            >
+              <div className="h-1 w-full" style={{ backgroundColor: project.color || 'hsl(var(--primary))' }} />
+              
+              <CardHeader className="px-4 pt-4 pb-2 space-y-1">
+                <div className="flex items-start justify-between gap-2">
+                  <div className="flex-1 min-w-0">
                     {editingProjectId === project.id ? (
-                      <div className="flex items-center gap-1">
+                      <div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
                         <Input
                           value={editingName}
                           onChange={(e) => setEditingName(e.target.value)}
@@ -214,90 +311,114 @@ export default function ProjectsPage() {
                         </Button>
                       </div>
                     ) : (
-                      <CardTitle className="text-base leading-none flex items-center gap-2">
-                        <button
-                          onClick={() => handleProjectClick(project.id)}
-                          className="hover:underline focus:outline-none truncate"
-                        >
+                      <div className="flex items-center gap-2 mb-1">
+                        <h3 className="font-semibold text-base leading-none truncate" title={project.name}>
                           {project.name}
-                        </button>
+                        </h3>
                         {getValidationIcon(project.id)}
-                      </CardTitle>
+                      </div>
                     )}
-                    <CardDescription className="text-xs truncate max-w-[180px]" title={project.path}>
+                    <p className="text-[10px] font-mono text-muted-foreground truncate" title={project.path}>
                       {project.path}
-                    </CardDescription>
+                    </p>
                   </div>
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild onClick={(e) => e.stopPropagation()}>
+                      <Button variant="ghost" size="icon" className="h-8 w-8 -mr-2 text-muted-foreground hover:text-foreground opacity-0 group-hover:opacity-100 transition-opacity">
+                        <MoreVertical className="h-4 w-4" />
+                        <span className="sr-only">Open menu</span>
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuItem onClick={(e) => { e.stopPropagation(); startEditing(project.id, project.name); }}>
+                        <Pencil className="mr-2 h-4 w-4" />
+                        Rename
+                      </DropdownMenuItem>
+                      <div className="p-2" onClick={(e) => e.stopPropagation()}>
+                        <p className="text-xs text-muted-foreground mb-2 px-2">Project Color</p>
+                        <div className="flex flex-wrap gap-1 px-2">
+                           {/* Simple color selection in menu */}
+                           <ColorPicker
+                              value={project.color}
+                              onChange={(color) => handleColorChange(project.id, color)}
+                           />
+                        </div>
+                      </div>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem onClick={(e) => { e.stopPropagation(); toggleFavorite(project.id); }}>
+                        <Star className="mr-2 h-4 w-4" />
+                        {project.favorite ? 'Unfavorite' : 'Favorite'}
+                      </DropdownMenuItem>
+                      <DropdownMenuItem onClick={(e) => { e.stopPropagation(); handleValidate(project.id); }}>
+                        <RefreshCw className="mr-2 h-4 w-4" />
+                        Validate Path
+                      </DropdownMenuItem>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem className="text-destructive" onClick={(e) => { e.stopPropagation(); removeProject(project.id); }}>
+                        <Trash2 className="mr-2 h-4 w-4" />
+                        Remove
+                      </DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
                 </div>
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <Button variant="ghost" size="icon" className="h-8 w-8">
-                      <MoreVertical className="h-4 w-4" />
-                      <span className="sr-only">Open menu</span>
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuItem onClick={() => startEditing(project.id, project.name)}>
-                      <Pencil className="mr-2 h-4 w-4" />
-                      Rename
-                    </DropdownMenuItem>
-                    <DropdownMenuItem onClick={() => toggleFavorite(project.id)}>
-                      <Star className="mr-2 h-4 w-4" />
-                      {project.favorite ? 'Unfavorite' : 'Favorite'}
-                    </DropdownMenuItem>
-                    <DropdownMenuItem onClick={() => handleValidate(project.id)}>
-                      <RefreshCw className="mr-2 h-4 w-4" />
-                      Validate Path
-                    </DropdownMenuItem>
-                    <DropdownMenuSeparator />
-                    <DropdownMenuItem className="text-destructive" onClick={() => removeProject(project.id)}>
-                      <Trash2 className="mr-2 h-4 w-4" />
-                      Remove
-                    </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
+              </CardHeader>
+              
+              <CardContent className="px-4 pb-4 flex-1">
+                 <div className="flex items-center gap-4 py-1">
+                    <div className="flex flex-col">
+                      <span className="text-[10px] text-muted-foreground font-medium uppercase tracking-wider">Specs</span>
+                      <span className="text-lg font-bold tracking-tight">{stats?.totalSpecs || 0}</span>
+                    </div>
+                    <div className="w-px h-8 bg-border" />
+                    <div className="flex flex-col">
+                      <span className="text-[10px] text-muted-foreground font-medium uppercase tracking-wider">Completion</span>
+                      <span className="text-lg font-bold tracking-tight">{stats?.completionRate || 0}%</span>
+                    </div>
+                 </div>
+              </CardContent>
+
+              <div className="px-4 py-2 bg-muted/20 border-t flex items-center justify-between text-[10px] text-muted-foreground mt-auto">
+                 <div className="flex items-center gap-1.5">
+                    <div className="w-1.5 h-1.5 rounded-full" style={{ backgroundColor: project.color || '#666' }} />
+                    <span>Local</span>
+                 </div>
+                 {project.lastAccessed && (
+                    <span>{dayjs(project.lastAccessed).fromNow()}</span>
+                 )}
               </div>
-            </CardHeader>
-            <CardContent className="pb-4">
-              <div className="flex items-center justify-between text-sm text-muted-foreground">
-                <div className="flex items-center">
-                  <FolderOpen className="mr-1 h-3 w-3" />
-                  <span className="text-xs">Local</span>
+              
+              {project.favorite && (
+                <div className="absolute top-0 right-0 p-2 pointer-events-none">
+                   <div className="bg-background/80 backdrop-blur-sm p-1.5 rounded-bl-lg border-b border-l shadow-sm">
+                      <Star className="h-3.5 w-3.5 fill-yellow-500 text-yellow-500" />
+                   </div>
                 </div>
-                {project.lastAccessed && (
-                  <span className="text-xs">
-                    Opened {dayjs(project.lastAccessed).fromNow()}
-                  </span>
-                )}
+              )}
+            </Card>
+          )})}
+          
+          {filteredProjects.length === 0 && !isLoading && (
+            <div className="col-span-full flex flex-col items-center justify-center py-16 text-center border-2 border-dashed rounded-xl bg-muted/10">
+              <div className="bg-muted/30 p-4 rounded-full mb-4">
+                <FolderOpen className="h-8 w-8 text-muted-foreground" />
               </div>
-            </CardContent>
-            {project.favorite && (
-              <div className="absolute top-2 right-10 text-yellow-500">
-                <Star className="h-4 w-4 fill-current" />
-              </div>
-            )}
-          </Card>
-        ))}
-        
-        {filteredProjects.length === 0 && (
-          <div className="col-span-full flex flex-col items-center justify-center py-12 text-center border rounded-lg border-dashed">
-            <FolderOpen className="h-10 w-10 text-muted-foreground mb-4" />
-            <h3 className="text-lg font-medium">No projects found</h3>
-            <p className="text-sm text-muted-foreground mt-1 mb-4">
-              {searchQuery ? "Try adjusting your search query." : "Get started by adding your first project."}
-            </p>
-            <Button onClick={() => setIsCreateDialogOpen(true)}>
-              <Plus className="mr-2 h-4 w-4" />
-              Add Project
-            </Button>
-          </div>
-        )}
-      </div>
+              <h3 className="text-xl font-semibold">No projects found</h3>
+              <p className="text-muted-foreground mt-2 mb-6 max-w-sm">
+                {searchQuery ? "We couldn't find any projects matching your search." : "Get started by creating your first LeanSpec project."}
+              </p>
+              <Button onClick={() => setIsCreateDialogOpen(true)} size="lg">
+                <Plus className="mr-2 h-4 w-4" />
+                Create Project
+              </Button>
+            </div>
+          )}
+        </div>
 
-      <CreateProjectDialog 
-        open={isCreateDialogOpen} 
-        onOpenChange={setIsCreateDialogOpen} 
-      />
+        <CreateProjectDialog 
+          open={isCreateDialogOpen} 
+          onOpenChange={setIsCreateDialogOpen} 
+        />
+      </div>
     </div>
   );
 }

package/.next/standalone/packages/ui/src/app/specs/[id]/page.tsx

@@ -3,8 +3,9 @@
  * Phase 2: Tier 2 - Hybrid Rendering with client-side caching
  */
 
-import { notFound } from 'next/navigation';
+import { notFound, redirect } from 'next/navigation';
 import { getSpecById, getSpecsWithSubSpecCount } from '@/lib/db/service-queries';
+import { projectRegistry } from '@/lib/projects/registry';
 import { SpecDetailWrapper } from '@/components/spec-detail-wrapper';
 
 // Tier 1: Route segment caching for performance
@@ -21,6 +22,28 @@ export default async function SpecDetailPage({
   const { id } = await params;
   const { subspec: currentSubSpec } = await searchParams;
   
+  const specsMode = process.env.SPECS_MODE || 'filesystem';
+  
+  // In multi-project mode, redirect to the most recent project's spec detail
+  if (specsMode === 'multi-project') {
+    const recentProjects = await projectRegistry.getRecentProjects();
+    
+    if (recentProjects.length > 0) {
+      const subspecParam = currentSubSpec ? `?subspec=${currentSubSpec}` : '';
+      redirect(`/projects/${recentProjects[0].id}/specs/${id}${subspecParam}`);
+    }
+    
+    // If no recent projects, check for any projects
+    const projects = await projectRegistry.getProjects();
+    if (projects.length > 0) {
+      const subspecParam = currentSubSpec ? `?subspec=${currentSubSpec}` : '';
+      redirect(`/projects/${projects[0].id}/specs/${id}${subspecParam}`);
+    }
+    
+    // No projects at all - redirect to projects page to add one
+    redirect('/projects');
+  }
+  
   const [spec, allSpecs] = await Promise.all([
     getSpecById(id),
     getSpecsWithSubSpecCount()

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

@@ -2,13 +2,35 @@
  * Specs page - Browse all LeanSpec specifications with list/board switcher
  */
 
+import { redirect } from 'next/navigation';
 import { getSpecsWithMetadata, getStats } from '@/lib/db/service-queries';
+import { projectRegistry } from '@/lib/projects/registry';
 import { SpecsClient } from './specs-client';
 
 // Force dynamic rendering - this page needs runtime data
 export const dynamic = 'force-dynamic';
 
 export default async function SpecsPage() {
+  const specsMode = process.env.SPECS_MODE || 'filesystem';
+  
+  // In multi-project mode, redirect to the most recent project's specs
+  if (specsMode === 'multi-project') {
+    const recentProjects = await projectRegistry.getRecentProjects();
+    
+    if (recentProjects.length > 0) {
+      redirect(`/projects/${recentProjects[0].id}/specs`);
+    }
+    
+    // If no recent projects, check for any projects
+    const projects = await projectRegistry.getProjects();
+    if (projects.length > 0) {
+      redirect(`/projects/${projects[0].id}/specs`);
+    }
+    
+    // No projects at all - redirect to projects page to add one
+    redirect('/projects');
+  }
+  
   const [specs, stats] = await Promise.all([
     getSpecsWithMetadata(),
     getStats(),

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

@@ -188,7 +188,7 @@ export function SpecsClient({ initialSpecs, projectId }: SpecsClientProps) {
         return next;
       });
     }
-  }, []);
+  }, [projectId]);
 
   // Auto-show archived column when filtering by archived status in board view
   useEffect(() => {

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

@@ -2,13 +2,35 @@
  * Stats page with detailed metrics and charts
  */
 
+import { redirect } from 'next/navigation';
 import { getStats, getSpecs } from '@/lib/db/service-queries';
+import { projectRegistry } from '@/lib/projects/registry';
 import { StatsClient } from './stats-client';
 
 // Force dynamic rendering
 export const dynamic = 'force-dynamic';
 
 export default async function StatsPage() {
+  const specsMode = process.env.SPECS_MODE || 'filesystem';
+  
+  // In multi-project mode, redirect to the most recent project's stats
+  if (specsMode === 'multi-project') {
+    const recentProjects = await projectRegistry.getRecentProjects();
+    
+    if (recentProjects.length > 0) {
+      redirect(`/projects/${recentProjects[0].id}/stats`);
+    }
+    
+    // If no recent projects, check for any projects
+    const projects = await projectRegistry.getProjects();
+    if (projects.length > 0) {
+      redirect(`/projects/${projects[0].id}/stats`);
+    }
+    
+    // No projects at all - redirect to projects page to add one
+    redirect('/projects');
+  }
+  
   const [stats, specs] = await Promise.all([
     getStats(),
     getSpecs(),