@leanspec/ui 0.2.7 → 0.2.9-dev.20251205030455

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, 
@@ -45,8 +46,11 @@ import {
   TrendingUp,
   Clock,
   Maximize2,
-  List as ListIcon
+  Minimize2,
+  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';
@@ -76,6 +80,8 @@ const SUB_SPEC_ICONS: Record<string, React.ComponentType<{ className?: string }>
 interface SpecDetailClientProps {
   initialSpec: SpecWithMetadata;
   initialSubSpec?: string;
+  isFocusMode?: boolean;
+  onToggleFocusMode?: () => void;
 }
 
 // SWR fetcher with error handling
@@ -86,16 +92,28 @@ const fetcher = (url: string) => fetch(url).then((res) => {
   return res.json();
 });
 
-export function SpecDetailClient({ initialSpec, initialSubSpec }: SpecDetailClientProps) {
+export function SpecDetailClient({ initialSpec, initialSubSpec, isFocusMode = false, onToggleFocusMode }: SpecDetailClientProps) {
   const router = useRouter();
   const searchParams = useSearchParams();
   const currentSubSpec = searchParams.get('subspec') || initialSubSpec;
   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 },
@@ -109,9 +127,8 @@ export function SpecDetailClient({ initialSpec, initialSubSpec }: SpecDetailClie
     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,
@@ -129,12 +146,14 @@ export function SpecDetailClient({ initialSpec, initialSubSpec }: SpecDetailClie
     ? {
         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(() => {
@@ -170,8 +189,8 @@ export function SpecDetailClient({ initialSpec, initialSubSpec }: SpecDetailClie
   // 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 });
@@ -216,144 +235,197 @@ export function SpecDetailClient({ initialSpec, initialSubSpec }: SpecDetailClie
     <>
       {/* Compact Header - sticky on desktop, static on mobile */}
       <header ref={headerRef} className="lg:sticky lg:top-14 lg:z-20 border-b bg-card">
-        <div className="px-3 sm:px-6 py-3 sm:py-4">
-          {/* Line 1: Spec number + H1 Title */}
-          <div className="flex items-start justify-between gap-2 mb-2 sm:mb-3">
-            <h1 className="text-xl sm:text-2xl font-bold tracking-tight">
-              {spec.specNumber && (
-                <span className="text-muted-foreground">#{spec.specNumber.toString().padStart(3, '0')} </span>
-              )}
-              {displayTitle}
-            </h1>
-            
-            {/* Mobile Specs List Toggle */}
-            <Button
-              variant="ghost"
-              size="icon"
-              className="lg:hidden h-8 w-8 -mr-2 shrink-0 text-muted-foreground"
-              onClick={() => {
-                if (typeof window !== 'undefined' && window.toggleSpecsSidebar) {
-                  window.toggleSpecsSidebar();
-                }
-              }}
-            >
-              <ListIcon className="h-5 w-5" />
-              <span className="sr-only">Toggle specs list</span>
-            </Button>
-          </div>
-          
-          {/* 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'} />
-            
-            {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 className={cn("px-3 sm:px-6", isFocusMode ? "py-1.5" : "py-2 sm:py-3")}>
+          {/* Focus mode: Single compact row */}
+          {isFocusMode ? (
+            <div className="flex items-center justify-between gap-3">
+              <div className="flex items-center gap-3 min-w-0">
+                <h1 className="text-base font-semibold tracking-tight truncate">
+                  {spec.specNumber && (
+                    <span className="text-muted-foreground">#{spec.specNumber.toString().padStart(3, '0')} </span>
                   )}
-                </div>
-              </>
-            )}
-          </div>
-
-          {/* Line 3: Small metadata row */}
-          <div className="flex flex-wrap gap-2 sm:gap-4 text-xs text-muted-foreground mt-2 sm:mt-3">
-            <span className="hidden sm:inline">Created: {formatDate(spec.createdAt)}</span>
-            <span className="hidden sm:inline">•</span>
-            <span>
-              Updated: {formatDate(spec.updatedAt)}
-              {spec.updatedAt && (
-                <span className="ml-1 text-[11px] text-muted-foreground/80">({updatedRelative})</span>
-              )}
-            </span>
-            <span className="hidden sm:inline">•</span>
-            <span className="hidden md:inline">Name: {spec.specName}</span>
-            {spec.assignee && (
-              <>
-                <span className="hidden sm:inline">•</span>
-                <span className="hidden sm:inline">Assignee: {spec.assignee}</span>
-              </>
-            )}
-          </div>
-
-          <div className="flex flex-wrap items-center gap-2 mt-3">
-            <Dialog open={timelineDialogOpen} onOpenChange={setTimelineDialogOpen}>
+                  {displayTitle}
+                </h1>
+                <StatusBadge status={spec.status || 'planned'} />
+                <PriorityBadge priority={spec.priority || 'medium'} />
+              </div>
               <Button
                 type="button"
-                variant="outline"
+                variant="ghost"
                 size="sm"
-                aria-haspopup="dialog"
-                aria-expanded={timelineDialogOpen}
-                onClick={() => setTimelineDialogOpen(true)}
-                className="h-8 rounded-full border px-3 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground"
+                onClick={onToggleFocusMode}
+                className="h-7 px-2 text-xs text-muted-foreground hover:text-foreground shrink-0"
+                title="Exit focus mode"
               >
-                <Clock className="mr-1.5 h-3.5 w-3.5" />
-                View Timeline
-                <Maximize2 className="ml-1.5 h-3.5 w-3.5" />
+                <Minimize2 className="h-4 w-4" />
               </Button>
-              <DialogContent className="w-[min(900px,90vw)] max-w-3xl max-h-[90vh] overflow-y-auto">
-                <DialogHeader>
-                  <DialogTitle>Spec Timeline</DialogTitle>
-                  <DialogDescription>Created, updated, and completion milestones.</DialogDescription>
-                </DialogHeader>
-                <div className="rounded-xl border border-border bg-muted/30 p-4">
-                  <SpecTimeline
-                    createdAt={spec.createdAt}
-                    updatedAt={spec.updatedAt}
-                    completedAt={spec.completedAt}
-                    status={spec.status || 'planned'}
-                  />
-                </div>
-              </DialogContent>
-            </Dialog>
-
-            <Dialog open={dependenciesDialogOpen} onOpenChange={setDependenciesDialogOpen}>
-              <Button
-                type="button"
-                variant="outline"
-                size="sm"
-                aria-haspopup="dialog"
-                aria-expanded={dependenciesDialogOpen}
-                onClick={() => setDependenciesDialogOpen(true)}
-                disabled={!hasRelationships}
-                className={cn(
-                  'h-8 rounded-full border px-3 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground',
-                  !hasRelationships && 'cursor-not-allowed opacity-50'
+            </div>
+          ) : (
+            /* Normal mode: Full multi-line header */
+            <>
+              {/* Line 1: Spec number + H1 Title */}
+              <div className="flex items-start justify-between gap-2 mb-1.5 sm:mb-2">
+                <h1 className="text-lg sm:text-xl font-bold tracking-tight">
+                  {spec.specNumber && (
+                    <span className="text-muted-foreground">#{spec.specNumber.toString().padStart(3, '0')} </span>
+                  )}
+                  {displayTitle}
+                </h1>
+                
+                {/* Mobile Specs List Toggle */}
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="lg:hidden h-8 w-8 -mr-2 shrink-0 text-muted-foreground"
+                  onClick={() => {
+                    if (typeof window !== 'undefined' && window.toggleSpecsSidebar) {
+                      window.toggleSpecsSidebar();
+                    }
+                  }}
+                >
+                  <ListIcon className="h-5 w-5" />
+                  <span className="sr-only">Toggle specs list</span>
+                </Button>
+              </div>
+              
+              {/* 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'} />
+                
+                {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>
+                  </>
                 )}
-              >
-                <GitBranch className="mr-1.5 h-3.5 w-3.5" />
-                View Dependencies
-                <Maximize2 className="ml-1.5 h-3.5 w-3.5" />
-              </Button>
-              <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>
-                </DialogHeader>
-                <div className="min-h-0 flex-1">
-                  {completeRelationships && (
-                    <SpecDependencyGraph
-                      relationships={completeRelationships}
-                      specNumber={spec.specNumber}
-                      specTitle={displayTitle}
-                    />
+              </div>
+
+              {/* Line 3: Small metadata row */}
+              <div className="flex flex-wrap gap-2 sm:gap-4 text-xs text-muted-foreground mt-1.5 sm:mt-2">
+                <span className="hidden sm:inline">Created: {formatDate(spec.createdAt)}</span>
+                <span className="hidden sm:inline">•</span>
+                <span>
+                  Updated: {formatDate(spec.updatedAt)}
+                  {spec.updatedAt && (
+                    <span className="ml-1 text-[11px] text-muted-foreground/80">({updatedRelative})</span>
                   )}
-                </div>
-              </DialogContent>
-            </Dialog>
-          </div>
+                </span>
+                <span className="hidden sm:inline">•</span>
+                <span className="hidden md:inline">Name: {spec.specName}</span>
+                {spec.assignee && (
+                  <>
+                    <span className="hidden sm:inline">•</span>
+                    <span className="hidden sm:inline">Assignee: {spec.assignee}</span>
+                  </>
+                )}
+              </div>
+
+              <div className="flex flex-wrap items-center gap-2 mt-2">
+                <Dialog open={timelineDialogOpen} onOpenChange={setTimelineDialogOpen}>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    aria-haspopup="dialog"
+                    aria-expanded={timelineDialogOpen}
+                    onClick={() => setTimelineDialogOpen(true)}
+                    className="h-8 rounded-full border px-3 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground"
+                  >
+                    <Clock className="mr-1.5 h-3.5 w-3.5" />
+                    View Timeline
+                    <Maximize2 className="ml-1.5 h-3.5 w-3.5" />
+                  </Button>
+                  <DialogContent className="w-[min(900px,90vw)] max-w-3xl max-h-[90vh] overflow-y-auto">
+                    <DialogHeader>
+                      <DialogTitle>Spec Timeline</DialogTitle>
+                      <DialogDescription>Created, updated, and completion milestones.</DialogDescription>
+                    </DialogHeader>
+                    <div className="rounded-xl border border-border bg-muted/30 p-4">
+                      <SpecTimeline
+                        createdAt={spec.createdAt}
+                        updatedAt={spec.updatedAt}
+                        completedAt={spec.completedAt}
+                        status={spec.status || 'planned'}
+                      />
+                    </div>
+                  </DialogContent>
+                </Dialog>
+
+                <Dialog open={dependenciesDialogOpen} onOpenChange={setDependenciesDialogOpen}>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    aria-haspopup="dialog"
+                    aria-expanded={dependenciesDialogOpen}
+                    onClick={() => setDependenciesDialogOpen(true)}
+                    disabled={!hasRelationships}
+                    className={cn(
+                      'h-8 rounded-full border px-3 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground',
+                      !hasRelationships && 'cursor-not-allowed opacity-50'
+                    )}
+                  >
+                    <GitBranch className="mr-1.5 h-3.5 w-3.5" />
+                    View Dependencies
+                    <Maximize2 className="ml-1.5 h-3.5 w-3.5" />
+                  </Button>
+                  <DialogContent className="flex h-[85vh] w-[min(1200px,95vw)] max-w-6xl flex-col gap-4 overflow-hidden">
+                    <DialogHeader>
+                      <DialogTitle>Dependency Graph</DialogTitle>
+                      <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">
+                      {completeRelationships && (
+                        <SpecDependencyGraph
+                          relationships={completeRelationships}
+                          specNumber={spec.specNumber}
+                          specTitle={displayTitle}
+                          projectId={projectId}
+                        />
+                      )}
+                    </div>
+                  </DialogContent>
+                </Dialog>
+
+                {/* Focus Mode Toggle - Desktop only */}
+                {onToggleFocusMode && (
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={onToggleFocusMode}
+                    className="hidden lg:inline-flex h-8 rounded-full border px-3 text-xs font-medium text-muted-foreground transition-colors hover:text-foreground"
+                    title="Enter focus mode"
+                  >
+                    <Maximize2 className="mr-1.5 h-3.5 w-3.5" />
+                    Focus
+                  </Button>
+                )}
+              </div>
+            </>
+          )}
         </div>
 
         {/* Horizontal Tabs for Sub-specs (only if sub-specs exist) */}
@@ -401,8 +473,8 @@ export function SpecDetailClient({ initialSpec, initialSubSpec }: SpecDetailClie
 
       {/* Main content with Sidebar */}
       <div className="flex flex-col xl:flex-row xl:items-start">
-        <main className="flex-1 px-3 sm:px-6 py-4 sm:py-8 min-w-0">
-          <div className="space-y-6">
+        <main className="flex-1 px-3 sm:px-6 py-3 sm:py-6 min-w-0">
+          <div className="space-y-4">
             {isLoading && <div className="text-sm text-muted-foreground">Loading...</div>}
             {error && <div className="text-sm text-destructive">Error loading spec</div>}
 
@@ -411,7 +483,7 @@ export function SpecDetailClient({ initialSpec, initialSubSpec }: SpecDetailClie
                 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);
@@ -442,7 +514,7 @@ export function SpecDetailClient({ initialSpec, initialSubSpec }: SpecDetailClie
         </main>
 
         {/* Right Sidebar for TOC (Desktop only) */}
-        <aside className="hidden xl:block w-72 shrink-0 px-6 py-8 sticky top-40 h-[calc(100vh-10rem)] overflow-y-auto scrollbar-auto-hide">
+        <aside className="hidden xl:block w-72 shrink-0 px-6 py-6 sticky top-32 h-[calc(100vh-8rem)] overflow-y-auto scrollbar-auto-hide">
            <TableOfContentsSidebar content={displayContent} />
         </aside>
       </div>

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

@@ -9,16 +9,33 @@ import * as React from 'react';
 import { SpecsNavSidebar } from '@/components/specs-nav-sidebar';
 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;
 }
 
 export function SpecDetailWrapper({ spec, allSpecs, currentSubSpec }: SpecDetailWrapperProps) {
+  const [isFocusMode, setIsFocusMode] = React.useState(() => {
+    if (typeof window !== 'undefined') {
+      return localStorage.getItem('spec-detail-focus-mode') === 'true';
+    }
+    return false;
+  });
+
+  // Persist focus mode preference
+  const handleToggleFocusMode = React.useCallback(() => {
+    setIsFocusMode(prev => {
+      const next = !prev;
+      localStorage.setItem('spec-detail-focus-mode', String(next));
+      return next;
+    });
+  }, []);
+
   const sidebarSpecs = React.useMemo<SidebarSpec[]>(() => (
     allSpecs.map((item) => ({
       id: item.id,
@@ -28,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]);
 
@@ -57,12 +73,15 @@ export function SpecDetailWrapper({ spec, allSpecs, currentSubSpec }: SpecDetail
         currentSpecId={spec.id}
         currentSubSpec={currentSubSpec}
         onSpecHover={handleSpecPrefetch}
+        className={cn(isFocusMode && 'hidden')}
       />
 
       <div className="flex-1 min-w-0">
         <SpecDetailClient 
           initialSpec={spec}
           initialSubSpec={currentSubSpec}
+          isFocusMode={isFocusMode}
+          onToggleFocusMode={handleToggleFocusMode}
         />
       </div>
     </div>

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
@@ -48,9 +48,10 @@ interface SpecsNavSidebarProps {
   currentSpecId?: string;
   currentSubSpec?: string;
   onSpecHover?: (specId: string) => void;
+  className?: string;
 }
 
-export function SpecsNavSidebar({ initialSpecs = [], currentSpecId, currentSubSpec, onSpecHover }: SpecsNavSidebarProps) {
+export function SpecsNavSidebar({ initialSpecs = [], currentSpecId, currentSubSpec, onSpecHover, className }: SpecsNavSidebarProps) {
   const [searchQuery, setSearchQuery] = React.useState('');
   const [statusFilter, setStatusFilter] = React.useState<string>('all');
   const [priorityFilter, setPriorityFilter] = React.useState<string>('all');
@@ -283,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">
@@ -301,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',
@@ -367,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(() => {
@@ -393,7 +396,7 @@ export function SpecsNavSidebar({ initialSpecs = [], currentSpecId, currentSubSp
         />
       )}
 
-      <div className="relative flex-shrink-0">
+      <div className={cn("relative flex-shrink-0", className)}>
         <aside className={cn(
           "border-r border-border bg-background flex flex-col overflow-hidden transition-all duration-300",
           // Desktop behavior

package/.next/standalone/packages/ui/src/components/ui/accordion.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }