@leanspec/ui 0.2.9-dev.20251205030455 → 0.2.10

package/.next/standalone/packages/ui/src/components/editable-spec-metadata.tsx

@@ -0,0 +1,152 @@
+/**
+ * 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 { Avatar, AvatarFallback } from '@/components/ui/avatar';
+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 EditableSpecMetadataProps {
+  spec: Spec & { tags: string[] | null };
+  projectId?: string;
+  onMetadataUpdate?: (field: string, value: unknown) => void;
+}
+
+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 - Editable */}
+          <div>
+            <dt className="text-sm font-medium text-muted-foreground flex items-center gap-1.5 mb-1">
+              Status
+            </dt>
+            <dd>
+              <StatusEditor
+                specId={specIdentifier}
+                currentStatus={spec.status || 'planned'}
+                projectId={projectId}
+                onUpdate={(newStatus) => onMetadataUpdate?.('status', newStatus)}
+              />
+            </dd>
+          </div>
+
+          {/* Priority - Editable */}
+          <div>
+            <dt className="text-sm font-medium text-muted-foreground flex items-center gap-1.5 mb-1">
+              Priority
+            </dt>
+            <dd>
+              <PriorityEditor
+                specId={specIdentifier}
+                currentPriority={spec.priority || 'medium'}
+                projectId={projectId}
+                onUpdate={(newPriority) => onMetadataUpdate?.('priority', newPriority)}
+              />
+            </dd>
+          </div>
+
+          {/* 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" />
+              Created
+            </dt>
+            <dd className="text-sm">
+              {formatDate(spec.createdAt)}
+              {spec.createdAt && (
+                <span className="text-muted-foreground ml-1">
+                  ({formatRelativeTime(spec.createdAt)})
+                </span>
+              )}
+            </dd>
+          </div>
+
+          {/* 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" />
+              Updated
+            </dt>
+            <dd className="text-sm">
+              {formatDate(spec.updatedAt)}
+              {spec.updatedAt && (
+                <span className="text-muted-foreground ml-1">
+                  ({formatRelativeTime(spec.updatedAt)})
+                </span>
+              )}
+            </dd>
+          </div>
+
+          {/* 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">
+                <User className="h-4 w-4" />
+                Assignee
+              </dt>
+              <dd>
+                <div className="flex items-center gap-2">
+                  <Avatar className="h-6 w-6">
+                    <AvatarFallback className="text-xs">
+                      {spec.assignee.substring(0, 2).toUpperCase()}
+                    </AvatarFallback>
+                  </Avatar>
+                  <span className="text-sm">{spec.assignee}</span>
+                </div>
+              </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 - 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">
+                <GitBranch className="h-4 w-4" />
+                Source
+              </dt>
+              <dd>
+                <a
+                  href={spec.githubUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-sm text-primary hover:underline flex items-center gap-1"
+                >
+                  View on GitHub
+                  <ExternalLink className="h-3.5 w-3.5" />
+                </a>
+              </dd>
+            </div>
+          )}
+        </dl>
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -101,6 +101,12 @@ export function MainSidebar() {
     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 */}

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

@@ -0,0 +1,153 @@
+/**
+ * Inline priority editor component
+ * Allows changing spec priority via dropdown
+ */
+
+'use client';
+
+import * as React from 'react';
+import { AlertCircle, ArrowUp, Minus, ArrowDown, 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 PRIORITIES = ['low', 'medium', 'high', 'critical'] as const;
+type Priority = (typeof PRIORITIES)[number];
+
+const priorityConfig: Record<Priority, { icon: React.ComponentType<{ className?: string }>; label: string; className: string }> = {
+  'critical': {
+    icon: AlertCircle,
+    label: 'Critical',
+    className: 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400'
+  },
+  'high': {
+    icon: ArrowUp,
+    label: 'High',
+    className: 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-400'
+  },
+  'medium': {
+    icon: Minus,
+    label: 'Medium',
+    className: 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400'
+  },
+  'low': {
+    icon: ArrowDown,
+    label: 'Low',
+    className: 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-400'
+  }
+};
+
+interface PriorityEditorProps {
+  specId: string;
+  currentPriority: string;
+  onUpdate?: (newPriority: string) => void;
+  disabled?: boolean;
+  projectId?: string;
+}
+
+export function PriorityEditor({ 
+  specId, 
+  currentPriority, 
+  onUpdate,
+  disabled = false,
+  projectId 
+}: PriorityEditorProps) {
+  const [priority, setPriority] = React.useState<Priority>(currentPriority as Priority || 'medium');
+  const [isUpdating, setIsUpdating] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+
+  const handleChange = async (newPriority: Priority) => {
+    if (newPriority === priority) return;
+    
+    const previousPriority = priority;
+    setPriority(newPriority); // 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({ priority: newPriority }),
+      });
+
+      if (!response.ok) {
+        const data = await response.json();
+        throw new Error(data.error || 'Failed to update priority');
+      }
+
+      onUpdate?.(newPriority);
+      toast.success('Priority updated');
+    } catch (err) {
+      setPriority(previousPriority); // Rollback
+      const errorMessage = err instanceof Error ? err.message : 'Failed to update';
+      setError(errorMessage);
+      toast.error('Failed to update priority', { description: errorMessage });
+      console.error('Priority update failed:', err);
+    } finally {
+      setIsUpdating(false);
+    }
+  };
+
+  const config = priorityConfig[priority] || priorityConfig.medium;
+  const Icon = config.icon;
+
+  return (
+    <div className="relative">
+      <Select
+        value={priority}
+        onValueChange={(value) => handleChange(value as Priority)}
+        disabled={disabled || isUpdating}
+      >
+        <SelectTrigger 
+          className={cn(
+            'h-7 w-fit min-w-[100px] border-0 px-2 text-xs font-medium',
+            config.className,
+            isUpdating && 'opacity-70'
+          )}
+          aria-label="Change spec priority"
+        >
+          <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>
+          {PRIORITIES.map((p) => {
+            const cfg = priorityConfig[p];
+            const ItemIcon = cfg.icon;
+            return (
+              <SelectItem key={p} value={p} 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/project-switcher.tsx

@@ -7,7 +7,7 @@
 
 import { useState } from 'react';
 import { useRouter, usePathname } from 'next/navigation';
-import { Check, ChevronsUpDown, Plus, FolderOpen, Star, Settings } from 'lucide-react';
+import { Check, ChevronsUpDown, Plus, Star, Settings, Loader2 } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 import {
@@ -24,6 +24,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@/components/ui/popover';
+import { Skeleton } from '@/components/ui/skeleton';
 import { useProject } from '@/contexts/project-context';
 import { CreateProjectDialog } from '@/components/create-project-dialog';
 
@@ -39,25 +40,49 @@ export function ProjectSwitcher({ collapsed }: ProjectSwitcherProps) {
     mode,
     currentProject,
     projects,
+    isLoading,
   } = useProject();
   
   const [open, setOpen] = useState(false);
   const [showNewProjectDialog, setShowNewProjectDialog] = useState(false);
+  const [isSwitching, setIsSwitching] = useState(false);
+
+  // Show skeleton during initial load
+  if (isLoading) {
+    return (
+      <Skeleton className={cn(
+        "w-full",
+        collapsed ? "h-9 w-9" : "h-10"
+      )} />
+    );
+  }
 
   if (mode !== 'multi-project') {
     return null;
   }
 
   const handleProjectSelect = (projectId: string) => {
+    if (projectId === currentProject?.id) {
+      setOpen(false);
+      return;
+    }
+    
+    setIsSwitching(true);
     setOpen(false);
     
     // Extract the path after /projects/{currentProjectId}
     // Pattern: /projects/{projectId} or /projects/{projectId}/... 
     const projectPathMatch = pathname.match(/^\/projects\/[^/]+(\/.*)?$/);
-    const subPath = projectPathMatch?.[1] || ''; // Empty string = project home page
+    let subPath = projectPathMatch?.[1] || ''; // Empty string = project home page
+    
+    // If on a spec detail page (/specs/{specId}), redirect to specs list instead
+    // because the same spec ID might not exist in the other project
+    if (subPath.match(/^\/specs\/[^/]+$/)) {
+      subPath = '/specs';
+    }
     
     // Full page navigation - ensures clean state for new project
-    window.location.href = `/projects/${projectId}${subPath}`;
+    window.location.assign(`/projects/${projectId}${subPath}`);
   };
 
   const sortedProjects = [...projects].sort((a, b) => {
@@ -77,19 +102,35 @@ export function ProjectSwitcher({ collapsed }: ProjectSwitcherProps) {
             variant="outline"
             role="combobox"
             aria-expanded={open}
+            disabled={isSwitching}
             className={cn(
-              "w-full justify-between",
-              collapsed ? "h-9 w-9 p-0 justify-center" : "px-3"
+              "w-full justify-between transition-opacity",
+              collapsed ? "h-9 w-9 p-0 justify-center" : "px-3",
+              isSwitching && "opacity-70"
             )}
           >
             {collapsed ? (
-              <FolderOpen className="h-4 w-4" />
+              isSwitching ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <div
+                  className="h-4 w-4 rounded-full border"
+                  style={{ backgroundColor: currentProject?.color || 'hsl(var(--primary))' }}
+                />
+              )
             ) : (
               <>
                 <div className="flex items-center gap-2 truncate">
-                  <FolderOpen className="h-4 w-4 shrink-0 opacity-50" />
+                  {isSwitching ? (
+                    <Loader2 className="h-4 w-4 shrink-0 animate-spin" />
+                  ) : (
+                    <div
+                      className="h-4 w-4 rounded-full border shrink-0"
+                      style={{ backgroundColor: currentProject?.color || 'hsl(var(--primary))' }}
+                    />
+                  )}
                   <span className="truncate">
-                    {currentProject?.name || "Select project..."}
+                    {isSwitching ? "Switching..." : (currentProject?.name || "Select project...")}
                   </span>
                 </div>
                 <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
@@ -118,6 +159,10 @@ export function ProjectSwitcher({ collapsed }: ProjectSwitcherProps) {
                             : "opacity-0"
                         )}
                       />
+                      <div
+                        className="h-3 w-3 rounded-full shrink-0"
+                        style={{ backgroundColor: project.color || 'hsl(var(--primary))' }}
+                      />
                       <span className="truncate flex-1">{project.name}</span>
                       {project.favorite && (
                         <Star className="h-3 w-3 fill-yellow-500 text-yellow-500" />

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

@@ -17,6 +17,9 @@ import { Button } from '@/components/ui/button';
 import { SpecTimeline } from '@/components/spec-timeline';
 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 { MarkdownLink } from '@/components/markdown-link';
 import { TableOfContents, TableOfContentsSidebar } from '@/components/table-of-contents';
 import { BackToTop } from '@/components/back-to-top';
@@ -290,26 +293,23 @@ export function SpecDetailClient({ initialSpec, initialSubSpec, isFocusMode = fa
               
               {/* 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'} />
+                <StatusEditor
+                  specId={spec.specNumber?.toString() || spec.id}
+                  currentStatus={spec.status || 'planned'}
+                  projectId={projectId}
+                />
+                <PriorityEditor
+                  specId={spec.specNumber?.toString() || spec.id}
+                  currentPriority={spec.priority || 'medium'}
+                  projectId={projectId}
+                />
                 
-                {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>
-                  </>
-                )}
+                <div className="h-4 w-px bg-border mx-1 hidden sm:block" />
+                <TagsEditor
+                  specId={spec.specNumber?.toString() || spec.id}
+                  currentTags={tags}
+                  projectId={projectId}
+                />
               </div>
 
               {/* Line 3: Small metadata row */}
@@ -387,7 +387,10 @@ export function SpecDetailClient({ initialSpec, initialSubSpec, isFocusMode = fa
                       <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}`}
+                          href={projectId 
+                            ? `/projects/${projectId}/dependencies?spec=${spec.specNumber || spec.id}`
+                            : `/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)}
                         >

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>
+  );
+}