@sureshdsk/devflow-mcp 3.0.0 → 3.0.2

package/src/app/api/specs/[name]/artifacts/[artifactType]/approve/route.ts

@@ -1,23 +1,23 @@
-import { NextResponse } from "next/server";
-import { approveArtifact } from "@/lib/specs";
-import { broadcastUpdate } from "@/mcp/websocket";
+import { NextResponse } from 'next/server';
+import { approveArtifact } from '@/lib/specs';
+import { broadcastUpdate } from '@/mcp/websocket';
 
 export async function POST(
   request: Request,
-  { params }: { params: Promise<{ name: string; artifactType: string }> }
+  { params }: { params: Promise<{ name: string; artifactType: string }> },
 ) {
   try {
     const { name, artifactType } = await params;
     const body = await request.json();
-    const approvedBy = body.approvedBy || "human";
+    const approvedBy = body.approvedBy || 'human';
 
     await approveArtifact(name, artifactType, approvedBy);
-    broadcastUpdate({ type: "artifact_approved", specName: name, artifactType });
+    broadcastUpdate({ type: 'artifact_approved', specName: name, artifactType });
     return NextResponse.json({ success: true });
   } catch (error) {
     return NextResponse.json(
-      { error: error instanceof Error ? error.message : "Failed to approve artifact" },
-      { status: 422 }
+      { error: error instanceof Error ? error.message : 'Failed to approve artifact' },
+      { status: 422 },
     );
   }
 }

package/src/app/api/specs/[name]/artifacts/[artifactType]/route.ts

@@ -1,36 +1,36 @@
-import { NextResponse } from "next/server";
-import { getArtifact, writeArtifact, getSpecStatus, getArtifactTemplate } from "@/lib/specs";
-import { broadcastUpdate } from "@/mcp/websocket";
+import { NextResponse } from 'next/server';
+import { getArtifact, writeArtifact, getSpecStatus, getArtifactTemplate } from '@/lib/specs';
+import { broadcastUpdate } from '@/mcp/websocket';
 
 export async function GET(
   request: Request,
-  { params }: { params: Promise<{ name: string; artifactType: string }> }
+  { params }: { params: Promise<{ name: string; artifactType: string }> },
 ) {
   try {
     const { name, artifactType } = await params;
     const { searchParams } = new URL(request.url);
 
-    if (searchParams.get("template") === "true") {
+    if (searchParams.get('template') === 'true') {
       const template = await getArtifactTemplate(name, artifactType);
       return NextResponse.json({ template });
     }
 
     const content = await getArtifact(name, artifactType);
     if (content === null) {
-      return NextResponse.json({ error: "Artifact not found" }, { status: 404 });
+      return NextResponse.json({ error: 'Artifact not found' }, { status: 404 });
     }
     return NextResponse.json({ content });
   } catch (error) {
     return NextResponse.json(
-      { error: error instanceof Error ? error.message : "Failed to get artifact" },
-      { status: 500 }
+      { error: error instanceof Error ? error.message : 'Failed to get artifact' },
+      { status: 500 },
     );
   }
 }
 
 export async function PUT(
   request: Request,
-  { params }: { params: Promise<{ name: string; artifactType: string }> }
+  { params }: { params: Promise<{ name: string; artifactType: string }> },
 ) {
   try {
     const { name, artifactType } = await params;
@@ -38,21 +38,21 @@ export async function PUT(
     // Check blocker gate
     const statuses = await getSpecStatus(name);
     const status = statuses.find((s) => s.id === artifactType);
-    if (status?.state === "blocked") {
+    if (status?.state === 'blocked') {
       return NextResponse.json(
         { error: `Cannot write "${artifactType}": required artifacts not yet approved` },
-        { status: 422 }
+        { status: 422 },
       );
     }
 
     const body = await request.json();
     await writeArtifact(name, artifactType, body.content);
-    broadcastUpdate({ type: "artifact_updated", specName: name, artifactType });
+    broadcastUpdate({ type: 'artifact_updated', specName: name, artifactType });
     return NextResponse.json({ success: true });
   } catch (error) {
     return NextResponse.json(
-      { error: error instanceof Error ? error.message : "Failed to write artifact" },
-      { status: 500 }
+      { error: error instanceof Error ? error.message : 'Failed to write artifact' },
+      { status: 500 },
     );
   }
 }

package/src/app/api/specs/[name]/promote/route.ts

@@ -1,13 +1,10 @@
-import { NextResponse } from "next/server";
-import { parseTasksArtifact, getApprovals, getSpec } from "@/lib/specs";
-import { getDb, schema } from "@/db";
-import { randomUUID } from "crypto";
-import { broadcastUpdate } from "@/mcp/websocket";
+import { NextResponse } from 'next/server';
+import { parseTasksArtifact, getApprovals, getSpec } from '@/lib/specs';
+import { getDb, schema } from '@/db';
+import { randomUUID } from 'crypto';
+import { broadcastUpdate } from '@/mcp/websocket';
 
-export async function POST(
-  _request: Request,
-  { params }: { params: Promise<{ name: string }> }
-) {
+export async function POST(_request: Request, { params }: { params: Promise<{ name: string }> }) {
   try {
     const { name } = await params;
 
@@ -15,26 +12,23 @@ export async function POST(
     const projectId = spec.projectId;
     if (!projectId) {
       return NextResponse.json(
-        { error: "Spec has no project — re-create it with a projectId" },
-        { status: 422 }
+        { error: 'Spec has no project — re-create it with a projectId' },
+        { status: 422 },
       );
     }
 
     // Check tasks artifact is approved
     const approvals = await getApprovals(name);
-    if (approvals.artifacts["tasks"]?.state !== "approved") {
+    if (approvals.artifacts['tasks']?.state !== 'approved') {
       return NextResponse.json(
-        { error: "tasks artifact must be approved before promoting" },
-        { status: 422 }
+        { error: 'tasks artifact must be approved before promoting' },
+        { status: 422 },
       );
     }
 
     const parsedTasks = await parseTasksArtifact(name);
     if (parsedTasks.length === 0) {
-      return NextResponse.json(
-        { error: "No tasks found in tasks.md" },
-        { status: 422 }
-      );
+      return NextResponse.json({ error: 'No tasks found in tasks.md' }, { status: 422 });
     }
 
     const db = await getDb();
@@ -44,20 +38,20 @@ export async function POST(
       specName: name,
       title: task.title,
       body: task.body || null,
-      status: "backlog" as const,
-      priority: (task.priority || "medium") as "low" | "medium" | "high" | "urgent",
+      status: 'backlog' as const,
+      priority: (task.priority || 'medium') as 'low' | 'medium' | 'high' | 'urgent',
       assignedAgent: null,
       order: index,
     }));
 
     await db.insert(schema.tasks).values(newTasks);
-    broadcastUpdate({ type: "spec_promoted", specName: name, taskCount: newTasks.length });
+    broadcastUpdate({ type: 'spec_promoted', specName: name, taskCount: newTasks.length });
 
     return NextResponse.json({ promoted: newTasks.length, tasks: newTasks });
   } catch (error) {
     return NextResponse.json(
-      { error: error instanceof Error ? error.message : "Failed to promote spec" },
-      { status: 500 }
+      { error: error instanceof Error ? error.message : 'Failed to promote spec' },
+      { status: 500 },
     );
   }
 }

package/src/app/api/specs/[name]/route.ts

@@ -1,52 +1,50 @@
-import { NextResponse } from "next/server";
-import { getSpec } from "@/lib/specs";
-import { getDb, schema } from "@/db";
-import { eq } from "drizzle-orm";
+import { NextResponse } from 'next/server';
+import { getSpec } from '@/lib/specs';
+import { getDb, schema } from '@/db';
+import { eq } from 'drizzle-orm';
 
-export async function GET(
-  request: Request,
-  { params }: { params: Promise<{ name: string }> }
-) {
+export async function GET(request: Request, { params }: { params: Promise<{ name: string }> }) {
   try {
     const { name } = await params;
     const spec = await getSpec(name);
 
     // Synthesize "development" stage from promoted task statuses
-    const tasksApproved = spec.statuses.find((s) => s.id === "tasks")?.state === "done";
-    let developmentState: "blocked" | "ready" | "in_progress" | "done" = "blocked";
-    let tasks: Array<{ id: string; title: string; status: string; assignedAgent: string | null; priority: string }> = [];
+    const tasksArtifactDone = spec.statuses.find((s) => s.id === 'tasks')?.state === 'done';
+    let developmentState: 'blocked' | 'ready' | 'in_progress' | 'done' = 'blocked';
 
-    if (tasksApproved) {
-      const db = await getDb();
-      tasks = await db
-        .select({
-          id: schema.tasks.id,
-          title: schema.tasks.title,
-          status: schema.tasks.status,
-          assignedAgent: schema.tasks.assignedAgent,
-          priority: schema.tasks.priority,
-        })
-        .from(schema.tasks)
-        .where(eq(schema.tasks.specName, name));
+    // Check for promoted tasks in DB regardless of artifact approval state
+    const db = await getDb();
+    const tasks = await db
+      .select({
+        id: schema.tasks.id,
+        title: schema.tasks.title,
+        status: schema.tasks.status,
+        assignedAgent: schema.tasks.assignedAgent,
+        priority: schema.tasks.priority,
+      })
+      .from(schema.tasks)
+      .where(eq(schema.tasks.specName, name));
 
-      if (tasks.length === 0) {
-        developmentState = "ready"; // tasks approved but not yet promoted
-      } else if (tasks.every((t) => t.status === "done")) {
-        developmentState = "done";
-      } else if (tasks.some((t) => t.status === "in_progress")) {
-        developmentState = "in_progress";
+    if (tasks.length > 0) {
+      // Tasks have been promoted — derive state from task statuses
+      if (tasks.every((t) => t.status === 'done')) {
+        developmentState = 'done';
+      } else if (tasks.some((t) => t.status === 'in_progress')) {
+        developmentState = 'in_progress';
       } else {
-        developmentState = "ready";
+        developmentState = 'ready';
       }
+    } else if (tasksArtifactDone) {
+      developmentState = 'ready'; // tasks artifact approved but not yet promoted
     }
 
     const developmentStatus = {
-      id: "development",
+      id: 'development',
       state: developmentState,
-      description: "Implementation via check-in / check-out",
-      requires: ["tasks"],
+      description: 'Implementation via check-in / check-out',
+      requires: ['tasks'],
       fileExists: tasks.length > 0,
-      approved: developmentState === "done",
+      approved: developmentState === 'done',
     };
 
     return NextResponse.json({
@@ -56,8 +54,8 @@ export async function GET(
     });
   } catch (error) {
     return NextResponse.json(
-      { error: error instanceof Error ? error.message : "Spec not found" },
-      { status: 404 }
+      { error: error instanceof Error ? error.message : 'Spec not found' },
+      { status: 404 },
     );
   }
 }

package/src/app/api/specs/route.ts

@@ -1,7 +1,7 @@
-import { NextResponse } from "next/server";
-import { listSpecs, createSpec } from "@/lib/specs";
-import { broadcastUpdate } from "@/mcp/websocket";
-import { getDb, schema } from "@/db/index";
+import { NextResponse } from 'next/server';
+import { listSpecs, createSpec } from '@/lib/specs';
+import { broadcastUpdate } from '@/mcp/websocket';
+import { getDb, schema } from '@/db/index';
 
 export async function GET() {
   try {
@@ -16,7 +16,7 @@ export async function GET() {
     const specs = await listSpecs();
     return NextResponse.json(specs);
   } catch (error) {
-    return NextResponse.json({ error: "Failed to list specs" }, { status: 500 });
+    return NextResponse.json({ error: 'Failed to list specs' }, { status: 500 });
   }
 }
 
@@ -26,20 +26,20 @@ export async function POST(request: Request) {
     const { name, title, projectId, description, schema: schemaName } = body;
 
     if (!name || !title) {
-      return NextResponse.json({ error: "name and title are required" }, { status: 400 });
+      return NextResponse.json({ error: 'name and title are required' }, { status: 400 });
     }
 
     if (!projectId) {
-      return NextResponse.json({ error: "projectId is required" }, { status: 400 });
+      return NextResponse.json({ error: 'projectId is required' }, { status: 400 });
     }
 
     await createSpec(name, title, projectId, description, schemaName);
-    broadcastUpdate({ type: "spec_created", specName: name });
+    broadcastUpdate({ type: 'spec_created', specName: name });
     return NextResponse.json({ name, title, projectId }, { status: 201 });
   } catch (error) {
     return NextResponse.json(
-      { error: error instanceof Error ? error.message : "Failed to create spec" },
-      { status: 500 }
+      { error: error instanceof Error ? error.message : 'Failed to create spec' },
+      { status: 500 },
     );
   }
 }

package/src/app/api/tasks/[id]/route.ts

@@ -1,37 +1,24 @@
-import { NextResponse } from "next/server";
-import { getDb, schema } from "@/db";
-import { eq } from "drizzle-orm";
+import { NextResponse } from 'next/server';
+import { getDb, schema } from '@/db';
+import { eq } from 'drizzle-orm';
 
-export async function GET(
-  request: Request,
-  { params }: { params: Promise<{ id: string }> }
-) {
+export async function GET(request: Request, { params }: { params: Promise<{ id: string }> }) {
   try {
     const { id } = await params;
     const db = await getDb();
-    const task = await db
-      .select()
-      .from(schema.tasks)
-      .where(eq(schema.tasks.id, id))
-      .limit(1);
+    const task = await db.select().from(schema.tasks).where(eq(schema.tasks.id, id)).limit(1);
 
     if (task.length === 0) {
-      return NextResponse.json({ error: "Task not found" }, { status: 404 });
+      return NextResponse.json({ error: 'Task not found' }, { status: 404 });
     }
 
     return NextResponse.json(task[0]);
   } catch (error) {
-    return NextResponse.json(
-      { error: "Failed to fetch task" },
-      { status: 500 }
-    );
+    return NextResponse.json({ error: 'Failed to fetch task' }, { status: 500 });
   }
 }
 
-export async function PATCH(
-  request: Request,
-  { params }: { params: Promise<{ id: string }> }
-) {
+export async function PATCH(request: Request, { params }: { params: Promise<{ id: string }> }) {
   try {
     const { id } = await params;
     const body = await request.json();
@@ -58,17 +45,11 @@ export async function PATCH(
 
     return NextResponse.json(updatedTask[0]);
   } catch (error) {
-    return NextResponse.json(
-      { error: "Failed to update task" },
-      { status: 500 }
-    );
+    return NextResponse.json({ error: 'Failed to update task' }, { status: 500 });
   }
 }
 
-export async function DELETE(
-  request: Request,
-  { params }: { params: Promise<{ id: string }> }
-) {
+export async function DELETE(request: Request, { params }: { params: Promise<{ id: string }> }) {
   try {
     const { id } = await params;
     const db = await getDb();
@@ -76,9 +57,6 @@ export async function DELETE(
 
     return NextResponse.json({ success: true });
   } catch (error) {
-    return NextResponse.json(
-      { error: "Failed to delete task" },
-      { status: 500 }
-    );
+    return NextResponse.json({ error: 'Failed to delete task' }, { status: 500 });
   }
 }

package/src/app/api/tasks/route.ts

@@ -1,5 +1,5 @@
-import { NextResponse } from "next/server";
-import { getDb, schema } from "@/db";
+import { NextResponse } from 'next/server';
+import { getDb, schema } from '@/db';
 
 export async function GET() {
   try {
@@ -7,9 +7,6 @@ export async function GET() {
     const tasks = await db.select().from(schema.tasks).orderBy(schema.tasks.order);
     return NextResponse.json(tasks);
   } catch (error) {
-    return NextResponse.json(
-      { error: "Failed to fetch tasks" },
-      { status: 500 }
-    );
+    return NextResponse.json({ error: 'Failed to fetch tasks' }, { status: 500 });
   }
 }

package/src/app/globals.css

@@ -1,4 +1,4 @@
-@import "tailwindcss";
+@import 'tailwindcss';
 
 @layer base {
   :root {
@@ -103,7 +103,7 @@
   }
 
   /* GFM task list checkboxes */
-  .markdown-preview input[type="checkbox"] {
+  .markdown-preview input[type='checkbox'] {
     @apply mr-2 accent-black;
   }
-}
+}

package/src/app/layout.tsx

@@ -1,9 +1,11 @@
-import type { Metadata } from "next";
-import "./globals.css";
+import type { Metadata } from 'next';
+import { Providers } from '@/components/providers';
+import './globals.css';
 
 export const metadata: Metadata = {
-  title: "DevFlow MCP - Context-First Kanban for AI Agents",
-  description: "Plan management and task management system with Model Context Protocol integration for AI agents",
+  title: 'DevFlow MCP - Context-First Kanban for AI Agents',
+  description:
+    'Plan management and task management system with Model Context Protocol integration for AI agents',
 };
 
 export default function RootLayout({
@@ -13,7 +15,9 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className="antialiased">{children}</body>
+      <body className="antialiased">
+        <Providers>{children}</Providers>
+      </body>
     </html>
   );
 }

package/src/app/page.tsx

@@ -1,4 +1,4 @@
-import { KanbanBoard } from "@/components/kanban-board";
+import { KanbanBoard } from '@/components/kanban-board';
 
 export default function Home() {
   return <KanbanBoard />;

package/src/app/specs/[name]/page.tsx

@@ -1,16 +1,17 @@
-"use client";
+'use client';
 
-import { useState, useEffect, useCallback, use } from "react";
-import { SpecDetail } from "@/components/specs/spec-detail";
-import Link from "next/link";
+import { use } from 'react';
+import { SpecDetail } from '@/components/specs/spec-detail';
+import Link from 'next/link';
+import { useSpec, useInvalidate } from '@/hooks/use-queries';
+import { useWebSocket } from '@/hooks/use-websocket';
 
 interface SpecData {
   name: string;
   title: string;
-  projectId?: string;
   statuses: Array<{
     id: string;
-    state: "blocked" | "ready" | "in_review" | "in_progress" | "done";
+    state: 'blocked' | 'ready' | 'in_review' | 'in_progress' | 'done';
     description: string;
     requires: string[];
     fileExists: boolean;
@@ -30,63 +31,16 @@ interface SpecData {
 
 export default function SpecPage({ params }: { params: Promise<{ name: string }> }) {
   const { name } = use(params);
-  const [spec, setSpec] = useState<SpecData | null>(null);
-  const [error, setError] = useState<string | null>(null);
+  const { data, isLoading, error } = useSpec(name);
+  const { invalidateSpec, invalidateSpecs } = useInvalidate();
+  useWebSocket();
 
-  const loadSpec = useCallback(async function () {
-    try {
-      const response = await fetch(`/api/specs/${name}`);
-      if (!response.ok) {
-        const data = await response.json();
-        setError(data.error || "Spec not found");
-        return;
-      }
-      const data = await response.json();
-      setSpec(data);
-    } catch {
-      setError("Failed to load spec");
-    }
-  }, [name]);
+  const spec = data as SpecData | undefined;
 
-  // eslint-disable-next-line react-hooks/set-state-in-effect
-  useEffect(() => { loadSpec(); }, [loadSpec]);
-
-  // Real-time updates via WebSocket
-  useEffect(() => {
-    let ws: WebSocket | null = null;
-    let reconnectTimeout: ReturnType<typeof setTimeout>;
-    let isUnmounted = false;
-
-    function connect() {
-      if (isUnmounted) return;
-      try {
-        ws = new WebSocket("ws://localhost:3001");
-        ws.onmessage = (event) => {
-          const data = JSON.parse(event.data);
-          if (data.specName === name && (
-            data.type === "artifact_approved" ||
-            data.type === "artifact_updated" ||
-            data.type === "spec_promoted"
-          ) || (data.type === "task_updated" && data.task?.specName === name)) {
-            loadSpec();
-          }
-        };
-        ws.onclose = () => {
-          if (!isUnmounted) reconnectTimeout = setTimeout(connect, 3000);
-        };
-        ws.onerror = () => {};
-      } catch {
-        if (!isUnmounted) reconnectTimeout = setTimeout(connect, 3000);
-      }
-    }
-
-    connect();
-    return () => {
-      isUnmounted = true;
-      clearTimeout(reconnectTimeout);
-      ws?.close();
-    };
-  }, [name, loadSpec]);
+  function handleRefresh() {
+    invalidateSpec(name);
+    invalidateSpecs();
+  }
 
   return (
     <div className="min-h-screen bg-[--color-bg]">
@@ -96,8 +50,12 @@ export default function SpecPage({ params }: { params: Promise<{ name: string }>
             DevFlow
           </Link>
           <nav className="flex gap-4">
-            <Link href="/" className="font-bold uppercase text-sm hover:underline">Board</Link>
-            <Link href="/specs" className="font-bold uppercase text-sm hover:underline">Specs</Link>
+            <Link href="/" className="font-bold uppercase text-sm hover:underline">
+              Board
+            </Link>
+            <Link href="/specs" className="font-bold uppercase text-sm hover:underline">
+              Specs
+            </Link>
           </nav>
         </div>
       </header>
@@ -105,11 +63,13 @@ export default function SpecPage({ params }: { params: Promise<{ name: string }>
       <main className="container mx-auto px-6 py-8">
         {error ? (
           <div className="p-6 bg-red-100 border-4 border-red-500">
-            <p className="font-bold text-red-800">{error}</p>
+            <p className="font-bold text-red-800">Failed to load spec</p>
             <Link href="/specs" className="text-sm underline mt-2 block">
               Back to Specs
             </Link>
           </div>
+        ) : isLoading ? (
+          <p className="font-bold">Loading...</p>
         ) : spec ? (
           <SpecDetail
             specName={spec.name}
@@ -117,11 +77,9 @@ export default function SpecPage({ params }: { params: Promise<{ name: string }>
             statuses={spec.statuses}
             artifacts={spec.artifacts}
             tasks={spec.tasks ?? []}
-            onRefresh={loadSpec}
+            onRefresh={handleRefresh}
           />
-        ) : (
-          <p className="font-bold">Loading...</p>
-        )}
+        ) : null}
       </main>
     </div>
   );