@leanspec/ui 0.2.5 → 0.2.6-dev.20251125010539

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

@@ -0,0 +1,122 @@
+/**
+ * PATCH /api/specs/[id]/status - Update a spec's status (filesystem mode)
+ */
+
+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;
+type AllowedStatus = (typeof ALLOWED_STATUSES)[number];
+
+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;
+}
+
+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: { status?: AllowedStatus } = {};
+    try {
+      payload = await request.json();
+    } catch {
+      return NextResponse.json({ error: 'Invalid JSON body' }, { status: 400 });
+    }
+
+    const { status } = payload;
+    if (!status || !ALLOWED_STATUSES.includes(status)) {
+      return NextResponse.json({ error: 'Invalid status value' }, { 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');
+    
+    // Update frontmatter using @leanspec/core
+    const { content: updatedContent } = createUpdatedFrontmatter(currentContent, { status });
+    
+    // Write back to file
+    await writeFile(readmePath, updatedContent, 'utf-8');
+
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    console.error('Failed to update spec status:', error);
+    return NextResponse.json({ error: 'Failed to update spec status' }, { 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/globals.css

@@ -528,4 +528,41 @@ html.changing-theme * {
   .overflow-x-hidden {
     overflow-x: hidden !important;
   }
+
+  /* Vertical text for collapsed columns (ADO-style) */
+  .writing-mode-vertical-rl {
+    writing-mode: vertical-rl;
+  }
+  
+  .vertical-text {
+    writing-mode: vertical-rl;
+    transform: rotate(180deg);
+  }
+
+  /* Auto-hiding scrollbar - visible only on hover */
+  .scrollbar-auto-hide {
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+  }
+  
+  .scrollbar-auto-hide:hover {
+    scrollbar-color: hsl(var(--muted-foreground) / 0.3) transparent;
+  }
+  
+  .scrollbar-auto-hide::-webkit-scrollbar {
+    width: 4px;
+  }
+  
+  .scrollbar-auto-hide::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  
+  .scrollbar-auto-hide::-webkit-scrollbar-thumb {
+    background-color: transparent;
+    border-radius: 20px;
+  }
+  
+  .scrollbar-auto-hide:hover::-webkit-scrollbar-thumb {
+    background-color: hsl(var(--muted-foreground) / 0.3);
+  }
 }

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

@@ -1,9 +1,10 @@
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import "./globals.css";
 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 = {
@@ -21,11 +22,12 @@ export const metadata: Metadata = {
     description: "Browse and explore LeanSpec specifications in a rich, interactive format",
     type: "website",
   },
-  viewport: {
-    width: 'device-width',
-    initialScale: 1,
-    maximumScale: 5,
-  },
+};
+
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  maximumScale: 5,
 };
 
 export default async function RootLayout({
@@ -55,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/{dist/standalone/packages/web/src/app/specs/[id] → src/app/projects/[projectId]/specs/[specId]}/page.tsx

@@ -1,29 +1,23 @@
-/**
- * Spec detail page with markdown rendering and enhanced UI
- * Phase 2: Tier 2 - Hybrid Rendering with client-side caching
- */
-
 import { notFound } from 'next/navigation';
 import { getSpecById, getSpecsWithSubSpecCount } from '@/lib/db/service-queries';
 import { SpecDetailWrapper } from '@/components/spec-detail-wrapper';
 
-// Tier 1: Route segment caching for performance
-export const revalidate = 60; // Cache rendered pages for 60s
-export const dynamicParams = true; // Generate new pages on demand
+export const revalidate = 0; // No caching for local dev
+export const dynamic = 'force-dynamic';
 
-export default async function SpecDetailPage({ 
+export default async function ProjectSpecDetailPage({ 
   params,
   searchParams
 }: { 
-  params: Promise<{ id: string }>;
+  params: Promise<{ projectId: string; specId: string }>;
   searchParams: Promise<{ subspec?: string }>;
 }) {
-  const { id } = await params;
+  const { projectId, specId } = await params;
   const { subspec: currentSubSpec } = await searchParams;
   
   const [spec, allSpecs] = await Promise.all([
-    getSpecById(id),
-    getSpecsWithSubSpecCount()
+    getSpecById(specId, projectId),
+    getSpecsWithSubSpecCount(projectId)
   ]);
 
   if (!spec) {
@@ -38,6 +32,3 @@ export default async function SpecDetailPage({
     />
   );
 }
-
-
-

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>
+  );
+}