@leanspec/ui 0.2.9 → 0.2.10

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

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { useRouter } from 'next/navigation';
+import { useRouter, useSearchParams, usePathname } from 'next/navigation';
 import ReactFlow, {
   Background,
   Controls,
@@ -14,7 +14,7 @@ import ReactFlow, {
 } from 'reactflow';
 import 'reactflow/dist/style.css';
 import { cn } from '@/lib/utils';
-import type { ProjectDependencyGraph } from '@/app/api/dependencies/route';
+import type { DependencyGraph } from '@/lib/db/service-queries';
 
 import { nodeTypes } from './spec-node';
 import { SpecSidebar } from './spec-sidebar';
@@ -23,11 +23,21 @@ import { DEPENDS_ON_COLOR, toneBgColors } from './constants';
 import type { SpecNodeData, GraphTone, FocusedNodeDetails, ConnectionStats } from './types';
 
 interface ProjectDependencyGraphClientProps {
-  data: ProjectDependencyGraph;
+  data: DependencyGraph;
+  projectId?: string;
 }
 
-export function ProjectDependencyGraphClient({ data }: ProjectDependencyGraphClientProps) {
+export function ProjectDependencyGraphClient({ data, projectId }: ProjectDependencyGraphClientProps) {
   const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const specParam = searchParams.get('spec');
+    // Helper to generate project-scoped URLs
+  const getSpecUrl = React.useCallback((specNumber: number | string) => {
+    return projectId 
+      ? `/projects/${projectId}/specs/${specNumber}`
+      : `/specs/${specNumber}`;
+  }, [projectId]);
   const [instance, setInstance] = React.useState<ReactFlowInstance | null>(null);
   const [showStandalone, setShowStandalone] = React.useState(false);
   const [statusFilter, setStatusFilter] = React.useState<string[]>([]);
@@ -36,6 +46,56 @@ export function ProjectDependencyGraphClient({ data }: ProjectDependencyGraphCli
   const [selectorOpen, setSelectorOpen] = React.useState(false);
   const [selectorQuery, setSelectorQuery] = React.useState('');
   const selectorRef = React.useRef<HTMLDivElement>(null);
+  // Track if we've completed initial URL-to-state sync
+  const initialSyncComplete = React.useRef(false);
+  // Track the expected focusedNodeId after URL initialization (to avoid URL update race)
+  const initialFocusedNodeId = React.useRef<string | null>(null);
+
+  // Initialize focused node from URL param on mount
+  React.useEffect(() => {
+    if (!initialSyncComplete.current) {
+      if (specParam) {
+        const node = data.nodes.find((n) => n.number.toString() === specParam);
+        if (node) {
+          initialFocusedNodeId.current = node.id;
+          setFocusedNodeId(node.id);
+        }
+      }
+      initialSyncComplete.current = true;
+    }
+  }, [specParam, data.nodes]);
+
+  // Sync URL with focused node state
+  React.useEffect(() => {
+    // Skip if initial sync hasn't completed
+    if (!initialSyncComplete.current) return;
+    
+    // Skip if this is the initial focusedNodeId set from URL
+    if (initialFocusedNodeId.current !== null) {
+      if (focusedNodeId === initialFocusedNodeId.current) {
+        // This is the initial sync, clear the ref but don't update URL
+        initialFocusedNodeId.current = null;
+        return;
+      }
+      // focusedNodeId changed to something else, clear the ref
+      initialFocusedNodeId.current = null;
+    }
+    
+    const focusedNode = focusedNodeId ? data.nodes.find((n) => n.id === focusedNodeId) : null;
+    const newSpecParam = focusedNode ? focusedNode.number.toString() : null;
+    
+    // Only update if different from current URL
+    if (newSpecParam !== specParam) {
+      const params = new URLSearchParams(searchParams.toString());
+      if (newSpecParam) {
+        params.set('spec', newSpecParam);
+      } else {
+        params.delete('spec');
+      }
+      const newUrl = params.toString() ? `${pathname}?${params.toString()}` : pathname;
+      router.replace(newUrl, { scroll: false });
+    }
+  }, [focusedNodeId, data.nodes, specParam, pathname, router, searchParams]);
 
   // Only use dependsOn edges (DAG only - no related edges)
   const dependsOnEdges = React.useMemo(
@@ -190,7 +250,7 @@ export function ProjectDependencyGraphClient({ data }: ProjectDependencyGraphCli
           badge: node.status === 'in-progress' ? 'WIP' : node.status.slice(0, 3).toUpperCase(),
           number: node.number,
           tone: node.status as GraphTone,
-          href: `/specs/${node.number}`,
+          href: getSpecUrl(node.number),
           interactive: true,
           isFocused,
           connectionDepth,
@@ -294,6 +354,21 @@ export function ProjectDependencyGraphClient({ data }: ProjectDependencyGraphCli
     return () => clearTimeout(timer);
   }, [instance, graph.nodes.length, statusFilter, showStandalone]);
 
+  // Center on focused node when set from URL param
+  React.useEffect(() => {
+    if (!instance || !focusedNodeId || !specParam) return;
+    const node = graph.nodes.find((n) => n.id === focusedNodeId);
+    if (node) {
+      const timer = setTimeout(() => {
+        instance.setCenter(node.position.x + 80, node.position.y + 30, {
+          duration: 400,
+          zoom: 1,
+        });
+      }, 400); // Wait for initial fitView to complete
+      return () => clearTimeout(timer);
+    }
+  }, [instance, focusedNodeId, specParam, graph.nodes]);
+
   // Close selector dropdown when clicking outside
   React.useEffect(() => {
     const handleClickOutside = (e: MouseEvent) => {
@@ -384,7 +459,7 @@ export function ProjectDependencyGraphClient({ data }: ProjectDependencyGraphCli
             <p className="text-sm text-foreground">
               {connectionStats.connected > 0 ? (
                 <>
-                  <span className="text-emerald-400">{connectionStats.connected} specs with dependencies</span>
+                  <span className="text-emerald-600 dark:text-emerald-400">{connectionStats.connected} specs with dependencies</span>
                   {connectionStats.standalone > 0 && (
                     <>
                       {' • '}
@@ -463,10 +538,10 @@ export function ProjectDependencyGraphClient({ data }: ProjectDependencyGraphCli
                       <span
                         className={cn(
                           'text-[9px] px-1 py-0.5 rounded uppercase font-medium',
-                          spec.status === 'planned' && 'bg-blue-500/20 text-blue-400',
-                          spec.status === 'in-progress' && 'bg-orange-500/20 text-orange-400',
-                          spec.status === 'complete' && 'bg-green-500/20 text-green-400',
-                          spec.status === 'archived' && 'bg-gray-500/20 text-gray-400'
+                          spec.status === 'planned' && 'bg-blue-500/20 text-blue-600 dark:text-blue-400',
+                          spec.status === 'in-progress' && 'bg-orange-500/20 text-orange-600 dark:text-orange-400',
+                          spec.status === 'complete' && 'bg-green-500/20 text-green-600 dark:text-green-400',
+                          spec.status === 'archived' && 'bg-gray-500/20 text-gray-500 dark:text-gray-400'
                         )}
                       >
                         {spec.status === 'in-progress' ? 'WIP' : spec.status.slice(0, 3)}
@@ -494,10 +569,10 @@ export function ProjectDependencyGraphClient({ data }: ProjectDependencyGraphCli
               onClick={() => toggleStatus(status)}
               className={cn(
                 'rounded border px-2 py-1 font-medium transition-colors',
-                isActive && status === 'planned' && 'border-blue-500/60 bg-blue-500/20 text-blue-300',
-                isActive && status === 'in-progress' && 'border-orange-500/60 bg-orange-500/20 text-orange-300',
-                isActive && status === 'complete' && 'border-green-500/60 bg-green-500/20 text-green-300',
-                isActive && status === 'archived' && 'border-gray-500/60 bg-gray-500/20 text-gray-300',
+                isActive && status === 'planned' && 'border-blue-500/60 bg-blue-500/20 text-blue-700 dark:text-blue-300',
+                isActive && status === 'in-progress' && 'border-orange-500/60 bg-orange-500/20 text-orange-700 dark:text-orange-300',
+                isActive && status === 'complete' && 'border-green-500/60 bg-green-500/20 text-green-700 dark:text-green-300',
+                isActive && status === 'archived' && 'border-gray-500/60 bg-gray-500/20 text-gray-600 dark:text-gray-300',
                 !isActive && 'border-border bg-background text-muted-foreground/40'
               )}
             >
@@ -514,7 +589,7 @@ export function ProjectDependencyGraphClient({ data }: ProjectDependencyGraphCli
           className={cn(
             'rounded border px-2 py-1 font-medium transition-colors',
             showStandalone
-              ? 'border-violet-500/60 bg-violet-500/20 text-violet-300'
+              ? 'border-violet-500/60 bg-violet-500/20 text-violet-700 dark:text-violet-300'
               : 'border-border bg-background hover:bg-accent text-muted-foreground'
           )}
         >
@@ -552,7 +627,7 @@ export function ProjectDependencyGraphClient({ data }: ProjectDependencyGraphCli
       {/* Main content */}
       <div className="flex flex-1 gap-3 min-h-0">
         {/* Graph */}
-        <div className="flex-1 overflow-hidden rounded-lg border border-border bg-[#080c14]">
+        <div className="flex-1 overflow-hidden rounded-lg border border-border bg-gray-50 dark:bg-[#080c14]">
           {graph.nodes.length > 0 ? (
             <ReactFlow
               nodes={graph.nodes}
@@ -579,10 +654,10 @@ export function ProjectDependencyGraphClient({ data }: ProjectDependencyGraphCli
               <MiniMap
                 nodeColor={(node) => {
                   const d = node.data as SpecNodeData;
-                  return toneBgColors[d.tone] || '#1f2937';
+                  return toneBgColors[d.tone] || '#6b7280';
                 }}
-                maskColor="rgba(0, 0, 0, 0.85)"
-                className="!bg-background/95 !border-border !rounded-md"
+                maskColor="rgba(128, 128, 128, 0.6)"
+                className="!bg-white/95 dark:!bg-background/95 !border-border !rounded-md"
                 style={{ width: 120, height: 80 }}
                 pannable
                 zoomable
@@ -606,7 +681,7 @@ export function ProjectDependencyGraphClient({ data }: ProjectDependencyGraphCli
         <SpecSidebar
           focusedDetails={focusedNodeDetails}
           onSelectSpec={setFocusedNodeId}
-          onOpenSpec={(num) => router.push(`/specs/${num}`)}
+          onOpenSpec={(num) => router.push(getSpecUrl(num))}
         />
       </div>
 

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

@@ -1,20 +1,32 @@
+import { redirect } from 'next/navigation';
 import { ProjectDependencyGraphClient } from './dependencies-client';
-import type { ProjectDependencyGraph } from '@/app/api/dependencies/route';
+import { getDependencyGraph } from '@/lib/db/service-queries';
+import { projectRegistry } from '@/lib/projects/registry';
 
-async function getDependencyGraph(): Promise<ProjectDependencyGraph> {
-  const baseUrl = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3000';
-  const res = await fetch(`${baseUrl}/api/dependencies`, {
-    cache: 'no-store',
-  });
-
-  if (!res.ok) {
-    throw new Error('Failed to fetch dependency graph');
-  }
-
-  return res.json();
-}
+// Force dynamic rendering - this page needs runtime data
+export const dynamic = 'force-dynamic';
 
 export default async function DependenciesPage() {
+  const specsMode = process.env.SPECS_MODE || 'filesystem';
+  
+  // In multi-project mode, redirect to the most recent project's dependencies
+  if (specsMode === 'multi-project') {
+    const recentProjects = await projectRegistry.getRecentProjects();
+    
+    if (recentProjects.length > 0) {
+      redirect(`/projects/${recentProjects[0].id}/dependencies`);
+    }
+    
+    // If no recent projects, check for any projects
+    const projects = await projectRegistry.getProjects();
+    if (projects.length > 0) {
+      redirect(`/projects/${projects[0].id}/dependencies`);
+    }
+    
+    // No projects at all - redirect to projects page to add one
+    redirect('/projects');
+  }
+  
   const data = await getDependencyGraph();
 
   if (data.nodes.length === 0) {

package/.next/standalone/packages/ui/src/app/dependencies/spec-node.tsx

@@ -32,9 +32,9 @@ export const SpecNode = React.memo(function SpecNode({ data }: NodeProps<SpecNod
       className={cn(
         'flex flex-col rounded-lg shadow-lg transition-all duration-200',
         toneClasses[data.tone],
-        data.interactive && 'cursor-pointer hover:scale-105 hover:shadow-xl hover:border-white/50',
-        data.isFocused && 'ring-2 ring-white ring-offset-2 ring-offset-background scale-110 z-50',
-        data.connectionDepth === 1 && 'ring-1 ring-white/40',
+        data.interactive && 'cursor-pointer hover:scale-105 hover:shadow-xl hover:border-gray-400 dark:hover:border-white/50',
+        data.isFocused && 'ring-2 ring-gray-800 dark:ring-white ring-offset-2 ring-offset-background scale-110 z-50',
+        data.connectionDepth === 1 && 'ring-1 ring-gray-400 dark:ring-white/40',
         isCompact ? 'px-2 py-1 gap-0.5' : 'px-2.5 py-1.5 gap-0.5',
         isSecondary ? 'border border-dashed' : 'border-2'
       )}
@@ -46,17 +46,17 @@ export const SpecNode = React.memo(function SpecNode({ data }: NodeProps<SpecNod
     >
       <Handle type="target" position={Position.Left} className="opacity-0" />
       <div className="flex items-center justify-between gap-1">
-        <span className={cn('font-bold text-white/90', isCompact ? 'text-[9px]' : 'text-[10px]')}>
+        <span className={cn('font-bold', isCompact ? 'text-[9px]' : 'text-[10px]')}>
           #{data.number.toString().padStart(3, '0')}
         </span>
         <span
           className={cn(
             'font-medium uppercase tracking-wide rounded',
             isCompact ? 'text-[7px] px-0.5 py-0.5' : 'text-[8px] px-1 py-0.5',
-            data.tone === 'planned' && 'bg-blue-500/30 text-blue-300',
-            data.tone === 'in-progress' && 'bg-orange-500/30 text-orange-300',
-            data.tone === 'complete' && 'bg-green-500/30 text-green-300',
-            data.tone === 'archived' && 'bg-gray-500/30 text-gray-400'
+            data.tone === 'planned' && 'bg-blue-500/30 text-blue-700 dark:text-blue-300',
+            data.tone === 'in-progress' && 'bg-orange-500/30 text-orange-700 dark:text-orange-300',
+            data.tone === 'complete' && 'bg-green-500/30 text-green-700 dark:text-green-300',
+            data.tone === 'archived' && 'bg-gray-500/30 text-gray-600 dark:text-gray-400'
           )}
         >
           {data.badge}

package/.next/standalone/packages/ui/src/app/dependencies/spec-sidebar.tsx

@@ -2,20 +2,23 @@
 
 import * as React from 'react';
 import { cn } from '@/lib/utils';
-import type { SpecNode, FocusedNodeDetails, SpecsByDepth } from './types';
+import type { SpecNode, FocusedNodeDetails } from './types';
 
 interface SpecListItemProps {
   spec: SpecNode;
   type: 'upstream' | 'downstream';
+  depth: number;
   onClick: () => void;
 }
 
-function SpecListItem({ spec, type, onClick }: SpecListItemProps) {
+function SpecListItem({ spec, type, depth, onClick }: SpecListItemProps) {
   const typeColors = {
     upstream: 'border-l-amber-500',
     downstream: 'border-l-emerald-500',
   };
 
+  const depthLabel = depth === 1 ? 'Direct' : `L${depth}`;
+
   return (
     <button
       onClick={onClick}
@@ -31,60 +34,23 @@ function SpecListItem({ spec, type, onClick }: SpecListItemProps) {
         <span
           className={cn(
             'text-[8px] px-1 py-0.5 rounded font-medium uppercase',
-            spec.status === 'planned' && 'bg-amber-500/20 text-amber-400',
-            spec.status === 'in-progress' && 'bg-sky-500/20 text-sky-400',
-            spec.status === 'complete' && 'bg-emerald-500/20 text-emerald-400'
+            spec.status === 'planned' && 'bg-blue-500/20 text-blue-600 dark:text-blue-400',
+            spec.status === 'in-progress' && 'bg-orange-500/20 text-orange-600 dark:text-orange-400',
+            spec.status === 'complete' && 'bg-green-500/20 text-green-600 dark:text-green-400',
+            spec.status === 'archived' && 'bg-gray-500/20 text-gray-500 dark:text-gray-400'
           )}
         >
           {spec.status === 'in-progress' ? 'WIP' : spec.status.slice(0, 3)}
         </span>
+        <span className="text-[8px] px-1 py-0.5 rounded bg-muted text-muted-foreground font-medium ml-auto">
+          {depthLabel}
+        </span>
       </div>
       <p className="text-[11px] text-foreground truncate leading-tight mt-0.5">{spec.name}</p>
     </button>
   );
 }
 
-interface DepthGroupProps {
-  group: SpecsByDepth;
-  type: 'upstream' | 'downstream';
-  onSelectSpec: (specId: string) => void;
-}
-
-function DepthGroup({ group, type, onSelectSpec }: DepthGroupProps) {
-  const [isExpanded, setIsExpanded] = React.useState(group.depth === 1);
-  const depthLabel = group.depth === 1 ? 'Direct' : `Level ${group.depth}`;
-
-  return (
-    <div className="space-y-1">
-      <button
-        onClick={() => setIsExpanded(!isExpanded)}
-        className="flex items-center gap-1.5 w-full text-left text-[10px] text-muted-foreground hover:text-foreground transition-colors"
-      >
-        <span className={cn(
-          'transition-transform text-[8px]',
-          isExpanded ? 'rotate-90' : 'rotate-0'
-        )}>
-          ▶
-        </span>
-        <span className="font-medium">{depthLabel}</span>
-        <span className="opacity-60">({group.specs.length})</span>
-      </button>
-      {isExpanded && (
-        <div className="space-y-1 ml-2">
-          {group.specs.map((spec) => (
-            <SpecListItem
-              key={spec.id}
-              spec={spec}
-              type={type}
-              onClick={() => onSelectSpec(spec.id)}
-            />
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
 interface SpecSidebarProps {
   focusedDetails: FocusedNodeDetails | null;
   onSelectSpec: (specId: string) => void;
@@ -126,9 +92,10 @@ export function SpecSidebar({ focusedDetails, onSelectSpec, onOpenSpec }: SpecSi
           <span
             className={cn(
               'px-1.5 py-0.5 rounded text-[10px] font-medium uppercase',
-              node.status === 'planned' && 'bg-amber-500/20 text-amber-300',
-              node.status === 'in-progress' && 'bg-sky-500/20 text-sky-300',
-              node.status === 'complete' && 'bg-emerald-500/20 text-emerald-300'
+              node.status === 'planned' && 'bg-blue-500/20 text-blue-600 dark:text-blue-300',
+              node.status === 'in-progress' && 'bg-orange-500/20 text-orange-600 dark:text-orange-300',
+              node.status === 'complete' && 'bg-green-500/20 text-green-600 dark:text-green-300',
+              node.status === 'archived' && 'bg-gray-500/20 text-gray-500 dark:text-gray-300'
             )}
           >
             {node.status}
@@ -154,15 +121,18 @@ export function SpecSidebar({ focusedDetails, onSelectSpec, onOpenSpec }: SpecSi
             </span>
           </div>
           {upstream.length > 0 ? (
-            <div className="space-y-2">
-              {upstream.map((group) => (
-                <DepthGroup
-                  key={group.depth}
-                  group={group}
-                  type="upstream"
-                  onSelectSpec={onSelectSpec}
-                />
-              ))}
+            <div className="space-y-1.5">
+              {upstream.flatMap((group) =>
+                group.specs.map((spec) => (
+                  <SpecListItem
+                    key={spec.id}
+                    spec={spec}
+                    type="upstream"
+                    depth={group.depth}
+                    onClick={() => onSelectSpec(spec.id)}
+                  />
+                ))
+              )}
             </div>
           ) : (
             <p className="text-xs text-muted-foreground/60 italic">No upstream dependencies</p>
@@ -178,15 +148,18 @@ export function SpecSidebar({ focusedDetails, onSelectSpec, onOpenSpec }: SpecSi
             </span>
           </div>
           {downstream.length > 0 ? (
-            <div className="space-y-2">
-              {downstream.map((group) => (
-                <DepthGroup
-                  key={group.depth}
-                  group={group}
-                  type="downstream"
-                  onSelectSpec={onSelectSpec}
-                />
-              ))}
+            <div className="space-y-1.5">
+              {downstream.flatMap((group) =>
+                group.specs.map((spec) => (
+                  <SpecListItem
+                    key={spec.id}
+                    spec={spec}
+                    type="downstream"
+                    depth={group.depth}
+                    onClick={() => onSelectSpec(spec.id)}
+                  />
+                ))
+              )}
             </div>
           ) : (
             <p className="text-xs text-muted-foreground/60 italic">No specs depend on this</p>

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

@@ -1,14 +1,38 @@
 /**
  * Home page - Dashboard with project overview
+ * In multi-project mode, redirects to the most recent project
  */
 
+import { redirect } from 'next/navigation';
 import { getStats, getSpecs } from '@/lib/db/service-queries';
+import { projectRegistry } from '@/lib/projects/registry';
 import { DashboardClient } from './dashboard-client';
 
 // Force dynamic rendering - this page needs runtime data
 export const dynamic = 'force-dynamic';
 
 export default async function Home() {
+  const specsMode = process.env.SPECS_MODE || 'filesystem';
+  
+  // In multi-project mode, redirect to the most recent or first project
+  if (specsMode === 'multi-project') {
+    const recentProjects = await projectRegistry.getRecentProjects();
+    
+    if (recentProjects.length > 0) {
+      redirect(`/projects/${recentProjects[0].id}`);
+    }
+    
+    // If no recent projects, check for any projects
+    const projects = await projectRegistry.getProjects();
+    if (projects.length > 0) {
+      redirect(`/projects/${projects[0].id}`);
+    }
+    
+    // No projects at all - redirect to projects page to add one
+    redirect('/projects');
+  }
+  
+  // Single-project mode - show dashboard
   const [stats, specs] = await Promise.all([
     getStats(),
     getSpecs(),

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

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

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

@@ -0,0 +1,30 @@
+import { ProjectDependencyGraphClient } from '@/app/dependencies/dependencies-client';
+import { getDependencyGraph } from '@/lib/db/service-queries';
+
+export default async function ProjectDependenciesPage({
+  params,
+}: {
+  params: Promise<{ projectId: string }>;
+}) {
+  const { projectId } = await params;
+  const data = await getDependencyGraph(projectId);
+
+  if (data.nodes.length === 0) {
+    return (
+      <div className="container mx-auto p-6">
+        <div className="rounded-lg border border-border bg-muted/30 p-8 text-center">
+          <h2 className="text-xl font-semibold mb-2">No Specs Found</h2>
+          <p className="text-muted-foreground">
+            There are no specifications with dependencies to visualize yet.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container mx-auto p-6 h-[calc(100vh-7rem)]">
+      <ProjectDependencyGraphClient data={data} projectId={projectId} />
+    </div>
+  );
+}

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

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

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

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

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

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