@leanspec/ui 0.2.8 → 0.2.9-dev.20251205030455

package/.next/standalone/packages/ui/src/components/context-file-detail.tsx

@@ -0,0 +1,308 @@
+/**
+ * Context File Detail Component
+ * Full-page markdown view with table of contents sidebar, similar to spec detail page
+ * Supports Mermaid diagrams and rich markdown rendering
+ */
+
+'use client';
+
+import * as React from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import rehypeHighlight from 'rehype-highlight';
+import rehypeSlug from 'rehype-slug';
+import { 
+  Copy, 
+  Check, 
+  Clock, 
+  Coins, 
+  ExternalLink, 
+  ArrowLeft,
+  Bot,
+  BookOpen,
+  ScrollText,
+  FileCode,
+  Settings,
+  History,
+  Users,
+  Shield,
+  Scale,
+  Sparkles,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { TableOfContentsSidebar, TableOfContents } from '@/components/table-of-contents';
+import { BackToTop } from '@/components/back-to-top';
+import { MermaidDiagram } from '@/components/mermaid-diagram';
+import { cn } from '@/lib/utils';
+import type { ContextFile } from '@/lib/specs/types';
+
+interface ContextFileDetailProps {
+  file: ContextFile;
+  projectRoot?: string;
+  onBack: () => void;
+}
+
+/**
+ * Get icon for file based on name
+ */
+function getFileIcon(fileName: string): React.ComponentType<{ className?: string }> {
+  const name = fileName.toLowerCase();
+  
+  // Agent instruction files
+  if (name === 'agents.md' || name.includes('agent')) return Bot;
+  if (name === 'gemini.md') return Sparkles;
+  if (name === 'claude.md') return Bot;
+  if (name === 'copilot.md' || name === 'copilot-instructions.md') return Bot;
+  
+  // Project documentation
+  if (name === 'readme.md') return BookOpen;
+  if (name === 'contributing.md') return Users;
+  if (name === 'changelog.md') return History;
+  if (name === 'license.md' || name === 'license') return Scale;
+  if (name === 'security.md') return Shield;
+  
+  // Config files
+  if (name.endsWith('.json')) return Settings;
+  if (name === 'config.json') return Settings;
+  
+  // Code-related
+  if (name.includes('api') || name.includes('spec')) return FileCode;
+  
+  // Default
+  return ScrollText;
+}
+
+/**
+ * Get icon color class for file based on name
+ */
+function getFileIconColor(fileName: string): string {
+  const name = fileName.toLowerCase();
+  
+  if (name === 'agents.md' || name.includes('agent')) return 'text-purple-500';
+  if (name === 'gemini.md') return 'text-blue-500';
+  if (name === 'claude.md') return 'text-orange-500';
+  if (name === 'copilot.md' || name === 'copilot-instructions.md') return 'text-sky-500';
+  if (name === 'readme.md') return 'text-green-500';
+  if (name === 'contributing.md') return 'text-pink-500';
+  if (name === 'changelog.md') return 'text-amber-500';
+  if (name === 'license.md' || name === 'license') return 'text-slate-500';
+  if (name === 'security.md') return 'text-red-500';
+  if (name.endsWith('.json')) return 'text-yellow-500';
+  
+  return 'text-muted-foreground';
+}
+
+/**
+ * Get token count color based on thresholds
+ */
+function getTokenColor(tokens: number): string {
+  if (tokens < 2000) return 'text-green-600 dark:text-green-400';
+  if (tokens < 3500) return 'text-blue-600 dark:text-blue-400';
+  if (tokens < 5000) return 'text-yellow-600 dark:text-yellow-400';
+  return 'text-red-600 dark:text-red-400';
+}
+
+/**
+ * Get token status label
+ */
+function getTokenStatus(tokens: number): string {
+  if (tokens < 2000) return 'Optimal';
+  if (tokens < 3500) return 'Good';
+  if (tokens < 5000) return 'Large';
+  return 'Very Large';
+}
+
+/**
+ * Format date for display
+ */
+function formatDate(date: Date | string): string {
+  const d = typeof date === 'string' ? new Date(date) : date;
+  return d.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  });
+}
+
+/**
+ * Generate VS Code URI to open file
+ */
+function getVSCodeUri(projectRoot: string, filePath: string): string {
+  const fullPath = filePath.startsWith('/') ? filePath : `${projectRoot}/${filePath}`;
+  return `vscode://file${fullPath}`;
+}
+
+export function ContextFileDetail({ file, projectRoot, onBack }: ContextFileDetailProps) {
+  const [copied, setCopied] = React.useState(false);
+  
+  const FileIcon = getFileIcon(file.name);
+  const iconColor = getFileIconColor(file.name);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(file.content);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (error) {
+      console.error('Failed to copy content:', error);
+    }
+  };
+
+  const handleOpenInEditor = () => {
+    if (projectRoot) {
+      window.open(getVSCodeUri(projectRoot, file.path), '_blank');
+    }
+  };
+
+  const isMarkdown = file.name.endsWith('.md');
+  const isJson = file.name.endsWith('.json');
+
+  return (
+    <>
+      {/* Header */}
+      <header className="lg:sticky lg:top-14 lg:z-20 border-b bg-card">
+        <div className="px-3 sm:px-6 py-2 sm:py-3">
+          {/* Line 1: Back button + File name */}
+          <div className="flex items-center gap-3 mb-1.5 sm:mb-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onBack}
+              className="h-8 px-2 -ml-2"
+            >
+              <ArrowLeft className="h-4 w-4 mr-1" />
+              Back
+            </Button>
+            <FileIcon className={cn('h-5 w-5 shrink-0', iconColor)} />
+            <h1 className="text-lg sm:text-xl font-bold tracking-tight truncate">
+              {file.name}
+            </h1>
+          </div>
+
+          {/* Line 2: Badges and actions */}
+          <div className="flex flex-wrap items-center gap-2">
+            <Badge variant="outline" className={cn('text-xs', getTokenColor(file.tokenCount))}>
+              <Coins className="h-3 w-3 mr-1" />
+              {file.tokenCount.toLocaleString()} tokens
+            </Badge>
+            <span className="text-xs text-muted-foreground">
+              {getTokenStatus(file.tokenCount)}
+            </span>
+            <div className="h-4 w-px bg-border mx-1 hidden sm:block" />
+            <span className="text-xs text-muted-foreground flex items-center gap-1">
+              <Clock className="h-3 w-3" />
+              Modified {formatDate(file.lastModified)}
+            </span>
+            <span className="text-xs text-muted-foreground">•</span>
+            <span className="text-xs text-muted-foreground">
+              {file.content.split('\n').length} lines
+            </span>
+          </div>
+
+          {/* Line 3: Path and actions */}
+          <div className="flex items-center justify-between gap-2 mt-1.5 sm:mt-2">
+            <span className="text-xs text-muted-foreground truncate">{file.path}</span>
+            <div className="flex items-center gap-1 shrink-0">
+              {projectRoot && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-7 px-2 text-xs"
+                  onClick={handleOpenInEditor}
+                  title="Open in VS Code"
+                >
+                  <ExternalLink className="h-3.5 w-3.5 mr-1" />
+                  Open in Editor
+                </Button>
+              )}
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-7 px-2 text-xs"
+                onClick={handleCopy}
+                title="Copy content"
+              >
+                {copied ? (
+                  <>
+                    <Check className="h-3.5 w-3.5 mr-1 text-green-600" />
+                    Copied!
+                  </>
+                ) : (
+                  <>
+                    <Copy className="h-3.5 w-3.5 mr-1" />
+                    Copy
+                  </>
+                )}
+              </Button>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      {/* 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-3 sm:py-6 min-w-0">
+          <div className="space-y-4">
+            {isJson ? (
+              <pre className="p-4 text-sm overflow-x-auto bg-muted/20 rounded-lg border whitespace-pre-wrap">
+                {JSON.stringify(JSON.parse(file.content), null, 2)}
+              </pre>
+            ) : isMarkdown ? (
+              <article className="prose prose-slate dark:prose-invert max-w-none prose-sm sm:prose-base">
+                <ReactMarkdown
+                  remarkPlugins={[remarkGfm]}
+                  rehypePlugins={[rehypeHighlight, rehypeSlug]}
+                  components={{
+                    pre: ({ children, ...props }) => {
+                      // Safely get the first child element
+                      const childArray = React.Children.toArray(children);
+                      const firstChild = childArray[0];
+
+                      // Check if this is a mermaid code block
+                      if (
+                        React.isValidElement(firstChild) &&
+                        firstChild.type === 'code' &&
+                        typeof (firstChild.props as { className?: string }).className === 'string' &&
+                        (firstChild.props as { className?: string }).className?.includes('language-mermaid')
+                      ) {
+                        const codeProps = firstChild.props as { children?: React.ReactNode };
+                        const code = typeof codeProps.children === 'string'
+                          ? codeProps.children
+                          : '';
+                        return <MermaidDiagram code={code} />;
+                      }
+                      // Default pre rendering
+                      return <pre {...props}>{children}</pre>;
+                    },
+                  }}
+                >
+                  {file.content}
+                </ReactMarkdown>
+              </article>
+            ) : (
+              <pre className="p-4 text-sm overflow-x-auto bg-muted/20 rounded-lg border whitespace-pre-wrap">
+                {file.content}
+              </pre>
+            )}
+          </div>
+        </main>
+
+        {/* Right Sidebar for TOC (Desktop only, markdown files only) */}
+        {isMarkdown && (
+          <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={file.content} />
+          </aside>
+        )}
+      </div>
+
+      {/* Floating action buttons (Mobile/Tablet only) */}
+      {isMarkdown && (
+        <div className="xl:hidden">
+          <TableOfContents content={file.content} />
+        </div>
+      )}
+      <BackToTop />
+    </>
+  );
+}

package/.next/standalone/packages/ui/src/components/context-file-viewer.tsx

@@ -1,13 +1,32 @@
 /**
  * Context File Viewer Component
  * Displays a single context file with token count, copy button, and syntax highlighting
+ * Uses the same rich markdown rendering as spec detail page (including Mermaid diagrams)
  * Phase 1 & 4: Spec 131 - UI Project Context Visibility
  */
 
 'use client';
 
 import * as React from 'react';
-import { Copy, Check, FileText, Clock, Coins, ExternalLink } from 'lucide-react';
+import { 
+  Copy, 
+  Check, 
+  FileText, 
+  Clock, 
+  Coins, 
+  ExternalLink, 
+  Maximize2,
+  Bot,
+  BookOpen,
+  ScrollText,
+  FileCode,
+  Settings,
+  History,
+  Users,
+  Shield,
+  Scale,
+  Sparkles,
+} from 'lucide-react';
 import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
@@ -15,6 +34,8 @@ import { cn } from '@/lib/utils';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import rehypeHighlight from 'rehype-highlight';
+import rehypeSlug from 'rehype-slug';
+import { MermaidDiagram } from '@/components/mermaid-diagram';
 
 interface ContextFileViewerProps {
   name: string;
@@ -27,6 +48,57 @@ interface ContextFileViewerProps {
   className?: string;
   searchQuery?: string;
   projectRoot?: string;
+  onViewDetail?: () => void;
+}
+
+/**
+ * Get icon for file based on name
+ */
+function getFileIcon(fileName: string): React.ComponentType<{ className?: string }> {
+  const name = fileName.toLowerCase();
+  
+  // Agent instruction files
+  if (name === 'agents.md' || name.includes('agent')) return Bot;
+  if (name === 'gemini.md') return Sparkles;
+  if (name === 'claude.md') return Bot;
+  if (name === 'copilot.md' || name === 'copilot-instructions.md') return Bot;
+  
+  // Project documentation
+  if (name === 'readme.md') return BookOpen;
+  if (name === 'contributing.md') return Users;
+  if (name === 'changelog.md') return History;
+  if (name === 'license.md' || name === 'license') return Scale;
+  if (name === 'security.md') return Shield;
+  
+  // Config files
+  if (name.endsWith('.json')) return Settings;
+  if (name === 'config.json') return Settings;
+  
+  // Code-related
+  if (name.includes('api') || name.includes('spec')) return FileCode;
+  
+  // Default
+  return ScrollText;
+}
+
+/**
+ * Get icon color class for file based on name
+ */
+function getFileIconColor(fileName: string): string {
+  const name = fileName.toLowerCase();
+  
+  if (name === 'agents.md' || name.includes('agent')) return 'text-purple-500';
+  if (name === 'gemini.md') return 'text-blue-500';
+  if (name === 'claude.md') return 'text-orange-500';
+  if (name === 'copilot.md' || name === 'copilot-instructions.md') return 'text-sky-500';
+  if (name === 'readme.md') return 'text-green-500';
+  if (name === 'contributing.md') return 'text-pink-500';
+  if (name === 'changelog.md') return 'text-amber-500';
+  if (name === 'license.md' || name === 'license') return 'text-slate-500';
+  if (name === 'security.md') return 'text-red-500';
+  if (name.endsWith('.json')) return 'text-yellow-500';
+  
+  return 'text-muted-foreground';
 }
 
 /**
@@ -113,6 +185,7 @@ export function ContextFileViewer({
   className,
   searchQuery,
   projectRoot,
+  onViewDetail,
 }: ContextFileViewerProps) {
   const [copied, setCopied] = React.useState(false);
   const matchCount = searchQuery ? countMatches(content, searchQuery) : 0;
@@ -135,8 +208,16 @@ export function ContextFileViewer({
     }
   };
 
+  const handleViewDetail = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onViewDetail?.();
+  };
+
   const isJson = name.endsWith('.json');
   const isMarkdown = name.endsWith('.md');
+  
+  const FileIcon = getFileIcon(name);
+  const iconColor = getFileIconColor(name);
 
   // For non-markdown content with search, highlight matches
   const renderPlainContent = (text: string) => {
@@ -157,7 +238,7 @@ export function ContextFileViewer({
       >
         <div className="flex items-center justify-between gap-2">
           <div className="flex items-center gap-3 min-w-0">
-            <FileText className="h-4 w-4 shrink-0 text-muted-foreground" />
+            <FileIcon className={cn('h-4 w-4 shrink-0', iconColor)} />
             <div className="min-w-0">
               <CardTitle className="text-sm font-medium truncate">{name}</CardTitle>
               <p className="text-xs text-muted-foreground truncate">{path}</p>
@@ -176,6 +257,17 @@ export function ContextFileViewer({
             <span className="text-xs text-muted-foreground hidden sm:inline">
               {getTokenStatus(tokenCount)}
             </span>
+            {onViewDetail && (
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-7 w-7 p-0"
+                onClick={handleViewDetail}
+                title="View full page"
+              >
+                <Maximize2 className="h-3.5 w-3.5" />
+              </Button>
+            )}
             {projectRoot && (
               <Button
                 variant="ghost"
@@ -261,6 +353,7 @@ export function ContextFileCard({
   className,
   searchQuery,
   projectRoot,
+  onViewDetail,
 }: Omit<ContextFileViewerProps, 'isExpanded' | 'onToggle'>) {
   const [expanded, setExpanded] = React.useState(false);
 
@@ -286,6 +379,7 @@ export function ContextFileCard({
       className={className}
       searchQuery={searchQuery}
       projectRoot={projectRoot}
+      onViewDetail={onViewDetail}
     />
   );
 }

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, BookOpen, 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}
@@ -153,7 +178,7 @@ export function MainSidebar() {
               Stats
             </SidebarLink>
             <SidebarLink 
-              href="/context" 
+              href={getNavUrl('/context')} 
               icon={BookOpen} 
               currentPath={pathname}
               description={(!isCollapsed || mobileOpen) ? "Project Context" : undefined}

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://');