@leanspec/ui 0.2.7 → 0.2.9-dev.20251205030455

package/.next/standalone/packages/ui/src/components/create-project-dialog.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { useRouter } from 'next/navigation';
 import { useProject } from '@/contexts/project-context';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -23,11 +22,10 @@ interface CreateProjectDialogProps {
 }
 
 export function CreateProjectDialog({ open, onOpenChange }: CreateProjectDialogProps) {
-  const { addProject, switchProject } = useProject();
+  const { addProject } = useProject();
   const [path, setPath] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const [mode, setMode] = useState<'picker' | 'manual'>('picker');
-  const router = useRouter();
 
   useEffect(() => {
     if (open) {
@@ -40,10 +38,10 @@ export function CreateProjectDialog({ open, onOpenChange }: CreateProjectDialogP
     try {
       setIsLoading(true);
       const project = await addProject(projectPath);
-      await switchProject(project.id);
       toast.success('Project added successfully');
       onOpenChange(false);
-      router.push('/'); // Navigate to dashboard
+      // Full page navigation - ensures clean state for new project
+      window.location.href = `/projects/${project.id}/specs`;
     } catch (error) {
       const message = error instanceof Error ? error.message : 'Failed to add project';
       toast.error(message);

package/.next/standalone/packages/ui/src/components/directory-picker.tsx

@@ -114,6 +114,7 @@ export function DirectoryPicker({ onSelect, onCancel, initialPath, actionLabel =
         <div 
           ref={scrollContainerRef}
           className="flex-1 overflow-x-auto whitespace-nowrap flex items-center scrollbar-hide px-1 min-w-0"
+          title={currentPath}
         >
           <button 
             onClick={() => handleNavigate('/')}

package/.next/standalone/packages/ui/src/components/main-sidebar.tsx

@@ -2,11 +2,12 @@
 
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import { Home, FileText, BarChart3, ChevronLeft, ChevronRight, X } from 'lucide-react';
+import { Home, FileText, BarChart3, BookOpen, Network, ChevronLeft, ChevronRight, X } from 'lucide-react';
 import { ProjectSwitcher } from '@/components/project-switcher';
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 import * as React from 'react';
+import { useProject } from '@/contexts/project-context';
 
 interface SidebarLinkProps {
   href: string;
@@ -18,7 +19,12 @@ interface SidebarLinkProps {
 }
 
 function SidebarLink({ href, icon: Icon, children, description, currentPath, isCollapsed }: SidebarLinkProps) {
-  const isActive = currentPath === href || (href !== '/' && currentPath.startsWith(href));
+  // For home links (ending with / or /projects/xxx), require exact match
+  // For other links, check if path starts with href
+  const isHomeLink = href === '/' || /^\/projects\/[^/]+$/.test(href);
+  const isActive = isHomeLink 
+    ? currentPath === href 
+    : currentPath.startsWith(href);
   
   return (
     <Link
@@ -45,6 +51,7 @@ function SidebarLink({ href, icon: Icon, children, description, currentPath, isC
 
 export function MainSidebar() {
   const pathname = usePathname();
+  const { mode, currentProject } = useProject();
   const [isCollapsed, setIsCollapsed] = React.useState(() => {
     if (typeof window !== 'undefined') {
       const saved = localStorage.getItem('main-sidebar-collapsed');
@@ -85,6 +92,15 @@ export function MainSidebar() {
     };
   }, []);
 
+  // Build project-scoped URLs when in multi-project mode
+  const getNavUrl = (path: string) => {
+    if (mode === 'multi-project' && currentProject) {
+      if (path === '/') return `/projects/${currentProject.id}`;
+      return `/projects/${currentProject.id}${path}`;
+    }
+    return path;
+  };
+
   return (
     <>
       {/* Mobile overlay backdrop */}
@@ -126,7 +142,7 @@ export function MainSidebar() {
               <ProjectSwitcher collapsed={isCollapsed && !mobileOpen} />
             </div>
             <SidebarLink 
-              href="/" 
+              href={getNavUrl('/')} 
               icon={Home} 
               currentPath={pathname}
               description={(!isCollapsed || mobileOpen) ? "Dashboard" : undefined}
@@ -135,7 +151,7 @@ export function MainSidebar() {
               Home
             </SidebarLink>
             <SidebarLink 
-              href="/specs" 
+              href={getNavUrl('/specs')} 
               icon={FileText} 
               currentPath={pathname}
               description={(!isCollapsed || mobileOpen) ? "All Specifications" : undefined}
@@ -144,7 +160,16 @@ export function MainSidebar() {
               Specs
             </SidebarLink>
             <SidebarLink 
-              href="/stats" 
+              href={getNavUrl('/dependencies')} 
+              icon={Network} 
+              currentPath={pathname}
+              description={(!isCollapsed || mobileOpen) ? "Dependency Graph" : undefined}
+              isCollapsed={isCollapsed && !mobileOpen}
+            >
+              Dependencies
+            </SidebarLink>
+            <SidebarLink 
+              href={getNavUrl('/stats')} 
               icon={BarChart3} 
               currentPath={pathname}
               description={(!isCollapsed || mobileOpen) ? "Analytics" : undefined}
@@ -152,6 +177,15 @@ export function MainSidebar() {
             >
               Stats
             </SidebarLink>
+            <SidebarLink 
+              href={getNavUrl('/context')} 
+              icon={BookOpen} 
+              currentPath={pathname}
+              description={(!isCollapsed || mobileOpen) ? "Project Context" : undefined}
+              isCollapsed={isCollapsed && !mobileOpen}
+            >
+              Context
+            </SidebarLink>
           </nav>}
 
           {/* Collapse Toggle (desktop only) */}

package/.next/standalone/packages/ui/src/components/markdown-link.tsx

@@ -9,24 +9,31 @@ interface MarkdownLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   href?: string;
   children?: React.ReactNode;
   currentSpecNumber?: number;
+  projectId?: string;
 }
 
 /**
  * Transform internal spec links to proper web app routes
  * Examples:
- * - ../048-spec-complexity-analysis/ -> /specs/48
+ * - ../048-spec-complexity-analysis/ -> /specs/48 (or /projects/[projectId]/specs/48)
  * - ../048-spec-complexity-analysis/README.md -> /specs/48
  * - ../048-spec-complexity-analysis/DESIGN.md -> /specs/48?subspec=DESIGN.md
  * - ./DESIGN.md -> current spec with ?subspec=DESIGN.md
  * - #heading -> #heading (anchor links unchanged)
  * - https://... -> https://... (external links unchanged)
  */
-function transformSpecLink(href: string, currentSpecNumber?: number): string {
+function transformSpecLink(href: string, currentSpecNumber?: number, projectId?: string): string {
   // Don't transform anchor links or external URLs
   if (href.startsWith('#') || href.startsWith('http://') || href.startsWith('https://')) {
     return href;
   }
 
+  // Helper to build project-scoped URLs
+  const buildSpecUrl = (specNumber: number, subSpec?: string): string => {
+    const base = projectId ? `/projects/${projectId}/specs/${specNumber}` : `/specs/${specNumber}`;
+    return subSpec ? `${base}?subspec=${subSpec}` : base;
+  };
+
   // Match same-directory sub-spec links: ./FILE.md
   const sameDirectoryPattern = /^\.\/([^/]+\.md)$/;
   const sameDirectoryMatch = href.match(sameDirectoryPattern);
@@ -34,9 +41,9 @@ function transformSpecLink(href: string, currentSpecNumber?: number): string {
   if (sameDirectoryMatch && currentSpecNumber) {
     const subSpecFile = sameDirectoryMatch[1];
     if (subSpecFile !== 'README.md') {
-      return `/specs/${currentSpecNumber}?subspec=${subSpecFile}`;
+      return buildSpecUrl(currentSpecNumber, subSpecFile);
     } else {
-      return `/specs/${currentSpecNumber}`;
+      return buildSpecUrl(currentSpecNumber);
     }
   }
 
@@ -51,10 +58,10 @@ function transformSpecLink(href: string, currentSpecNumber?: number): string {
 
     if (subSpecFile && subSpecFile !== 'README.md') {
       // Sub-spec link (e.g., DESIGN.md, IMPLEMENTATION.md)
-      return `/specs/${specNumber}?subspec=${subSpecFile}`;
+      return buildSpecUrl(specNumber, subSpecFile);
     } else {
       // Main spec link (README.md or just the directory)
-      return `/specs/${specNumber}`;
+      return buildSpecUrl(specNumber);
     }
   }
 
@@ -62,12 +69,12 @@ function transformSpecLink(href: string, currentSpecNumber?: number): string {
   return href;
 }
 
-export function MarkdownLink({ href, children, currentSpecNumber, ...props }: MarkdownLinkProps) {
+export function MarkdownLink({ href, children, currentSpecNumber, projectId, ...props }: MarkdownLinkProps) {
   if (!href) {
     return <a {...props}>{children}</a>;
   }
 
-  const transformedHref = transformSpecLink(href, currentSpecNumber);
+  const transformedHref = transformSpecLink(href, currentSpecNumber, projectId);
 
   // External links or anchor links - use regular <a> tag
   const isExternal = transformedHref.startsWith('http://') || transformedHref.startsWith('https://');

package/.next/standalone/packages/ui/src/components/project-switcher.tsx

@@ -5,8 +5,9 @@
 
 'use client';
 
-import React, { useState } from 'react';
-import { Check, ChevronsUpDown, Plus, FolderOpen, Star } from 'lucide-react';
+import { useState } from 'react';
+import { useRouter, usePathname } from 'next/navigation';
+import { Check, ChevronsUpDown, Plus, FolderOpen, Star, Settings } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 import {
@@ -32,11 +33,12 @@ interface ProjectSwitcherProps {
 }
 
 export function ProjectSwitcher({ collapsed }: ProjectSwitcherProps) {
+  const router = useRouter();
+  const pathname = usePathname();
   const {
     mode,
     currentProject,
     projects,
-    switchProject,
   } = useProject();
   
   const [open, setOpen] = useState(false);
@@ -46,9 +48,16 @@ export function ProjectSwitcher({ collapsed }: ProjectSwitcherProps) {
     return null;
   }
 
-  const handleProjectSelect = async (projectId: string) => {
-    await switchProject(projectId);
+  const handleProjectSelect = (projectId: string) => {
     setOpen(false);
+    
+    // Extract the path after /projects/{currentProjectId}
+    // Pattern: /projects/{projectId} or /projects/{projectId}/... 
+    const projectPathMatch = pathname.match(/^\/projects\/[^/]+(\/.*)?$/);
+    const subPath = projectPathMatch?.[1] || ''; // Empty string = project home page
+    
+    // Full page navigation - ensures clean state for new project
+    window.location.href = `/projects/${projectId}${subPath}`;
   };
 
   const sortedProjects = [...projects].sort((a, b) => {
@@ -129,6 +138,16 @@ export function ProjectSwitcher({ collapsed }: ProjectSwitcherProps) {
                   <Plus className="mr-2 h-4 w-4" />
                   Create Project
                 </CommandItem>
+                <CommandItem
+                  className="cursor-pointer"
+                  onSelect={() => {
+                    setOpen(false);
+                    router.push('/projects');
+                  }}
+                >
+                  <Settings className="mr-2 h-4 w-4" />
+                  Manage Projects
+                </CommandItem>
               </CommandGroup>
             </CommandList>
           </Command>

package/.next/standalone/packages/ui/src/components/quick-search.tsx

@@ -15,6 +15,7 @@ import {
 } from "@/components/ui/command"
 import { StatusBadge } from "@/components/status-badge"
 import { PriorityBadge } from "@/components/priority-badge"
+import { useProjectUrl } from "@/contexts/project-context"
 
 interface Spec {
   id: string
@@ -32,6 +33,7 @@ interface QuickSearchProps {
 
 export function QuickSearch({ specs }: QuickSearchProps) {
   const router = useRouter()
+  const { getSpecUrl } = useProjectUrl()
   const [open, setOpen] = React.useState(false)
   const [search, setSearch] = React.useState("")
   const [recentSearches, setRecentSearches] = React.useState<string[]>([])
@@ -85,7 +87,7 @@ export function QuickSearch({ specs }: QuickSearchProps) {
     localStorage.setItem("leanspec-recent-searches", JSON.stringify(updated))
 
     // Navigate
-    router.push(`/specs/${specId}`)
+    router.push(getSpecUrl(specId))
     setOpen(false)
     setSearch("")
   }

package/.next/standalone/packages/ui/src/components/spec-dependency-graph.tsx

@@ -21,10 +21,9 @@ import { cn } from '@/lib/utils';
 const NODE_WIDTH = 280;
 const NODE_HEIGHT = 110;
 const precedenceColor = '#f59e0b';
-const relatedColor = '#38bdf8';
 const requiredByColor = '#ef4444'; // Red color for downstream dependents
 
-type GraphTone = 'precedence' | 'related' | 'current' | 'required-by';
+type GraphTone = 'precedence' | 'current' | 'required-by';
 
 interface SpecNodeData {
   label: string;
@@ -38,7 +37,6 @@ interface SpecNodeData {
 const toneClasses: Record<GraphTone, string> = {
   current: 'border-primary/70 bg-primary/5 text-foreground',
   precedence: 'border-amber-400/70 bg-amber-400/10 text-amber-900 dark:text-amber-200',
-  related: 'border-sky-400/70 bg-sky-400/10 text-sky-900 dark:text-sky-200',
   'required-by': 'border-red-400/70 bg-red-400/10 text-red-900 dark:text-red-200',
 };
 
@@ -82,6 +80,7 @@ interface SpecDependencyGraphProps {
   relationships: SpecRelationships;
   specNumber?: number | null;
   specTitle: string;
+  projectId?: string;
 }
 
 interface GraphPayload {
@@ -99,13 +98,15 @@ function formatRelationshipLabel(value: string) {
   return remainder ? `#${number} ${remainder}` : `#${number}`;
 }
 
-function buildRelationshipHref(value: string) {
+function buildRelationshipHref(value: string, projectId?: string) {
   const trimmed = value.trim();
   const match = trimmed.match(/^(\d+)/);
-  if (match) {
-    return `/specs/${parseInt(match[1], 10)}`;
+  const specNumber = match ? parseInt(match[1], 10) : trimmed;
+  
+  if (projectId) {
+    return `/projects/${projectId}/specs/${specNumber}`;
   }
-  return `/specs/${trimmed}`;
+  return `/specs/${specNumber}`;
 }
 
 function nodeId(prefix: string, value: string, index: number) {
@@ -137,7 +138,7 @@ function layoutGraph(nodes: Node<SpecNodeData>[], edges: Edge[]): GraphPayload {
   return { nodes: layoutedNodes, edges };
 }
 
-function buildGraph(relationships: SpecRelationships, specNumber: number | null | undefined, specTitle: string) {
+function buildGraph(relationships: SpecRelationships, specNumber: number | null | undefined, specTitle: string, projectId?: string) {
   const nodes: Node<SpecNodeData>[] = [];
   const edges: Edge[] = [];
   const centerLabel = specNumber ? `#${specNumber.toString().padStart(3, '0')} ${specTitle}` : specTitle;
@@ -172,7 +173,7 @@ function buildGraph(relationships: SpecRelationships, specNumber: number | null
         badge: 'Depends On',
         subtitle: 'Must complete first',
         tone: 'precedence',
-        href: buildRelationshipHref(value),
+        href: buildRelationshipHref(value, projectId),
         interactive: true,
       },
       position: { x: 0, y: 0 },
@@ -211,7 +212,7 @@ function buildGraph(relationships: SpecRelationships, specNumber: number | null
         badge: 'Required By',
         subtitle: 'Blocked by this spec',
         tone: 'required-by',
-        href: buildRelationshipHref(value),
+        href: buildRelationshipHref(value, projectId),
         interactive: true,
       },
       position: { x: 0, y: 0 },
@@ -239,54 +240,14 @@ function buildGraph(relationships: SpecRelationships, specNumber: number | null
     });
   });
 
-  // Related: Bidirectional informational connections
-  relationships.related?.forEach((value, index) => {
-    const id = nodeId('related', value, index);
-    nodes.push({
-      id,
-      type: 'specNode',
-      data: {
-        label: formatRelationshipLabel(value),
-        badge: 'Related',
-        subtitle: 'Connected work',
-        tone: 'related',
-        href: buildRelationshipHref(value),
-        interactive: true,
-      },
-      position: { x: 0, y: 0 },
-      draggable: false,
-      selectable: true,
-      sourcePosition: Position.Right,
-      targetPosition: Position.Left,
-    });
-
-    edges.push({
-      id: `edge-current-${id}`,
-      source: currentNode.id,
-      target: id,
-      type: 'smoothstep',
-      markerEnd: {
-        type: MarkerType.ArrowClosed,
-        color: relatedColor,
-        width: 24,
-        height: 24,
-      },
-      style: {
-        stroke: relatedColor,
-        strokeWidth: 3,
-        strokeDasharray: '10 8',
-      },
-    });
-  });
-
   return layoutGraph(nodes, edges);
 }
 
-export function SpecDependencyGraph({ relationships, specNumber, specTitle }: SpecDependencyGraphProps) {
+export function SpecDependencyGraph({ relationships, specNumber, specTitle, projectId }: SpecDependencyGraphProps) {
   const router = useRouter();
   const [instance, setInstance] = React.useState<ReactFlowInstance | null>(null);
 
-  const graph = React.useMemo(() => buildGraph(relationships, specNumber, specTitle), [relationships, specNumber, specTitle]);
+  const graph = React.useMemo(() => buildGraph(relationships, specNumber, specTitle, projectId), [relationships, specNumber, specTitle, projectId]);
 
   const handleInit = React.useCallback((flowInstance: ReactFlowInstance) => {
     setInstance(flowInstance);