@leanspec/ui 0.2.5-dev.20251119032109 → 0.2.5-dev.20251119062438

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

@@ -1,6 +1,7 @@
 'use client';
 
-import { useState, useMemo, useEffect, useRef } from 'react';
+import { useState, useMemo, useEffect, useRef, useCallback } from 'react';
+import type { DragEvent } from 'react';
 import Link from 'next/link';
 import { useSearchParams, useRouter } from 'next/navigation';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@@ -19,22 +20,75 @@ import {
   CheckCircle2, 
   PlayCircle, 
   Clock,
+  Archive,
   LayoutGrid,
-  List as ListIcon
+  List as ListIcon,
+  FileText,
+  GitBranch
 } from 'lucide-react';
 import { StatusBadge } from '@/components/status-badge';
 import { PriorityBadge } from '@/components/priority-badge';
 import { cn } from '@/lib/utils';
+import { formatRelativeTime } from '@/lib/date-utils';
+import { toast } from '@/components/ui/toast';
+
+type SpecStatus = 'planned' | 'in-progress' | 'complete' | 'archived';
+
+const STATUS_CONFIG: Record<SpecStatus, {
+  icon: typeof Clock;
+  title: string;
+  colorClass: string;
+  bgClass: string;
+  borderClass: string;
+}> = {
+  'planned': {
+    icon: Clock,
+    title: 'Planned',
+    colorClass: 'text-blue-600 dark:text-blue-400',
+    bgClass: 'bg-blue-50 dark:bg-blue-900/20',
+    borderClass: 'border-blue-200 dark:border-blue-800'
+  },
+  'in-progress': {
+    icon: PlayCircle,
+    title: 'In Progress',
+    colorClass: 'text-orange-600 dark:text-orange-400',
+    bgClass: 'bg-orange-50 dark:bg-orange-900/20',
+    borderClass: 'border-orange-200 dark:border-orange-800'
+  },
+  'complete': {
+    icon: CheckCircle2,
+    title: 'Complete',
+    colorClass: 'text-green-600 dark:text-green-400',
+    bgClass: 'bg-green-50 dark:bg-green-900/20',
+    borderClass: 'border-green-200 dark:border-green-800'
+  },
+  'archived': {
+    icon: Archive,
+    title: 'Archived',
+    colorClass: 'text-gray-600 dark:text-gray-400',
+    bgClass: 'bg-gray-50 dark:bg-gray-900/20',
+    borderClass: 'border-gray-200 dark:border-gray-800'
+  }
+};
+
+const BOARD_STATUSES: SpecStatus[] = ['planned', 'in-progress', 'complete', 'archived'];
+
+interface SpecRelationships {
+  dependsOn: string[];
+  related: string[];
+}
 
 interface Spec {
   id: string;
   specNumber: number | null;
   specName: string;
   title: string | null;
-  status: string | null;
+  status: SpecStatus | null;
   priority: string | null;
   tags: string[] | null;
   updatedAt: Date | null;
+  subSpecsCount?: number;
+  relationships?: SpecRelationships;
 }
 
 interface Stats {
@@ -55,10 +109,13 @@ export function SpecsClient({ initialSpecs }: SpecsClientProps) {
   const searchParams = useSearchParams();
   const router = useRouter();
   
+  const [specs, setSpecs] = useState<Spec[]>(initialSpecs);
+  const [pendingSpecIds, setPendingSpecIds] = useState<Record<string, boolean>>({});
   const [searchQuery, setSearchQuery] = useState('');
-  const [statusFilter, setStatusFilter] = useState<string>('all');
+  const [statusFilter, setStatusFilter] = useState<'all' | SpecStatus>('all');
   const [priorityFilter, setPriorityFilter] = useState<string>('all');
   const [sortBy, setSortBy] = useState<SortBy>('id-desc');
+  const [showArchivedBoard, setShowArchivedBoard] = useState(false); // Start collapsed
   const [viewMode, setViewMode] = useState<ViewMode>(() => {
     // Initialize from URL or localStorage
     const urlView = searchParams.get('view');
@@ -73,6 +130,55 @@ export function SpecsClient({ initialSpecs }: SpecsClientProps) {
   
   const isFirstRender = useRef(true);
 
+  useEffect(() => {
+    setSpecs(initialSpecs);
+  }, [initialSpecs]);
+
+  const handleStatusChange = useCallback(async (spec: Spec, nextStatus: SpecStatus) => {
+    if (spec.status === nextStatus) {
+      return;
+    }
+
+    const previousStatus = spec.status;
+    setPendingSpecIds((prev) => ({ ...prev, [spec.id]: true }));
+    setSpecs((prev) => prev.map(item => item.id === spec.id ? { ...item, status: nextStatus } : item));
+
+    try {
+      const response = await fetch(`/api/specs/${encodeURIComponent(spec.specName)}/status`, {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ status: nextStatus }),
+      });
+
+      if (!response.ok) {
+        const message = await response.text();
+        throw new Error(message || 'Failed to update spec status');
+      }
+
+      const displayName = spec.specNumber ? `#${spec.specNumber}` : spec.specName;
+      toast.success(`Moved ${displayName} to ${STATUS_CONFIG[nextStatus].title}`);
+    } catch (error) {
+      console.error('Failed to update spec status', error);
+      setSpecs((prev) => prev.map(item => item.id === spec.id ? { ...item, status: previousStatus } : item));
+      toast.error('Unable to update status. Please try again.');
+    } finally {
+      setPendingSpecIds((prev) => {
+        const next = { ...prev };
+        delete next[spec.id];
+        return next;
+      });
+    }
+  }, []);
+
+  // Auto-show archived column when filtering by archived status in board view
+  useEffect(() => {
+    if (statusFilter === 'archived' && viewMode === 'board') {
+      setShowArchivedBoard(true);
+    }
+  }, [statusFilter, viewMode]);
+
   // Update URL when view mode changes (skip on initial mount)
   useEffect(() => {
     if (isFirstRender.current) {
@@ -97,35 +203,39 @@ export function SpecsClient({ initialSpecs }: SpecsClientProps) {
   }, [viewMode, router]);
 
   const filteredAndSortedSpecs = useMemo(() => {
-    const specs = initialSpecs.filter(spec => {
+    const filtered = specs.filter(spec => {
       const matchesSearch = !searchQuery ||
         spec.title?.toLowerCase().includes(searchQuery.toLowerCase()) ||
         spec.specName.toLowerCase().includes(searchQuery.toLowerCase()) ||
         spec.tags?.some(tag => tag.toLowerCase().includes(searchQuery.toLowerCase()));
 
-      const matchesStatus = statusFilter === 'all' || spec.status === statusFilter;
+      const matchesStatus = statusFilter === 'all' 
+        ? (viewMode === 'list' ? spec.status !== 'archived' : true)
+        : spec.status === statusFilter;
       const matchesPriority = priorityFilter === 'all' || spec.priority === priorityFilter;
 
       return matchesSearch && matchesStatus && matchesPriority;
     });
 
+    const sorted = [...filtered];
+
     // Sort
     switch (sortBy) {
       case 'id-desc':
-        specs.sort((a, b) => (b.specNumber || 0) - (a.specNumber || 0));
+        sorted.sort((a, b) => (b.specNumber || 0) - (a.specNumber || 0));
         break;
       case 'id-asc':
-        specs.sort((a, b) => (a.specNumber || 0) - (b.specNumber || 0));
+        sorted.sort((a, b) => (a.specNumber || 0) - (b.specNumber || 0));
         break;
       case 'updated-desc':
-        specs.sort((a, b) => {
+        sorted.sort((a, b) => {
           if (!a.updatedAt) return 1;
           if (!b.updatedAt) return -1;
           return b.updatedAt.getTime() - a.updatedAt.getTime();
         });
         break;
       case 'title-asc':
-        specs.sort((a, b) => {
+        sorted.sort((a, b) => {
           const titleA = (a.title || a.specName).toLowerCase();
           const titleB = (b.title || b.specName).toLowerCase();
           return titleA.localeCompare(titleB);
@@ -133,8 +243,8 @@ export function SpecsClient({ initialSpecs }: SpecsClientProps) {
         break;
     }
 
-    return specs;
-  }, [initialSpecs, searchQuery, statusFilter, priorityFilter, sortBy]);
+    return sorted;
+  }, [specs, searchQuery, statusFilter, priorityFilter, sortBy, viewMode]);
 
   return (
     <div className="min-h-screen bg-background p-8">
@@ -161,7 +271,7 @@ export function SpecsClient({ initialSpecs }: SpecsClientProps) {
             </div>
 
             {/* Status Filter */}
-            <Select value={statusFilter} onValueChange={setStatusFilter}>
+            <Select value={statusFilter} onValueChange={(value) => setStatusFilter(value as SpecStatus | 'all')}>
               <SelectTrigger className="w-full sm:w-[180px]">
                 <SelectValue placeholder="Status" />
               </SelectTrigger>
@@ -189,54 +299,62 @@ export function SpecsClient({ initialSpecs }: SpecsClientProps) {
             </Select>
           </div>
 
-          <div className="flex flex-col sm:flex-row justify-between gap-4">
-            {/* Sort Controls */}
-            <Select value={sortBy} onValueChange={(v) => setSortBy(v as SortBy)}>
-              <SelectTrigger className="w-full sm:w-[220px]">
-                <SelectValue placeholder="Sort by" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="id-desc">Newest First (ID ↓)</SelectItem>
-                <SelectItem value="id-asc">Oldest First (ID ↑)</SelectItem>
-                <SelectItem value="updated-desc">Recently Updated</SelectItem>
-                <SelectItem value="title-asc">Title (A-Z)</SelectItem>
-              </SelectContent>
-            </Select>
+          <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+            <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 flex-1">
+              {/* Sort Controls */}
+              <Select value={sortBy} onValueChange={(v) => setSortBy(v as SortBy)}>
+                <SelectTrigger className="w-full sm:w-[220px]">
+                  <SelectValue placeholder="Sort by" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="id-desc">Newest First (ID ↓)</SelectItem>
+                  <SelectItem value="id-asc">Oldest First (ID ↑)</SelectItem>
+                  <SelectItem value="updated-desc">Recently Updated</SelectItem>
+                  <SelectItem value="title-asc">Title (A-Z)</SelectItem>
+                </SelectContent>
+              </Select>
 
-            {/* View Mode Switcher */}
-            <div className="flex gap-2">
-              <Button
-                variant={viewMode === 'list' ? 'default' : 'outline'}
-                size="sm"
-                onClick={() => setViewMode('list')}
-                className="flex items-center gap-2"
-              >
-                <ListIcon className="h-4 w-4" />
-                List
-              </Button>
-              <Button
-                variant={viewMode === 'board' ? 'default' : 'outline'}
-                size="sm"
-                onClick={() => setViewMode('board')}
-                className="flex items-center gap-2"
-              >
-                <LayoutGrid className="h-4 w-4" />
-                Board
-              </Button>
+              {/* View Mode Switcher */}
+              <div className="flex gap-2">
+                <Button
+                  variant={viewMode === 'list' ? 'default' : 'outline'}
+                  size="sm"
+                  onClick={() => setViewMode('list')}
+                  className="flex items-center gap-2"
+                >
+                  <ListIcon className="h-4 w-4" />
+                  List
+                </Button>
+                <Button
+                  variant={viewMode === 'board' ? 'default' : 'outline'}
+                  size="sm"
+                  onClick={() => setViewMode('board')}
+                  className="flex items-center gap-2"
+                >
+                  <LayoutGrid className="h-4 w-4" />
+                  Board
+                </Button>
+              </div>
+
+              {/* Results count */}
+              <div className="text-sm text-muted-foreground">
+                Showing {filteredAndSortedSpecs.length} of {specs.length} specs
+              </div>
             </div>
           </div>
         </div>
 
-        {/* Results count */}
-        <div className="text-sm text-muted-foreground mb-4">
-          Showing {filteredAndSortedSpecs.length} of {initialSpecs.length} specs
-        </div>
-
         {/* Content based on view mode */}
         {viewMode === 'list' ? (
           <ListView specs={filteredAndSortedSpecs} />
         ) : (
-          <BoardView specs={filteredAndSortedSpecs} />
+          <BoardView
+            specs={filteredAndSortedSpecs}
+            onStatusChange={handleStatusChange}
+            pendingSpecIds={pendingSpecIds}
+            showArchived={showArchivedBoard}
+            onToggleArchived={() => setShowArchivedBoard(!showArchivedBoard)}
+          />
         )}
       </div>
     </div>
@@ -254,6 +372,8 @@ 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 hasSubSpecs = !!(spec.subSpecsCount && spec.subSpecsCount > 0);
 
         return (
           <Card 
@@ -274,6 +394,9 @@ function ListView({ specs }: { specs: Spec[] }) {
                       {spec.title || spec.specName}
                     </CardTitle>
                   </Link>
+                  {spec.title && spec.title !== spec.specName && (
+                    <p className="text-sm text-muted-foreground mt-1">{spec.specName}</p>
+                  )}
                 </div>
                 <div className="flex gap-2 shrink-0">
                   {spec.status && <StatusBadge status={spec.status} />}
@@ -281,15 +404,47 @@ function ListView({ specs }: { specs: Spec[] }) {
                 </div>
               </div>
             </CardHeader>
-            {spec.tags && spec.tags.length > 0 && (
-              <CardContent>
-                <div className="flex flex-wrap gap-2">
-                  {spec.tags.map(tag => (
-                    <Badge key={tag} variant="secondary">
-                      {tag}
-                    </Badge>
-                  ))}
-                </div>
+            {/* Only render CardContent if there's metadata or tags to show */}
+            {((spec.updatedAt || hasSubSpecs || hasDependencies || (spec.tags && spec.tags.length > 0))) && (
+              <CardContent className="space-y-3">
+                {/* Metadata row */}
+                {(spec.updatedAt || hasSubSpecs || hasDependencies) && (
+                  <div className="flex items-center gap-4 text-sm text-muted-foreground flex-wrap">
+                    {spec.updatedAt && (
+                      <div className="flex items-center gap-1.5">
+                        <Clock className="h-3.5 w-3.5" />
+                        <span>Updated {formatRelativeTime(spec.updatedAt)}</span>
+                      </div>
+                    )}
+                    {hasSubSpecs && (
+                      <div className="flex items-center gap-1.5">
+                        <FileText className="h-3.5 w-3.5" />
+                        <span>+{spec.subSpecsCount} files</span>
+                      </div>
+                    )}
+                    {hasDependencies && (
+                      <div className="flex items-center gap-1.5">
+                        <GitBranch className="h-3.5 w-3.5" />
+                        <span>
+                          {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`}
+                        </span>
+                      </div>
+                    )}
+                  </div>
+                )}
+
+                {/* Tags */}
+                {spec.tags && spec.tags.length > 0 && (
+                  <div className="flex flex-wrap gap-2">
+                    {spec.tags.map(tag => (
+                      <Badge key={tag} variant="secondary" className="text-xs">
+                        {tag}
+                      </Badge>
+                    ))}
+                  </div>
+                )}
               </CardContent>
             )}
           </Card>
@@ -299,63 +454,128 @@ function ListView({ specs }: { specs: Spec[] }) {
   );
 }
 
-function BoardView({ specs }: { specs: Spec[] }) {
+interface BoardViewProps {
+  specs: Spec[];
+  onStatusChange: (spec: Spec, status: SpecStatus) => void;
+  pendingSpecIds: Record<string, boolean>;
+  showArchived: boolean;
+  onToggleArchived: () => void;
+}
+
+function BoardView({ specs, onStatusChange, pendingSpecIds, showArchived, onToggleArchived }: BoardViewProps) {
+  const [draggingId, setDraggingId] = useState<string | null>(null);
+  const [activeDropZone, setActiveDropZone] = useState<SpecStatus | null>(null);
+
   const columns = useMemo(() => {
-    const statusConfig = {
-      'planned': {
-        icon: Clock,
-        title: 'Planned',
-        colorClass: 'text-blue-600 dark:text-blue-400',
-        bgClass: 'bg-blue-50 dark:bg-blue-900/20',
-        borderClass: 'border-blue-200 dark:border-blue-800'
-      },
-      'in-progress': {
-        icon: PlayCircle,
-        title: 'In Progress',
-        colorClass: 'text-orange-600 dark:text-orange-400',
-        bgClass: 'bg-orange-50 dark:bg-orange-900/20',
-        borderClass: 'border-orange-200 dark:border-orange-800'
-      },
-      'complete': {
-        icon: CheckCircle2,
-        title: 'Complete',
-        colorClass: 'text-green-600 dark:text-green-400',
-        bgClass: 'bg-green-50 dark:bg-green-900/20',
-        borderClass: 'border-green-200 dark:border-green-800'
-      }
-    } as const;
-    
-    const statuses = ['planned', 'in-progress', 'complete'] as const;
-    
-    return statuses.map(status => ({
+    // Always show all columns, including archived (it will be rendered as collapsed bar when showArchived=false)
+    return BOARD_STATUSES.map(status => ({
       status,
-      config: statusConfig[status],
+      config: STATUS_CONFIG[status],
       specs: specs.filter(spec => spec.status === status),
     }));
   }, [specs]);
 
+  const specLookup = useMemo(() => {
+    const map = new Map<string, Spec>();
+    specs.forEach(spec => map.set(spec.id, spec));
+    return map;
+  }, [specs]);
+
+  const handleDragStart = useCallback((specId: string, event: DragEvent<HTMLDivElement>) => {
+    event.dataTransfer.setData('text/plain', specId);
+    event.dataTransfer.effectAllowed = 'move';
+    setDraggingId(specId);
+  }, []);
+
+  const handleDragEnd = useCallback(() => {
+    setDraggingId(null);
+    setActiveDropZone(null);
+  }, []);
+
+  const handleDragOver = useCallback((status: SpecStatus, event: DragEvent<HTMLDivElement>) => {
+    if (!draggingId) return;
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'move';
+    setActiveDropZone(status);
+  }, [draggingId]);
+
+  const handleDragLeave = useCallback((status: SpecStatus, event: DragEvent<HTMLDivElement>) => {
+    if (!draggingId) return;
+    const related = event.relatedTarget as Node | null;
+    if (!related || !event.currentTarget.contains(related)) {
+      setActiveDropZone((current) => (current === status ? null : current));
+    }
+  }, [draggingId]);
+
+  const handleDrop = useCallback((status: SpecStatus, event: DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    const draggedId = event.dataTransfer.getData('text/plain') || draggingId;
+    if (!draggedId) {
+      handleDragEnd();
+      return;
+    }
+
+    const spec = specLookup.get(draggedId);
+    if (spec && spec.status !== status) {
+      onStatusChange(spec, status);
+    }
+
+    handleDragEnd();
+  }, [draggingId, handleDragEnd, onStatusChange, specLookup]);
+
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+    <div className="flex gap-6">
       {columns.map(column => {
         const Icon = column.config.icon;
+        const isArchivedColumn = column.status === 'archived';
+        
         return (
-          <div key={column.status} className="flex flex-col">
+          <div key={column.status} className={cn(
+            "flex flex-col",
+            isArchivedColumn && !showArchived && "w-20 flex-shrink-0"
+          )}>
             <div className={cn(
-              "sticky top-14 z-40 mb-4 p-3 rounded-lg border-2 bg-background",
+              'sticky top-14 z-40 mb-4 rounded-lg border-2 bg-background transition-all',
               column.config.bgClass,
-              column.config.borderClass
-            )}>
+              column.config.borderClass,
+              isArchivedColumn ? 'cursor-pointer hover:opacity-80' : '',
+              isArchivedColumn && !showArchived ? 'py-6 px-2' : 'p-3'
+            )}
+            onClick={isArchivedColumn ? onToggleArchived : undefined}
+            >
               <h2 className={cn(
-                "text-lg font-semibold flex items-center gap-2",
-                column.config.colorClass
+                'text-lg font-semibold flex items-center gap-2',
+                column.config.colorClass,
+                isArchivedColumn && !showArchived && 'flex-col text-sm gap-3'
               )}>
                 <Icon className="h-5 w-5" />
-                {column.config.title}
-                <Badge variant="outline" className="ml-auto">{column.specs.length}</Badge>
+                {isArchivedColumn && !showArchived ? (
+                  <>
+                    <span className="vertical-text text-sm whitespace-nowrap">
+                      {column.config.title}
+                    </span>
+                    <Badge variant="outline" className="text-xs">{column.specs.length}</Badge>
+                  </>
+                ) : (
+                  <>
+                    {column.config.title}
+                    <Badge variant="outline" className="ml-auto">{column.specs.length}</Badge>
+                  </>
+                )}
               </h2>
             </div>
 
-            <div className="space-y-3 flex-1">
+            {(!isArchivedColumn || showArchived) && (
+              <div
+              className={cn(
+                'space-y-3 flex-1 rounded-xl border border-transparent p-1 transition-colors overflow-y-auto max-h-[calc(100vh-250px)]',
+                draggingId && 'border-dashed border-muted-foreground/40',
+                draggingId && activeDropZone === column.status && 'bg-muted/40 border-primary/50'
+              )}
+              onDragOver={(event) => handleDragOver(column.status, event)}
+              onDragLeave={(event) => handleDragLeave(column.status, event)}
+              onDrop={(event) => handleDrop(column.status, event)}
+            >
               {column.specs.map(spec => {
                 const priorityColors = {
                   'critical': 'border-l-red-500',
@@ -364,16 +584,33 @@ function BoardView({ specs }: { specs: Spec[] }) {
                   'low': 'border-l-gray-400'
                 };
                 const borderColor = priorityColors[spec.priority as keyof typeof priorityColors] || 'border-l-gray-300';
+                const isUpdating = Boolean(pendingSpecIds[spec.id]);
 
                 return (
-                  <Card 
-                    key={spec.id} 
+                  <Card
+                    key={spec.id}
+                    draggable={!isUpdating}
+                    onDragStart={(event) => {
+                      if (isUpdating) {
+                        event.preventDefault();
+                        return;
+                      }
+                      handleDragStart(spec.id, event);
+                    }}
+                    onDragEnd={handleDragEnd}
+                    aria-disabled={isUpdating}
                     className={cn(
-                      "hover:shadow-lg transition-all duration-150 hover:scale-[1.02] border-l-4 cursor-pointer",
-                      borderColor
+                      'relative hover:shadow-lg transition-all duration-150 hover:scale-[1.02] border-l-4 cursor-pointer',
+                      borderColor,
+                      isUpdating && 'opacity-60 cursor-wait'
                     )}
                     onClick={() => window.location.href = `/specs/${spec.specNumber || spec.id}`}
                   >
+                    {isUpdating && (
+                      <div className="absolute inset-0 rounded-lg bg-background/80 flex items-center justify-center text-xs font-medium">
+                        Updating...
+                      </div>
+                    )}
                     <CardHeader className="pb-3">
                       <Link href={`/specs/${spec.specNumber || spec.id}`}>
                         <CardTitle className="text-sm font-medium hover:text-primary transition-colors">
@@ -408,7 +645,17 @@ function BoardView({ specs }: { specs: Spec[] }) {
                   </Card>
                 );
               })}
+
+              {column.specs.length === 0 && (
+                <Card className="border-dashed border-gray-300 dark:border-gray-700 bg-transparent">
+                  <CardContent className="py-8 text-center">
+                    <Icon className={cn('mx-auto h-8 w-8 mb-2', column.config.colorClass, 'opacity-50')} />
+                    <p className="text-sm text-muted-foreground">Drop here to move specs</p>
+                  </CardContent>
+                </Card>
+              )}
             </div>
+            )}
           </div>
         );
       })}

package/.next/standalone/packages/ui/src/lib/db/service-queries.ts

@@ -136,6 +136,29 @@ export async function getSpecsWithSubSpecCount(projectId?: string): Promise<(Par
   });
 }
 
+/**
+ * Get all specs with sub-spec count and relationships (for comprehensive list view)
+ */
+export async function getSpecsWithMetadata(projectId?: string): Promise<(ParsedSpec & { subSpecsCount: number; relationships: SpecRelationships })[]> {
+  const specs = await specsService.getAllSpecs(projectId);
+  
+  // Only count sub-specs and relationships for filesystem mode
+  if (projectId) {
+    return specs.map(spec => ({ 
+      ...parseSpecTags(spec), 
+      subSpecsCount: 0,
+      relationships: { dependsOn: [], related: [] }
+    }));
+  }
+  
+  return specs.map(spec => {
+    const specDirPath = buildSpecDirPath(spec.filePath);
+    const subSpecsCount = countSubSpecs(specDirPath);
+    const relationships = getFilesystemRelationships(specDirPath);
+    return { ...parseSpecTags(spec), subSpecsCount, relationships };
+  });
+}
+
 /**
  * Get a spec by ID (number or UUID)
  */