@leanspec/ui 0.2.5-dev.20251120070726 → 0.2.5-dev.20251120093243

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

@@ -4,6 +4,7 @@
 
 import { NextResponse } from 'next/server';
 import { getSpecsByProjectId } from '@/lib/db/queries';
+import { specsService } from '@/lib/specs/service';
 
 export async function GET(
   request: Request,
@@ -11,6 +12,12 @@ export async function GET(
 ) {
   try {
     const { id } = await params;
+
+    if (process.env.SPECS_MODE === 'multi-project') {
+      const specs = await specsService.getAllSpecs(id);
+      return NextResponse.json({ specs });
+    }
+
     const specs = await getSpecsByProjectId(id);
     return NextResponse.json({ specs });
   } catch (error) {

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

@@ -0,0 +1,19 @@
+import { NextResponse } from 'next/server';
+import { getStats } from '@/lib/db/service-queries';
+
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  try {
+    const { id } = await params;
+    const stats = await getStats(id);
+    return NextResponse.json({ stats });
+  } catch (error) {
+    console.error('Error fetching stats:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch stats' },
+      { status: 500 }
+    );
+  }
+}

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

@@ -4,11 +4,28 @@
 
 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 projects = await projectRegistry.getProjects();
+      const recentProjects = await projectRegistry.getRecentProjects();
+      const favoriteProjects = await projectRegistry.getFavoriteProjects();
+      return NextResponse.json({ 
+        mode: 'multi-project',
+        projects, 
+        recentProjects, 
+        favoriteProjects 
+      });
+    }
+
     const projects = await getProjects();
-    return NextResponse.json({ projects });
+    return NextResponse.json({ 
+      mode: 'single-project',
+      projects 
+    });
   } catch (error) {
     console.error('Error fetching projects:', error);
     return NextResponse.json(
@@ -17,3 +34,33 @@ export async function GET() {
     );
   }
 }
+
+export async function POST(request: Request) {
+  try {
+    if (process.env.SPECS_MODE !== 'multi-project') {
+      return NextResponse.json(
+        { error: 'Multi-project mode is not enabled' },
+        { status: 400 }
+      );
+    }
+
+    const body = await request.json();
+    const { path, favorite, color } = body;
+
+    if (!path) {
+      return NextResponse.json(
+        { error: 'Project path is required' },
+        { status: 400 }
+      );
+    }
+
+    const project = await projectRegistry.addProject(path, { favorite, color });
+    return NextResponse.json({ project });
+  } catch (error) {
+    console.error('Error adding project:', error);
+    return NextResponse.json(
+      { error: error instanceof Error ? error.message : 'Failed to add project' },
+      { status: 500 }
+    );
+  }
+}

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

@@ -1,6 +1,8 @@
 'use client';
 
+import { useState, useEffect } from 'react';
 import Link from 'next/link';
+import { useProject } from '@/contexts/project-context';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { 
@@ -11,7 +13,8 @@ import {
   LayoutGrid,
   List,
   TrendingUp,
-  Calendar
+  Calendar,
+  Loader2
 } from 'lucide-react';
 import { StatusBadge } from '@/components/status-badge';
 import { PriorityBadge } from '@/components/priority-badge';
@@ -133,20 +136,78 @@ function ActivityItem({ spec, action, time }: { spec: Spec; action: string; time
 }
 
 export function DashboardClient({ initialSpecs, initialStats }: DashboardClientProps) {
-  const stats = initialStats;
+  const { mode, currentProject, isLoading: isProjectLoading } = useProject();
+  const [specs, setSpecs] = useState<Spec[]>(initialSpecs);
+  const [stats, setStats] = useState<Stats>(initialStats);
+  const [isLoadingData, setIsLoadingData] = useState(false);
+
+  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);
+    }
+  };
+
+  if (mode === 'multi-project' && !currentProject) {
+     if (isProjectLoading) {
+         return <div className="flex items-center justify-center h-screen"><Loader2 className="animate-spin" /></div>;
+     }
+     return (
+         <div className="flex flex-col items-center justify-center h-[calc(100vh-4rem)] text-center p-8">
+             <h2 className="text-2xl font-bold mb-2">Welcome to LeanSpec</h2>
+             <p className="text-muted-foreground mb-4">Select a project from the sidebar or create a new one to get started.</p>
+         </div>
+     );
+  }
+
+  if (isLoadingData) {
+      return <div className="flex items-center justify-center h-screen"><Loader2 className="animate-spin" /></div>;
+  }
   
   // Get specs by status
-  const inProgressSpecs = initialSpecs
+  const inProgressSpecs = specs
     .filter(spec => spec.status === 'in-progress')
     .sort((a, b) => (b.specNumber || 0) - (a.specNumber || 0))
     .slice(0, 5);
   
-  const plannedSpecs = initialSpecs
+  const plannedSpecs = specs
     .filter(spec => spec.status === 'planned')
     .sort((a, b) => (b.specNumber || 0) - (a.specNumber || 0))
     .slice(0, 5);
   
-  const recentlyAdded = initialSpecs
+  const recentlyAdded = specs
     .sort((a, b) => {
       if (!a.createdAt) return 1;
       if (!b.createdAt) return -1;
@@ -154,7 +215,7 @@ export function DashboardClient({ initialSpecs, initialStats }: DashboardClientP
     })
     .slice(0, 5);
   
-  const recentActivity = initialSpecs
+  const recentActivity = specs
     .filter(spec => spec.updatedAt)
     .sort((a, b) => {
       if (!a.updatedAt) return 1;

package/.next/standalone/packages/ui/src/app/layout.tsx

@@ -4,6 +4,7 @@ import { Navigation } from "@/components/navigation";
 import { MainSidebar } from "@/components/main-sidebar";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Toast } from "@/components/ui/toast";
+import { ProjectProvider } from "@/contexts/project-context";
 import { getSpecs } from "@/lib/db/service-queries";
 
 export const metadata: Metadata = {
@@ -56,14 +57,16 @@ export default async function RootLayout({
           enableSystem
           disableTransitionOnChange
         >
-          <Navigation specs={specsForSearch} />
-          <div className="flex w-full min-w-0">
-            <MainSidebar />
-            <main className="flex-1 min-h-[calc(100vh-3.5rem)] min-w-0 w-full lg:w-[calc(100vw-var(--main-sidebar-width,240px))]">
-              {children}
-            </main>
-          </div>
-          <Toast />
+          <ProjectProvider>
+            <Navigation specs={specsForSearch} />
+            <div className="flex w-full min-w-0">
+              <MainSidebar />
+              <main className="flex-1 min-h-[calc(100vh-3.5rem)] min-w-0 w-full lg:w-[calc(100vw-var(--main-sidebar-width,240px))]">
+                {children}
+              </main>
+            </div>
+            <Toast />
+          </ProjectProvider>
         </ThemeProvider>
       </body>
     </html>

package/.next/standalone/packages/ui/src/app/not-found.tsx

@@ -18,7 +18,7 @@ export default function NotFound() {
             <Link href="/">Go Home</Link>
           </Button>
           <Button variant="outline" asChild>
-            <Link href="/board">View Board</Link>
+            <Link href="/specs">View Specs</Link>
           </Button>
         </div>
       </div>

package/.next/standalone/packages/ui/src/app/projects/[projectId]/layout.tsx

@@ -0,0 +1,18 @@
+import { ProjectContextSyncer } from './project-context-syncer';
+
+export default async function ProjectLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: Promise<{ projectId: string }>;
+}) {
+  const { projectId } = await params;
+
+  return (
+    <>
+      <ProjectContextSyncer projectId={projectId} />
+      {children}
+    </>
+  );
+}

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

@@ -0,0 +1,10 @@
+import { redirect } from 'next/navigation';
+
+export default async function ProjectPage({
+  params,
+}: {
+  params: Promise<{ projectId: string }>;
+}) {
+  const { projectId } = await params;
+  redirect(`/projects/${projectId}/specs`);
+}

package/.next/standalone/packages/ui/src/app/projects/[projectId]/project-context-syncer.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useProject } from '@/contexts/project-context';
+
+export function ProjectContextSyncer({ projectId }: { projectId: string }) {
+  const { switchProject, currentProject } = useProject();
+
+  useEffect(() => {
+    if (projectId && (!currentProject || currentProject.id !== projectId)) {
+      switchProject(projectId).catch(console.error);
+    }
+  }, [projectId, currentProject, switchProject]);
+
+  return null;
+}

package/.next/standalone/packages/ui/src/app/projects/[projectId]/specs/[specId]/page.tsx

@@ -0,0 +1,34 @@
+import { notFound } from 'next/navigation';
+import { getSpecById, getSpecsWithSubSpecCount } from '@/lib/db/service-queries';
+import { SpecDetailWrapper } from '@/components/spec-detail-wrapper';
+
+export const revalidate = 0; // No caching for local dev
+export const dynamic = 'force-dynamic';
+
+export default async function ProjectSpecDetailPage({ 
+  params,
+  searchParams
+}: { 
+  params: Promise<{ projectId: string; specId: string }>;
+  searchParams: Promise<{ subspec?: string }>;
+}) {
+  const { projectId, specId } = await params;
+  const { subspec: currentSubSpec } = await searchParams;
+  
+  const [spec, allSpecs] = await Promise.all([
+    getSpecById(specId, projectId),
+    getSpecsWithSubSpecCount(projectId)
+  ]);
+
+  if (!spec) {
+    notFound();
+  }
+
+  return (
+    <SpecDetailWrapper 
+      spec={spec}
+      allSpecs={allSpecs}
+      currentSubSpec={currentSubSpec}
+    />
+  );
+}

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

@@ -0,0 +1,20 @@
+import { getSpecsWithMetadata, getStats } from '@/lib/db/service-queries';
+import { SpecsClient } from '@/app/specs/specs-client';
+
+// Force dynamic rendering
+export const dynamic = 'force-dynamic';
+
+export default async function ProjectSpecsPage({
+  params,
+}: {
+  params: Promise<{ projectId: string }>;
+}) {
+  const { projectId } = await params;
+  
+  const [specs, stats] = await Promise.all([
+    getSpecsWithMetadata(projectId),
+    getStats(projectId),
+  ]);
+
+  return <SpecsClient initialSpecs={specs} initialStats={stats} projectId={projectId} />;
+}

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

@@ -0,0 +1,156 @@
+'use client';
+
+import { useState } from 'react';
+import { Plus, Search, FolderOpen, Star, MoreVertical, Trash2 } from 'lucide-react';
+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,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { CreateProjectDialog } from '@/components/create-project-dialog';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+
+dayjs.extend(relativeTime);
+
+export default function ProjectsPage() {
+  const { projects, switchProject, toggleFavorite, removeProject } = useProject();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
+
+  const filteredProjects = projects.filter((p) =>
+    p.name.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const handleProjectClick = async (projectId: string) => {
+    await switchProject(projectId);
+    // Optionally navigate to dashboard, but switchProject might handle it or we stay here
+  };
+
+  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="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>
+      </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">
+                  <div
+                    className="h-8 w-8 rounded-full flex items-center justify-center text-white text-xs font-bold"
+                    style={{ backgroundColor: project.color || '#666' }}
+                  >
+                    {project.name.substring(0, 2).toUpperCase()}
+                  </div>
+                  <div className="space-y-1">
+                    <CardTitle className="text-base leading-none">
+                      <button
+                        onClick={() => handleProjectClick(project.id)}
+                        className="hover:underline focus:outline-none"
+                      >
+                        {project.name}
+                      </button>
+                    </CardTitle>
+                    <CardDescription className="text-xs truncate max-w-[150px]">
+                      {project.path}
+                    </CardDescription>
+                  </div>
+                </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={() => toggleFavorite(project.id)}>
+                      <Star className="mr-2 h-4 w-4" />
+                      {project.favorite ? 'Unfavorite' : 'Favorite'}
+                    </DropdownMenuItem>
+                    <DropdownMenuItem className="text-destructive" onClick={() => removeProject(project.id)}>
+                      <Trash2 className="mr-2 h-4 w-4" />
+                      Remove
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </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>
+                </div>
+                {project.lastAccessed && (
+                  <span className="text-xs">
+                    Opened {dayjs(project.lastAccessed).fromNow()}
+                  </span>
+                )}
+              </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>
+
+      <CreateProjectDialog 
+        open={isCreateDialogOpen} 
+        onOpenChange={setIsCreateDialogOpen} 
+      />
+    </div>
+  );
+}

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

@@ -102,12 +102,13 @@ interface Stats {
 interface SpecsClientProps {
   initialSpecs: Spec[];
   initialStats: Stats;
+  projectId?: string;
 }
 
 type ViewMode = 'list' | 'board';
 type SortBy = 'id-desc' | 'id-asc' | 'updated-desc' | 'title-asc';
 
-export function SpecsClient({ initialSpecs }: SpecsClientProps) {
+export function SpecsClient({ initialSpecs, projectId }: SpecsClientProps) {
   const searchParams = useSearchParams();
   const router = useRouter();
 
@@ -147,7 +148,11 @@ export function SpecsClient({ initialSpecs }: SpecsClientProps) {
     setSpecs((prev) => prev.map(item => item.id === spec.id ? { ...item, status: nextStatus } : item));
 
     try {
-      const response = await fetch(`/api/specs/${encodeURIComponent(spec.specName)}/status`, {
+      const url = projectId 
+        ? `/api/projects/${projectId}/specs/${encodeURIComponent(spec.specName)}/status`
+        : `/api/specs/${encodeURIComponent(spec.specName)}/status`;
+
+      const response = await fetch(url, {
         method: 'PATCH',
         headers: {
           'Content-Type': 'application/json',