@leanspec/ui 0.2.7 → 0.2.9-dev.20251205030455

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

@@ -0,0 +1,41 @@
+/**
+ * Project Context Page
+ * Displays project-level context files for AI agents and development workflows
+ * Spec 131 - UI Project Context Visibility
+ */
+
+import { getProjectContext } from '@/lib/db/service-queries';
+import { ContextClient } from '@/app/context/context-client';
+import { projectRegistry } from '@/lib/projects/registry';
+
+// Force dynamic rendering - this page needs runtime data
+export const dynamic = 'force-dynamic';
+
+export default async function ProjectContextPage({
+  params,
+}: {
+  params: Promise<{ projectId: string }>;
+}) {
+  const { projectId } = await params;
+  
+  // Get project to find its path
+  const project = await projectRegistry.getProject(projectId);
+  
+  if (!project) {
+    return (
+      <div className="container mx-auto p-6">
+        <div className="rounded-lg border border-border bg-muted/30 p-8 text-center">
+          <h2 className="text-xl font-semibold mb-2">Project Not Found</h2>
+          <p className="text-muted-foreground">
+            The requested project could not be found.
+          </p>
+        </div>
+      </div>
+    );
+  }
+  
+  // Get context from the project's directory
+  const context = await getProjectContext(project.path);
+
+  return <ContextClient context={context} />;
+}

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

@@ -0,0 +1,43 @@
+import { ProjectDependencyGraphClient } from '@/app/dependencies/dependencies-client';
+import type { ProjectDependencyGraph } from '@/app/api/dependencies/route';
+
+async function getDependencyGraph(projectId: string): Promise<ProjectDependencyGraph> {
+  const baseUrl = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3000';
+  const res = await fetch(`${baseUrl}/api/projects/${projectId}/dependencies`, {
+    cache: 'no-store',
+  });
+
+  if (!res.ok) {
+    throw new Error('Failed to fetch dependency graph');
+  }
+
+  return res.json();
+}
+
+export default async function ProjectDependenciesPage({
+  params,
+}: {
+  params: Promise<{ projectId: string }>;
+}) {
+  const { projectId } = await params;
+  const data = await getDependencyGraph(projectId);
+
+  if (data.nodes.length === 0) {
+    return (
+      <div className="container mx-auto p-6">
+        <div className="rounded-lg border border-border bg-muted/30 p-8 text-center">
+          <h2 className="text-xl font-semibold mb-2">No Specs Found</h2>
+          <p className="text-muted-foreground">
+            There are no specifications with dependencies to visualize yet.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container mx-auto p-6 h-[calc(100vh-7rem)]">
+      <ProjectDependencyGraphClient data={data} projectId={projectId} />
+    </div>
+  );
+}

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

@@ -1,4 +1,12 @@
-import { redirect } from 'next/navigation';
+/**
+ * Project Home Page - Dashboard for a specific project
+ */
+
+import { getStats, getSpecs } from '@/lib/db/service-queries';
+import { DashboardClient } from '@/app/dashboard-client';
+
+// Force dynamic rendering - this page needs runtime data
+export const dynamic = 'force-dynamic';
 
 export default async function ProjectPage({
   params,
@@ -6,5 +14,13 @@ export default async function ProjectPage({
   params: Promise<{ projectId: string }>;
 }) {
   const { projectId } = await params;
-  redirect(`/projects/${projectId}/specs`);
+  
+  // TODO: In future, use projectId to fetch project-specific data
+  // For now, we use the same data source as single-project mode
+  const [stats, specs] = await Promise.all([
+    getStats(projectId),
+    getSpecs(projectId),
+  ]);
+
+  return <DashboardClient initialSpecs={specs} initialStats={stats} projectId={projectId} />;
 }

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

@@ -0,0 +1,24 @@
+/**
+ * Project Stats page with detailed metrics and charts
+ */
+
+import { getStats, getSpecs } from '@/lib/db/service-queries';
+import { StatsClient } from '@/app/stats/stats-client';
+
+// Force dynamic rendering
+export const dynamic = 'force-dynamic';
+
+export default async function ProjectStatsPage({
+  params,
+}: {
+  params: Promise<{ projectId: string }>;
+}) {
+  const { projectId } = await params;
+  
+  const [stats, specs] = await Promise.all([
+    getStats(projectId),
+    getSpecs(projectId),
+  ]);
+
+  return <StatsClient stats={stats} specs={specs} />;
+}

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

@@ -0,0 +1,7 @@
+export default function ProjectsLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return children;
+}

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

@@ -1,7 +1,8 @@
 'use client';
 
-import { useState } from 'react';
-import { Plus, Search, FolderOpen, Star, MoreVertical, Trash2 } from 'lucide-react';
+import { useState, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+import { Plus, Search, FolderOpen, Star, MoreVertical, Trash2, Pencil, RefreshCw, Check, X, AlertTriangle, CheckCircle2 } from 'lucide-react';
 import { useProject } from '@/contexts/project-context';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -16,18 +17,32 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
+  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import { CreateProjectDialog } from '@/components/create-project-dialog';
+import { ColorPicker } from '@/components/color-picker';
+import { toast } from 'sonner';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 
 dayjs.extend(relativeTime);
 
+// Track validation status per project
+type ValidationStatus = 'unknown' | 'validating' | 'valid' | 'invalid';
+interface ProjectValidationState {
+  status: ValidationStatus;
+  error?: string;
+}
+
 export default function ProjectsPage() {
-  const { projects, switchProject, toggleFavorite, removeProject } = useProject();
+  const router = useRouter();
+  const { projects, switchProject, toggleFavorite, removeProject, updateProject } = 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 filteredProjects = projects.filter((p) =>
     p.name.toLowerCase().includes(searchQuery.toLowerCase())
@@ -35,7 +50,100 @@ export default function ProjectsPage() {
 
   const handleProjectClick = async (projectId: string) => {
     await switchProject(projectId);
-    // Optionally navigate to dashboard, but switchProject might handle it or we stay here
+    router.push(`/projects/${projectId}/specs`);
+  };
+
+  const startEditing = (projectId: string, currentName: string) => {
+    setEditingProjectId(projectId);
+    setEditingName(currentName);
+  };
+
+  const cancelEditing = () => {
+    setEditingProjectId(null);
+    setEditingName('');
+  };
+
+  const saveProjectName = async (projectId: string) => {
+    if (!editingName.trim()) {
+      toast.error('Project name cannot be empty');
+      return;
+    }
+    try {
+      await updateProject(projectId, { name: editingName.trim() });
+      toast.success('Project name updated');
+      setEditingProjectId(null);
+      setEditingName('');
+    } catch {
+      toast.error('Failed to update project name');
+    }
+  };
+
+  const handleColorChange = async (projectId: string, color: string) => {
+    try {
+      await updateProject(projectId, { color });
+      toast.success('Project color updated');
+    } catch {
+      toast.error('Failed to update project color');
+    }
+  };
+
+  const handleValidate = useCallback(async (projectId: string) => {
+    setValidationStates(prev => ({
+      ...prev,
+      [projectId]: { status: 'validating' }
+    }));
+
+    try {
+      const response = await fetch(`/api/projects/${projectId}/validate`, {
+        method: 'POST'
+      });
+      
+      if (!response.ok) {
+        throw new Error('Validation request failed');
+      }
+
+      const data = await response.json();
+      
+      setValidationStates(prev => ({
+        ...prev,
+        [projectId]: {
+          status: data.validation.isValid ? 'valid' : 'invalid',
+          error: data.validation.error
+        }
+      }));
+
+      if (data.validation.isValid) {
+        toast.success('Project path is valid');
+      } else {
+        toast.error(`Project path invalid: ${data.validation.error || 'Unknown error'}`);
+      }
+    } catch {
+      setValidationStates(prev => ({
+        ...prev,
+        [projectId]: { status: 'invalid', error: 'Failed to validate' }
+      }));
+      toast.error('Failed to validate project');
+    }
+  }, []);
+
+  const getValidationIcon = (projectId: string) => {
+    const state = validationStates[projectId];
+    if (!state || state.status === 'unknown') return null;
+    
+    if (state.status === 'validating') {
+      return <RefreshCw className="h-4 w-4 animate-spin text-muted-foreground" />;
+    }
+    if (state.status === 'valid') {
+      return <CheckCircle2 className="h-4 w-4 text-green-500" />;
+    }
+    if (state.status === 'invalid') {
+      return (
+        <span title={state.error || 'Invalid project'}>
+          <AlertTriangle className="h-4 w-4 text-destructive" />
+        </span>
+      );
+    }
+    return null;
   };
 
   return (
@@ -71,22 +179,52 @@ export default function ProjectsPage() {
             <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]">
+                  <ColorPicker
+                    value={project.color}
+                    onChange={(color) => handleColorChange(project.id, color)}
+                  />
+                  <div className="space-y-1 flex-1 min-w-0">
+                    {editingProjectId === project.id ? (
+                      <div className="flex items-center gap-1">
+                        <Input
+                          value={editingName}
+                          onChange={(e) => setEditingName(e.target.value)}
+                          className="h-7 text-sm"
+                          autoFocus
+                          onKeyDown={(e) => {
+                            if (e.key === 'Enter') saveProjectName(project.id);
+                            if (e.key === 'Escape') cancelEditing();
+                          }}
+                        />
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-7 w-7"
+                          onClick={() => saveProjectName(project.id)}
+                        >
+                          <Check className="h-3 w-3" />
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="h-7 w-7"
+                          onClick={cancelEditing}
+                        >
+                          <X className="h-3 w-3" />
+                        </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"
+                        >
+                          {project.name}
+                        </button>
+                        {getValidationIcon(project.id)}
+                      </CardTitle>
+                    )}
+                    <CardDescription className="text-xs truncate max-w-[180px]" title={project.path}>
                       {project.path}
                     </CardDescription>
                   </div>
@@ -99,10 +237,19 @@ export default function ProjectsPage() {
                     </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

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

@@ -77,10 +77,7 @@ const STATUS_CONFIG: Record<SpecStatus, {
 
 const BOARD_STATUSES: SpecStatus[] = ['planned', 'in-progress', 'complete', 'archived'];
 
-interface SpecRelationships {
-  dependsOn: string[];
-  related: string[];
-}
+import type { SpecRelationships } from '@/types/specs';
 
 interface Spec {
   id: string;
@@ -114,6 +111,17 @@ export function SpecsClient({ initialSpecs, projectId }: SpecsClientProps) {
   const searchParams = useSearchParams();
   const router = useRouter();
 
+  // Helper to generate project-scoped URLs
+  const getSpecUrl = useCallback((specId: string | number) => {
+    return projectId 
+      ? `/projects/${projectId}/specs/${specId}`
+      : `/specs/${specId}`;
+  }, [projectId]);
+
+  const getSpecsBaseUrl = useCallback(() => {
+    return projectId ? `/projects/${projectId}/specs` : '/specs';
+  }, [projectId]);
+
   const [specs, setSpecs] = useState<Spec[]>(initialSpecs);
   const [pendingSpecIds, setPendingSpecIds] = useState<Record<string, boolean>>({});
   const [searchQuery, setSearchQuery] = useState('');
@@ -204,13 +212,13 @@ export function SpecsClient({ initialSpecs, projectId }: SpecsClientProps) {
     }
     const search = current.toString();
     const query = search ? `?${search}` : '';
-    router.replace(`/specs${query}`, { scroll: false });
+    router.replace(`${getSpecsBaseUrl()}${query}`, { scroll: false });
 
     // Persist to localStorage
     if (typeof window !== 'undefined') {
       localStorage.setItem('specs-view-mode', viewMode);
     }
-  }, [viewMode, router]);
+  }, [viewMode, router, getSpecsBaseUrl]);
 
   const filteredAndSortedSpecs = useMemo(() => {
     const filtered = specs.filter(spec => {
@@ -373,7 +381,7 @@ export function SpecsClient({ initialSpecs, projectId }: SpecsClientProps) {
         )}>
           {viewMode === 'list' ? (
             <div className="w-full">
-              <ListView specs={filteredAndSortedSpecs} />
+              <ListView specs={filteredAndSortedSpecs} getSpecUrl={getSpecUrl} />
             </div>
           ) : (
             <BoardView
@@ -382,6 +390,7 @@ export function SpecsClient({ initialSpecs, projectId }: SpecsClientProps) {
               pendingSpecIds={pendingSpecIds}
               showArchived={showArchivedBoard}
               onToggleArchived={() => setShowArchivedBoard(!showArchivedBoard)}
+              getSpecUrl={getSpecUrl}
             />
           )}
         </div>
@@ -390,7 +399,7 @@ export function SpecsClient({ initialSpecs, projectId }: SpecsClientProps) {
   );
 }
 
-function ListView({ specs }: { specs: Spec[] }) {
+function ListView({ specs, getSpecUrl }: { specs: Spec[]; getSpecUrl: (specId: string | number) => string }) {
   return (
     <div className="grid grid-cols-1 gap-2 sm:gap-3 md:gap-4 pb-2 sm:pb-4 md:pb-8">
       {specs.map(spec => {
@@ -401,8 +410,9 @@ function ListView({ specs }: { specs: Spec[] }) {
           'low': 'border-l-gray-400'
         };
         const borderColor = priorityColors[spec.priority as keyof typeof priorityColors] || 'border-l-gray-300';
-        const hasDependencies = spec.relationships && (spec.relationships.dependsOn.length > 0 || spec.relationships.related.length > 0);
+        const hasDependencies = spec.relationships && spec.relationships.dependsOn.length > 0;
         const hasSubSpecs = !!(spec.subSpecsCount && spec.subSpecsCount > 0);
+        const specUrl = getSpecUrl(spec.specNumber || spec.id);
 
         return (
           <Card
@@ -411,13 +421,13 @@ function ListView({ specs }: { specs: Spec[] }) {
               "hover:shadow-lg active:shadow-xl transition-all duration-150 hover:scale-[1.01] active:scale-[0.99] border-l-4 cursor-pointer touch-manipulation",
               borderColor
             )}
-            onClick={() => window.location.href = `/specs/${spec.specNumber || spec.id}`}
+            onClick={() => window.location.href = specUrl}
           >
             {/* Mobile-optimized layout */}
             <CardHeader className="pb-2 sm:pb-2.5 md:pb-3 px-3 sm:px-4 md:px-6 pt-3 sm:pt-4 md:pt-6">
               <div className="flex flex-col gap-2 md:flex-row md:items-start md:justify-between md:gap-4">
                 <div className="flex-1 min-w-0">
-                  <Link href={`/specs/${spec.specNumber || spec.id}`}>
+                  <Link href={specUrl}>
                     <CardTitle className="text-sm sm:text-base md:text-lg font-semibold hover:text-primary transition-colors flex items-start flex-wrap gap-1.5 sm:gap-2 leading-snug sm:leading-normal">
                       {spec.specNumber ? (
                         <span className="font-mono text-xs sm:text-sm md:text-base font-normal text-muted-foreground flex-shrink-0">
@@ -462,9 +472,7 @@ function ListView({ specs }: { specs: Spec[] }) {
                         <div className="flex items-center gap-1 sm:gap-1.5">
                           <GitBranch className="h-3 w-3 sm:h-3.5 sm:w-3.5 flex-shrink-0" />
                           <span className="whitespace-nowrap">
-                            {spec.relationships!.dependsOn.length > 0 && `${spec.relationships!.dependsOn.length} deps`}
-                            {spec.relationships!.dependsOn.length > 0 && spec.relationships!.related.length > 0 && ', '}
-                            {spec.relationships!.related.length > 0 && `${spec.relationships!.related.length} related`}
+                            {spec.relationships!.dependsOn.length} deps
                           </span>
                         </div>
                       )}
@@ -499,9 +507,10 @@ interface BoardViewProps {
   pendingSpecIds: Record<string, boolean>;
   showArchived: boolean;
   onToggleArchived: () => void;
+  getSpecUrl: (specId: string | number) => string;
 }
 
-function BoardView({ specs, onStatusChange, pendingSpecIds, showArchived, onToggleArchived }: BoardViewProps) {
+function BoardView({ specs, onStatusChange, pendingSpecIds, showArchived, onToggleArchived, getSpecUrl }: BoardViewProps) {
   const [draggingId, setDraggingId] = useState<string | null>(null);
   const [activeDropZone, setActiveDropZone] = useState<SpecStatus | null>(null);
   const [collapsedColumns, setCollapsedColumns] = useState<Record<string, boolean>>({});
@@ -649,6 +658,7 @@ function BoardView({ specs, onStatusChange, pendingSpecIds, showArchived, onTogg
                   };
                   const borderColor = priorityColors[spec.priority as keyof typeof priorityColors] || 'border-l-gray-300';
                   const isUpdating = Boolean(pendingSpecIds[spec.id]);
+                  const specUrl = getSpecUrl(spec.specNumber || spec.id);
 
                   return (
                     <Card
@@ -668,7 +678,7 @@ function BoardView({ specs, onStatusChange, pendingSpecIds, showArchived, onTogg
                         borderColor,
                         isUpdating && 'opacity-60 cursor-wait'
                       )}
-                      onClick={() => window.location.href = `/specs/${spec.specNumber || spec.id}`}
+                      onClick={() => window.location.href = specUrl}
                     >
                       {isUpdating && (
                         <div className="absolute inset-0 rounded-lg bg-background/80 flex items-center justify-center text-xs sm:text-sm font-medium z-10">
@@ -681,7 +691,7 @@ function BoardView({ specs, onStatusChange, pendingSpecIds, showArchived, onTogg
                             {spec.specNumber ? `#${spec.specNumber}` : ''}
                           </span>
                         </div>
-                        <Link href={`/specs/${spec.specNumber || spec.id}`} className="block">
+                        <Link href={specUrl} className="block">
                           <CardTitle className="text-xs sm:text-sm font-semibold leading-snug hover:text-primary transition-colors line-clamp-3">
                             {spec.title || spec.specName}
                           </CardTitle>

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

@@ -0,0 +1,73 @@
+'use client';
+
+import { useState } from 'react';
+import { cn } from '@/lib/utils';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { Button } from '@/components/ui/button';
+
+const PROJECT_COLORS = [
+  '#ef4444', // red
+  '#f97316', // orange
+  '#eab308', // yellow
+  '#22c55e', // green
+  '#14b8a6', // teal
+  '#3b82f6', // blue
+  '#6366f1', // indigo
+  '#8b5cf6', // violet
+  '#d946ef', // fuchsia
+  '#ec4899', // pink
+  '#6b7280', // gray
+  '#78716c', // stone
+];
+
+interface ColorPickerProps {
+  value?: string;
+  onChange: (color: string) => void;
+  disabled?: boolean;
+}
+
+export function ColorPicker({ value, onChange, disabled }: ColorPickerProps) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-8 w-8 p-0"
+          disabled={disabled}
+          aria-label="Pick color"
+        >
+          <div
+            className="h-4 w-4 rounded-full border"
+            style={{ backgroundColor: value || '#666' }}
+          />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-3" align="start">
+        <div className="grid grid-cols-6 gap-2">
+          {PROJECT_COLORS.map((color) => (
+            <button
+              key={color}
+              className={cn(
+                'h-6 w-6 rounded-full border-2 transition-transform hover:scale-110',
+                value === color ? 'border-primary' : 'border-transparent'
+              )}
+              style={{ backgroundColor: color }}
+              onClick={() => {
+                onChange(color);
+                setOpen(false);
+              }}
+              aria-label={`Select color ${color}`}
+            />
+          ))}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}