@leanspec/ui 0.2.9 → 0.2.10

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
@@ -284,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">
@@ -302,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',
@@ -368,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(() => {

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

@@ -0,0 +1,153 @@
+/**
+ * Inline status editor component
+ * Allows changing spec status via dropdown
+ */
+
+'use client';
+
+import * as React from 'react';
+import { Clock, PlayCircle, CheckCircle2, Archive, Loader2 } from 'lucide-react';
+import { toast } from '@/components/ui/toast';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { cn } from '@/lib/utils';
+
+const STATUSES = ['planned', 'in-progress', 'complete', 'archived'] as const;
+type Status = (typeof STATUSES)[number];
+
+const statusConfig: Record<Status, { icon: React.ComponentType<{ className?: string }>; label: string; className: string }> = {
+  'planned': {
+    icon: Clock,
+    label: 'Planned',
+    className: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400'
+  },
+  'in-progress': {
+    icon: PlayCircle,
+    label: 'In Progress',
+    className: 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-400'
+  },
+  'complete': {
+    icon: CheckCircle2,
+    label: 'Complete',
+    className: 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400'
+  },
+  'archived': {
+    icon: Archive,
+    label: 'Archived',
+    className: 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-400'
+  }
+};
+
+interface StatusEditorProps {
+  specId: string;
+  currentStatus: string;
+  onUpdate?: (newStatus: string) => void;
+  disabled?: boolean;
+  projectId?: string;
+}
+
+export function StatusEditor({ 
+  specId, 
+  currentStatus, 
+  onUpdate,
+  disabled = false,
+  projectId 
+}: StatusEditorProps) {
+  const [status, setStatus] = React.useState<Status>(currentStatus as Status || 'planned');
+  const [isUpdating, setIsUpdating] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+
+  const handleChange = async (newStatus: Status) => {
+    if (newStatus === status) return;
+    
+    const previousStatus = status;
+    setStatus(newStatus); // 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({ status: newStatus }),
+      });
+
+      if (!response.ok) {
+        const data = await response.json();
+        throw new Error(data.error || 'Failed to update status');
+      }
+
+      onUpdate?.(newStatus);
+      toast.success('Status updated');
+    } catch (err) {
+      setStatus(previousStatus); // Rollback
+      const errorMessage = err instanceof Error ? err.message : 'Failed to update';
+      setError(errorMessage);
+      toast.error('Failed to update status', { description: errorMessage });
+      console.error('Status update failed:', err);
+    } finally {
+      setIsUpdating(false);
+    }
+  };
+
+  const config = statusConfig[status] || statusConfig.planned;
+  const Icon = config.icon;
+
+  return (
+    <div className="relative">
+      <Select
+        value={status}
+        onValueChange={(value) => handleChange(value as Status)}
+        disabled={disabled || isUpdating}
+      >
+        <SelectTrigger 
+          className={cn(
+            'h-7 w-fit min-w-[120px] border-0 px-2 text-xs font-medium',
+            config.className,
+            isUpdating && 'opacity-70'
+          )}
+          aria-label="Change spec status"
+        >
+          <div className="flex items-center gap-1.5">
+            {isUpdating ? (
+              <Loader2 className="h-3.5 w-3.5 animate-spin" />
+            ) : (
+              <Icon className="h-3.5 w-3.5" />
+            )}
+            <SelectValue>
+              {config.label}
+            </SelectValue>
+          </div>
+        </SelectTrigger>
+        <SelectContent>
+          {STATUSES.map((s) => {
+            const cfg = statusConfig[s];
+            const ItemIcon = cfg.icon;
+            return (
+              <SelectItem key={s} value={s} className="pl-2">
+                <div className="flex items-center gap-2">
+                  <ItemIcon className="h-4 w-4" />
+                  <span>{cfg.label}</span>
+                </div>
+              </SelectItem>
+            );
+          })}
+        </SelectContent>
+      </Select>
+      {error && (
+        <div className="absolute top-full left-0 mt-1 text-xs text-destructive">
+          {error}
+        </div>
+      )}
+    </div>
+  );
+}

package/.next/standalone/packages/ui/src/components/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/contexts/project-context.tsx

@@ -227,3 +227,27 @@ export function ProjectProvider({ children, initialProjectId }: ProjectProviderP
     </ProjectContext.Provider>
   );
 }
+
+/**
+ * Hook to generate project-scoped URLs
+ * Automatically uses project prefix in multi-project mode
+ */
+export function useProjectUrl() {
+  const { mode, currentProject } = useProject();
+  
+  const getUrl = useCallback((path: string) => {
+    if (mode === 'multi-project' && currentProject) {
+      // Ensure path starts with /
+      const normalizedPath = path.startsWith('/') ? path : `/${path}`;
+      return `/projects/${currentProject.id}${normalizedPath}`;
+    }
+    return path.startsWith('/') ? path : `/${path}`;
+  }, [mode, currentProject]);
+
+  const getSpecUrl = useCallback((specId: string | number, subSpec?: string) => {
+    const base = getUrl(`/specs/${specId}`);
+    return subSpec ? `${base}?subspec=${subSpec}` : base;
+  }, [getUrl]);
+
+  return { getUrl, getSpecUrl, isMultiProject: mode === 'multi-project', projectId: currentProject?.id };
+}