@sureshdsk/devflow-mcp 3.0.0 → 3.0.2

package/.next/standalone/src/components/specs/artifact-editor.tsx

@@ -1,12 +1,13 @@
-"use client";
+'use client';
 
-import { useState } from "react";
-import { Button } from "@/components/ui/button";
-import { MarkdownPreview } from "@/components/markdown-preview";
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { MarkdownPreview } from '@/components/markdown-preview';
+import { useArtifact, 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';
   approved: boolean;
   approvedAt?: string;
   approvedBy?: string;
@@ -19,13 +20,13 @@ interface ArtifactEditorProps {
   content: string | null;
   status: ArtifactStatus;
   onSave: () => void;
-  defaultMode?: "edit" | "preview";
+  defaultMode?: 'edit' | 'preview';
 }
 
 function relativeTime(iso: string): string {
   const diff = Date.now() - new Date(iso).getTime();
   const mins = Math.floor(diff / 60000);
-  if (mins < 1) return "just now";
+  if (mins < 1) return 'just now';
   if (mins < 60) return `${mins}m ago`;
   const hours = Math.floor(mins / 60);
   if (hours < 24) return `${hours}h ago`;
@@ -42,21 +43,40 @@ export function ArtifactEditor({
   content,
   status,
   onSave,
-  defaultMode = "edit",
+  defaultMode = 'edit',
 }: ArtifactEditorProps) {
-  const [editContent, setEditContent] = useState(content || "");
+  const { data: artifactData, isLoading } = useArtifact(specName, artifactType);
+  const { invalidateArtifact, invalidateSpec, invalidateSpecs } = useInvalidate();
+  const [editContent, setEditContent] = useState(content || '');
   const [isSaving, setIsSaving] = useState(false);
   const [isApproving, setIsApproving] = useState(false);
-  const [preview, setPreview] = useState(defaultMode === "preview");
+  const [preview, setPreview] = useState(defaultMode === 'preview');
+  const [hasLocalEdits, setHasLocalEdits] = useState(false);
+
+  // Sync from query data when it changes, but only if user hasn't edited locally
+  useEffect(() => {
+    if (artifactData?.content != null && !hasLocalEdits) {
+      setEditContent(artifactData.content);
+    }
+  }, [artifactData, hasLocalEdits]);
+
+  function handleContentChange(value: string) {
+    setEditContent(value);
+    setHasLocalEdits(true);
+  }
 
   async function handleSave() {
     setIsSaving(true);
     try {
       await fetch(`/api/specs/${specName}/artifacts/${artifactType}`, {
-        method: "PUT",
-        headers: { "Content-Type": "application/json" },
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ content: editContent }),
       });
+      setHasLocalEdits(false);
+      invalidateArtifact(specName, artifactType);
+      invalidateSpec(specName);
+      invalidateSpecs();
       onSave();
     } finally {
       setIsSaving(false);
@@ -67,25 +87,34 @@ export function ArtifactEditor({
     setIsApproving(true);
     try {
       await fetch(`/api/specs/${specName}/artifacts/${artifactType}/approve`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ approvedBy: "human" }),
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ approvedBy: 'human' }),
       });
+      invalidateArtifact(specName, artifactType);
+      invalidateSpec(specName);
+      invalidateSpecs();
       onSave();
     } finally {
       setIsApproving(false);
     }
   }
 
-  if (status.state === "blocked") {
+  if (isLoading) {
+    return (
+      <div className="p-6 bg-gray-50 border-4 border-gray-200 text-center">
+        <p className="font-bold text-gray-500 uppercase">Loading...</p>
+      </div>
+    );
+  }
+
+  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 required predecessors first
         </p>
-        <p className="text-sm text-gray-500 mt-1">
-          Required: {status.requires?.join(", ")}
-        </p>
+        <p className="text-sm text-gray-500 mt-1">Required: {status.requires?.join(', ')}</p>
       </div>
     );
   }
@@ -98,7 +127,7 @@ export function ArtifactEditor({
           <button
             onClick={() => setPreview(false)}
             className={`px-3 py-1.5 text-sm font-bold uppercase tracking-wide transition-colors ${
-              !preview ? "bg-black text-white" : "bg-white text-black hover:bg-gray-100"
+              !preview ? 'bg-black text-white' : 'bg-white text-black hover:bg-gray-100'
             }`}
           >
             Edit
@@ -106,7 +135,7 @@ export function ArtifactEditor({
           <button
             onClick={() => setPreview(true)}
             className={`px-3 py-1.5 text-sm font-bold uppercase tracking-wide border-l-4 border-black transition-colors ${
-              preview ? "bg-black text-white" : "bg-white text-black hover:bg-gray-100"
+              preview ? 'bg-black text-white' : 'bg-white text-black hover:bg-gray-100'
             }`}
           >
             Preview
@@ -114,22 +143,22 @@ export function ArtifactEditor({
         </div>
 
         <div className="flex items-center gap-2">
-          {status.state === "done" && status.approvedAt && (
+          {status.state === 'done' && status.approvedAt && (
             <span className="text-xs font-mono text-green-700 bg-green-100 border-2 border-green-600 px-2 py-1">
               ✓ approved {relativeTime(status.approvedAt)}
             </span>
           )}
           <Button onClick={handleSave} disabled={isSaving} size="sm">
-            {isSaving ? "Saving..." : "Save"}
+            {isSaving ? 'Saving...' : 'Save'}
           </Button>
-          {status.state === "in_review" && (
+          {status.state === 'in_review' && (
             <Button
               onClick={handleApprove}
               disabled={isApproving}
               size="sm"
               className="bg-green-600 hover:bg-green-700 text-white border-black"
             >
-              {isApproving ? "Approving..." : "Approve"}
+              {isApproving ? 'Approving...' : 'Approve'}
             </Button>
           )}
         </div>
@@ -143,7 +172,7 @@ export function ArtifactEditor({
         <textarea
           className="flex-1 p-4 bg-white border-4 border-black font-mono text-sm resize-none focus:outline-none focus:ring-2 focus:ring-black"
           value={editContent}
-          onChange={(e) => setEditContent(e.target.value)}
+          onChange={(e) => handleContentChange(e.target.value)}
           placeholder={`Write your ${artifactType} here...`}
         />
       )}

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

@@ -1,13 +1,13 @@
-"use client";
+'use client';
 
-import { useState } from "react";
-import { ArtifactDagStatus } from "./artifact-dag-status";
-import { ArtifactEditor } from "./artifact-editor";
-import { Button } from "@/components/ui/button";
+import { useState } from 'react';
+import { ArtifactDagStatus } from './artifact-dag-status';
+import { ArtifactEditor } from './artifact-editor';
+import { Button } from '@/components/ui/button';
 
 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;
@@ -34,18 +34,18 @@ interface SpecDetailProps {
 }
 
 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',
 };
 
 export function SpecDetail({
@@ -56,18 +56,18 @@ export function SpecDetail({
   tasks,
   onRefresh,
 }: SpecDetailProps) {
-  const [activeTab, setActiveTab] = useState(statuses[0]?.id || "proposal");
+  const [activeTab, setActiveTab] = useState(statuses[0]?.id || 'proposal');
   const [isPromoting, setIsPromoting] = useState(false);
 
-  const artifactStatuses = statuses.filter((s) => s.id !== "development");
-  const allArtifactsApproved = artifactStatuses.every((s) => s.state === "done");
-  const developmentStatus = statuses.find((s) => s.id === "development");
+  const artifactStatuses = statuses.filter((s) => s.id !== 'development');
+  const allArtifactsApproved = artifactStatuses.every((s) => s.state === 'done');
+  const developmentStatus = statuses.find((s) => s.id === 'development');
 
   async function handlePromote() {
     setIsPromoting(true);
     try {
       const response = await fetch(`/api/specs/${specName}/promote`, {
-        method: "POST",
+        method: 'POST',
       });
       const data = await response.json();
       if (response.ok) {
@@ -82,11 +82,11 @@ export function SpecDetail({
   }
 
   const activeStatus = statuses.find((s) => s.id === activeTab);
-  const isDevelopmentTab = activeTab === "development";
+  const isDevelopmentTab = activeTab === 'development';
 
   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;
 
   return (
     <div className="flex flex-col gap-6">
@@ -106,15 +106,17 @@ export function SpecDetail({
               disabled={isPromoting}
               className="bg-green-600 hover:bg-green-700 text-white"
             >
-              {isPromoting ? "Promoting..." : "Promote to Tasks"}
+              {isPromoting ? 'Promoting...' : 'Promote to Tasks'}
             </Button>
           </div>
         </div>
       )}
 
-      {developmentStatus?.state === "done" && (
+      {developmentStatus?.state === 'done' && (
         <div className="p-4 bg-green-100 border-4 border-green-600">
-          <p className="font-black text-green-800 uppercase">✓ Spec complete — all {total} tasks done</p>
+          <p className="font-black text-green-800 uppercase">
+            ✓ Spec complete — all {total} tasks done
+          </p>
         </div>
       )}
 
@@ -125,7 +127,7 @@ export function SpecDetail({
               key={s.id}
               onClick={() => setActiveTab(s.id)}
               className={`px-4 py-2 font-bold uppercase text-sm border-r-4 border-black last:border-r-0 ${
-                activeTab === s.id ? "bg-black text-white" : "bg-white hover:bg-gray-100"
+                activeTab === s.id ? 'bg-black text-white' : 'bg-white hover:bg-gray-100'
               }`}
             >
               {s.id}
@@ -171,7 +173,7 @@ function DevelopmentPanel({
   done: number;
   inProgress: number;
 }) {
-  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">
@@ -207,33 +209,39 @@ function DevelopmentPanel({
         </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>
 
       {/* Task list */}
       <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" ? "⟳" : "○"}
+          <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>
-            <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] || ""}`}
+              className={`px-2 py-0.5 border-2 text-xs font-bold uppercase ${TASK_STATUS_COLORS[task.status] || ''}`}
             >
-              {task.status.replace("_", " ")}
+              {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>
             )}

package/.next/standalone/src/components/specs/spec-kanban-column.tsx

@@ -1,11 +1,11 @@
-"use client";
+'use client';
 
-import { useEffect, useState } from "react";
-import { CheckCircle2, Circle, Clock, Lock } from "lucide-react";
+import { CheckCircle2, Circle, Clock, Lock } from 'lucide-react';
+import { useSpecs } from '@/hooks/use-queries';
 
 interface ArtifactStatus {
   id: string;
-  state: "blocked" | "ready" | "in_review" | "in_progress" | "done";
+  state: 'blocked' | 'ready' | 'in_review' | 'in_progress' | 'done';
 }
 
 interface SpecMeta {
@@ -21,36 +21,38 @@ interface SpecKanbanColumnProps {
 }
 
 const DOT_COLORS: Record<string, string> = {
-  blocked: "bg-gray-300",
-  ready: "bg-blue-400",
-  in_review: "bg-yellow-400",
-  in_progress: "bg-orange-400",
-  done: "bg-green-500",
+  blocked: 'bg-gray-300',
+  ready: 'bg-blue-400',
+  in_review: 'bg-yellow-400',
+  in_progress: 'bg-orange-400',
+  done: 'bg-green-500',
 };
 
-function overallState(statuses: ArtifactStatus[]): "done" | "in_progress" | "in_review" | "ready" | "blocked" {
-  const all = statuses.filter((s) => s.id !== "development");
-  if (all.length === 0) return "ready";
-  if (all.every((s) => s.state === "done")) return "done";
-  if (all.some((s) => s.state === "in_review" || s.state === "in_progress")) return "in_review";
-  if (all.some((s) => s.state === "ready")) return "ready";
-  return "blocked";
+function overallState(
+  statuses: ArtifactStatus[],
+): 'done' | 'in_progress' | 'in_review' | 'ready' | 'blocked' {
+  const all = statuses.filter((s) => s.id !== 'development');
+  if (all.length === 0) return 'ready';
+  if (all.every((s) => s.state === 'done')) return 'done';
+  if (all.some((s) => s.state === 'in_review' || s.state === 'in_progress')) return 'in_review';
+  if (all.some((s) => s.state === 'ready')) return 'ready';
+  return 'blocked';
 }
 
 const OVERALL_ICON: Record<string, React.ReactNode> = {
-  done:       <CheckCircle2 className="h-3 w-3 text-green-600" />,
-  in_review:  <Clock className="h-3 w-3 text-yellow-500" />,
-  in_progress:<Clock className="h-3 w-3 text-orange-500" />,
-  ready:      <Circle className="h-3 w-3 text-blue-500" />,
-  blocked:    <Lock className="h-3 w-3 text-gray-400" />,
+  done: <CheckCircle2 className="h-3 w-3 text-green-600" />,
+  in_review: <Clock className="h-3 w-3 text-yellow-500" />,
+  in_progress: <Clock className="h-3 w-3 text-orange-500" />,
+  ready: <Circle className="h-3 w-3 text-blue-500" />,
+  blocked: <Lock className="h-3 w-3 text-gray-400" />,
 };
 
 const OVERALL_LABEL: Record<string, string> = {
-  done: "done",
-  in_review: "in review",
-  in_progress: "in progress",
-  ready: "ready",
-  blocked: "blocked",
+  done: 'done',
+  in_review: 'in review',
+  in_progress: 'in progress',
+  ready: 'ready',
+  blocked: 'blocked',
 };
 
 function SpecKanbanCard({
@@ -62,26 +64,30 @@ function SpecKanbanCard({
   selected: boolean;
   onClick: () => void;
 }) {
-  const state = spec.statuses ? overallState(spec.statuses) : "ready";
-  const artifactStatuses = spec.statuses?.filter((s) => s.id !== "development") ?? [];
+  const state = spec.statuses ? overallState(spec.statuses) : 'ready';
+  const artifactStatuses = spec.statuses?.filter((s) => s.id !== 'development') ?? [];
 
   return (
     <button
       onClick={onClick}
       className={`w-full text-left p-3 border-4 transition-all ${
         selected
-          ? "border-black bg-black text-white shadow-none translate-x-[2px] translate-y-[2px]"
-          : "border-black bg-white shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-none"
+          ? 'border-black bg-black text-white shadow-none translate-x-[2px] translate-y-[2px]'
+          : 'border-black bg-white shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] hover:translate-x-[2px] hover:translate-y-[2px] hover:shadow-none'
       }`}
     >
       <div className="flex items-start justify-between gap-1 mb-2">
-        <span className={`font-black text-xs uppercase leading-tight line-clamp-2 flex-1 ${selected ? "text-white" : ""}`}>
+        <span
+          className={`font-black text-xs uppercase leading-tight line-clamp-2 flex-1 ${selected ? 'text-white' : ''}`}
+        >
           {spec.title || spec.name}
         </span>
         <span className="flex-shrink-0 mt-0.5">{OVERALL_ICON[state]}</span>
       </div>
 
-      <p className={`font-mono text-[10px] mb-2 truncate ${selected ? "text-gray-300" : "text-gray-400"}`}>
+      <p
+        className={`font-mono text-[10px] mb-2 truncate ${selected ? 'text-gray-300' : 'text-gray-400'}`}
+      >
         {spec.name}
       </p>
 
@@ -92,10 +98,12 @@ function SpecKanbanCard({
             <div
               key={s.id}
               title={`${s.id}: ${s.state}`}
-              className={`w-2 h-2 rounded-full border border-black ${selected ? "border-gray-400" : ""} ${DOT_COLORS[s.state]}`}
+              className={`w-2 h-2 rounded-full border border-black ${selected ? 'border-gray-400' : ''} ${DOT_COLORS[s.state]}`}
             />
           ))}
-          <span className={`text-[10px] font-bold uppercase ml-1 ${selected ? "text-gray-300" : "text-gray-400"}`}>
+          <span
+            className={`text-[10px] font-bold uppercase ml-1 ${selected ? 'text-gray-300' : 'text-gray-400'}`}
+          >
             {OVERALL_LABEL[state]}
           </span>
         </div>
@@ -105,38 +113,13 @@ function SpecKanbanCard({
 }
 
 export function SpecKanbanColumn({ selectedSpecName, onSelectSpec }: SpecKanbanColumnProps) {
-  const [specs, setSpecs] = useState<SpecMeta[]>([]);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    async function load() {
-      try {
-        const res = await fetch("/api/specs");
-        const data: SpecMeta[] = await res.json();
-        // Fetch statuses for each spec in parallel
-        const withStatuses = await Promise.all(
-          data.map(async (spec) => {
-            try {
-              const r = await fetch(`/api/specs/${spec.name}`);
-              const detail = await r.json();
-              return { ...spec, statuses: detail.statuses };
-            } catch {
-              return spec;
-            }
-          })
-        );
-        setSpecs(withStatuses);
-      } catch (e) {
-        console.error(e);
-      } finally {
-        setLoading(false);
-      }
-    }
-    load();
-  }, []);
+  const { data: specs = [], isLoading: loading } = useSpecs();
 
   return (
-    <div className="flex flex-col h-full min-h-0 border-r-4 border-black bg-[--color-bg]" style={{ width: 220, flexShrink: 0 }}>
+    <div
+      className="flex flex-col h-full min-h-0 border-r-4 border-black bg-[--color-bg]"
+      style={{ width: 220, flexShrink: 0 }}
+    >
       {/* Column header */}
       <div className="flex items-center justify-between px-4 py-3 border-b-4 border-black bg-[--color-secondary] flex-shrink-0">
         <h2 className="font-black uppercase text-sm tracking-wide">Specs</h2>
@@ -145,13 +128,11 @@ export function SpecKanbanColumn({ selectedSpecName, onSelectSpec }: SpecKanbanC
 
       {/* Cards */}
       <div className="flex-1 overflow-y-auto p-3 flex flex-col gap-2">
-        {loading && (
-          <p className="text-xs text-gray-400 font-mono px-1">Loading...</p>
-        )}
+        {loading && <p className="text-xs text-gray-400 font-mono px-1">Loading...</p>}
         {!loading && specs.length === 0 && (
           <p className="text-xs text-gray-400 font-mono px-1">No specs yet.</p>
         )}
-        {specs.map((spec) => (
+        {(specs as SpecMeta[]).map((spec) => (
           <SpecKanbanCard
             key={spec.name}
             spec={spec}