@leanspec/ui 0.2.8 → 0.2.9-dev.20251205030455

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);

package/.next/standalone/packages/ui/src/components/spec-detail-client.tsx

@@ -31,6 +31,7 @@ import {
 } from '@/components/ui/dialog';
 import { extractH1Title, cn } from '@/lib/utils';
 import { formatRelativeTime } from '@/lib/date-utils';
+import { useProjectUrl } from '@/contexts/project-context';
 import type { SpecWithMetadata } from '@/types/specs';
 import { 
   FileText, 
@@ -46,8 +47,10 @@ import {
   Clock,
   Maximize2,
   Minimize2,
-  List as ListIcon
+  List as ListIcon,
+  ExternalLink
 } from 'lucide-react';
+import Link from 'next/link';
 import type { Plugin } from 'unified';
 import { visit } from 'unist-util-visit';
 import type { Html, Root } from 'mdast';
@@ -96,9 +99,21 @@ export function SpecDetailClient({ initialSpec, initialSubSpec, isFocusMode = fa
   const [timelineDialogOpen, setTimelineDialogOpen] = React.useState(false);
   const [dependenciesDialogOpen, setDependenciesDialogOpen] = React.useState(false);
   
+  // Get project context for API URLs
+  const { getSpecUrl, projectId } = useProjectUrl();
+  
+  // Build API URLs based on project context
+  const specApiUrl = projectId 
+    ? `/api/projects/${projectId}/specs/${initialSpec.specNumber || initialSpec.id}`
+    : `/api/specs/${initialSpec.specNumber || initialSpec.id}`;
+  
+  const depGraphApiUrl = projectId
+    ? `/api/projects/${projectId}/specs/${initialSpec.specNumber || initialSpec.id}/dependency-graph`
+    : `/api/specs/${initialSpec.specNumber || initialSpec.id}/dependency-graph`;
+  
   // Use SWR for client-side caching with the initial spec as fallback
   const { data: specData, error, isLoading } = useSWR<{ spec: SpecWithMetadata }>(
-    `/api/specs/${initialSpec.specNumber || initialSpec.id}`,
+    specApiUrl,
     fetcher,
     {
       fallbackData: { spec: initialSpec },
@@ -112,9 +127,8 @@ export function SpecDetailClient({ initialSpec, initialSubSpec, isFocusMode = fa
     current: { specName: string; specNumber?: number };
     dependsOn: { specName: string; specNumber?: number }[];
     requiredBy: { specName: string; specNumber?: number }[];
-    related: { specName: string; specNumber?: number }[];
   }>(
-    dependenciesDialogOpen ? `/api/specs/${initialSpec.specNumber || initialSpec.id}/dependency-graph` : null,
+    dependenciesDialogOpen ? depGraphApiUrl : null,
     fetcher,
     {
       revalidateOnFocus: false,
@@ -132,12 +146,14 @@ export function SpecDetailClient({ initialSpec, initialSubSpec, isFocusMode = fa
     ? {
         dependsOn: dependencyGraphData.dependsOn.map(s => s.specName),
         requiredBy: dependencyGraphData.requiredBy.map(s => s.specName),
-        related: dependencyGraphData.related.map(s => s.specName),
       }
     : relationships;
   
   const hasRelationships = Boolean(
-    relationships && ((relationships.dependsOn?.length ?? 0) > 0 || (relationships.related?.length ?? 0) > 0)
+    relationships && (
+      (relationships.dependsOn?.length ?? 0) > 0 || 
+      (relationships.requiredBy?.length ?? 0) > 0
+    )
   );
 
   React.useEffect(() => {
@@ -173,8 +189,8 @@ export function SpecDetailClient({ initialSpec, initialSubSpec, isFocusMode = fa
   // Handle sub-spec switching with optimistic UI (instant, no network)
   const handleSubSpecSwitch = (file: string | null) => {
     const newUrl = file 
-      ? `/specs/${spec.specNumber || spec.id}?subspec=${file}`
-      : `/specs/${spec.specNumber || spec.id}`;
+      ? getSpecUrl(spec.specNumber || spec.id, file)
+      : getSpecUrl(spec.specNumber || spec.id);
     
     // Use shallow routing to avoid full page reload
     router.push(newUrl, { scroll: false });
@@ -368,8 +384,16 @@ export function SpecDetailClient({ initialSpec, initialSubSpec, isFocusMode = fa
                   <DialogContent className="flex h-[85vh] w-[min(1200px,95vw)] max-w-6xl flex-col gap-4 overflow-hidden">
                     <DialogHeader>
                       <DialogTitle>Dependency Graph</DialogTitle>
-                      <DialogDescription>
-                        Precedence requirements and connected specs rendered with automatic layout.
+                      <DialogDescription className="flex flex-col gap-2">
+                        <span>Precedence requirements and connected specs rendered with automatic layout.</span>
+                        <Link 
+                          href={`/dependencies?spec=${spec.specNumber || spec.id}`}
+                          className="inline-flex items-center gap-1.5 text-xs text-primary hover:underline w-fit"
+                          onClick={() => setDependenciesDialogOpen(false)}
+                        >
+                          <ExternalLink className="h-3 w-3" />
+                          View in full dependencies page
+                        </Link>
                       </DialogDescription>
                     </DialogHeader>
                     <div className="min-h-0 flex-1">
@@ -378,6 +402,7 @@ export function SpecDetailClient({ initialSpec, initialSubSpec, isFocusMode = fa
                           relationships={completeRelationships}
                           specNumber={spec.specNumber}
                           specTitle={displayTitle}
+                          projectId={projectId}
                         />
                       )}
                     </div>
@@ -458,7 +483,7 @@ export function SpecDetailClient({ initialSpec, initialSubSpec, isFocusMode = fa
                 remarkPlugins={[remarkGfm, remarkStripHtmlComments]}
                 rehypePlugins={[rehypeHighlight, rehypeSlug]}
                 components={{
-                  a: (props) => <MarkdownLink {...props} currentSpecNumber={spec.specNumber || undefined} />,
+                  a: (props) => <MarkdownLink {...props} currentSpecNumber={spec.specNumber || undefined} projectId={projectId} />,
                   pre: ({ children, ...props }) => {
                     // Safely get the first child element
                     const childArray = React.Children.toArray(children);

package/.next/standalone/packages/ui/src/components/spec-detail-wrapper.tsx

@@ -11,11 +11,11 @@ import { SpecDetailClient } from '@/components/spec-detail-client';
 import { primeSpecsSidebar, setActiveSidebarSpec } from '@/lib/stores/specs-sidebar-store';
 import { cn } from '@/lib/utils';
 import type { SpecWithMetadata, SidebarSpec } from '@/types/specs';
-import type { ParsedSpec } from '@/lib/db/service-queries';
+import type { LightweightSpec } from '@/lib/db/service-queries';
 
 interface SpecDetailWrapperProps {
   spec: SpecWithMetadata;
-  allSpecs: ParsedSpec[];
+  allSpecs: LightweightSpec[];
   currentSubSpec?: string;
 }
 
@@ -45,9 +45,8 @@ export function SpecDetailWrapper({ spec, allSpecs, currentSubSpec }: SpecDetail
       status: item.status,
       priority: item.priority,
       tags: item.tags,
-      contentMd: item.contentMd,
       updatedAt: item.updatedAt,
-      subSpecsCount: ('subSpecsCount' in item) ? (item as any).subSpecsCount : undefined,
+      subSpecsCount: ('subSpecsCount' in item) ? (item as unknown as { subSpecsCount: number }).subSpecsCount : undefined,
     }))
   ), [allSpecs]);
 

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

@@ -28,7 +28,6 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { cn } from '@/lib/utils';
-import { extractH1Title } from '@/lib/utils';
 import { PriorityBadge, getPriorityLabel } from './priority-badge';
 import { formatRelativeTime } from '@/lib/date-utils';
 import {
@@ -37,6 +36,7 @@ import {
   getSidebarScrollTop,
   updateSidebarScrollTop,
 } from '@/lib/stores/specs-sidebar-store';
+import { useProjectUrl } from '@/contexts/project-context';
 
 const useIsomorphicLayoutEffect = typeof window !== 'undefined'
   ? React.useLayoutEffect
@@ -284,14 +284,16 @@ export function SpecsNavSidebar({ initialSpecs = [], currentSpecId, currentSubSp
   }, []);
 
   // Virtual list row renderer (rowProps will be passed by react-window)
+  const { getSpecUrl } = useProjectUrl();
+  
   const RowComponent = React.useCallback((rowProps: { index: number; style: React.CSSProperties }) => {
     const { index, style } = rowProps;
     const spec = sortedSpecs[index];
     const isCurrentSpec = spec.id === resolvedCurrentSpecId;
 
-    // Extract H1 title, fallback to title or name
-    const h1Title = spec.contentMd ? extractH1Title(spec.contentMd) : null;
-    const displayTitle = h1Title || spec.title || spec.specName;
+    // Use title from server-side extraction, fallback to name
+    const displayTitle = spec.title || spec.specName;
+    const specUrl = getSpecUrl(spec.specNumber || spec.id);
 
     return (
       <div style={style} className="px-1">
@@ -302,7 +304,7 @@ export function SpecsNavSidebar({ initialSpecs = [], currentSpecId, currentSubSp
               <TooltipTrigger asChild>
                 <Link
                   ref={isCurrentSpec && !currentSubSpec ? activeItemRef : null}
-                  href={`/specs/${spec.specNumber || spec.id}`}
+                  href={specUrl}
                   onMouseEnter={() => onSpecHover?.(spec.specNumber?.toString() || spec.id)}
                   className={cn(
                     'w-full flex flex-col gap-1 p-1.5 rounded-md text-sm transition-colors',
@@ -368,7 +370,7 @@ export function SpecsNavSidebar({ initialSpecs = [], currentSpecId, currentSubSp
         </div>
       </div>
     );
-  }, [sortedSpecs, resolvedCurrentSpecId, currentSubSpec, onSpecHover]);
+  }, [sortedSpecs, resolvedCurrentSpecId, currentSubSpec, onSpecHover, getSpecUrl]);
 
   // Calculate list height
   const listHeight = React.useMemo(() => {

package/.next/standalone/packages/ui/src/contexts/project-context.tsx

@@ -227,3 +227,27 @@ export function ProjectProvider({ children, initialProjectId }: ProjectProviderP
     </ProjectContext.Provider>
   );
 }
+
+/**
+ * Hook to generate project-scoped URLs
+ * Automatically uses project prefix in multi-project mode
+ */
+export function useProjectUrl() {
+  const { mode, currentProject } = useProject();
+  
+  const getUrl = useCallback((path: string) => {
+    if (mode === 'multi-project' && currentProject) {
+      // Ensure path starts with /
+      const normalizedPath = path.startsWith('/') ? path : `/${path}`;
+      return `/projects/${currentProject.id}${normalizedPath}`;
+    }
+    return path.startsWith('/') ? path : `/${path}`;
+  }, [mode, currentProject]);
+
+  const getSpecUrl = useCallback((specId: string | number, subSpec?: string) => {
+    const base = getUrl(`/specs/${specId}`);
+    return subSpec ? `${base}?subspec=${subSpec}` : base;
+  }, [getUrl]);
+
+  return { getUrl, getSpecUrl, isMultiProject: mode === 'multi-project', projectId: currentProject?.id };
+}