@leanspec/ui 0.2.4 → 0.2.5

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

@@ -0,0 +1,36 @@
+/**
+ * GET /api/specs/[id] - Get a specific spec
+ */
+
+import { NextResponse } from 'next/server';
+import { getSpecById } from '@/lib/db/service-queries';
+
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  try {
+    const { id } = await params;
+    const spec = await getSpecById(id);
+    
+    if (!spec) {
+      return NextResponse.json(
+        { error: 'Spec not found' },
+        { status: 404 }
+      );
+    }
+    
+    // Tier 2: Add cache headers for client-side caching
+    return NextResponse.json({ spec }, {
+      headers: {
+        'Cache-Control': 'public, s-maxage=60, stale-while-revalidate=120'
+      }
+    });
+  } catch (error) {
+    console.error('Error fetching spec:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch spec' },
+      { status: 500 }
+    );
+  }
+}

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

@@ -0,0 +1,46 @@
+/**
+ * GET /api/specs/[id]/subspecs/[file] - Get a specific sub-spec file
+ */
+
+import { NextResponse } from 'next/server';
+import { getSpecById } from '@/lib/db/service-queries';
+
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ id: string; file: string }> }
+) {
+  try {
+    const { id, file } = await params;
+    const spec = await getSpecById(id);
+    
+    if (!spec) {
+      return NextResponse.json(
+        { error: 'Spec not found' },
+        { status: 404 }
+      );
+    }
+
+    // Find the requested sub-spec file
+    const subSpec = spec.subSpecs?.find(s => s.file === file);
+    
+    if (!subSpec) {
+      return NextResponse.json(
+        { error: 'Sub-spec not found' },
+        { status: 404 }
+      );
+    }
+    
+    // Tier 2: Add cache headers for client-side caching
+    return NextResponse.json({ subSpec }, {
+      headers: {
+        'Cache-Control': 'public, s-maxage=60, stale-while-revalidate=120'
+      }
+    });
+  } catch (error) {
+    console.error('Error fetching sub-spec:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch sub-spec' },
+      { status: 500 }
+    );
+  }
+}

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

@@ -0,0 +1,19 @@
+/**
+ * GET /api/stats - Get project and spec statistics
+ */
+
+import { NextResponse } from 'next/server';
+import { getStats } from '@/lib/db/service-queries';
+
+export async function GET() {
+  try {
+    const stats = await getStats();
+    return NextResponse.json(stats);
+  } catch (error) {
+    console.error('Error fetching stats:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch stats' },
+      { status: 500 }
+    );
+  }
+}

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

@@ -0,0 +1,162 @@
+'use client';
+
+import Link from 'next/link';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Clock, PlayCircle, CheckCircle2, Archive } from 'lucide-react';
+import { PriorityBadge } from '@/components/priority-badge';
+import { cn } from '@/lib/utils';
+
+interface Spec {
+  id: string;
+  specNumber: number | null;
+  specName: string;
+  title: string | null;
+  status: string | null;
+  priority: string | null;
+  tags: string[] | null;
+}
+
+interface BoardClientProps {
+  initialSpecs: Spec[];
+}
+
+export function BoardClient({ initialSpecs }: BoardClientProps) {
+  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'
+    },
+    '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 statuses = ['planned', 'in-progress', 'complete', 'archived'] as const;
+  const columns = statuses.map(status => ({
+    status,
+    config: statusConfig[status],
+    specs: initialSpecs.filter(spec => spec.status === status),
+  }));
+
+  return (
+    <div className="min-h-screen bg-background">
+      <section className="container mx-auto px-4 py-8">
+        <div className="mb-8">
+          <h1 className="text-4xl font-bold tracking-tight">Kanban Board</h1>
+          <p className="text-muted-foreground mt-2">Track spec progress across all statuses</p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+          {columns.map(column => {
+            const Icon = column.config.icon;
+            return (
+              <div key={column.status} className="flex flex-col">
+                <div className={cn(
+                  "sticky top-14 z-40 mb-4 p-3 rounded-lg border-2 bg-background",
+                  column.config.bgClass,
+                  column.config.borderClass
+                )}>
+                  <h2 className={cn(
+                    "text-lg font-semibold flex items-center gap-2",
+                    column.config.colorClass
+                  )}>
+                    <Icon className="h-5 w-5" />
+                    {column.config.title}
+                    <Badge variant="outline" className="ml-auto">{column.specs.length}</Badge>
+                  </h2>
+                </div>
+
+                <div className="space-y-3 flex-1">
+                  {column.specs.map(spec => {
+                    // Get priority color for left border
+                    const priorityColors = {
+                      'critical': 'border-l-red-500',
+                      'high': 'border-l-orange-500',
+                      'medium': 'border-l-blue-500',
+                      'low': 'border-l-gray-400'
+                    };
+                    const borderColor = priorityColors[spec.priority as keyof typeof priorityColors] || priorityColors.medium;
+
+                    return (
+                      <Card 
+                        key={spec.id} 
+                        className={cn(
+                          "hover:shadow-lg transition-all duration-150 hover:scale-[1.02] border-l-4 cursor-pointer border-gray-200 dark:border-gray-800",
+                          borderColor
+                        )}
+                        onClick={() => window.location.href = `/specs/${spec.specNumber || spec.id}`}
+                      >
+                        <CardHeader className="pb-3">
+                          <Link href={`/specs/${spec.specNumber || spec.id}`}>
+                            <CardTitle className="text-sm font-medium hover:text-primary transition-colors">
+                              {spec.specNumber ? `#${spec.specNumber}` : spec.specName}
+                            </CardTitle>
+                          </Link>
+                        </CardHeader>
+                        <CardContent className="space-y-2">
+                          <p className="text-sm text-muted-foreground line-clamp-2">
+                            {spec.title || spec.specName}
+                          </p>
+                          
+                          <div className="flex items-center gap-2 flex-wrap">
+                            {spec.priority && <PriorityBadge priority={spec.priority} />}
+                            
+                            {spec.tags && spec.tags.length > 0 && (
+                              <>
+                                {spec.tags.slice(0, 2).map(tag => (
+                                  <Badge key={tag} variant="outline" className="text-xs">
+                                    {tag}
+                                  </Badge>
+                                ))}
+                                {spec.tags.length > 2 && (
+                                  <Badge variant="outline" className="text-xs">
+                                    +{spec.tags.length - 2}
+                                  </Badge>
+                                )}
+                              </>
+                            )}
+                          </div>
+                        </CardContent>
+                      </Card>
+                    );
+                  })}
+
+                  {column.specs.length === 0 && (
+                    <Card className="border-dashed border-gray-300 dark:border-gray-700">
+                      <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">No {column.config.title.toLowerCase()} specs</p>
+                      </CardContent>
+                    </Card>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </section>
+    </div>
+  );
+}

package/.next/standalone/packages/ui/src/app/board/loading.tsx

@@ -0,0 +1,43 @@
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+
+export default function BoardLoading() {
+  return (
+    <div className="min-h-screen bg-background">
+      <section className="container mx-auto px-4 py-8">
+        <div className="mb-8">
+          <Skeleton className="h-10 w-48 mb-2" />
+          <Skeleton className="h-5 w-96" />
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+          {[...Array(4)].map((_, colIdx) => (
+            <div key={colIdx} className="flex flex-col">
+              <div className="mb-4">
+                <Skeleton className="h-7 w-32" />
+              </div>
+
+              <div className="space-y-3 flex-1">
+                {[...Array(3)].map((_, i) => (
+                  <Card key={i}>
+                    <CardHeader className="pb-3">
+                      <Skeleton className="h-5 w-24" />
+                    </CardHeader>
+                    <CardContent className="space-y-2">
+                      <Skeleton className="h-4 w-full" />
+                      <Skeleton className="h-4 w-3/4" />
+                      <div className="flex gap-2 pt-2">
+                        <Skeleton className="h-5 w-16" />
+                        <Skeleton className="h-5 w-16" />
+                      </div>
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}

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

@@ -0,0 +1,18 @@
+/**
+ * Board page - Redirects to unified specs page with board view
+ */
+
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+
+export default function Board() {
+  const router = useRouter();
+  
+  useEffect(() => {
+    router.replace('/specs?view=board');
+  }, [router]);
+
+  return null;
+}

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

@@ -0,0 +1,364 @@
+'use client';
+
+import Link from 'next/link';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { 
+  FileText, 
+  CheckCircle2, 
+  PlayCircle, 
+  Clock,
+  LayoutGrid,
+  List,
+  TrendingUp,
+  Calendar
+} from 'lucide-react';
+import { StatusBadge } from '@/components/status-badge';
+import { PriorityBadge } from '@/components/priority-badge';
+import { Badge } from '@/components/ui/badge';
+import { extractH1Title } from '@/lib/utils';
+
+interface Spec {
+  id: string;
+  specNumber: number | null;
+  specName: string;
+  title: string | null;
+  status: string | null;
+  priority: string | null;
+  tags: string[] | null;
+  createdAt: Date | null;
+  updatedAt: Date | null;
+  contentMd?: string;
+}
+
+interface Stats {
+  totalSpecs: number;
+  completionRate: number;
+  specsByStatus: { status: string; count: number }[];
+}
+
+interface DashboardClientProps {
+  initialSpecs: Spec[];
+  initialStats: Stats;
+}
+
+function formatRelativeTime(date: Date | null): string {
+  if (!date) return 'Unknown';
+  
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+  const diffDays = Math.floor(diffHours / 24);
+  
+  if (diffHours < 1) return 'Just now';
+  if (diffHours < 24) return `${diffHours} hour${diffHours > 1 ? 's' : ''} ago`;
+  if (diffDays < 7) return `${diffDays} day${diffDays > 1 ? 's' : ''} ago`;
+  if (diffDays < 30) return `${Math.floor(diffDays / 7)} week${Math.floor(diffDays / 7) > 1 ? 's' : ''} ago`;
+  return date.toLocaleDateString();
+}
+
+function SpecListItem({ spec }: { spec: Spec }) {
+  // Extract H1 title from content if available, fallback to title or name
+  const h1Title = spec.contentMd ? extractH1Title(spec.contentMd) : null;
+  const displayTitle = h1Title || spec.title || spec.specName;
+  
+  return (
+    <Link 
+      href={`/specs/${spec.specNumber}`}
+      className="block p-3 rounded-lg hover:bg-accent transition-colors"
+      title={spec.specName} /* Show name as tooltip */
+    >
+      <div className="flex items-start justify-between gap-2">
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 mb-1">
+            {spec.specNumber && (
+              <span className="text-sm font-mono text-muted-foreground shrink-0">
+                #{spec.specNumber.toString().padStart(3, '0')}
+              </span>
+            )}
+            <h4 className="text-sm font-medium truncate">
+              {displayTitle}
+            </h4>
+          </div>
+          {/* Show spec name as secondary if it differs from title */}
+          {displayTitle !== spec.specName && (
+            <div className="text-xs text-muted-foreground mb-1">
+              {spec.specName}
+            </div>
+          )}
+          {spec.tags && spec.tags.length > 0 && (
+            <div className="flex flex-wrap gap-1">
+              {spec.tags.slice(0, 3).map(tag => (
+                <Badge key={tag} variant="secondary" className="text-xs">
+                  {tag}
+                </Badge>
+              ))}
+            </div>
+          )}
+        </div>
+        <div className="flex flex-col items-end gap-1 shrink-0">
+          {spec.status && <StatusBadge status={spec.status} className="text-xs scale-90" />}
+          {spec.priority && <PriorityBadge priority={spec.priority} className="text-xs scale-90" />}
+        </div>
+      </div>
+    </Link>
+  );
+}
+
+function ActivityItem({ spec, action, time }: { spec: Spec; action: string; time: Date | null }) {
+  const h1Title = spec.contentMd ? extractH1Title(spec.contentMd) : null;
+  const displayTitle = h1Title || spec.title || spec.specName;
+  
+  return (
+    <div className="flex items-start gap-3 py-2">
+      <div className="w-2 h-2 rounded-full bg-primary mt-2 shrink-0" />
+      <div className="flex-1 min-w-0">
+        <p className="text-sm">
+          <Link 
+            href={`/specs/${spec.specNumber}`}
+            className="font-medium hover:underline"
+            title={spec.specName}
+          >
+            #{spec.specNumber?.toString().padStart(3, '0')} {displayTitle}
+          </Link>
+          {' '}
+          <span className="text-muted-foreground">{action}</span>
+        </p>
+        <p className="text-xs text-muted-foreground mt-0.5">
+          {formatRelativeTime(time)}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export function DashboardClient({ initialSpecs, initialStats }: DashboardClientProps) {
+  const stats = initialStats;
+  
+  // Get specs by status
+  const inProgressSpecs = initialSpecs
+    .filter(spec => spec.status === 'in-progress')
+    .sort((a, b) => (b.specNumber || 0) - (a.specNumber || 0))
+    .slice(0, 5);
+  
+  const plannedSpecs = initialSpecs
+    .filter(spec => spec.status === 'planned')
+    .sort((a, b) => (b.specNumber || 0) - (a.specNumber || 0))
+    .slice(0, 5);
+  
+  const recentlyAdded = initialSpecs
+    .sort((a, b) => {
+      if (!a.createdAt) return 1;
+      if (!b.createdAt) return -1;
+      return b.createdAt.getTime() - a.createdAt.getTime();
+    })
+    .slice(0, 5);
+  
+  const recentActivity = initialSpecs
+    .filter(spec => spec.updatedAt)
+    .sort((a, b) => {
+      if (!a.updatedAt) return 1;
+      if (!b.updatedAt) return -1;
+      return b.updatedAt.getTime() - a.updatedAt.getTime();
+    })
+    .slice(0, 10);
+  
+  const completeCount = stats.specsByStatus.find(s => s.status === 'complete')?.count || 0;
+
+  return (
+    <div className="min-h-screen bg-background p-4 sm:p-8">
+      <div className="max-w-7xl mx-auto space-y-6 sm:space-y-8">
+        {/* Header */}
+        <div>
+          <h1 className="text-3xl sm:text-4xl font-bold tracking-tight">Dashboard</h1>
+          <p className="text-muted-foreground mt-2">
+            Project overview and recent activity
+          </p>
+        </div>
+
+        {/* Stats Cards */}
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
+          {/* Total Specs */}
+          <Card className="relative overflow-hidden">
+            <div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-transparent" />
+            <CardHeader className="relative pb-3">
+              <div className="flex items-center justify-between">
+                <CardTitle className="text-sm font-medium text-muted-foreground">
+                  Total Specs
+                </CardTitle>
+                <FileText className="h-5 w-5 text-blue-600" />
+              </div>
+            </CardHeader>
+            <CardContent className="relative">
+              <div className="text-3xl font-bold">{stats.totalSpecs}</div>
+            </CardContent>
+          </Card>
+
+          {/* In Progress */}
+          <Card className="relative overflow-hidden">
+            <div className="absolute inset-0 bg-gradient-to-br from-orange-500/10 to-transparent" />
+            <CardHeader className="relative pb-3">
+              <div className="flex items-center justify-between">
+                <CardTitle className="text-sm font-medium text-muted-foreground">
+                  In Progress
+                </CardTitle>
+                <PlayCircle className="h-5 w-5 text-orange-600" />
+              </div>
+            </CardHeader>
+            <CardContent className="relative">
+              <div className="text-3xl font-bold">
+                {stats.specsByStatus.find(s => s.status === 'in-progress')?.count || 0}
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Completed */}
+          <Card className="relative overflow-hidden">
+            <div className="absolute inset-0 bg-gradient-to-br from-green-500/10 to-transparent" />
+            <CardHeader className="relative pb-3">
+              <div className="flex items-center justify-between">
+                <CardTitle className="text-sm font-medium text-muted-foreground">
+                  Completed
+                </CardTitle>
+                <CheckCircle2 className="h-5 w-5 text-green-600" />
+              </div>
+            </CardHeader>
+            <CardContent className="relative">
+              <div className="text-3xl font-bold">{completeCount}</div>
+              <p className="text-xs text-muted-foreground mt-1 flex items-center gap-1">
+                <TrendingUp className="h-3 w-3" />
+                {stats.completionRate.toFixed(1)}% completion rate
+              </p>
+            </CardContent>
+          </Card>
+
+          {/* Planned */}
+          <Card className="relative overflow-hidden">
+            <div className="absolute inset-0 bg-gradient-to-br from-purple-500/10 to-transparent" />
+            <CardHeader className="relative pb-3">
+              <div className="flex items-center justify-between">
+                <CardTitle className="text-sm font-medium text-muted-foreground">
+                  Planned
+                </CardTitle>
+                <Clock className="h-5 w-5 text-purple-600" />
+              </div>
+            </CardHeader>
+            <CardContent className="relative">
+              <div className="text-3xl font-bold">
+                {stats.specsByStatus.find(s => s.status === 'planned')?.count || 0}
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Main Content Grid */}
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6">
+          {/* Recently Added */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-lg flex items-center gap-2">
+                <Calendar className="h-5 w-5 text-blue-600" />
+                Recently Added
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-1">
+              {recentlyAdded.slice(0, 5).map(spec => (
+                <SpecListItem key={spec.id} spec={spec} />
+              ))}
+            </CardContent>
+          </Card>
+
+          {/* Planned Specs */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-lg flex items-center gap-2">
+                <Clock className="h-5 w-5 text-purple-600" />
+                Planned ({plannedSpecs.length})
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-1">
+              {plannedSpecs.length > 0 ? (
+                plannedSpecs.map(spec => (
+                  <SpecListItem key={spec.id} spec={spec} />
+                ))
+              ) : (
+                <p className="text-sm text-muted-foreground py-4 text-center">
+                  No planned specs
+                </p>
+              )}
+            </CardContent>
+          </Card>
+
+          {/* In Progress Specs */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-lg flex items-center gap-2">
+                <PlayCircle className="h-5 w-5 text-orange-600" />
+                In Progress ({inProgressSpecs.length})
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-1">
+              {inProgressSpecs.length > 0 ? (
+                inProgressSpecs.map(spec => (
+                  <SpecListItem key={spec.id} spec={spec} />
+                ))
+              ) : (
+                <p className="text-sm text-muted-foreground py-4 text-center">
+                  No specs in progress
+                </p>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Activity Timeline */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-lg">Recent Activity</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="border-l-2 border-muted pl-4 space-y-1">
+              {recentActivity.map(spec => (
+                <ActivityItem 
+                  key={spec.id}
+                  spec={spec}
+                  action="updated"
+                  time={spec.updatedAt}
+                />
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Quick Actions */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-lg">Quick Actions</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex flex-wrap gap-3">
+              <Button asChild>
+                <Link href="/specs">
+                  <List className="h-4 w-4 mr-2" />
+                  View All Specs
+                </Link>
+              </Button>
+              <Button variant="outline" asChild>
+                <Link href="/specs?view=board">
+                  <LayoutGrid className="h-4 w-4 mr-2" />
+                  Board View
+                </Link>
+              </Button>
+              <Button variant="outline" asChild>
+                <Link href="/stats">
+                  <TrendingUp className="h-4 w-4 mr-2" />
+                  View Stats
+                </Link>
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}