@leanspec/ui 0.2.9 → 0.2.10

package/.next/standalone/packages/ui/src/app/specs/specs-client.tsx

@@ -77,10 +77,7 @@ const STATUS_CONFIG: Record<SpecStatus, {
 
 const BOARD_STATUSES: SpecStatus[] = ['planned', 'in-progress', 'complete', 'archived'];
 
-interface SpecRelationships {
-  dependsOn: string[];
-  related: string[];
-}
+import type { SpecRelationships } from '@/types/specs';
 
 interface Spec {
   id: string;
@@ -114,6 +111,17 @@ export function SpecsClient({ initialSpecs, projectId }: SpecsClientProps) {
   const searchParams = useSearchParams();
   const router = useRouter();
 
+  // Helper to generate project-scoped URLs
+  const getSpecUrl = useCallback((specId: string | number) => {
+    return projectId 
+      ? `/projects/${projectId}/specs/${specId}`
+      : `/specs/${specId}`;
+  }, [projectId]);
+
+  const getSpecsBaseUrl = useCallback(() => {
+    return projectId ? `/projects/${projectId}/specs` : '/specs';
+  }, [projectId]);
+
   const [specs, setSpecs] = useState<Spec[]>(initialSpecs);
   const [pendingSpecIds, setPendingSpecIds] = useState<Record<string, boolean>>({});
   const [searchQuery, setSearchQuery] = useState('');
@@ -180,7 +188,7 @@ export function SpecsClient({ initialSpecs, projectId }: SpecsClientProps) {
         return next;
       });
     }
-  }, []);
+  }, [projectId]);
 
   // Auto-show archived column when filtering by archived status in board view
   useEffect(() => {
@@ -204,13 +212,13 @@ export function SpecsClient({ initialSpecs, projectId }: SpecsClientProps) {
     }
     const search = current.toString();
     const query = search ? `?${search}` : '';
-    router.replace(`/specs${query}`, { scroll: false });
+    router.replace(`${getSpecsBaseUrl()}${query}`, { scroll: false });
 
     // Persist to localStorage
     if (typeof window !== 'undefined') {
       localStorage.setItem('specs-view-mode', viewMode);
     }
-  }, [viewMode, router]);
+  }, [viewMode, router, getSpecsBaseUrl]);
 
   const filteredAndSortedSpecs = useMemo(() => {
     const filtered = specs.filter(spec => {
@@ -373,7 +381,7 @@ export function SpecsClient({ initialSpecs, projectId }: SpecsClientProps) {
         )}>
           {viewMode === 'list' ? (
             <div className="w-full">
-              <ListView specs={filteredAndSortedSpecs} />
+              <ListView specs={filteredAndSortedSpecs} getSpecUrl={getSpecUrl} />
             </div>
           ) : (
             <BoardView
@@ -382,6 +390,7 @@ export function SpecsClient({ initialSpecs, projectId }: SpecsClientProps) {
               pendingSpecIds={pendingSpecIds}
               showArchived={showArchivedBoard}
               onToggleArchived={() => setShowArchivedBoard(!showArchivedBoard)}
+              getSpecUrl={getSpecUrl}
             />
           )}
         </div>
@@ -390,7 +399,7 @@ export function SpecsClient({ initialSpecs, projectId }: SpecsClientProps) {
   );
 }
 
-function ListView({ specs }: { specs: Spec[] }) {
+function ListView({ specs, getSpecUrl }: { specs: Spec[]; getSpecUrl: (specId: string | number) => string }) {
   return (
     <div className="grid grid-cols-1 gap-2 sm:gap-3 md:gap-4 pb-2 sm:pb-4 md:pb-8">
       {specs.map(spec => {
@@ -401,8 +410,9 @@ function ListView({ specs }: { specs: Spec[] }) {
           'low': 'border-l-gray-400'
         };
         const borderColor = priorityColors[spec.priority as keyof typeof priorityColors] || 'border-l-gray-300';
-        const hasDependencies = spec.relationships && (spec.relationships.dependsOn.length > 0 || spec.relationships.related.length > 0);
+        const hasDependencies = spec.relationships && spec.relationships.dependsOn.length > 0;
         const hasSubSpecs = !!(spec.subSpecsCount && spec.subSpecsCount > 0);
+        const specUrl = getSpecUrl(spec.specNumber || spec.id);
 
         return (
           <Card
@@ -411,13 +421,13 @@ function ListView({ specs }: { specs: Spec[] }) {
               "hover:shadow-lg active:shadow-xl transition-all duration-150 hover:scale-[1.01] active:scale-[0.99] border-l-4 cursor-pointer touch-manipulation",
               borderColor
             )}
-            onClick={() => window.location.href = `/specs/${spec.specNumber || spec.id}`}
+            onClick={() => window.location.href = specUrl}
           >
             {/* Mobile-optimized layout */}
             <CardHeader className="pb-2 sm:pb-2.5 md:pb-3 px-3 sm:px-4 md:px-6 pt-3 sm:pt-4 md:pt-6">
               <div className="flex flex-col gap-2 md:flex-row md:items-start md:justify-between md:gap-4">
                 <div className="flex-1 min-w-0">
-                  <Link href={`/specs/${spec.specNumber || spec.id}`}>
+                  <Link href={specUrl}>
                     <CardTitle className="text-sm sm:text-base md:text-lg font-semibold hover:text-primary transition-colors flex items-start flex-wrap gap-1.5 sm:gap-2 leading-snug sm:leading-normal">
                       {spec.specNumber ? (
                         <span className="font-mono text-xs sm:text-sm md:text-base font-normal text-muted-foreground flex-shrink-0">
@@ -462,9 +472,7 @@ function ListView({ specs }: { specs: Spec[] }) {
                         <div className="flex items-center gap-1 sm:gap-1.5">
                           <GitBranch className="h-3 w-3 sm:h-3.5 sm:w-3.5 flex-shrink-0" />
                           <span className="whitespace-nowrap">
-                            {spec.relationships!.dependsOn.length > 0 && `${spec.relationships!.dependsOn.length} deps`}
-                            {spec.relationships!.dependsOn.length > 0 && spec.relationships!.related.length > 0 && ', '}
-                            {spec.relationships!.related.length > 0 && `${spec.relationships!.related.length} related`}
+                            {spec.relationships!.dependsOn.length} deps
                           </span>
                         </div>
                       )}
@@ -499,9 +507,10 @@ interface BoardViewProps {
   pendingSpecIds: Record<string, boolean>;
   showArchived: boolean;
   onToggleArchived: () => void;
+  getSpecUrl: (specId: string | number) => string;
 }
 
-function BoardView({ specs, onStatusChange, pendingSpecIds, showArchived, onToggleArchived }: BoardViewProps) {
+function BoardView({ specs, onStatusChange, pendingSpecIds, showArchived, onToggleArchived, getSpecUrl }: BoardViewProps) {
   const [draggingId, setDraggingId] = useState<string | null>(null);
   const [activeDropZone, setActiveDropZone] = useState<SpecStatus | null>(null);
   const [collapsedColumns, setCollapsedColumns] = useState<Record<string, boolean>>({});
@@ -649,6 +658,7 @@ function BoardView({ specs, onStatusChange, pendingSpecIds, showArchived, onTogg
                   };
                   const borderColor = priorityColors[spec.priority as keyof typeof priorityColors] || 'border-l-gray-300';
                   const isUpdating = Boolean(pendingSpecIds[spec.id]);
+                  const specUrl = getSpecUrl(spec.specNumber || spec.id);
 
                   return (
                     <Card
@@ -668,7 +678,7 @@ function BoardView({ specs, onStatusChange, pendingSpecIds, showArchived, onTogg
                         borderColor,
                         isUpdating && 'opacity-60 cursor-wait'
                       )}
-                      onClick={() => window.location.href = `/specs/${spec.specNumber || spec.id}`}
+                      onClick={() => window.location.href = specUrl}
                     >
                       {isUpdating && (
                         <div className="absolute inset-0 rounded-lg bg-background/80 flex items-center justify-center text-xs sm:text-sm font-medium z-10">
@@ -681,7 +691,7 @@ function BoardView({ specs, onStatusChange, pendingSpecIds, showArchived, onTogg
                             {spec.specNumber ? `#${spec.specNumber}` : ''}
                           </span>
                         </div>
-                        <Link href={`/specs/${spec.specNumber || spec.id}`} className="block">
+                        <Link href={specUrl} className="block">
                           <CardTitle className="text-xs sm:text-sm font-semibold leading-snug hover:text-primary transition-colors line-clamp-3">
                             {spec.title || spec.specName}
                           </CardTitle>

package/.next/standalone/packages/ui/src/app/stats/page.tsx

@@ -2,13 +2,35 @@
  * Stats page with detailed metrics and charts
  */
 
+import { redirect } from 'next/navigation';
 import { getStats, getSpecs } from '@/lib/db/service-queries';
+import { projectRegistry } from '@/lib/projects/registry';
 import { StatsClient } from './stats-client';
 
 // Force dynamic rendering
 export const dynamic = 'force-dynamic';
 
 export default async function StatsPage() {
+  const specsMode = process.env.SPECS_MODE || 'filesystem';
+  
+  // In multi-project mode, redirect to the most recent project's stats
+  if (specsMode === 'multi-project') {
+    const recentProjects = await projectRegistry.getRecentProjects();
+    
+    if (recentProjects.length > 0) {
+      redirect(`/projects/${recentProjects[0].id}/stats`);
+    }
+    
+    // If no recent projects, check for any projects
+    const projects = await projectRegistry.getProjects();
+    if (projects.length > 0) {
+      redirect(`/projects/${projects[0].id}/stats`);
+    }
+    
+    // No projects at all - redirect to projects page to add one
+    redirect('/projects');
+  }
+  
   const [stats, specs] = await Promise.all([
     getStats(),
     getSpecs(),

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

@@ -0,0 +1,73 @@
+'use client';
+
+import { useState } from 'react';
+import { cn } from '@/lib/utils';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { Button } from '@/components/ui/button';
+
+const PROJECT_COLORS = [
+  '#ef4444', // red
+  '#f97316', // orange
+  '#eab308', // yellow
+  '#22c55e', // green
+  '#14b8a6', // teal
+  '#3b82f6', // blue
+  '#6366f1', // indigo
+  '#8b5cf6', // violet
+  '#d946ef', // fuchsia
+  '#ec4899', // pink
+  '#6b7280', // gray
+  '#78716c', // stone
+];
+
+interface ColorPickerProps {
+  value?: string;
+  onChange: (color: string) => void;
+  disabled?: boolean;
+}
+
+export function ColorPicker({ value, onChange, disabled }: ColorPickerProps) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-8 w-8 p-0"
+          disabled={disabled}
+          aria-label="Pick color"
+        >
+          <div
+            className="h-4 w-4 rounded-full border"
+            style={{ backgroundColor: value || '#666' }}
+          />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-3" align="start">
+        <div className="grid grid-cols-6 gap-2">
+          {PROJECT_COLORS.map((color) => (
+            <button
+              key={color}
+              className={cn(
+                'h-6 w-6 rounded-full border-2 transition-transform hover:scale-110',
+                value === color ? 'border-primary' : 'border-transparent'
+              )}
+              style={{ backgroundColor: color }}
+              onClick={() => {
+                onChange(color);
+                setOpen(false);
+              }}
+              aria-label={`Select color ${color}`}
+            />
+          ))}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

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/{dist/standalone/packages/web/src/components/spec-metadata.tsx → src/components/editable-spec-metadata.tsx}

@@ -1,46 +1,63 @@
 /**
- * Metadata card component with icons for spec details
+ * Editable metadata card component for spec details
+ * Allows inline editing of status, priority, and tags
  */
 
+'use client';
+
 import { Calendar, User, Tag, GitBranch, ExternalLink } from 'lucide-react';
 import { Card, CardContent } from '@/components/ui/card';
-import { Badge } from '@/components/ui/badge';
 import { Avatar, AvatarFallback } from '@/components/ui/avatar';
-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 { formatDate, formatRelativeTime } from '@/lib/date-utils';
 import type { Spec } from '@/lib/db/schema';
 
-interface SpecMetadataProps {
+interface EditableSpecMetadataProps {
   spec: Spec & { tags: string[] | null };
+  projectId?: string;
+  onMetadataUpdate?: (field: string, value: unknown) => void;
 }
 
-export function SpecMetadata({ spec }: SpecMetadataProps) {
+export function EditableSpecMetadata({ spec, projectId, onMetadataUpdate }: EditableSpecMetadataProps) {
+  const specIdentifier = spec.specNumber?.toString() || spec.id;
+
   return (
     <Card>
       <CardContent className="pt-6">
         <dl className="grid grid-cols-2 gap-4">
-          {/* Status */}
+          {/* Status - Editable */}
           <div>
             <dt className="text-sm font-medium text-muted-foreground flex items-center gap-1.5 mb-1">
               Status
             </dt>
             <dd>
-              <StatusBadge status={spec.status || 'planned'} />
+              <StatusEditor
+                specId={specIdentifier}
+                currentStatus={spec.status || 'planned'}
+                projectId={projectId}
+                onUpdate={(newStatus) => onMetadataUpdate?.('status', newStatus)}
+              />
             </dd>
           </div>
 
-          {/* Priority */}
+          {/* Priority - Editable */}
           <div>
             <dt className="text-sm font-medium text-muted-foreground flex items-center gap-1.5 mb-1">
               Priority
             </dt>
             <dd>
-              <PriorityBadge priority={spec.priority || 'medium'} />
+              <PriorityEditor
+                specId={specIdentifier}
+                currentPriority={spec.priority || 'medium'}
+                projectId={projectId}
+                onUpdate={(newPriority) => onMetadataUpdate?.('priority', newPriority)}
+              />
             </dd>
           </div>
 
-          {/* Created */}
+          {/* Created - Read only */}
           <div>
             <dt className="text-sm font-medium text-muted-foreground flex items-center gap-1.5 mb-1">
               <Calendar className="h-4 w-4" />
@@ -56,7 +73,7 @@ export function SpecMetadata({ spec }: SpecMetadataProps) {
             </dd>
           </div>
 
-          {/* Updated */}
+          {/* Updated - Read only */}
           <div>
             <dt className="text-sm font-medium text-muted-foreground flex items-center gap-1.5 mb-1">
               <Calendar className="h-4 w-4" />
@@ -72,7 +89,7 @@ export function SpecMetadata({ spec }: SpecMetadataProps) {
             </dd>
           </div>
 
-          {/* Assignee */}
+          {/* Assignee - Read only for now */}
           {spec.assignee && (
             <div>
               <dt className="text-sm font-medium text-muted-foreground flex items-center gap-1.5 mb-1">
@@ -92,24 +109,23 @@ export function SpecMetadata({ spec }: SpecMetadataProps) {
             </div>
           )}
 
-          {/* Tags */}
-          {spec.tags && spec.tags.length > 0 && (
-            <div className={spec.assignee ? '' : 'col-span-2'}>
-              <dt className="text-sm font-medium text-muted-foreground flex items-center gap-1.5 mb-1">
-                <Tag className="h-4 w-4" />
-                Tags
-              </dt>
-              <dd className="flex gap-1 flex-wrap">
-                {spec.tags.map((tag) => (
-                  <Badge key={tag} variant="outline" className="text-xs">
-                    {tag}
-                  </Badge>
-                ))}
-              </dd>
-            </div>
-          )}
+          {/* Tags - Editable */}
+          <div className={spec.assignee ? '' : 'col-span-2'}>
+            <dt className="text-sm font-medium text-muted-foreground flex items-center gap-1.5 mb-1">
+              <Tag className="h-4 w-4" />
+              Tags
+            </dt>
+            <dd>
+              <TagsEditor
+                specId={specIdentifier}
+                currentTags={spec.tags || []}
+                projectId={projectId}
+                onUpdate={(newTags) => onMetadataUpdate?.('tags', newTags)}
+              />
+            </dd>
+          </div>
 
-          {/* GitHub URL */}
+          {/* GitHub URL - Read only */}
           {spec.githubUrl && (
             <div className="col-span-2">
               <dt className="text-sm font-medium text-muted-foreground flex items-center gap-1.5 mb-1">

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

@@ -7,6 +7,7 @@ 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,21 @@ 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;
+  };
+
+  // Hide sidebar on settings/management pages like /projects (manage projects page)
+  const isSettingsPage = pathname === '/projects';
+  if (isSettingsPage) {
+    return null;
+  }
+
   return (
     <>
       {/* Mobile overlay backdrop */}
@@ -126,7 +148,7 @@ export function MainSidebar() {
               <ProjectSwitcher collapsed={isCollapsed && !mobileOpen} />
             </div>
             <SidebarLink 
-              href="/" 
+              href={getNavUrl('/')} 
               icon={Home} 
               currentPath={pathname}
               description={(!isCollapsed || mobileOpen) ? "Dashboard" : undefined}
@@ -135,7 +157,7 @@ export function MainSidebar() {
               Home
             </SidebarLink>
             <SidebarLink 
-              href="/specs" 
+              href={getNavUrl('/specs')} 
               icon={FileText} 
               currentPath={pathname}
               description={(!isCollapsed || mobileOpen) ? "All Specifications" : undefined}
@@ -144,7 +166,7 @@ export function MainSidebar() {
               Specs
             </SidebarLink>
             <SidebarLink 
-              href="/dependencies" 
+              href={getNavUrl('/dependencies')} 
               icon={Network} 
               currentPath={pathname}
               description={(!isCollapsed || mobileOpen) ? "Dependency Graph" : undefined}
@@ -153,7 +175,7 @@ export function MainSidebar() {
               Dependencies
             </SidebarLink>
             <SidebarLink 
-              href="/stats" 
+              href={getNavUrl('/stats')} 
               icon={BarChart3} 
               currentPath={pathname}
               description={(!isCollapsed || mobileOpen) ? "Analytics" : undefined}
@@ -162,7 +184,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://');