@leanspec/ui 0.2.7-dev.20251126100750 → 0.2.7

package/.next/standalone/packages/ui/dist/standalone/packages/web/public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

package/.next/standalone/packages/ui/dist/standalone/packages/web/public/vercel.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

package/.next/standalone/packages/ui/dist/standalone/packages/web/public/window.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

package/.next/standalone/packages/ui/dist/standalone/packages/web/server.js

@@ -0,0 +1,44 @@
+performance.mark('next-start');
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import module from 'node:module'
+const require = module.createRequire(import.meta.url)
+const __dirname = fileURLToPath(new URL('.', import.meta.url))
+
+
+const dir = path.join(__dirname)
+
+process.env.NODE_ENV = 'production'
+process.chdir(__dirname)
+
+const currentPort = parseInt(process.env.PORT, 10) || 3000
+const hostname = process.env.HOSTNAME || '0.0.0.0'
+
+let keepAliveTimeout = parseInt(process.env.KEEP_ALIVE_TIMEOUT, 10)
+const nextConfig = {"env":{},"webpack":null,"typescript":{"ignoreBuildErrors":false},"typedRoutes":false,"distDir":"./.next","cleanDistDir":true,"assetPrefix":"","cacheMaxMemorySize":52428800,"configOrigin":"next.config.ts","useFileSystemPublicRoutes":true,"generateEtags":true,"pageExtensions":["tsx","ts","jsx","js"],"poweredByHeader":true,"compress":true,"images":{"deviceSizes":[640,750,828,1080,1200,1920,2048,3840],"imageSizes":[32,48,64,96,128,256,384],"path":"/_next/image","loader":"default","loaderFile":"","domains":[],"disableStaticImages":false,"minimumCacheTTL":14400,"formats":["image/webp"],"maximumRedirects":3,"dangerouslyAllowLocalIP":false,"dangerouslyAllowSVG":false,"contentSecurityPolicy":"script-src 'none'; frame-src 'none'; sandbox;","contentDispositionType":"attachment","localPatterns":[{"pathname":"**","search":""}],"remotePatterns":[],"qualities":[75],"unoptimized":false},"devIndicators":{"position":"bottom-left"},"onDemandEntries":{"maxInactiveAge":60000,"pagesBufferLength":5},"basePath":"","sassOptions":{},"trailingSlash":false,"i18n":null,"productionBrowserSourceMaps":false,"excludeDefaultMomentLocales":true,"reactProductionProfiling":false,"reactStrictMode":null,"reactMaxHeadersLength":6000,"httpAgentOptions":{"keepAlive":true},"logging":{},"compiler":{},"expireTime":31536000,"staticPageGenerationTimeout":60,"output":"standalone","modularizeImports":{"@mui/icons-material":{"transform":"@mui/icons-material/{{member}}"},"lodash":{"transform":"lodash/{{member}}"}},"outputFileTracingRoot":"/Users/marvzhang/projects/codervisor/lean-spec","cacheComponents":false,"cacheLife":{"default":{"stale":300,"revalidate":900,"expire":4294967294},"seconds":{"stale":30,"revalidate":1,"expire":60},"minutes":{"stale":300,"revalidate":60,"expire":3600},"hours":{"stale":300,"revalidate":3600,"expire":86400},"days":{"stale":300,"revalidate":86400,"expire":604800},"weeks":{"stale":300,"revalidate":604800,"expire":2592000},"max":{"stale":300,"revalidate":2592000,"expire":31536000}},"cacheHandlers":{},"experimental":{"useSkewCookie":false,"cssChunking":true,"multiZoneDraftMode":false,"appNavFailHandling":false,"prerenderEarlyExit":true,"serverMinification":true,"serverSourceMaps":false,"linkNoTouchStart":false,"caseSensitiveRoutes":false,"clientSegmentCache":true,"dynamicOnHover":false,"preloadEntriesOnStart":true,"clientRouterFilter":true,"clientRouterFilterRedirects":false,"fetchCacheKeyPrefix":"","proxyPrefetch":"flexible","optimisticClientCache":true,"manualClientBasePath":false,"cpus":9,"memoryBasedWorkersCount":false,"imgOptConcurrency":null,"imgOptTimeoutInSeconds":7,"imgOptMaxInputPixels":268402689,"imgOptSequentialRead":null,"imgOptSkipMetadata":null,"isrFlushToDisk":true,"workerThreads":false,"optimizeCss":false,"nextScriptWorkers":false,"scrollRestoration":false,"externalDir":false,"disableOptimizedLoading":false,"gzipSize":true,"craCompat":false,"esmExternals":true,"fullySpecified":false,"swcTraceProfiling":false,"forceSwcTransforms":false,"largePageDataBytes":128000,"typedEnv":false,"parallelServerCompiles":false,"parallelServerBuildTraces":false,"ppr":false,"authInterrupts":false,"webpackMemoryOptimizations":false,"optimizeServerReact":true,"viewTransition":false,"removeUncaughtErrorAndRejectionListeners":false,"validateRSCRequestHeaders":false,"staleTimes":{"dynamic":0,"static":300},"reactDebugChannel":false,"serverComponentsHmrCache":true,"staticGenerationMaxConcurrency":8,"staticGenerationMinPagesPerWorker":25,"inlineCss":false,"useCache":false,"globalNotFound":false,"browserDebugInfoInTerminal":false,"lockDistDir":true,"isolatedDevBuild":true,"proxyClientMaxBodySize":10485760,"hideLogsAfterAbort":false,"mcpServer":true,"optimizePackageImports":["lucide-react","date-fns","lodash-es","ramda","antd","react-bootstrap","ahooks","@ant-design/icons","@headlessui/react","@headlessui-float/react","@heroicons/react/20/solid","@heroicons/react/24/solid","@heroicons/react/24/outline","@visx/visx","@tremor/react","rxjs","@mui/material","@mui/icons-material","recharts","react-use","effect","@effect/schema","@effect/platform","@effect/platform-node","@effect/platform-browser","@effect/platform-bun","@effect/sql","@effect/sql-mssql","@effect/sql-mysql2","@effect/sql-pg","@effect/sql-sqlite-node","@effect/sql-sqlite-bun","@effect/sql-sqlite-wasm","@effect/sql-sqlite-react-native","@effect/rpc","@effect/rpc-http","@effect/typeclass","@effect/experimental","@effect/opentelemetry","@material-ui/core","@material-ui/icons","@tabler/icons-react","mui-core","react-icons/ai","react-icons/bi","react-icons/bs","react-icons/cg","react-icons/ci","react-icons/di","react-icons/fa","react-icons/fa6","react-icons/fc","react-icons/fi","react-icons/gi","react-icons/go","react-icons/gr","react-icons/hi","react-icons/hi2","react-icons/im","react-icons/io","react-icons/io5","react-icons/lia","react-icons/lib","react-icons/lu","react-icons/md","react-icons/pi","react-icons/ri","react-icons/rx","react-icons/si","react-icons/sl","react-icons/tb","react-icons/tfi","react-icons/ti","react-icons/vsc","react-icons/wi"],"trustHostHeader":false,"isExperimentalCompile":false},"htmlLimitedBots":"[\\w-]+-Google|Google-[\\w-]+|Chrome-Lighthouse|Slurp|DuckDuckBot|baiduspider|yandex|sogou|bitlybot|tumblr|vkShare|quora link preview|redditbot|ia_archiver|Bingbot|BingPreview|applebot|facebookexternalhit|facebookcatalog|Twitterbot|LinkedInBot|Slackbot|Discordbot|WhatsApp|SkypeUriPreview|Yeti|googleweblight","bundlePagesRouterDependencies":false,"configFileName":"next.config.ts","turbopack":{"root":"/Users/marvzhang/projects/codervisor/lean-spec"},"distDirRoot":".next"}
+
+process.env.__NEXT_PRIVATE_STANDALONE_CONFIG = JSON.stringify(nextConfig)
+
+require('next')
+const { startServer } = require('next/dist/server/lib/start-server')
+
+if (
+  Number.isNaN(keepAliveTimeout) ||
+  !Number.isFinite(keepAliveTimeout) ||
+  keepAliveTimeout < 0
+) {
+  keepAliveTimeout = undefined
+}
+
+startServer({
+  dir,
+  isDev: false,
+  config: nextConfig,
+  hostname,
+  port: currentPort,
+  allowRetry: false,
+  keepAliveTimeout,
+}).catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

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

@@ -0,0 +1,23 @@
+/**
+ * GET /api/projects/[id]/specs - Get specs for a project
+ */
+
+import { NextResponse } from 'next/server';
+import { getSpecsByProjectId } from '@/lib/db/queries';
+
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  try {
+    const { id } = await params;
+    const specs = await getSpecsByProjectId(id);
+    return NextResponse.json({ specs });
+  } catch (error) {
+    console.error('Error fetching specs:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch specs' },
+      { status: 500 }
+    );
+  }
+}

package/.next/standalone/packages/ui/dist/standalone/packages/web/src/app/api/projects/route.ts

@@ -0,0 +1,19 @@
+/**
+ * GET /api/projects - List all projects
+ */
+
+import { NextResponse } from 'next/server';
+import { getProjects } from '@/lib/db/queries';
+
+export async function GET() {
+  try {
+    const projects = await getProjects();
+    return NextResponse.json({ projects });
+  } catch (error) {
+    console.error('Error fetching projects:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch projects' },
+      { status: 500 }
+    );
+  }
+}

package/.next/standalone/packages/ui/dist/standalone/packages/web/src/app/api/revalidate/route.ts

@@ -0,0 +1,63 @@
+/**
+ * POST /api/revalidate - Cache invalidation endpoint
+ * 
+ * Invalidates the in-memory cache for filesystem mode.
+ * Requires authentication via REVALIDATION_SECRET.
+ * 
+ * Usage:
+ *   POST /api/revalidate
+ *   Body: { "secret": "your-secret", "specPath": "082" }
+ * 
+ * Examples:
+ *   - Invalidate specific spec: { "secret": "...", "specPath": "082" }
+ *   - Invalidate all specs: { "secret": "..." }
+ */
+
+import { NextResponse } from 'next/server';
+import { specsService } from '@/lib/specs/service';
+import { revalidatePath } from 'next/cache';
+
+export async function POST(request: Request) {
+  try {
+    const { secret, specPath } = await request.json();
+
+    // Verify secret
+    const expectedSecret = process.env.REVALIDATION_SECRET;
+    if (!expectedSecret) {
+      return NextResponse.json(
+        { error: 'Revalidation not configured' },
+        { status: 503 }
+      );
+    }
+
+    if (secret !== expectedSecret) {
+      return NextResponse.json(
+        { error: 'Unauthorized' },
+        { status: 401 }
+      );
+    }
+
+    // Invalidate cache
+    await specsService.invalidateCache(specPath);
+
+    // Also revalidate Next.js cache
+    if (specPath) {
+      revalidatePath(`/specs/${specPath}`);
+    } else {
+      revalidatePath('/specs');
+      revalidatePath('/');
+    }
+
+    return NextResponse.json({
+      revalidated: true,
+      specPath: specPath || 'all',
+      timestamp: new Date().toISOString(),
+    });
+  } catch (error) {
+    console.error('Error revalidating cache:', error);
+    return NextResponse.json(
+      { error: 'Failed to revalidate cache' },
+      { status: 500 }
+    );
+  }
+}

package/.next/standalone/packages/ui/dist/standalone/packages/web/src/app/api/specs/[id]/dependency-graph/route.test.ts

@@ -0,0 +1,51 @@
+/**
+ * Test the dependency-graph API endpoint
+ */
+
+import { describe, it, expect } from 'vitest';
+import { GET } from './route';
+import { NextRequest } from 'next/server';
+
+describe('Dependency Graph API', () => {
+  it('should return complete dependency graph for spec 097', async () => {
+    // Mock params
+    const params = Promise.resolve({ id: '097' });
+    
+    // Create mock request
+    const request = new Request('http://localhost:3000/api/specs/097/dependency-graph');
+    
+    // Call the endpoint
+    const response = await GET(request, { params });
+    
+    // Parse response
+    const data = await response.json();
+    
+    // If spec not found in test environment, skip detailed assertions
+    if (response.status === 404) {
+      expect(data).toHaveProperty('error');
+      return;
+    }
+    
+    // Verify structure
+    expect(data).toHaveProperty('current');
+    expect(data).toHaveProperty('dependsOn');
+    expect(data).toHaveProperty('requiredBy');
+    expect(data).toHaveProperty('related');
+    
+    // Verify arrays
+    expect(data.dependsOn).toBeInstanceOf(Array);
+    expect(data.requiredBy).toBeInstanceOf(Array);
+    expect(data.related).toBeInstanceOf(Array);
+  });
+
+  it('should return 404 for non-existent spec', async () => {
+    const params = Promise.resolve({ id: '999' });
+    const request = new Request('http://localhost:3000/api/specs/999/dependency-graph');
+    
+    const response = await GET(request, { params });
+    
+    expect(response.status).toBe(404);
+    const data = await response.json();
+    expect(data).toHaveProperty('error');
+  });
+});

package/.next/standalone/packages/ui/dist/standalone/packages/web/src/app/api/specs/[id]/dependency-graph/route.ts

@@ -0,0 +1,171 @@
+/**
+ * GET /api/specs/[id]/dependency-graph - Get complete dependency graph for a spec
+ * 
+ * Returns upstream dependencies, downstream dependents, and related specs
+ * for the specified spec using the SpecDependencyGraph from @leanspec/core
+ */
+
+import { NextResponse } from 'next/server';
+import { getSpecById } from '@/lib/db/service-queries';
+import { SpecDependencyGraph, type SpecInfo } from '@/lib/dependency-graph';
+import { readFileSync, readdirSync, statSync } from 'node:fs';
+import { join } from 'node:path';
+import matter from 'gray-matter';
+
+/**
+ * Load all specs with relationships from filesystem
+ */
+function loadAllSpecsWithRelationships(specsDir: string): SpecInfo[] {
+  const specInfos: SpecInfo[] = [];
+  
+  try {
+    const entries = readdirSync(specsDir);
+    
+    for (const entry of entries) {
+      const specPath = join(specsDir, entry);
+      const stat = statSync(specPath);
+      
+      if (!stat.isDirectory()) continue;
+      if (entry === 'archived') continue; // Skip archived
+      if (!/^\d{2,}-/.test(entry)) continue; // Must be spec pattern (e.g., 001-name)
+      
+      try {
+        const readmePath = join(specPath, 'README.md');
+        const raw = readFileSync(readmePath, 'utf-8');
+        const { data } = matter(raw);
+        
+        if (!data || !data.status) continue;
+        
+        const frontmatter: any = {
+          status: data.status || 'planned',
+          created: data.created_at || data.created || new Date().toISOString().split('T')[0],
+        };
+        
+        // Parse relationships - normalize to arrays
+        if (data.depends_on) {
+          frontmatter.depends_on = Array.isArray(data.depends_on) 
+            ? data.depends_on 
+            : [data.depends_on];
+        } else {
+          frontmatter.depends_on = [];
+        }
+        
+        if (data.related) {
+          frontmatter.related = Array.isArray(data.related) 
+            ? data.related 
+            : [data.related];
+        } else {
+          frontmatter.related = [];
+        }
+        
+        // Add optional fields
+        if (data.priority) frontmatter.priority = data.priority;
+        if (data.tags) frontmatter.tags = data.tags;
+        if (data.assignee) frontmatter.assignee = data.assignee;
+        
+        specInfos.push({
+          path: entry,
+          fullPath: specPath,
+          filePath: readmePath,
+          name: entry,
+          frontmatter,
+        });
+      } catch (err) {
+        console.warn(`Failed to parse spec ${entry}:`, err);
+      }
+    }
+  } catch (error) {
+    console.error('Failed to load specs:', error);
+  }
+  
+  return specInfos;
+}
+
+export async function GET(
+  request: Request,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  try {
+    const { id } = await params;
+    
+    // Get the target spec
+    const spec = await getSpecById(id);
+    if (!spec) {
+      return NextResponse.json(
+        { error: 'Spec not found' },
+        { status: 404 }
+      );
+    }
+
+    // Load all specs from filesystem with relationships
+    const specsDir = join(process.cwd(), '../../specs');
+    const specInfos = loadAllSpecsWithRelationships(specsDir);
+    
+    // Build dependency graph
+    const graph = new SpecDependencyGraph(specInfos);
+    
+    // Get complete graph for the target spec
+    const completeGraph = graph.getCompleteGraph(spec.specName);
+    
+    // Helper to extract spec number from name
+    const getSpecNumber = (name: string): number | null => {
+      const match = name.match(/^(\d+)/);
+      return match ? parseInt(match[1], 10) : null;
+    };
+    
+    // Helper to extract title from name
+    const getTitle = (name: string): string => {
+      const parts = name.split('-');
+      if (parts.length > 1) {
+        return parts.slice(1).join('-').replace(/-/g, ' ');
+      }
+      return name;
+    };
+    
+    // Format response with simplified spec metadata
+    const response = {
+      current: {
+        id: spec.id,
+        specNumber: spec.specNumber,
+        specName: spec.specName,
+        title: spec.title,
+        status: spec.status,
+        priority: spec.priority,
+      },
+      dependsOn: completeGraph.dependsOn.map(s => ({
+        specNumber: getSpecNumber(s.name),
+        specName: s.name,
+        title: getTitle(s.name),
+        status: s.frontmatter.status,
+        priority: s.frontmatter.priority,
+      })),
+      requiredBy: completeGraph.requiredBy.map(s => ({
+        specNumber: getSpecNumber(s.name),
+        specName: s.name,
+        title: getTitle(s.name),
+        status: s.frontmatter.status,
+        priority: s.frontmatter.priority,
+      })),
+      related: completeGraph.related.map(s => ({
+        specNumber: getSpecNumber(s.name),
+        specName: s.name,
+        title: getTitle(s.name),
+        status: s.frontmatter.status,
+        priority: s.frontmatter.priority,
+      })),
+    };
+    
+    // Return with cache headers
+    return NextResponse.json(response, {
+      headers: {
+        'Cache-Control': 'public, s-maxage=60, stale-while-revalidate=120'
+      }
+    });
+  } catch (error) {
+    console.error('Error fetching dependency graph:', error);
+    return NextResponse.json(
+      { error: 'Failed to fetch dependency graph' },
+      { status: 500 }
+    );
+  }
+}

package/.next/standalone/packages/ui/dist/standalone/packages/web/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/dist/standalone/packages/web/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/dist/standalone/packages/web/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/dist/standalone/packages/web/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>
+  );
+}