@leanspec/ui 0.2.3 → 0.2.4

package/dist/standalone/packages/web/src/app/home-client.tsx

@@ -0,0 +1,277 @@
+'use client';
+
+import { useState, useMemo } from 'react';
+import Link from 'next/link';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@/components/ui/select';
+import { Search, FileText, CheckCircle2, PlayCircle, Clock } from 'lucide-react';
+import { StatusBadge } from '@/components/status-badge';
+import { PriorityBadge } from '@/components/priority-badge';
+
+interface Spec {
+  id: string;
+  specNumber: number | null;
+  specName: string;
+  title: string | null;
+  status: string | null;
+  priority: string | null;
+  tags: string[] | null;
+}
+
+interface Stats {
+  totalSpecs: number;
+  completionRate: number;
+  specsByStatus: { status: string; count: number }[];
+}
+
+interface HomeClientProps {
+  initialProjects: unknown[];
+  initialStats: Stats;
+  initialSpecs: Spec[];
+}
+
+export function HomeClient({ initialProjects: _initialProjects, initialStats, initialSpecs }: HomeClientProps) {
+  void _initialProjects;
+  const [searchQuery, setSearchQuery] = useState('');
+  const [statusFilter, setStatusFilter] = useState<string>('all');
+  const [priorityFilter, setPriorityFilter] = useState<string>('all');
+
+  const filteredSpecs = useMemo(() => {
+    return initialSpecs.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 matchesPriority = priorityFilter === 'all' || spec.priority === priorityFilter;
+
+      return matchesSearch && matchesStatus && matchesPriority;
+    });
+  }, [initialSpecs, searchQuery, statusFilter, priorityFilter]);
+
+  const stats = initialStats;
+
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Stats Section */}
+      <section className="container mx-auto px-4 py-8">
+        <div className="mb-8">
+          <h1 className="text-3xl sm:text-4xl font-bold tracking-tight">LeanSpec Web</h1>
+          <p className="text-muted-foreground mt-2">Interactive spec showcase for AI-powered development</p>
+        </div>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
+          {/* Total Specs */}
+          <Card className="relative overflow-hidden">
+            <div className="absolute inset-0 bg-linear-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>
+
+          {/* Completed */}
+          <Card className="relative overflow-hidden">
+            <div className="absolute inset-0 bg-linear-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">
+                {stats.specsByStatus.find(s => s.status === 'complete')?.count || 0}
+              </div>
+              <p className="text-xs text-muted-foreground mt-1 flex items-center gap-1">
+                <span className="text-green-600">{stats.completionRate}%</span>
+                completion rate
+              </p>
+            </CardContent>
+          </Card>
+
+          {/* In Progress */}
+          <Card className="relative overflow-hidden">
+            <div className="absolute inset-0 bg-linear-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>
+
+          {/* Planned */}
+          <Card className="relative overflow-hidden">
+            <div className="absolute inset-0 bg-linear-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">Planned</CardTitle>
+                <Clock className="h-5 w-5 text-blue-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>
+      </section>
+
+      {/* Specs List */}
+      <section className="container mx-auto px-4 py-4">
+        <div className="mb-1">
+          <h2 className="text-xl sm:text-2xl font-bold mb-4">Specifications</h2>
+
+          {/* Search and Filters */}
+          <div className="lg:sticky lg:top-14 lg:z-40 bg-background pb-4 pt-2 mb-1">
+            <div className="flex flex-col gap-3 mb-3">
+              <div className="relative flex-1">
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
+                <Input
+                  placeholder="Search specs..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="pl-10"
+                />
+              </div>
+
+              <div className="flex gap-2 overflow-x-auto pb-2">
+                <Select value={statusFilter} onValueChange={setStatusFilter}>
+                  <SelectTrigger className="w-[140px] sm:w-[180px]">
+                    <SelectValue placeholder="All Status" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">All Status</SelectItem>
+                    <SelectItem value="planned">Planned</SelectItem>
+                    <SelectItem value="in-progress">In Progress</SelectItem>
+                    <SelectItem value="complete">Complete</SelectItem>
+                    <SelectItem value="archived">Archived</SelectItem>
+                  </SelectContent>
+                </Select>
+
+                <Select value={priorityFilter} onValueChange={setPriorityFilter}>
+                  <SelectTrigger className="w-[140px] sm:w-[180px]">
+                    <SelectValue placeholder="All Priority" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">All Priority</SelectItem>
+                    <SelectItem value="critical">Critical</SelectItem>
+                    <SelectItem value="high">High</SelectItem>
+                    <SelectItem value="medium">Medium</SelectItem>
+                    <SelectItem value="low">Low</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Desktop Table View */}
+        <div className="hidden md:block border rounded-lg border-gray-200 dark:border-gray-800 overflow-x-auto">
+          <table className="w-full">
+            <thead className="lg:sticky lg:top-14 lg:z-30 border-b backdrop-blur border-gray-200 bg-background/95 dark:border-gray-800">
+              <tr>
+                <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                  Spec
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                  Title
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                  Status
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                  Priority
+                </th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-gray-200 dark:divide-gray-800">
+              {filteredSpecs.map((spec) => (
+                <tr 
+                  key={spec.id} 
+                  className="group hover:bg-muted/50 transition-colors cursor-pointer"
+                  onClick={() => window.location.href = `/specs/${spec.specNumber || spec.id}`}
+                >
+                  <td className="px-6 py-4 whitespace-nowrap">
+                    <span className="text-primary group-hover:underline font-medium">
+                      {spec.specNumber ? `#${spec.specNumber}` : spec.specName}
+                    </span>
+                  </td>
+                  <td className="px-6 py-4">
+                    <div className="text-sm">{spec.title || spec.specName}</div>
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap">
+                    <StatusBadge status={spec.status || 'planned'} />
+                  </td>
+                  <td className="px-6 py-4 whitespace-nowrap">
+                    <PriorityBadge priority={spec.priority || 'medium'} />
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+
+        {/* Mobile Card View */}
+        <div className="md:hidden space-y-3">
+          {filteredSpecs.map((spec) => (
+            <Link
+              key={spec.id}
+              href={`/specs/${spec.specNumber || spec.id}`}
+              className="block"
+            >
+              <Card className="hover:bg-muted/50 transition-colors">
+                <CardContent className="p-4">
+                  <div className="flex items-start justify-between gap-2 mb-2">
+                    <div className="flex-1 min-w-0">
+                      <div className="font-medium text-primary mb-1">
+                        {spec.specNumber ? `#${spec.specNumber}` : spec.specName}
+                      </div>
+                      <div className="text-sm text-foreground truncate">
+                        {spec.title || spec.specName}
+                      </div>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2 mt-3">
+                    <StatusBadge status={spec.status || 'planned'} />
+                    <PriorityBadge priority={spec.priority || 'medium'} />
+                  </div>
+                </CardContent>
+              </Card>
+            </Link>
+          ))}
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="container mx-auto px-4 py-8 text-center text-muted-foreground border-t border-gray-200 dark:border-gray-800 mt-12">
+        <p>LeanSpec - Lightweight spec methodology for AI-powered development</p>
+        <p className="mt-2 text-sm">
+          <a href="https://github.com/codervisor/lean-spec" className="text-primary hover:underline">
+            View on GitHub
+          </a>
+        </p>
+      </footer>
+    </div>
+  );
+}

package/dist/standalone/packages/web/src/app/layout.tsx

@@ -0,0 +1,70 @@
+import type { Metadata } from "next";
+import "./globals.css";
+import { Navigation } from "@/components/navigation";
+import { MainSidebar } from "@/components/main-sidebar";
+import { ThemeProvider } from "@/components/theme-provider";
+import { Toast } from "@/components/ui/toast";
+import { getSpecs } from "@/lib/db/service-queries";
+
+export const metadata: Metadata = {
+  title: "LeanSpec Web - Interactive Spec Showcase",
+  description: "Browse and explore LeanSpec specifications in a rich, interactive format",
+  icons: {
+    icon: [
+      { url: '/favicon.ico' },
+      { url: '/logo.svg', type: 'image/svg+xml' },
+    ],
+    apple: '/logo.svg',
+  },
+  openGraph: {
+    title: "LeanSpec Web",
+    description: "Browse and explore LeanSpec specifications in a rich, interactive format",
+    type: "website",
+  },
+  viewport: {
+    width: 'device-width',
+    initialScale: 1,
+    maximumScale: 5,
+  },
+};
+
+export default async function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  const specs = await getSpecs();
+  const specsForSearch = specs
+    .filter(spec => spec.specNumber && spec.title && spec.status && spec.priority)
+    .map(spec => ({
+      id: spec.id,
+      specNumber: spec.specNumber!.toString(),
+      title: spec.title!,
+      status: spec.status!,
+      priority: spec.priority!,
+      tags: spec.tags || [],
+      createdAt: spec.createdAt ? spec.createdAt.toISOString() : '',
+    }));
+
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className="antialiased bg-background overflow-x-hidden">
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          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 />
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

package/dist/standalone/packages/web/src/app/loading.tsx

@@ -0,0 +1,87 @@
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+
+export default function Loading() {
+  return (
+    <div className="min-h-screen bg-background">
+      {/* Stats Section */}
+      <section className="container mx-auto px-4 py-8">
+        <div className="mb-8">
+          <Skeleton className="h-10 w-64 mb-2" />
+          <Skeleton className="h-5 w-96" />
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
+          {[...Array(4)].map((_, i) => (
+            <Card key={i}>
+              <CardHeader className="pb-3">
+                <Skeleton className="h-4 w-24" />
+              </CardHeader>
+              <CardContent>
+                <Skeleton className="h-9 w-16" />
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </section>
+
+      {/* Specs List */}
+      <section className="container mx-auto px-4 py-8">
+        <div className="mb-6">
+          <Skeleton className="h-8 w-48 mb-4" />
+          
+          <div className="flex flex-col sm:flex-row gap-4 mb-6">
+            <Skeleton className="h-9 flex-1" />
+            <div className="flex gap-2">
+              <Skeleton className="h-9 w-32" />
+              <Skeleton className="h-9 w-32" />
+            </div>
+          </div>
+
+          <Skeleton className="h-4 w-48 mb-4" />
+        </div>
+
+        <Card>
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead className="border-b">
+                <tr>
+                  <th className="px-6 py-3 text-left">
+                    <Skeleton className="h-4 w-12" />
+                  </th>
+                  <th className="px-6 py-3 text-left">
+                    <Skeleton className="h-4 w-16" />
+                  </th>
+                  <th className="px-6 py-3 text-left">
+                    <Skeleton className="h-4 w-16" />
+                  </th>
+                  <th className="px-6 py-3 text-left">
+                    <Skeleton className="h-4 w-16" />
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="divide-y">
+                {[...Array(10)].map((_, i) => (
+                  <tr key={i}>
+                    <td className="px-6 py-4">
+                      <Skeleton className="h-5 w-12" />
+                    </td>
+                    <td className="px-6 py-4">
+                      <Skeleton className="h-5 w-64" />
+                    </td>
+                    <td className="px-6 py-4">
+                      <Skeleton className="h-6 w-20" />
+                    </td>
+                    <td className="px-6 py-4">
+                      <Skeleton className="h-6 w-16" />
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </Card>
+      </section>
+    </div>
+  );
+}

package/dist/standalone/packages/web/src/app/not-found.tsx

@@ -0,0 +1,27 @@
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+
+export default function NotFound() {
+  return (
+    <div className="min-h-screen bg-background flex items-center justify-center px-4">
+      <div className="text-center space-y-6">
+        <div className="space-y-2">
+          <h1 className="text-6xl font-bold text-primary">404</h1>
+          <h2 className="text-2xl font-semibold">Page Not Found</h2>
+          <p className="text-muted-foreground max-w-md mx-auto">
+            The page you&rsquo;re looking for doesn&rsquo;t exist or has been moved.
+          </p>
+        </div>
+        
+        <div className="flex gap-4 justify-center">
+          <Button asChild>
+            <Link href="/">Go Home</Link>
+          </Button>
+          <Button variant="outline" asChild>
+            <Link href="/board">View Board</Link>
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/dist/standalone/packages/web/src/app/page.tsx

@@ -0,0 +1,18 @@
+/**
+ * Home page - Dashboard with project overview
+ */
+
+import { getStats, getSpecs } from '@/lib/db/service-queries';
+import { DashboardClient } from './dashboard-client';
+
+// Force dynamic rendering - this page needs runtime data
+export const dynamic = 'force-dynamic';
+
+export default async function Home() {
+  const [stats, specs] = await Promise.all([
+    getStats(),
+    getSpecs(),
+  ]);
+
+  return <DashboardClient initialSpecs={specs} initialStats={stats} />;
+}

package/dist/standalone/packages/web/src/app/specs/[id]/loading.tsx

@@ -0,0 +1,5 @@
+import { SpecDetailLoadingShell } from '@/components/spec-detail-loading-shell';
+
+export default function SpecLoading() {
+  return <SpecDetailLoadingShell />;
+}

package/dist/standalone/packages/web/src/app/specs/[id]/page.tsx

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

package/dist/standalone/packages/web/src/app/specs/page.tsx

@@ -0,0 +1,18 @@
+/**
+ * Specs page - Browse all LeanSpec specifications with list/board switcher
+ */
+
+import { getSpecs, getStats } from '@/lib/db/service-queries';
+import { SpecsClient } from './specs-client';
+
+// Force dynamic rendering - this page needs runtime data
+export const dynamic = 'force-dynamic';
+
+export default async function SpecsPage() {
+  const [specs, stats] = await Promise.all([
+    getSpecs(),
+    getStats(),
+  ]);
+
+  return <SpecsClient initialSpecs={specs} initialStats={stats} />;
+}