@leanspec/ui 0.2.9-dev.20251205030455 → 0.2.10

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

@@ -0,0 +1,238 @@
+/**
+ * Tags editor component with add/remove functionality and autocomplete
+ */
+
+'use client';
+
+import * as React from 'react';
+import { X, Plus, Loader2, Check } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { toast } from '@/components/ui/toast';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command';
+import { cn } from '@/lib/utils';
+
+interface TagsEditorProps {
+  specId: string;
+  currentTags: string[];
+  onUpdate?: (newTags: string[]) => void;
+  disabled?: boolean;
+  projectId?: string;
+}
+
+export function TagsEditor({ 
+  specId, 
+  currentTags, 
+  onUpdate,
+  disabled = false,
+  projectId 
+}: TagsEditorProps) {
+  const [tags, setTags] = React.useState<string[]>(currentTags || []);
+  const [allTags, setAllTags] = React.useState<string[]>([]);
+  const [isUpdating, setIsUpdating] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [searchValue, setSearchValue] = React.useState('');
+
+  // Fetch all available tags for autocomplete when popover opens
+  React.useEffect(() => {
+    if (isOpen && allTags.length === 0) {
+      const fetchTags = async () => {
+        try {
+          const apiUrl = projectId ? `/api/projects/${projectId}/tags` : '/api/tags';
+          const response = await fetch(apiUrl);
+          if (response.ok) {
+            const data = await response.json();
+            setAllTags(data.tags || []);
+          }
+        } catch (err) {
+          console.error('Failed to fetch tags:', err);
+        }
+      };
+      fetchTags();
+    }
+  }, [isOpen, allTags.length, projectId]);
+
+  const updateTags = async (newTags: string[]) => {
+    const previousTags = tags;
+    setTags(newTags); // 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({ tags: newTags }),
+      });
+
+      if (!response.ok) {
+        const data = await response.json();
+        throw new Error(data.error || 'Failed to update tags');
+      }
+
+      onUpdate?.(newTags);
+      toast.success('Tags updated');
+    } catch (err) {
+      setTags(previousTags); // Rollback
+      const errorMessage = err instanceof Error ? err.message : 'Failed to update';
+      setError(errorMessage);
+      toast.error('Failed to update tags', { description: errorMessage });
+      console.error('Tags update failed:', err);
+    } finally {
+      setIsUpdating(false);
+    }
+  };
+
+  const handleAddTag = (tag: string) => {
+    const trimmedTag = tag.trim().toLowerCase();
+    if (!trimmedTag) return;
+    if (tags.includes(trimmedTag)) {
+      setError('Tag already exists');
+      return;
+    }
+    
+    const newTags = [...tags, trimmedTag];
+    updateTags(newTags);
+    setSearchValue('');
+    setIsOpen(false);
+  };
+
+  const handleRemoveTag = (tagToRemove: string) => {
+    const newTags = tags.filter(t => t !== tagToRemove);
+    updateTags(newTags);
+  };
+
+  // Filter available tags: show tags that aren't already added and match search
+  const availableTags = React.useMemo(() => {
+    const lowercaseSearch = searchValue.toLowerCase();
+    return allTags
+      .filter(tag => !tags.includes(tag))
+      .filter(tag => !lowercaseSearch || tag.toLowerCase().includes(lowercaseSearch));
+  }, [allTags, tags, searchValue]);
+
+  // Check if search value could be a new tag (not in available tags)
+  const canCreateNewTag = searchValue.trim() && 
+    !tags.includes(searchValue.trim().toLowerCase()) &&
+    !allTags.includes(searchValue.trim().toLowerCase());
+
+  return (
+    <div className="relative">
+      <div className="flex gap-1 flex-wrap items-center">
+        {tags.map((tag) => (
+          <Badge 
+            key={tag} 
+            variant="outline" 
+            className={cn(
+              "text-xs pr-1 gap-1",
+              disabled && "opacity-50"
+            )}
+          >
+            {tag}
+            {!disabled && (
+              <button
+                onClick={() => handleRemoveTag(tag)}
+                disabled={isUpdating}
+                className="ml-1 rounded-full hover:bg-muted p-0.5 transition-colors"
+                aria-label={`Remove ${tag} tag`}
+              >
+                <X className="h-3 w-3" />
+              </button>
+            )}
+          </Badge>
+        ))}
+        
+        {!disabled && (
+          <Popover open={isOpen} onOpenChange={setIsOpen}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-6 px-2 text-xs"
+                disabled={isUpdating}
+                aria-label="Add new tag"
+              >
+                {isUpdating ? (
+                  <Loader2 className="h-3 w-3 animate-spin" />
+                ) : (
+                  <Plus className="h-3 w-3" />
+                )}
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-56 p-0" align="start">
+              <Command>
+                <CommandInput 
+                  placeholder="Search or create tag..." 
+                  value={searchValue}
+                  onValueChange={setSearchValue}
+                />
+                <CommandList>
+                  <CommandEmpty>
+                    {canCreateNewTag ? (
+                      <CommandItem
+                        onSelect={() => handleAddTag(searchValue)}
+                        className="cursor-pointer"
+                      >
+                        <Plus className="mr-2 h-4 w-4" />
+                        Create &quot;{searchValue.trim().toLowerCase()}&quot;
+                      </CommandItem>
+                    ) : (
+                      <span className="text-muted-foreground px-2 py-1.5 text-sm">
+                        No tags found.
+                      </span>
+                    )}
+                  </CommandEmpty>
+                  {availableTags.length > 0 && (
+                    <CommandGroup heading="Existing tags">
+                      {availableTags.slice(0, 10).map((tag) => (
+                        <CommandItem
+                          key={tag}
+                          value={tag}
+                          onSelect={() => handleAddTag(tag)}
+                          className="cursor-pointer"
+                        >
+                          {tag}
+                        </CommandItem>
+                      ))}
+                    </CommandGroup>
+                  )}
+                  {canCreateNewTag && availableTags.length > 0 && (
+                    <CommandGroup heading="Create new">
+                      <CommandItem
+                        onSelect={() => handleAddTag(searchValue)}
+                        className="cursor-pointer"
+                      >
+                        <Plus className="mr-2 h-4 w-4" />
+                        Create &quot;{searchValue.trim().toLowerCase()}&quot;
+                      </CommandItem>
+                    </CommandGroup>
+                  )}
+                </CommandList>
+              </Command>
+              {error && (
+                <p className="text-xs text-destructive px-2 pb-2">{error}</p>
+              )}
+            </PopoverContent>
+          </Popover>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -115,7 +115,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      "relative flex cursor-pointer gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
       className
     )}
     {...props}

package/.next/standalone/packages/ui/src/lib/db/service-queries.ts

@@ -28,6 +28,7 @@ export type LightweightSpec = Omit<ParsedSpec, 'contentMd' | 'contentHtml'>;
  * Strip contentMd from a spec to create a lightweight version
  */
 function toLightweightSpec<T extends ParsedSpec>(spec: T): Omit<T, 'contentMd' | 'contentHtml'> {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { contentMd, contentHtml, ...rest } = spec;
   return rest;
 }
@@ -82,11 +83,23 @@ function getFilesystemRelationships(specDirPath: string): SpecRelationships {
 }
 
 /**
- * Parse tags from JSON string to array
+ * Parse tags from JSON string to array and strip frontmatter from contentMd
  */
 function parseSpecTags(spec: Spec): ParsedSpec {
+  // Strip frontmatter from contentMd if present
+  let contentMd = spec.contentMd;
+  if (contentMd.startsWith('---')) {
+    try {
+      const { content } = matter(contentMd);
+      contentMd = content;
+    } catch {
+      // If parsing fails, use original content
+    }
+  }
+  
   return {
     ...spec,
+    contentMd,
     tags: spec.tags ? (typeof spec.tags === 'string' ? JSON.parse(spec.tags) : spec.tags) : null,
   };
 }
@@ -152,6 +165,24 @@ export async function getSpecsWithSubSpecCount(projectId?: string): Promise<(Lig
   });
 }
 
+/**
+ * Extract relationships from spec content (contentMd contains frontmatter)
+ * Used for multi-project mode where we can't read from filesystem
+ */
+function getRelationshipsFromContent(contentMd: string): SpecRelationships {
+  try {
+    const { data } = matter(contentMd);
+    const dependsOn = normalizeRelationshipList(data?.depends_on ?? data?.dependsOn);
+    return {
+      dependsOn,
+      requiredBy: [],
+    };
+  } catch (error) {
+    console.warn('Unable to parse spec relationships from content', error);
+    return { dependsOn: [], requiredBy: [] };
+  }
+}
+
 /**
  * Get all specs with sub-spec count and relationships (for comprehensive list view)
  * Builds the full dependency graph to compute requiredBy (reverse dependencies)
@@ -160,21 +191,14 @@ export async function getSpecsWithSubSpecCount(projectId?: string): Promise<(Lig
 export async function getSpecsWithMetadata(projectId?: string): Promise<(LightweightSpec & { subSpecsCount: number; relationships: SpecRelationships })[]> {
   const specs = await specsService.getAllSpecs(projectId);
   
-  // Only count sub-specs and relationships for filesystem mode
-  if (projectId) {
-    return specs.map(spec => ({ 
-      ...toLightweightSpec(parseSpecTags(spec)), 
-      subSpecsCount: 0,
-      relationships: { dependsOn: [], requiredBy: [] }
-    }));
-  }
-  
   // First pass: collect all dependsOn relationships
   const specRelationshipsMap = new Map<string, { dependsOn: string[]; requiredBy: string[] }>();
   
   for (const spec of specs) {
-    const specDirPath = buildSpecDirPath(spec.filePath);
-    const { dependsOn } = getFilesystemRelationships(specDirPath);
+    // For multi-project mode, extract from contentMd; for filesystem mode, read from disk
+    const { dependsOn } = projectId 
+      ? getRelationshipsFromContent(spec.contentMd)
+      : getFilesystemRelationships(buildSpecDirPath(spec.filePath));
     specRelationshipsMap.set(spec.specName, { dependsOn, requiredBy: [] });
   }
   
@@ -189,8 +213,8 @@ export async function getSpecsWithMetadata(projectId?: string): Promise<(Lightwe
   }
   
   return specs.map(spec => {
-    const specDirPath = buildSpecDirPath(spec.filePath);
-    const subSpecsCount = countSubSpecs(specDirPath);
+    // Sub-specs count only available in filesystem mode
+    const subSpecsCount = projectId ? 0 : countSubSpecs(buildSpecDirPath(spec.filePath));
     const relationships = specRelationshipsMap.get(spec.specName) || { dependsOn: [], requiredBy: [] };
     return { ...toLightweightSpec(parseSpecTags(spec)), subSpecsCount, relationships };
   });
@@ -229,7 +253,22 @@ export async function getSpecById(id: string, projectId?: string): Promise<(Pars
     return { ...parsedSpec, subSpecs, relationships: { dependsOn, requiredBy } };
   }
 
-  return parsedSpec;
+  // Multi-project mode: extract relationships from spec content and compute requiredBy
+  const { dependsOn } = getRelationshipsFromContent(spec.contentMd);
+  
+  // Compute requiredBy by scanning all specs in the project
+  const allSpecs = await specsService.getAllSpecs(projectId);
+  const requiredBy: string[] = [];
+  
+  for (const otherSpec of allSpecs) {
+    if (otherSpec.specName === spec.specName) continue;
+    const otherRels = getRelationshipsFromContent(otherSpec.contentMd);
+    if (otherRels.dependsOn.includes(spec.specName)) {
+      requiredBy.push(otherSpec.specName);
+    }
+  }
+
+  return { ...parsedSpec, relationships: { dependsOn, requiredBy } };
 }
 
 /**
@@ -292,6 +331,26 @@ export async function getStats(projectId?: string): Promise<StatsResult> {
   };
 }
 
+/**
+ * Get all unique tags from specs in a project
+ * Returns sorted array of unique tag strings
+ */
+export async function getAllTags(projectId?: string): Promise<string[]> {
+  const specs = await specsService.getAllSpecs(projectId);
+  const tagSet = new Set<string>();
+  
+  for (const spec of specs) {
+    const parsedSpec = parseSpecTags(spec);
+    if (parsedSpec.tags && Array.isArray(parsedSpec.tags)) {
+      for (const tag of parsedSpec.tags) {
+        tagSet.add(tag);
+      }
+    }
+  }
+  
+  return Array.from(tagSet).sort();
+}
+
 // ============================================================================
 // Project Context Functions (Spec 131)
 // ============================================================================
@@ -460,3 +519,80 @@ export async function getProjectContext(projectRootOverride?: string): Promise<P
     projectRoot,
   };
 }
+
+/**
+ * Dependency graph types for visualization
+ */
+export interface DependencyGraph {
+  nodes: Array<{
+    id: string;
+    name: string;
+    number: number;
+    status: string;
+    priority: string;
+    tags: string[];
+  }>;
+  edges: Array<{
+    source: string;
+    target: string;
+    type: 'dependsOn';
+  }>;
+}
+
+/**
+ * Build dependency graph for visualization
+ * Called directly from server components to avoid fetch issues with custom ports
+ */
+export async function getDependencyGraph(projectId?: string): Promise<DependencyGraph> {
+  const specs = await getSpecsWithMetadata(projectId);
+  
+  const nodes = specs
+    .filter(spec => spec.specNumber !== null)
+    .map(spec => ({
+      id: spec.id,
+      name: spec.title || spec.specName || `Spec ${spec.specNumber}`,
+      number: spec.specNumber!,
+      status: spec.status || 'planned',
+      priority: spec.priority || 'medium',
+      tags: spec.tags || [],
+    }));
+
+  const edges: DependencyGraph['edges'] = [];
+  const specIdByFolder = new Map<string, string>();
+  
+  specs.forEach(spec => {
+    if (spec.specNumber !== null) {
+      const folderName = spec.filePath
+        .replace(/^specs\//, '')
+        .replace(/\/README\.md$/, '');
+      specIdByFolder.set(folderName, spec.id);
+      
+      const paddedNumber = spec.specNumber.toString().padStart(3, '0');
+      specIdByFolder.set(paddedNumber, spec.id);
+      specIdByFolder.set(spec.specNumber.toString(), spec.id);
+    }
+  });
+
+  specs.forEach(spec => {
+    if (!spec.specNumber) return;
+    
+    // Only process dependsOn relationships (no related)
+    spec.relationships.dependsOn.forEach(dep => {
+      const depTrimmed = dep.trim();
+      const match = depTrimmed.match(/^(\d+)/);
+      const targetId = match 
+        ? specIdByFolder.get(match[1]) || specIdByFolder.get(match[1].padStart(3, '0'))
+        : specIdByFolder.get(depTrimmed);
+      
+      if (targetId && targetId !== spec.id) {
+        edges.push({
+          source: targetId,
+          target: spec.id,
+          type: 'dependsOn',
+        });
+      }
+    });
+  });
+
+  return { nodes, edges };
+}

package/.next/standalone/packages/ui/src/lib/projects/registry.ts

@@ -90,7 +90,7 @@ export class ProjectRegistry {
 
     const yamlContent = yaml.dump(serializable, {
       indent: 2,
-      lineWidth: 100,
+      lineWidth: -1, // Disable line wrapping to prevent YAML corruption
     });
 
     await fs.writeFile(PROJECTS_CONFIG_FILE, yamlContent, 'utf-8');

package/.next/standalone/packages/ui/src/lib/specs/sources/multi-project-source.ts

@@ -227,10 +227,26 @@ export class MultiProjectFilesystemSource implements SpecSource {
     try {
       const { data: frontmatter, content: markdown } = matter(content);
 
+      // Validate frontmatter has required status field
+      if (!frontmatter || !frontmatter.status) {
+        return null;
+      }
+
       // Extract title from markdown (first h1)
       const titleMatch = markdown.match(/^#\s+(.+)$/m);
       const title = titleMatch ? titleMatch[1] : frontmatter.title || specName;
 
+      // Handle both created_at/created and updated_at/updated aliases
+      const createdValue = frontmatter.created_at ?? frontmatter.created;
+      const updatedValue = frontmatter.updated_at ?? frontmatter.updated;
+      const completedValue = frontmatter.completed_at ?? frontmatter.completed;
+
+      const toDate = (value: unknown): Date | null => {
+        if (!value) return null;
+        const parsed = new Date(value as string | number | Date);
+        return isNaN(parsed.getTime()) ? null : parsed;
+      };
+
       return {
         id: `${projectId}:${specNum.toString().padStart(3, '0')}`,
         projectId,
@@ -238,14 +254,14 @@ export class MultiProjectFilesystemSource implements SpecSource {
         specName,
         title,
         status: frontmatter.status,
-        priority: frontmatter.priority,
+        priority: frontmatter.priority || null,
         tags: frontmatter.tags ? JSON.stringify(frontmatter.tags) : null,
         assignee: frontmatter.assignee || null,
-        contentMd: content,
+        contentMd: content, // Keep full content with frontmatter for relationship extraction
         contentHtml: null,
-        createdAt: frontmatter.created_at ? new Date(frontmatter.created_at) : null,
-        updatedAt: frontmatter.updated_at ? new Date(frontmatter.updated_at) : null,
-        completedAt: frontmatter.completed_at ? new Date(frontmatter.completed_at) : null,
+        createdAt: toDate(createdValue),
+        updatedAt: toDate(updatedValue),
+        completedAt: toDate(completedValue),
         filePath,
         githubUrl: null,
         syncedAt: new Date(),