@leanspec/ui 0.2.9 → 0.2.10

package/.next/standalone/packages/ui/src/components/priority-editor.tsx

@@ -0,0 +1,153 @@
+/**
+ * Inline priority editor component
+ * Allows changing spec priority via dropdown
+ */
+
+'use client';
+
+import * as React from 'react';
+import { AlertCircle, ArrowUp, Minus, ArrowDown, Loader2 } from 'lucide-react';
+import { toast } from '@/components/ui/toast';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { cn } from '@/lib/utils';
+
+const PRIORITIES = ['low', 'medium', 'high', 'critical'] as const;
+type Priority = (typeof PRIORITIES)[number];
+
+const priorityConfig: Record<Priority, { icon: React.ComponentType<{ className?: string }>; label: string; className: string }> = {
+  'critical': {
+    icon: AlertCircle,
+    label: 'Critical',
+    className: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400'
+  },
+  'high': {
+    icon: ArrowUp,
+    label: 'High',
+    className: 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-400'
+  },
+  'medium': {
+    icon: Minus,
+    label: 'Medium',
+    className: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400'
+  },
+  'low': {
+    icon: ArrowDown,
+    label: 'Low',
+    className: 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-400'
+  }
+};
+
+interface PriorityEditorProps {
+  specId: string;
+  currentPriority: string;
+  onUpdate?: (newPriority: string) => void;
+  disabled?: boolean;
+  projectId?: string;
+}
+
+export function PriorityEditor({ 
+  specId, 
+  currentPriority, 
+  onUpdate,
+  disabled = false,
+  projectId 
+}: PriorityEditorProps) {
+  const [priority, setPriority] = React.useState<Priority>(currentPriority as Priority || 'medium');
+  const [isUpdating, setIsUpdating] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+
+  const handleChange = async (newPriority: Priority) => {
+    if (newPriority === priority) return;
+    
+    const previousPriority = priority;
+    setPriority(newPriority); // Optimistic update
+    setIsUpdating(true);
+    setError(null);
+
+    try {
+      const apiUrl = projectId
+        ? `/api/projects/${projectId}/specs/${specId}/metadata`
+        : `/api/specs/${specId}/metadata`;
+      
+      const response = await fetch(apiUrl, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ priority: newPriority }),
+      });
+
+      if (!response.ok) {
+        const data = await response.json();
+        throw new Error(data.error || 'Failed to update priority');
+      }
+
+      onUpdate?.(newPriority);
+      toast.success('Priority updated');
+    } catch (err) {
+      setPriority(previousPriority); // Rollback
+      const errorMessage = err instanceof Error ? err.message : 'Failed to update';
+      setError(errorMessage);
+      toast.error('Failed to update priority', { description: errorMessage });
+      console.error('Priority update failed:', err);
+    } finally {
+      setIsUpdating(false);
+    }
+  };
+
+  const config = priorityConfig[priority] || priorityConfig.medium;
+  const Icon = config.icon;
+
+  return (
+    <div className="relative">
+      <Select
+        value={priority}
+        onValueChange={(value) => handleChange(value as Priority)}
+        disabled={disabled || isUpdating}
+      >
+        <SelectTrigger 
+          className={cn(
+            'h-7 w-fit min-w-[100px] border-0 px-2 text-xs font-medium',
+            config.className,
+            isUpdating && 'opacity-70'
+          )}
+          aria-label="Change spec priority"
+        >
+          <div className="flex items-center gap-1.5">
+            {isUpdating ? (
+              <Loader2 className="h-3.5 w-3.5 animate-spin" />
+            ) : (
+              <Icon className="h-3.5 w-3.5" />
+            )}
+            <SelectValue>
+              {config.label}
+            </SelectValue>
+          </div>
+        </SelectTrigger>
+        <SelectContent>
+          {PRIORITIES.map((p) => {
+            const cfg = priorityConfig[p];
+            const ItemIcon = cfg.icon;
+            return (
+              <SelectItem key={p} value={p} className="pl-2">
+                <div className="flex items-center gap-2">
+                  <ItemIcon className="h-4 w-4" />
+                  <span>{cfg.label}</span>
+                </div>
+              </SelectItem>
+            );
+          })}
+        </SelectContent>
+      </Select>
+      {error && (
+        <div className="absolute top-full left-0 mt-1 text-xs text-destructive">
+          {error}
+        </div>
+      )}
+    </div>
+  );
+}

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, Star, Settings, Loader2 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 import {
@@ -23,6 +24,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@/components/ui/popover';
+import { Skeleton } from '@/components/ui/skeleton';
 import { useProject } from '@/contexts/project-context';
 import { CreateProjectDialog } from '@/components/create-project-dialog';
 
@@ -32,23 +34,55 @@ interface ProjectSwitcherProps {
 }
 
 export function ProjectSwitcher({ collapsed }: ProjectSwitcherProps) {
+  const router = useRouter();
+  const pathname = usePathname();
   const {
     mode,
     currentProject,
     projects,
-    switchProject,
+    isLoading,
   } = useProject();
   
   const [open, setOpen] = useState(false);
   const [showNewProjectDialog, setShowNewProjectDialog] = useState(false);
+  const [isSwitching, setIsSwitching] = useState(false);
+
+  // Show skeleton during initial load
+  if (isLoading) {
+    return (
+      <Skeleton className={cn(
+        "w-full",
+        collapsed ? "h-9 w-9" : "h-10"
+      )} />
+    );
+  }
 
   if (mode !== 'multi-project') {
     return null;
   }
 
-  const handleProjectSelect = async (projectId: string) => {
-    await switchProject(projectId);
+  const handleProjectSelect = (projectId: string) => {
+    if (projectId === currentProject?.id) {
+      setOpen(false);
+      return;
+    }
+    
+    setIsSwitching(true);
     setOpen(false);
+    
+    // Extract the path after /projects/{currentProjectId}
+    // Pattern: /projects/{projectId} or /projects/{projectId}/... 
+    const projectPathMatch = pathname.match(/^\/projects\/[^/]+(\/.*)?$/);
+    let subPath = projectPathMatch?.[1] || ''; // Empty string = project home page
+    
+    // If on a spec detail page (/specs/{specId}), redirect to specs list instead
+    // because the same spec ID might not exist in the other project
+    if (subPath.match(/^\/specs\/[^/]+$/)) {
+      subPath = '/specs';
+    }
+    
+    // Full page navigation - ensures clean state for new project
+    window.location.assign(`/projects/${projectId}${subPath}`);
   };
 
   const sortedProjects = [...projects].sort((a, b) => {
@@ -68,19 +102,35 @@ export function ProjectSwitcher({ collapsed }: ProjectSwitcherProps) {
             variant="outline"
             role="combobox"
             aria-expanded={open}
+            disabled={isSwitching}
             className={cn(
-              "w-full justify-between",
-              collapsed ? "h-9 w-9 p-0 justify-center" : "px-3"
+              "w-full justify-between transition-opacity",
+              collapsed ? "h-9 w-9 p-0 justify-center" : "px-3",
+              isSwitching && "opacity-70"
             )}
           >
             {collapsed ? (
-              <FolderOpen className="h-4 w-4" />
+              isSwitching ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <div
+                  className="h-4 w-4 rounded-full border"
+                  style={{ backgroundColor: currentProject?.color || 'hsl(var(--primary))' }}
+                />
+              )
             ) : (
               <>
                 <div className="flex items-center gap-2 truncate">
-                  <FolderOpen className="h-4 w-4 shrink-0 opacity-50" />
+                  {isSwitching ? (
+                    <Loader2 className="h-4 w-4 shrink-0 animate-spin" />
+                  ) : (
+                    <div
+                      className="h-4 w-4 rounded-full border shrink-0"
+                      style={{ backgroundColor: currentProject?.color || 'hsl(var(--primary))' }}
+                    />
+                  )}
                   <span className="truncate">
-                    {currentProject?.name || "Select project..."}
+                    {isSwitching ? "Switching..." : (currentProject?.name || "Select project...")}
                   </span>
                 </div>
                 <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
@@ -109,6 +159,10 @@ export function ProjectSwitcher({ collapsed }: ProjectSwitcherProps) {
                             : "opacity-0"
                         )}
                       />
+                      <div
+                        className="h-3 w-3 rounded-full shrink-0"
+                        style={{ backgroundColor: project.color || 'hsl(var(--primary))' }}
+                      />
                       <span className="truncate flex-1">{project.name}</span>
                       {project.favorite && (
                         <Star className="h-3 w-3 fill-yellow-500 text-yellow-500" />
@@ -129,6 +183,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

@@ -17,6 +17,9 @@ import { Button } from '@/components/ui/button';
 import { SpecTimeline } from '@/components/spec-timeline';
 import { StatusBadge } from '@/components/status-badge';
 import { PriorityBadge } from '@/components/priority-badge';
+import { StatusEditor } from '@/components/status-editor';
+import { PriorityEditor } from '@/components/priority-editor';
+import { TagsEditor } from '@/components/tags-editor';
 import { MarkdownLink } from '@/components/markdown-link';
 import { TableOfContents, TableOfContentsSidebar } from '@/components/table-of-contents';
 import { BackToTop } from '@/components/back-to-top';
@@ -31,6 +34,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 +50,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 +102,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 +130,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 +149,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 +192,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 });
@@ -274,26 +293,23 @@ export function SpecDetailClient({ initialSpec, initialSubSpec, isFocusMode = fa
               
               {/* Line 2: Status, Priority, Tags, Actions */}
               <div className="flex flex-wrap items-center gap-2">
-                <StatusBadge status={spec.status || 'planned'} />
-                <PriorityBadge priority={spec.priority || 'medium'} />
+                <StatusEditor
+                  specId={spec.specNumber?.toString() || spec.id}
+                  currentStatus={spec.status || 'planned'}
+                  projectId={projectId}
+                />
+                <PriorityEditor
+                  specId={spec.specNumber?.toString() || spec.id}
+                  currentPriority={spec.priority || 'medium'}
+                  projectId={projectId}
+                />
                 
-                {tags.length > 0 && (
-                  <>
-                    <div className="h-4 w-px bg-border mx-1 hidden sm:block" />
-                    <div className="flex flex-wrap gap-1">
-                      {tags.slice(0, 5).map((tag: string) => (
-                        <Badge key={tag} variant="secondary" className="text-xs">
-                          {tag}
-                        </Badge>
-                      ))}
-                      {tags.length > 5 && (
-                        <Badge variant="secondary" className="text-xs">
-                          +{tags.length - 5} more
-                        </Badge>
-                      )}
-                    </div>
-                  </>
-                )}
+                <div className="h-4 w-px bg-border mx-1 hidden sm:block" />
+                <TagsEditor
+                  specId={spec.specNumber?.toString() || spec.id}
+                  currentTags={tags}
+                  projectId={projectId}
+                />
               </div>
 
               {/* Line 3: Small metadata row */}
@@ -368,8 +384,19 @@ 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={projectId 
+                            ? `/projects/${projectId}/dependencies?spec=${spec.specNumber || spec.id}`
+                            : `/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 +405,7 @@ export function SpecDetailClient({ initialSpec, initialSubSpec, isFocusMode = fa
                           relationships={completeRelationships}
                           specNumber={spec.specNumber}
                           specTitle={displayTitle}
+                          projectId={projectId}
                         />
                       )}
                     </div>
@@ -458,7 +486,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]);