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

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',

package/.next/standalone/packages/ui/src/components/create-project-dialog.tsx

@@ -0,0 +1,139 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useProject } from '@/contexts/project-context';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { DirectoryPicker } from './directory-picker';
+import { FolderOpen } from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { toast } from 'sonner';
+
+interface CreateProjectDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function CreateProjectDialog({ open, onOpenChange }: CreateProjectDialogProps) {
+  const { addProject, switchProject } = useProject();
+  const [path, setPath] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [mode, setMode] = useState<'picker' | 'manual'>('picker');
+  const router = useRouter();
+
+  useEffect(() => {
+    if (open) {
+      setMode('picker');
+      setPath('');
+    }
+  }, [open]);
+
+  const handleAddProject = async (projectPath: string) => {
+    try {
+      setIsLoading(true);
+      const project = await addProject(projectPath);
+      await switchProject(project.id);
+      toast.success('Project added successfully');
+      onOpenChange(false);
+      router.push('/'); // Navigate to dashboard
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Failed to add project';
+      toast.error(message);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!path) return;
+    handleAddProject(path);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[600px]">
+        <DialogHeader>
+          <DialogTitle>Add Project</DialogTitle>
+          <DialogDescription>
+            {mode === 'picker' 
+              ? 'Browse and select the project directory.' 
+              : 'Enter the absolute path to your local project directory.'}
+          </DialogDescription>
+        </DialogHeader>
+        
+        {mode === 'picker' ? (
+          <div className="space-y-2">
+            <DirectoryPicker 
+              onSelect={handleAddProject} 
+              onCancel={() => onOpenChange(false)} 
+              initialPath={path}
+              actionLabel={isLoading ? "Adding..." : "Add Project"}
+              isLoading={isLoading}
+            />
+            <div className="flex justify-center">
+              <Button 
+                variant="link" 
+                size="sm" 
+                onClick={() => setMode('manual')}
+                className="text-muted-foreground"
+              >
+                Enter path manually
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <form onSubmit={handleSubmit}>
+            <div className="grid gap-4 py-4">
+              <div className="grid gap-2">
+                <label htmlFor="path" className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+                  Project Path
+                </label>
+                <div className="flex gap-2">
+                  <Input
+                    id="path"
+                    value={path}
+                    onChange={(e) => setPath(e.target.value)}
+                    placeholder="/path/to/your/project"
+                    className="flex-1"
+                    disabled={isLoading}
+                  />
+                </div>
+                <p className="text-xs text-muted-foreground">
+                  Select the root directory of your project.
+                </p>
+              </div>
+            </div>
+            <DialogFooter className="flex-col sm:flex-row gap-2">
+              <div className="flex-1 flex justify-start">
+                <Button 
+                  type="button" 
+                  variant="ghost" 
+                  size="sm"
+                  onClick={() => setMode('picker')}
+                >
+                  <FolderOpen className="h-4 w-4 mr-2" />
+                  Browse folders
+                </Button>
+              </div>
+              <Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={isLoading}>
+                Cancel
+              </Button>
+              <Button type="submit" disabled={isLoading || !path}>
+                {isLoading ? 'Adding...' : 'Add Project'}
+              </Button>
+            </DialogFooter>
+          </form>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

package/.next/standalone/packages/ui/src/components/directory-picker.tsx

@@ -0,0 +1,191 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import { Button } from '@/components/ui/button';
+import { Folder, ChevronUp, Loader2, ArrowLeft, Home, ChevronRight } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface DirectoryItem {
+  name: string;
+  path: string;
+  isDirectory: boolean;
+}
+
+interface DirectoryPickerProps {
+  onSelect: (path: string) => void;
+  onCancel: () => void;
+  initialPath?: string;
+  actionLabel?: string;
+  isLoading?: boolean;
+}
+
+export function DirectoryPicker({ onSelect, onCancel, initialPath, actionLabel = "Select This Folder", isLoading: externalLoading }: DirectoryPickerProps) {
+  const [currentPath, setCurrentPath] = useState(initialPath || '');
+  const [items, setItems] = useState<DirectoryItem[]>([]);
+  const [internalLoading, setInternalLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+
+  const isLoading = externalLoading || internalLoading;
+
+  useEffect(() => {
+    fetchDirectory(currentPath);
+  }, [currentPath]);
+
+  // Auto-scroll breadcrumbs to end when path changes
+  useEffect(() => {
+    if (scrollContainerRef.current) {
+      scrollContainerRef.current.scrollLeft = scrollContainerRef.current.scrollWidth;
+    }
+  }, [currentPath]);
+
+  const fetchDirectory = async (path: string) => {
+    try {
+      setInternalLoading(true);
+      setError(null);
+      const response = await fetch('/api/local-projects/list-directory', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ path }),
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to list directory');
+      }
+
+      const data = await response.json();
+      setItems(data.items);
+      // Update current path to the resolved path from server
+      if (!path) {
+        setCurrentPath(data.path);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setInternalLoading(false);
+    }
+  };
+
+  const handleNavigate = (path: string) => {
+    setCurrentPath(path);
+  };
+
+  const parentItem = items.find(item => item.name === '..');
+  const displayItems = items.filter(item => item.name !== '..');
+
+  // Parse path segments for breadcrumbs
+  const getPathSegments = (path: string) => {
+    if (!path) return [];
+    // Handle both Unix and Windows separators
+    const separator = path.includes('\\') ? '\\' : '/';
+    const parts = path.split(separator).filter(Boolean);
+    
+    // If path starts with separator (Unix root), add it back
+    const isUnixRoot = path.startsWith('/');
+    
+    return parts.map((part, index) => {
+      let segmentPath = parts.slice(0, index + 1).join(separator);
+      if (isUnixRoot) segmentPath = '/' + segmentPath;
+      // On Windows, the first part (C:) doesn't need a leading separator
+      
+      return { name: part, path: segmentPath };
+    });
+  };
+
+  const segments = getPathSegments(currentPath);
+
+  return (
+    <div className="flex flex-col h-[400px] gap-4 min-w-0">
+      {/* Navigation Bar */}
+      <div className="flex items-center border rounded-md p-1 gap-1 bg-muted/30">
+        <Button 
+          variant="ghost" 
+          size="icon" 
+          className="h-8 w-8 shrink-0"
+          disabled={!parentItem || isLoading}
+          onClick={() => parentItem && handleNavigate(parentItem.path)}
+          title="Go to parent directory"
+        >
+          <ArrowLeft className="h-4 w-4" />
+        </Button>
+
+        <div className="w-px h-5 bg-border mx-1" />
+
+        <div 
+          ref={scrollContainerRef}
+          className="flex-1 overflow-x-auto whitespace-nowrap flex items-center scrollbar-hide px-1 min-w-0"
+        >
+          <button 
+            onClick={() => handleNavigate('/')}
+            className="hover:bg-accent p-1 rounded-sm transition-colors shrink-0"
+            title="Go to root"
+          >
+            <Home className="h-4 w-4 text-muted-foreground" />
+          </button>
+          
+          {segments.map((segment, i) => (
+            <div key={segment.path} className="flex items-center shrink-0">
+              <ChevronRight className="h-3 w-3 text-muted-foreground mx-0.5 shrink-0" />
+              <button 
+                onClick={() => handleNavigate(segment.path)}
+                className={cn(
+                  "px-1.5 py-0.5 rounded-sm transition-colors text-sm hover:bg-accent hover:text-accent-foreground",
+                  i === segments.length - 1 ? "font-medium text-foreground" : "text-muted-foreground"
+                )}
+              >
+                {segment.name}
+              </button>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="flex-1 border rounded-md overflow-hidden relative bg-background min-h-0">
+        {isLoading && (
+          <div className="absolute inset-0 bg-background/50 flex items-center justify-center z-10">
+            <Loader2 className="h-6 w-6 animate-spin" />
+          </div>
+        )}
+        
+        {error ? (
+          <div className="p-4 text-destructive text-sm text-center">
+            {error}
+            <Button variant="link" onClick={() => fetchDirectory(currentPath)} className="block mx-auto mt-2">
+              Retry
+            </Button>
+          </div>
+        ) : (
+          <div className="h-full overflow-auto">
+            <div className="p-1">
+              {displayItems.length === 0 && !isLoading ? (
+                <div className="p-4 text-center text-sm text-muted-foreground">
+                  Empty directory
+                </div>
+              ) : (
+                displayItems.map((item) => (
+                  <button
+                    key={item.path}
+                    onClick={() => handleNavigate(item.path)}
+                    className="flex items-center gap-3 w-full px-3 py-2 text-sm rounded-sm hover:bg-accent hover:text-accent-foreground text-left group transition-colors"
+                  >
+                    <Folder className="h-4 w-4 text-blue-500 fill-blue-500/20 group-hover:fill-blue-500/30 transition-colors shrink-0" />
+                    <span className="truncate">{item.name}</span>
+                  </button>
+                ))
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div className="flex justify-end gap-2">
+        <Button variant="outline" onClick={onCancel} disabled={isLoading}>
+          Cancel
+        </Button>
+        <Button onClick={() => onSelect(currentPath)} disabled={isLoading || !currentPath}>
+          {actionLabel}
+        </Button>
+      </div>
+    </div>
+  );
+}

package/.next/standalone/packages/ui/src/components/main-sidebar.tsx

@@ -3,6 +3,7 @@
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { Home, FileText, BarChart3, ChevronLeft, ChevronRight, X } from 'lucide-react';
+import { ProjectSwitcher } from '@/components/project-switcher';
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 import * as React from 'react';
@@ -121,6 +122,9 @@ export function MainSidebar() {
 
           {/* Navigation */}
           {mounted && <nav className="flex-1 px-2 py-4 space-y-1">
+            <div className="mb-4">
+              <ProjectSwitcher collapsed={isCollapsed && !mobileOpen} />
+            </div>
             <SidebarLink 
               href="/" 
               icon={Home}