@sureshdsk/devflow-mcp 3.0.0 → 3.0.1

package/.next/standalone/src/components/specs/spec-modal.tsx

@@ -1,15 +1,15 @@
-"use client";
+'use client';
 
-import { useState, useEffect } from "react";
-import { X, FileText, ChevronRight, CheckCircle2, Circle, Clock, Lock } from "lucide-react";
-import { ArtifactEditor } from "./artifact-editor";
-import { ArtifactDagStatus } from "./artifact-dag-status";
-import { Button } from "@/components/ui/button";
-import { MarkdownPreview } from "@/components/markdown-preview";
+import { useState } from 'react';
+import { X, FileText, ChevronRight, CheckCircle2, Circle, Clock, Lock } from 'lucide-react';
+import { ArtifactEditor } from './artifact-editor';
+import { ArtifactDagStatus } from './artifact-dag-status';
+import { Button } from '@/components/ui/button';
+import { useSpec, useInvalidate } from '@/hooks/use-queries';
 
 interface ArtifactStatus {
   id: string;
-  state: "blocked" | "ready" | "in_review" | "in_progress" | "done";
+  state: 'blocked' | 'ready' | 'in_review' | 'in_progress' | 'done';
   description: string;
   requires: string[];
   fileExists: boolean;
@@ -40,38 +40,48 @@ interface SpecModalProps {
 }
 
 const STATE_ICON: Record<string, React.ReactNode> = {
-  blocked:     <Lock className="h-3 w-3 text-gray-400 flex-shrink-0" />,
-  ready:       <Circle className="h-3 w-3 text-blue-500 flex-shrink-0" />,
-  in_review:   <Clock className="h-3 w-3 text-yellow-500 flex-shrink-0" />,
+  blocked: <Lock className="h-3 w-3 text-gray-400 flex-shrink-0" />,
+  ready: <Circle className="h-3 w-3 text-blue-500 flex-shrink-0" />,
+  in_review: <Clock className="h-3 w-3 text-yellow-500 flex-shrink-0" />,
   in_progress: <Clock className="h-3 w-3 text-orange-500 flex-shrink-0" />,
-  done:        <CheckCircle2 className="h-3 w-3 text-green-600 flex-shrink-0" />,
+  done: <CheckCircle2 className="h-3 w-3 text-green-600 flex-shrink-0" />,
 };
 
 const TASK_STATUS_COLORS: Record<string, string> = {
-  backlog:     "bg-gray-100 border-gray-400 text-gray-600",
-  todo:        "bg-blue-100 border-blue-400 text-blue-700",
-  in_progress: "bg-orange-100 border-orange-400 text-orange-700",
-  interrupted: "bg-red-100 border-red-400 text-red-700",
-  done:        "bg-green-100 border-green-500 text-green-700",
+  backlog: 'bg-gray-100 border-gray-400 text-gray-600',
+  todo: 'bg-blue-100 border-blue-400 text-blue-700',
+  in_progress: 'bg-orange-100 border-orange-400 text-orange-700',
+  interrupted: 'bg-red-100 border-red-400 text-red-700',
+  done: 'bg-green-100 border-green-500 text-green-700',
 };
 
 const PRIORITY_COLORS: Record<string, string> = {
-  urgent: "text-red-600",
-  high:   "text-orange-500",
-  medium: "text-gray-500",
-  low:    "text-gray-400",
+  urgent: 'text-red-600',
+  high: 'text-orange-500',
+  medium: 'text-gray-500',
+  low: 'text-gray-400',
 };
 
-function DevelopmentPanel({ tasks, status }: { tasks: PromotedTask[]; status: ArtifactStatus | undefined }) {
+function DevelopmentPanel({
+  tasks,
+  status,
+}: {
+  tasks: PromotedTask[];
+  status: ArtifactStatus | undefined;
+}) {
   const total = tasks.length;
-  const done = tasks.filter((t) => t.status === "done").length;
-  const inProgress = tasks.filter((t) => t.status === "in_progress").length;
+  const done = tasks.filter((t) => t.status === 'done').length;
+  const inProgress = tasks.filter((t) => t.status === 'in_progress').length;
 
-  if (status?.state === "blocked") {
+  if (status?.state === 'blocked') {
     return (
       <div className="p-6 bg-gray-100 border-4 border-gray-300 text-center">
-        <p className="font-bold text-gray-600 uppercase">Blocked — approve and promote tasks first</p>
-        <p className="text-sm text-gray-500 mt-1">Approve all artifacts, then click &ldquo;Promote to Tasks&rdquo;</p>
+        <p className="font-bold text-gray-600 uppercase">
+          Blocked — approve and promote tasks first
+        </p>
+        <p className="text-sm text-gray-500 mt-1">
+          Approve all artifacts, then click &ldquo;Promote to Tasks&rdquo;
+        </p>
       </div>
     );
   }
@@ -79,7 +89,9 @@ function DevelopmentPanel({ tasks, status }: { tasks: PromotedTask[]; status: Ar
     return (
       <div className="p-6 bg-blue-50 border-4 border-blue-300 text-center">
         <p className="font-bold text-blue-700 uppercase">Ready to promote</p>
-        <p className="text-sm text-blue-600 mt-1">All artifacts approved. Promote tasks to start development.</p>
+        <p className="text-sm text-blue-600 mt-1">
+          All artifacts approved. Promote tasks to start development.
+        </p>
       </div>
     );
   }
@@ -87,30 +99,44 @@ function DevelopmentPanel({ tasks, status }: { tasks: PromotedTask[]; status: Ar
     <div className="flex flex-col gap-4">
       <div className="flex items-center gap-3">
         <div className="flex-1 h-3 bg-gray-200 border-2 border-black overflow-hidden">
-          <div className="h-full bg-green-500 transition-all" style={{ width: `${total > 0 ? (done / total) * 100 : 0}%` }} />
+          <div
+            className="h-full bg-green-500 transition-all"
+            style={{ width: `${total > 0 ? (done / total) * 100 : 0}%` }}
+          />
         </div>
         <span className="font-mono text-sm font-bold whitespace-nowrap">
           {done}/{total} done
-          {inProgress > 0 && <span className="text-orange-600 ml-2">· {inProgress} in progress</span>}
+          {inProgress > 0 && (
+            <span className="text-orange-600 ml-2">· {inProgress} in progress</span>
+          )}
         </span>
       </div>
       <div className="flex flex-col gap-2">
         {tasks.map((task) => (
           <div key={task.id} className="flex items-center gap-3 p-3 border-4 border-black bg-white">
-            <span className={`text-lg ${task.status === "done" ? "opacity-100" : "opacity-30"}`}>
-              {task.status === "done" ? "✓" : task.status === "in_progress" ? "⟳" : "○"}
+            <span className={`text-lg ${task.status === 'done' ? 'opacity-100' : 'opacity-30'}`}>
+              {task.status === 'done' ? '✓' : task.status === 'in_progress' ? '⟳' : '○'}
             </span>
-            <span className={`flex-1 font-bold text-sm ${task.status === "done" ? "line-through text-gray-400" : ""}`}>
+            <span
+              className={`flex-1 font-bold text-sm ${task.status === 'done' ? 'line-through text-gray-400' : ''}`}
+            >
               {task.title}
             </span>
-            <span className={`text-xs font-mono uppercase font-bold ${PRIORITY_COLORS[task.priority] || ""}`}>
+            <span
+              className={`text-xs font-mono uppercase font-bold ${PRIORITY_COLORS[task.priority] || ''}`}
+            >
               {task.priority}
             </span>
-            <span className={`px-2 py-0.5 border-2 text-xs font-bold uppercase ${TASK_STATUS_COLORS[task.status] || ""}`}>
-              {task.status.replace("_", " ")}
+            <span
+              className={`px-2 py-0.5 border-2 text-xs font-bold uppercase ${TASK_STATUS_COLORS[task.status] || ''}`}
+            >
+              {task.status.replace('_', ' ')}
             </span>
             {task.assignedAgent && (
-              <span className="text-xs font-mono text-gray-500 truncate max-w-[120px]" title={task.assignedAgent}>
+              <span
+                className="text-xs font-mono text-gray-500 truncate max-w-[120px]"
+                title={task.assignedAgent}
+              >
                 @{task.assignedAgent}
               </span>
             )}
@@ -122,33 +148,32 @@ function DevelopmentPanel({ tasks, status }: { tasks: PromotedTask[]; status: Ar
 }
 
 export function SpecModal({ specName, onClose }: SpecModalProps) {
-  const [spec, setSpec] = useState<SpecDetail | null>(null);
+  const { data: specData, isLoading } = useSpec(specName);
+  const { invalidateSpec, invalidateSpecs, invalidateTasks } = useInvalidate();
   const [activeNode, setActiveNode] = useState<string | null>(null);
   const [isPromoting, setIsPromoting] = useState(false);
 
-  async function load() {
-    const r = await fetch(`/api/specs/${specName}`);
-    const data = await r.json();
-    setSpec(data);
-    // Auto-select first artifact
-    if (!activeNode && data.statuses?.length) {
-      setActiveNode(data.statuses[0].id);
-    }
+  const spec = specData as SpecDetail | undefined;
+
+  // Auto-select first artifact when spec loads
+  if (spec && !activeNode && spec.statuses?.length) {
+    setActiveNode(spec.statuses[0].id);
   }
 
-  useEffect(() => {
-    load();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [specName]);
+  function handleRefresh() {
+    invalidateSpec(specName);
+    invalidateSpecs();
+  }
 
   async function handlePromote() {
     setIsPromoting(true);
     try {
-      const r = await fetch(`/api/specs/${specName}/promote`, { method: "POST" });
+      const r = await fetch(`/api/specs/${specName}/promote`, { method: 'POST' });
       const data = await r.json();
       if (r.ok) {
         alert(`Promoted ${data.promoted} tasks to Kanban board!`);
-        load();
+        handleRefresh();
+        invalidateTasks();
       } else {
         alert(`Error: ${data.error}`);
       }
@@ -157,21 +182,24 @@ export function SpecModal({ specName, onClose }: SpecModalProps) {
     }
   }
 
-  const artifactStatuses = spec?.statuses.filter((s) => s.id !== "development") ?? [];
-  const developmentStatus = spec?.statuses.find((s) => s.id === "development");
-  const allArtifactsApproved = artifactStatuses.every((s) => s.state === "done");
+  const artifactStatuses = spec?.statuses.filter((s) => s.id !== 'development') ?? [];
+  const developmentStatus = spec?.statuses.find((s) => s.id === 'development');
+  const allArtifactsApproved = artifactStatuses.every((s) => s.state === 'done');
   const activeStatus = spec?.statuses.find((s) => s.id === activeNode);
-  const isDevelopment = activeNode === "development";
+  const isDevelopment = activeNode === 'development';
 
   return (
     // Backdrop
     <div
       className="fixed inset-0 z-50 flex items-center justify-center bg-black/60"
-      onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
     >
       {/* Modal */}
-      <div className="bg-white border-4 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] flex flex-col"
-        style={{ width: "min(1300px, 96vw)", height: "min(920px, 94vh)" }}
+      <div
+        className="bg-white border-4 border-black shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] flex flex-col"
+        style={{ width: 'min(1300px, 96vw)', height: 'min(920px, 94vh)' }}
       >
         {/* Header */}
         <div className="flex items-center justify-between px-6 py-4 border-b-4 border-black bg-white flex-shrink-0">
@@ -200,12 +228,16 @@ export function SpecModal({ specName, onClose }: SpecModalProps) {
         {allArtifactsApproved && spec?.tasks.length === 0 && (
           <div className="px-6 py-3 border-b-4 border-green-600 bg-green-100 flex-shrink-0 flex items-center justify-between">
             <p className="font-black text-green-800 uppercase text-sm">All artifacts approved!</p>
-            <Button onClick={handlePromote} disabled={isPromoting} className="bg-green-600 hover:bg-green-700 text-white">
-              {isPromoting ? "Promoting..." : "Promote to Tasks"}
+            <Button
+              onClick={handlePromote}
+              disabled={isPromoting}
+              className="bg-green-600 hover:bg-green-700 text-white"
+            >
+              {isPromoting ? 'Promoting...' : 'Promote to Tasks'}
             </Button>
           </div>
         )}
-        {developmentStatus?.state === "done" && (
+        {developmentStatus?.state === 'done' && (
           <div className="px-6 py-3 border-b-4 border-green-600 bg-green-100 flex-shrink-0">
             <p className="font-black text-green-800 uppercase text-sm">
               ✓ Spec complete — all {spec?.tasks.length} tasks done
@@ -215,7 +247,6 @@ export function SpecModal({ specName, onClose }: SpecModalProps) {
 
         {/* Body: tree + editor */}
         <div className="flex flex-1 min-h-0">
-
           {/* File tree */}
           <div className="w-60 border-r-4 border-black bg-white flex flex-col flex-shrink-0 overflow-y-auto">
             <div className="px-3 py-2 border-b-2 border-gray-200">
@@ -232,36 +263,42 @@ export function SpecModal({ specName, onClose }: SpecModalProps) {
                       key={s.id}
                       onClick={() => setActiveNode(s.id)}
                       className={`w-full flex items-center gap-2 px-3 py-2 text-left transition-colors group ${
-                        activeNode === s.id
-                          ? "bg-black text-white"
-                          : "hover:bg-gray-100"
+                        activeNode === s.id ? 'bg-black text-white' : 'hover:bg-gray-100'
                       }`}
                     >
-                      <ChevronRight className={`h-3 w-3 flex-shrink-0 ${activeNode === s.id ? "text-white" : "text-gray-300"}`} />
-                      <FileText className={`h-3.5 w-3.5 flex-shrink-0 ${activeNode === s.id ? "text-white" : "text-gray-400"}`} />
+                      <ChevronRight
+                        className={`h-3 w-3 flex-shrink-0 ${activeNode === s.id ? 'text-white' : 'text-gray-300'}`}
+                      />
+                      <FileText
+                        className={`h-3.5 w-3.5 flex-shrink-0 ${activeNode === s.id ? 'text-white' : 'text-gray-400'}`}
+                      />
                       <span className="font-mono text-xs font-bold flex-1 truncate">{s.id}.md</span>
-                      <span className={activeNode === s.id ? "text-white opacity-70" : ""}>
+                      <span className={activeNode === s.id ? 'text-white opacity-70' : ''}>
                         {STATE_ICON[s.state]}
                       </span>
                     </button>
                   ))}
 
                   {/* development entry — only shown after tasks approved */}
-                  {(allArtifactsApproved || (spec.tasks.length > 0)) && (
+                  {(allArtifactsApproved || spec.tasks.length > 0) && (
                     <>
                       <div className="mx-3 my-1 border-t border-dashed border-gray-200" />
                       <button
-                        onClick={() => setActiveNode("development")}
+                        onClick={() => setActiveNode('development')}
                         className={`w-full flex items-center gap-2 px-3 py-2 text-left transition-colors ${
-                          activeNode === "development"
-                            ? "bg-black text-white"
-                            : "hover:bg-gray-100"
+                          activeNode === 'development' ? 'bg-black text-white' : 'hover:bg-gray-100'
                         }`}
                       >
-                        <ChevronRight className={`h-3 w-3 flex-shrink-0 ${activeNode === "development" ? "text-white" : "text-gray-300"}`} />
-                        <FileText className={`h-3.5 w-3.5 flex-shrink-0 ${activeNode === "development" ? "text-white" : "text-gray-400"}`} />
+                        <ChevronRight
+                          className={`h-3 w-3 flex-shrink-0 ${activeNode === 'development' ? 'text-white' : 'text-gray-300'}`}
+                        />
+                        <FileText
+                          className={`h-3.5 w-3.5 flex-shrink-0 ${activeNode === 'development' ? 'text-white' : 'text-gray-400'}`}
+                        />
                         <span className="font-mono text-xs font-bold flex-1">development</span>
-                        <span className={activeNode === "development" ? "text-white opacity-70" : ""}>
+                        <span
+                          className={activeNode === 'development' ? 'text-white opacity-70' : ''}
+                        >
                           {developmentStatus ? STATE_ICON[developmentStatus.state] : null}
                         </span>
                       </button>
@@ -276,21 +313,20 @@ export function SpecModal({ specName, onClose }: SpecModalProps) {
 
           {/* Editor area */}
           <div className="flex-1 flex flex-col min-h-0 p-6">
-            {!spec ? (
+            {isLoading ? (
               <div className="flex items-center justify-center h-full">
                 <span className="text-gray-400 font-mono text-sm">Loading...</span>
               </div>
-            ) : !activeNode ? null
-            : isDevelopment ? (
-              <DevelopmentPanel tasks={spec.tasks} status={developmentStatus} />
+            ) : !activeNode ? null : isDevelopment ? (
+              <DevelopmentPanel tasks={spec?.tasks ?? []} status={developmentStatus} />
             ) : activeStatus ? (
               <ArtifactEditor
                 key={activeNode}
                 specName={specName}
                 artifactType={activeNode}
-                content={spec.artifacts[activeNode] ?? null}
+                content={spec?.artifacts[activeNode] ?? null}
                 status={activeStatus}
-                onSave={load}
+                onSave={handleRefresh}
                 defaultMode="preview"
               />
             ) : null}

package/.next/standalone/src/components/task-card.tsx

@@ -1,15 +1,15 @@
-"use client";
+'use client';
 
-import { useState } from "react";
-import { useSortable } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import { Task } from "@/db/schema";
-import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
-import { Badge } from "./ui/badge";
-import { Button } from "./ui/button";
-import { cn } from "@/lib/utils";
-import { GripVertical, User, FileText, Trash2, AlertTriangle } from "lucide-react";
-import { TaskDialog } from "./task-dialog";
+import { useState } from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { Task } from '@/db/schema';
+import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
+import { Badge } from './ui/badge';
+import { Button } from './ui/button';
+import { cn } from '@/lib/utils';
+import { GripVertical, User, FileText, Trash2, AlertTriangle } from 'lucide-react';
+import { TaskDialog } from './task-dialog';
 
 interface TaskCardProps {
   task: Task;
@@ -19,22 +19,17 @@ interface TaskCardProps {
 }
 
 const priorityColors = {
-  low: "bg-[--color-primary] text-black",
-  medium: "bg-[--color-secondary] text-black",
-  high: "bg-orange-300 text-black",
-  urgent: "bg-[--color-accent] text-black",
+  low: 'bg-[--color-primary] text-black',
+  medium: 'bg-[--color-secondary] text-black',
+  high: 'bg-orange-300 text-black',
+  urgent: 'bg-[--color-accent] text-black',
 };
 
 export function TaskCard({ task, onRefresh }: TaskCardProps) {
   const [isDialogOpen, setIsDialogOpen] = useState(false);
-  const {
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({ id: task.id });
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: task.id,
+  });
 
   const style = {
     transform: CSS.Transform.toString(transform),
@@ -43,12 +38,12 @@ export function TaskCard({ task, onRefresh }: TaskCardProps) {
 
   async function handleDelete(e: React.MouseEvent) {
     e.stopPropagation();
-    if (confirm("Are you sure you want to delete this task?")) {
+    if (confirm('Are you sure you want to delete this task?')) {
       try {
-        await fetch(`/api/tasks/${task.id}`, { method: "DELETE" });
+        await fetch(`/api/tasks/${task.id}`, { method: 'DELETE' });
         onRefresh();
       } catch (error) {
-        console.error("Failed to delete task:", error);
+        console.error('Failed to delete task:', error);
       }
     }
   }
@@ -58,24 +53,19 @@ export function TaskCard({ task, onRefresh }: TaskCardProps) {
       <div
         ref={setNodeRef}
         style={style}
-        className={cn(
-          "cursor-pointer transition-opacity",
-          isDragging && "opacity-50"
-        )}
+        className={cn('cursor-pointer transition-opacity', isDragging && 'opacity-50')}
       >
         <Card
           className={cn(
-            "hover:translate-x-0.5 hover:translate-y-0.5 transition-transform cursor-pointer",
-            task.status === "interrupted" && "border-amber-500 bg-amber-50"
+            'hover:translate-x-0.5 hover:translate-y-0.5 transition-transform cursor-pointer',
+            task.status === 'interrupted' && 'border-amber-500 bg-amber-50',
           )}
           onClick={() => setIsDialogOpen(true)}
         >
           <CardHeader className="pb-3">
             <div className="flex items-start justify-between gap-2">
               <div className="flex-1 min-w-0">
-                <CardTitle className="text-sm line-clamp-2">
-                  {task.title}
-                </CardTitle>
+                <CardTitle className="text-sm line-clamp-2">{task.title}</CardTitle>
               </div>
               <div className="flex items-center gap-1">
                 <Button
@@ -102,8 +92,11 @@ export function TaskCard({ task, onRefresh }: TaskCardProps) {
 
           <CardContent className="space-y-2">
             <div className="flex flex-wrap gap-2">
-              {task.status === "interrupted" && (
-                <Badge variant="outline" className="text-xs gap-1 border-amber-500 text-amber-700 bg-amber-50">
+              {task.status === 'interrupted' && (
+                <Badge
+                  variant="outline"
+                  className="text-xs gap-1 border-amber-500 text-amber-700 bg-amber-50"
+                >
                   <AlertTriangle className="h-3 w-3" />
                   Interrupted
                 </Badge>
@@ -117,7 +110,10 @@ export function TaskCard({ task, onRefresh }: TaskCardProps) {
 
               <Badge
                 variant="outline"
-                className={cn("text-xs", priorityColors[task.priority as keyof typeof priorityColors])}
+                className={cn(
+                  'text-xs',
+                  priorityColors[task.priority as keyof typeof priorityColors],
+                )}
               >
                 {task.priority}
               </Badge>

package/.next/standalone/src/components/task-dialog.tsx

@@ -1,17 +1,12 @@
-"use client";
+'use client';
 
-import { useState, useEffect } from "react";
-import { Task } from "@/db/schema";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from "./ui/dialog";
-import { Button } from "./ui/button";
-import { Badge } from "./ui/badge";
-import { User, Clock } from "lucide-react";
-import { MarkdownPreview } from "./markdown-preview";
+import { useState, useEffect } from 'react';
+import { Task } from '@/db/schema';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from './ui/dialog';
+import { Button } from './ui/button';
+import { Badge } from './ui/badge';
+import { User, Clock } from 'lucide-react';
+import { MarkdownPreview } from './markdown-preview';
 
 interface TaskDialogProps {
   task: Task;
@@ -52,14 +47,14 @@ export function TaskDialog({ task, open, onOpenChange, onRefresh }: TaskDialogPr
     setIsSaving(true);
     try {
       await fetch(`/api/tasks/${task.id}`, {
-        method: "PATCH",
-        headers: { "Content-Type": "application/json" },
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ title, priority, status }),
       });
       onRefresh();
       onOpenChange(false);
     } catch (error) {
-      console.error("Failed to update task:", error);
+      console.error('Failed to update task:', error);
     } finally {
       setIsSaving(false);
     }
@@ -75,9 +70,7 @@ export function TaskDialog({ task, open, onOpenChange, onRefresh }: TaskDialogPr
         <div className="space-y-4">
           {/* Title */}
           <div>
-            <label className="text-xs font-bold uppercase tracking-wide mb-2 block">
-              Title
-            </label>
+            <label className="text-xs font-bold uppercase tracking-wide mb-2 block">Title</label>
             <input
               type="text"
               value={title}
@@ -106,9 +99,7 @@ export function TaskDialog({ task, open, onOpenChange, onRefresh }: TaskDialogPr
             </div>
 
             <div>
-              <label className="text-xs font-bold uppercase tracking-wide mb-2 block">
-                Status
-              </label>
+              <label className="text-xs font-bold uppercase tracking-wide mb-2 block">Status</label>
               <select
                 value={status}
                 onChange={(e) => setStatus(e.target.value)}
@@ -126,9 +117,7 @@ export function TaskDialog({ task, open, onOpenChange, onRefresh }: TaskDialogPr
           {/* Spec Name */}
           {task.specName && (
             <div>
-              <label className="text-xs font-bold uppercase tracking-wide mb-2 block">
-                Spec
-              </label>
+              <label className="text-xs font-bold uppercase tracking-wide mb-2 block">Spec</label>
               <div className="px-4 py-2 border-2 border-black bg-gray-50 font-mono text-sm">
                 {task.specName}
               </div>
@@ -169,15 +158,11 @@ export function TaskDialog({ task, open, onOpenChange, onRefresh }: TaskDialogPr
 
           {/* Actions */}
           <div className="flex justify-end gap-3 pt-4 border-t-3 border-black">
-            <Button
-              variant="outline"
-              onClick={() => onOpenChange(false)}
-              disabled={isSaving}
-            >
+            <Button variant="outline" onClick={() => onOpenChange(false)} disabled={isSaving}>
               Cancel
             </Button>
             <Button onClick={handleSave} disabled={isSaving}>
-              {isSaving ? "Saving..." : "Save Changes"}
+              {isSaving ? 'Saving...' : 'Save Changes'}
             </Button>
           </div>
         </div>

package/.next/standalone/src/components/ui/badge.tsx

@@ -1,35 +1,29 @@
-import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "@/lib/utils";
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
 
 const badgeVariants = cva(
-  "inline-flex items-center border-2 border-black px-3 py-1 text-xs font-bold uppercase tracking-wide shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]",
+  'inline-flex items-center border-2 border-black px-3 py-1 text-xs font-bold uppercase tracking-wide shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]',
   {
     variants: {
       variant: {
-        default:
-          "bg-[--color-primary] text-black",
-        secondary:
-          "bg-[--color-secondary] text-black",
-        destructive:
-          "bg-[--color-accent] text-black",
-        outline: "bg-white text-black",
+        default: 'bg-[--color-primary] text-black',
+        secondary: 'bg-[--color-secondary] text-black',
+        destructive: 'bg-[--color-accent] text-black',
+        outline: 'bg-white text-black',
       },
     },
     defaultVariants: {
-      variant: "default",
+      variant: 'default',
     },
-  }
+  },
 );
 
 export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
+  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
 
 function Badge({ className, variant, ...props }: BadgeProps) {
-  return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  );
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
 }
 
 export { Badge, badgeVariants };