claude-kanban 0.5.0 → 0.6.0

package/dist/bin/cli.js

@@ -4,18 +4,18 @@
 import { Command } from "commander";
 import chalk from "chalk";
 import open from "open";
-import { existsSync as existsSync4 } from "fs";
+import { existsSync as existsSync5 } from "fs";
 import { execSync } from "child_process";
 import { createInterface } from "readline";
-import { join as join6 } from "path";
+import { join as join7 } from "path";
 
 // src/server/index.ts
 import express from "express";
 import { createServer as createHttpServer } from "http";
 import { Server as SocketIOServer } from "socket.io";
-import { join as join5, dirname } from "path";
+import { join as join6, dirname } from "path";
 import { fileURLToPath } from "url";
-import { existsSync as existsSync3 } from "fs";
+import { existsSync as existsSync4 } from "fs";
 
 // src/server/services/executor.ts
 import { spawn } from "child_process";
@@ -166,8 +166,12 @@ function createInitialConfig(projectPath) {
     },
     execution: {
       maxConcurrent: 3,
-      timeout: 30
+      timeout: 30,
       // 30 minutes
+      enableQA: false,
+      // QA verification disabled by default
+      qaMaxRetries: 2
+      // Max QA retry attempts
     }
   };
 }
@@ -391,7 +395,8 @@ function createTask(projectPath, request) {
     passes: false,
     createdAt: now,
     updatedAt: now,
-    executionHistory: []
+    executionHistory: [],
+    dependsOn: request.dependsOn || []
   };
   prd.tasks.push(task);
   writePRD(projectPath, prd);
@@ -434,23 +439,40 @@ function addExecutionEntry(projectPath, taskId, entry) {
   writePRD(projectPath, prd);
   return prd.tasks[taskIndex];
 }
+function areDependenciesMet(projectPath, task) {
+  if (!task.dependsOn || task.dependsOn.length === 0) {
+    return true;
+  }
+  const prd = readPRD(projectPath);
+  for (const depId of task.dependsOn) {
+    const depTask = prd.tasks.find((t) => t.id === depId);
+    if (!depTask || depTask.status !== "completed") {
+      return false;
+    }
+  }
+  return true;
+}
 function getNextReadyTask(projectPath) {
   const readyTasks = getTasksByStatus(projectPath, "ready");
   if (readyTasks.length === 0) {
     return null;
   }
+  const executableTasks = readyTasks.filter((task) => areDependenciesMet(projectPath, task));
+  if (executableTasks.length === 0) {
+    return null;
+  }
   const priorityOrder = {
     critical: 0,
     high: 1,
     medium: 2,
     low: 3
   };
-  readyTasks.sort((a, b) => {
+  executableTasks.sort((a, b) => {
     const priorityDiff = (priorityOrder[a.priority] || 2) - (priorityOrder[b.priority] || 2);
     if (priorityDiff !== 0) return priorityDiff;
     return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
   });
-  return readyTasks[0];
+  return executableTasks[0];
 }
 function getTaskCounts(projectPath) {
   const tasks = getAllTasks(projectPath);
@@ -533,6 +555,12 @@ var LOGS_DIR = "logs";
 var TaskExecutor = class extends EventEmitter {
   projectPath;
   runningTask = null;
+  planningSession = null;
+  qaSession = null;
+  pendingQATaskId = null;
+  // Task waiting for QA
+  qaRetryCount = /* @__PURE__ */ new Map();
+  // Track QA retries per task
   afkMode = false;
   afkIteration = 0;
   afkMaxIterations = 0;
@@ -658,6 +686,36 @@ ${summary}
     }
     return void 0;
   }
+  /**
+   * Check if a planning session is running
+   */
+  isPlanning() {
+    return this.planningSession !== null;
+  }
+  /**
+   * Check if executor is busy (task, planning, or QA running)
+   */
+  isBusy() {
+    return this.runningTask !== null || this.planningSession !== null || this.qaSession !== null;
+  }
+  /**
+   * Check if QA is running
+   */
+  isQARunning() {
+    return this.qaSession !== null;
+  }
+  /**
+   * Get planning session output
+   */
+  getPlanningOutput() {
+    return this.planningSession?.output;
+  }
+  /**
+   * Get planning session goal
+   */
+  getPlanningGoal() {
+    return this.planningSession?.goal;
+  }
   /**
    * Build the prompt for a task - simplified Ralph-style
    */
@@ -709,12 +767,225 @@ ${verifyCommands.length > 0 ? "6" : "5"}. Commit your changes with a descriptive
 
 Focus only on this task. When done, output: <promise>COMPLETE</promise>`;
   }
+  /**
+   * Build the prompt for a planning session
+   */
+  buildPlanningPrompt(goal) {
+    const kanbanDir = join4(this.projectPath, KANBAN_DIR4);
+    const prdPath = join4(kanbanDir, "prd.json");
+    return `You are an AI coding planner. Your job is to analyze a codebase and break down a user's goal into concrete, actionable tasks.
+
+## GOAL
+${goal}
+
+## INSTRUCTIONS
+
+1. Explore the codebase to understand:
+   - Project structure and architecture
+   - Existing patterns and conventions
+   - Related existing code that you'll build upon
+   - What technologies and frameworks are being used
+
+2. Break down the goal into 3-8 specific, actionable tasks that can each be completed in a single coding session.
+
+3. For each task, determine:
+   - Clear, action-oriented title (start with a verb: Add, Create, Implement, Fix, etc.)
+   - Detailed description with implementation guidance
+   - Category: functional, ui, bug, enhancement, testing, or refactor
+   - Priority: low, medium, high, or critical
+   - 3-7 verification steps to confirm the task is complete
+
+4. Read the current PRD file at ${prdPath}, then update it:
+   - Add your new tasks to the "tasks" array
+   - Each task must have this structure:
+     {
+       "id": "task_" + 8 random alphanumeric characters,
+       "title": "...",
+       "description": "...",
+       "category": "functional|ui|bug|enhancement|testing|refactor",
+       "priority": "low|medium|high|critical",
+       "status": "draft",
+       "steps": ["Step 1", "Step 2", ...],
+       "passes": false,
+       "createdAt": ISO timestamp,
+       "updatedAt": ISO timestamp,
+       "executionHistory": []
+     }
+
+5. Commit your changes with message: "Plan: ${goal}"
+
+IMPORTANT:
+- Tasks should be ordered logically (dependencies first)
+- Each task should be completable independently
+- Be specific about implementation details
+- Consider edge cases and error handling
+
+When done, output: <promise>PLANNING_COMPLETE</promise>`;
+  }
+  /**
+   * Run a planning session to break down a goal into tasks
+   */
+  async runPlanningSession(goal) {
+    if (this.isBusy()) {
+      throw new Error("Another operation is in progress. Wait for it to complete or cancel it first.");
+    }
+    const config = getConfig(this.projectPath);
+    const startedAt = /* @__PURE__ */ new Date();
+    const prompt = this.buildPlanningPrompt(goal);
+    const kanbanDir = join4(this.projectPath, KANBAN_DIR4);
+    const promptFile = join4(kanbanDir, "prompt-planning.txt");
+    writeFileSync4(promptFile, prompt);
+    const args = [];
+    if (config.agent.model) {
+      args.push("--model", config.agent.model);
+    }
+    args.push("--permission-mode", config.agent.permissionMode);
+    args.push("-p");
+    args.push("--verbose");
+    args.push("--output-format", "stream-json");
+    args.push(`@${promptFile}`);
+    const commandDisplay = `${config.agent.command} ${args.join(" ")}`;
+    const fullCommand = `${config.agent.command} ${args.join(" ")}`;
+    console.log("[executor] Planning command:", fullCommand);
+    console.log("[executor] CWD:", this.projectPath);
+    const childProcess = spawn("bash", ["-c", fullCommand], {
+      cwd: this.projectPath,
+      env: {
+        ...process.env,
+        TERM: "xterm-256color",
+        FORCE_COLOR: "0",
+        NO_COLOR: "1"
+      },
+      stdio: ["ignore", "pipe", "pipe"]
+    });
+    this.planningSession = {
+      goal,
+      process: childProcess,
+      startedAt,
+      output: []
+    };
+    const logOutput = (line) => {
+      this.planningSession?.output.push(line);
+      this.emit("planning:output", { line, lineType: "stdout" });
+    };
+    this.emit("planning:started", { goal, timestamp: startedAt.toISOString() });
+    logOutput(`[claude-kanban] Starting planning session
+`);
+    logOutput(`[claude-kanban] Goal: ${goal}
+`);
+    logOutput(`[claude-kanban] Command: ${commandDisplay}
+`);
+    let stdoutBuffer = "";
+    childProcess.stdout?.on("data", (data) => {
+      stdoutBuffer += data.toString();
+      const lines = stdoutBuffer.split("\n");
+      stdoutBuffer = lines.pop() || "";
+      for (const line of lines) {
+        if (!line.trim()) continue;
+        try {
+          const json = JSON.parse(line);
+          let text = "";
+          if (json.type === "assistant" && json.message?.content) {
+            for (const block of json.message.content) {
+              if (block.type === "text") {
+                text += block.text;
+              } else if (block.type === "tool_use") {
+                text += this.formatToolUse(block.name, block.input);
+              }
+            }
+          } else if (json.type === "content_block_delta" && json.delta?.text) {
+            text = json.delta.text;
+          } else if (json.type === "result" && json.result) {
+            text = `
+[Result: ${json.result}]
+`;
+          }
+          if (text) {
+            logOutput(text);
+          }
+        } catch {
+          const cleanText = line.replace(/\x1B\[[0-9;]*[A-Za-z]/g, "");
+          if (cleanText.trim()) {
+            logOutput(cleanText + "\n");
+          }
+        }
+      }
+    });
+    childProcess.stderr?.on("data", (data) => {
+      const text = data.toString();
+      logOutput(`[stderr] ${text}`);
+    });
+    childProcess.on("error", (error) => {
+      console.log("[executor] Planning spawn error:", error.message);
+      this.emit("planning:output", { line: `[claude-kanban] Error: ${error.message}
+`, lineType: "stderr" });
+      try {
+        unlinkSync(promptFile);
+      } catch {
+      }
+      this.emit("planning:failed", { error: error.message });
+      this.planningSession = null;
+    });
+    childProcess.on("close", (code, signal) => {
+      console.log("[executor] Planning process closed with code:", code, "signal:", signal);
+      try {
+        unlinkSync(promptFile);
+      } catch {
+      }
+      logOutput(`[claude-kanban] Planning process exited with code ${code}
+`);
+      this.handlePlanningComplete(code);
+    });
+    const timeoutMs = 15 * 60 * 1e3;
+    setTimeout(() => {
+      if (this.planningSession) {
+        this.cancelPlanning("Planning timeout exceeded");
+      }
+    }, timeoutMs);
+  }
+  /**
+   * Handle planning session completion
+   */
+  handlePlanningComplete(exitCode) {
+    if (!this.planningSession) return;
+    const output = this.planningSession.output.join("");
+    const isComplete = output.includes("<promise>PLANNING_COMPLETE</promise>");
+    if (isComplete || exitCode === 0) {
+      this.emit("planning:completed", { success: true });
+    } else {
+      const error = `Planning process exited with code ${exitCode}`;
+      this.emit("planning:failed", { error });
+    }
+    this.planningSession = null;
+  }
+  /**
+   * Cancel the planning session
+   */
+  cancelPlanning(reason = "Cancelled by user") {
+    if (!this.planningSession) return false;
+    const { process: childProcess } = this.planningSession;
+    try {
+      childProcess.kill("SIGTERM");
+      setTimeout(() => {
+        try {
+          if (!childProcess.killed) {
+            childProcess.kill("SIGKILL");
+          }
+        } catch {
+        }
+      }, 2e3);
+    } catch {
+    }
+    this.emit("planning:cancelled", { reason });
+    this.planningSession = null;
+    return true;
+  }
   /**
    * Run a task
    */
   async runTask(taskId) {
-    if (this.isRunning()) {
-      throw new Error("A task is already running. Wait for it to complete or cancel it first.");
+    if (this.isBusy()) {
+      throw new Error("Another operation is in progress. Wait for it to complete or cancel it first.");
     }
     const config = getConfig(this.projectPath);
     const task = getTaskById(this.projectPath, taskId);
@@ -854,27 +1125,52 @@ Focus only on this task. When done, output: <promise>COMPLETE</promise>`;
     const endedAt = /* @__PURE__ */ new Date();
     const duration = endedAt.getTime() - startedAt.getTime();
     const output = this.runningTask.output.join("");
+    const config = getConfig(this.projectPath);
     const isComplete = output.includes("<promise>COMPLETE</promise>");
     const task = getTaskById(this.projectPath, taskId);
     if (isComplete || exitCode === 0) {
-      updateTask(this.projectPath, taskId, {
-        status: "completed",
-        passes: true
-      });
-      addExecutionEntry(this.projectPath, taskId, {
-        startedAt: startedAt.toISOString(),
-        endedAt: endedAt.toISOString(),
-        status: "completed",
-        duration
-      });
-      logTaskExecution(this.projectPath, {
-        taskId,
-        taskTitle: task?.title || "Unknown",
-        status: "completed",
-        duration
-      });
-      this.emit("task:completed", { taskId, duration });
-      this.afkTasksCompleted++;
+      if (config.execution.enableQA) {
+        updateTask(this.projectPath, taskId, {
+          status: "in_progress",
+          // Keep in progress until QA passes
+          passes: false
+        });
+        addExecutionEntry(this.projectPath, taskId, {
+          startedAt: startedAt.toISOString(),
+          endedAt: endedAt.toISOString(),
+          status: "completed",
+          duration
+        });
+        this.runningTask = null;
+        this.pendingQATaskId = taskId;
+        this.runQAVerification(taskId).catch((error) => {
+          console.error("QA verification error:", error);
+          this.handleQAComplete(taskId, false, ["QA process failed to start"]);
+        });
+      } else {
+        updateTask(this.projectPath, taskId, {
+          status: "completed",
+          passes: true
+        });
+        addExecutionEntry(this.projectPath, taskId, {
+          startedAt: startedAt.toISOString(),
+          endedAt: endedAt.toISOString(),
+          status: "completed",
+          duration
+        });
+        logTaskExecution(this.projectPath, {
+          taskId,
+          taskTitle: task?.title || "Unknown",
+          status: "completed",
+          duration
+        });
+        this.emit("task:completed", { taskId, duration });
+        this.afkTasksCompleted++;
+        this.runningTask = null;
+        if (this.afkMode) {
+          this.continueAFKMode();
+        }
+      }
     } else {
       updateTask(this.projectPath, taskId, {
         status: "failed",
@@ -896,63 +1192,448 @@ Focus only on this task. When done, output: <promise>COMPLETE</promise>`;
         error
       });
       this.emit("task:failed", { taskId, error });
-    }
-    this.runningTask = null;
-    if (this.afkMode) {
-      this.continueAFKMode();
+      this.runningTask = null;
+      if (this.afkMode) {
+        this.continueAFKMode();
+      }
     }
   }
   /**
-   * Cancel the running task
+   * Build the QA verification prompt
    */
-  cancelTask(reason = "Cancelled by user") {
-    if (!this.runningTask) return false;
-    const { taskId, process: childProcess, startedAt } = this.runningTask;
-    const endedAt = /* @__PURE__ */ new Date();
-    const duration = endedAt.getTime() - startedAt.getTime();
-    const task = getTaskById(this.projectPath, taskId);
-    try {
-      childProcess.kill("SIGTERM");
-      setTimeout(() => {
-        try {
-          if (!childProcess.killed) {
-            childProcess.kill("SIGKILL");
-          }
-        } catch {
-        }
-      }, 2e3);
-    } catch {
+  buildQAPrompt(task, config) {
+    const kanbanDir = join4(this.projectPath, KANBAN_DIR4);
+    const prdPath = join4(kanbanDir, "prd.json");
+    const stepsText = task.steps.length > 0 ? `
+Verification steps:
+${task.steps.map((s, i) => `${i + 1}. ${s}`).join("\n")}` : "";
+    const verifyCommands = [];
+    if (config.project.typecheckCommand) {
+      verifyCommands.push(config.project.typecheckCommand);
     }
-    updateTask(this.projectPath, taskId, { status: "ready" });
-    addExecutionEntry(this.projectPath, taskId, {
-      startedAt: startedAt.toISOString(),
-      endedAt: endedAt.toISOString(),
-      status: "cancelled",
-      duration,
-      error: reason
-    });
-    logTaskExecution(this.projectPath, {
-      taskId,
-      taskTitle: task?.title || "Unknown",
-      status: "cancelled",
-      duration,
-      error: reason
-    });
-    this.emit("task:cancelled", { taskId });
-    this.runningTask = null;
-    return true;
+    if (config.project.testCommand) {
+      verifyCommands.push(config.project.testCommand);
+    }
+    return `You are a QA reviewer. Verify that the following task has been correctly implemented.
+
+## TASK TO VERIFY
+Title: ${task.title}
+Category: ${task.category}
+Priority: ${task.priority}
+
+${task.description}
+${stepsText}
+
+## YOUR JOB
+
+1. Review the recent git commits and changes made for this task.
+
+2. Check that all verification steps (if any) have been satisfied.
+
+3. Run the following quality checks:
+${verifyCommands.length > 0 ? verifyCommands.map((cmd) => `   - ${cmd}`).join("\n") : "   (No verification commands configured)"}
+
+4. Check that the implementation meets the task requirements.
+
+5. If everything passes, output: <qa>PASSED</qa>
+
+6. If there are issues, output: <qa>FAILED</qa>
+   Then list the issues that need to be fixed:
+   <issues>
+   - Issue 1
+   - Issue 2
+   </issues>
+
+Be thorough but fair. Only fail the QA if there are real issues that affect functionality or quality.`;
   }
   /**
-   * Start AFK mode - run tasks sequentially until done
+   * Run QA verification for a task
    */
-  startAFKMode(maxIterations) {
-    if (this.afkMode) {
-      throw new Error("AFK mode already running");
-    }
-    if (this.isRunning()) {
-      throw new Error("Cannot start AFK mode while a task is running");
+  async runQAVerification(taskId) {
+    const config = getConfig(this.projectPath);
+    const task = getTaskById(this.projectPath, taskId);
+    if (!task) {
+      throw new Error(`Task not found: ${taskId}`);
     }
-    this.afkMode = true;
+    const currentRetries = this.qaRetryCount.get(taskId) || 0;
+    const attempt = currentRetries + 1;
+    const startedAt = /* @__PURE__ */ new Date();
+    const prompt = this.buildQAPrompt(task, config);
+    const kanbanDir = join4(this.projectPath, KANBAN_DIR4);
+    const promptFile = join4(kanbanDir, `qa-${taskId}.txt`);
+    writeFileSync4(promptFile, prompt);
+    const args = [];
+    if (config.agent.model) {
+      args.push("--model", config.agent.model);
+    }
+    args.push("--permission-mode", config.agent.permissionMode);
+    args.push("-p");
+    args.push("--verbose");
+    args.push("--output-format", "stream-json");
+    args.push(`@${promptFile}`);
+    const fullCommand = `${config.agent.command} ${args.join(" ")}`;
+    console.log("[executor] QA command:", fullCommand);
+    const childProcess = spawn("bash", ["-c", fullCommand], {
+      cwd: this.projectPath,
+      env: {
+        ...process.env,
+        TERM: "xterm-256color",
+        FORCE_COLOR: "0",
+        NO_COLOR: "1"
+      },
+      stdio: ["ignore", "pipe", "pipe"]
+    });
+    this.qaSession = {
+      taskId,
+      process: childProcess,
+      startedAt,
+      output: [],
+      attempt
+    };
+    this.emit("qa:started", { taskId, attempt });
+    const logOutput = (line) => {
+      this.qaSession?.output.push(line);
+      this.emit("qa:output", { taskId, line });
+    };
+    logOutput(`[claude-kanban] Starting QA verification (attempt ${attempt})
+`);
+    let stdoutBuffer = "";
+    childProcess.stdout?.on("data", (data) => {
+      stdoutBuffer += data.toString();
+      const lines = stdoutBuffer.split("\n");
+      stdoutBuffer = lines.pop() || "";
+      for (const line of lines) {
+        if (!line.trim()) continue;
+        try {
+          const json = JSON.parse(line);
+          let text = "";
+          if (json.type === "assistant" && json.message?.content) {
+            for (const block of json.message.content) {
+              if (block.type === "text") {
+                text += block.text;
+              } else if (block.type === "tool_use") {
+                text += this.formatToolUse(block.name, block.input);
+              }
+            }
+          } else if (json.type === "content_block_delta" && json.delta?.text) {
+            text = json.delta.text;
+          }
+          if (text) {
+            logOutput(text);
+          }
+        } catch {
+          const cleanText = line.replace(/\x1B\[[0-9;]*[A-Za-z]/g, "");
+          if (cleanText.trim()) {
+            logOutput(cleanText + "\n");
+          }
+        }
+      }
+    });
+    childProcess.stderr?.on("data", (data) => {
+      const text = data.toString();
+      logOutput(`[stderr] ${text}`);
+    });
+    childProcess.on("error", (error) => {
+      console.log("[executor] QA spawn error:", error.message);
+      try {
+        unlinkSync(promptFile);
+      } catch {
+      }
+      this.handleQAComplete(taskId, false, [`QA process error: ${error.message}`]);
+    });
+    childProcess.on("close", (code) => {
+      console.log("[executor] QA process closed with code:", code);
+      try {
+        unlinkSync(promptFile);
+      } catch {
+      }
+      this.parseQAResult(taskId);
+    });
+    const timeoutMs = 5 * 60 * 1e3;
+    setTimeout(() => {
+      if (this.qaSession?.taskId === taskId) {
+        this.cancelQA("QA timeout exceeded");
+      }
+    }, timeoutMs);
+  }
+  /**
+   * Parse QA result from output
+   */
+  parseQAResult(taskId) {
+    if (!this.qaSession || this.qaSession.taskId !== taskId) return;
+    const output = this.qaSession.output.join("");
+    const passedMatch = output.includes("<qa>PASSED</qa>");
+    const failedMatch = output.includes("<qa>FAILED</qa>");
+    if (passedMatch) {
+      this.handleQAComplete(taskId, true, []);
+    } else if (failedMatch) {
+      const issuesMatch = output.match(/<issues>([\s\S]*?)<\/issues>/);
+      const issues = [];
+      if (issuesMatch) {
+        const issueLines = issuesMatch[1].split("\n");
+        for (const line of issueLines) {
+          const trimmed = line.trim();
+          if (trimmed.startsWith("-")) {
+            issues.push(trimmed.substring(1).trim());
+          } else if (trimmed) {
+            issues.push(trimmed);
+          }
+        }
+      }
+      this.handleQAComplete(taskId, false, issues.length > 0 ? issues : ["QA verification failed"]);
+    } else {
+      this.handleQAComplete(taskId, false, ["QA did not provide a clear PASSED/FAILED result"]);
+    }
+  }
+  /**
+   * Handle QA completion
+   */
+  handleQAComplete(taskId, passed, issues) {
+    const config = getConfig(this.projectPath);
+    const task = getTaskById(this.projectPath, taskId);
+    const currentRetries = this.qaRetryCount.get(taskId) || 0;
+    this.qaSession = null;
+    this.pendingQATaskId = null;
+    if (passed) {
+      updateTask(this.projectPath, taskId, {
+        status: "completed",
+        passes: true
+      });
+      logTaskExecution(this.projectPath, {
+        taskId,
+        taskTitle: task?.title || "Unknown",
+        status: "completed",
+        duration: 0
+      });
+      this.emit("qa:passed", { taskId });
+      this.emit("task:completed", { taskId, duration: 0 });
+      this.afkTasksCompleted++;
+      this.qaRetryCount.delete(taskId);
+    } else {
+      const willRetry = currentRetries < config.execution.qaMaxRetries;
+      this.emit("qa:failed", { taskId, issues, willRetry });
+      if (willRetry) {
+        this.qaRetryCount.set(taskId, currentRetries + 1);
+        console.log(`[executor] QA failed, retrying (${currentRetries + 1}/${config.execution.qaMaxRetries})`);
+        this.runTaskWithQAFix(taskId, issues).catch((error) => {
+          console.error("QA fix error:", error);
+          this.handleQAComplete(taskId, false, ["Failed to run QA fix"]);
+        });
+      } else {
+        updateTask(this.projectPath, taskId, {
+          status: "failed",
+          passes: false
+        });
+        logTaskExecution(this.projectPath, {
+          taskId,
+          taskTitle: task?.title || "Unknown",
+          status: "failed",
+          duration: 0,
+          error: `QA failed after ${config.execution.qaMaxRetries} retries: ${issues.join(", ")}`
+        });
+        this.emit("task:failed", { taskId, error: `QA failed: ${issues.join(", ")}` });
+        this.qaRetryCount.delete(taskId);
+      }
+    }
+    if (this.afkMode && !this.isBusy()) {
+      this.continueAFKMode();
+    }
+  }
+  /**
+   * Run task again with QA fix instructions
+   */
+  async runTaskWithQAFix(taskId, issues) {
+    const config = getConfig(this.projectPath);
+    const task = getTaskById(this.projectPath, taskId);
+    if (!task) {
+      throw new Error(`Task not found: ${taskId}`);
+    }
+    const startedAt = /* @__PURE__ */ new Date();
+    const issuesText = issues.map((i, idx) => `${idx + 1}. ${i}`).join("\n");
+    const prompt = `You are fixing issues found during QA verification for a task.
+
+## ORIGINAL TASK
+Title: ${task.title}
+${task.description}
+
+## QA ISSUES TO FIX
+${issuesText}
+
+## INSTRUCTIONS
+1. Review the issues reported by QA.
+2. Fix each issue.
+3. Run verification commands to ensure fixes work.
+4. When done, output: <promise>COMPLETE</promise>
+
+Focus only on fixing the reported issues, don't make unrelated changes.`;
+    const kanbanDir = join4(this.projectPath, KANBAN_DIR4);
+    const promptFile = join4(kanbanDir, `qafix-${taskId}.txt`);
+    writeFileSync4(promptFile, prompt);
+    const args = [];
+    if (config.agent.model) {
+      args.push("--model", config.agent.model);
+    }
+    args.push("--permission-mode", config.agent.permissionMode);
+    args.push("-p");
+    args.push("--verbose");
+    args.push("--output-format", "stream-json");
+    args.push(`@${promptFile}`);
+    const fullCommand = `${config.agent.command} ${args.join(" ")}`;
+    const childProcess = spawn("bash", ["-c", fullCommand], {
+      cwd: this.projectPath,
+      env: {
+        ...process.env,
+        TERM: "xterm-256color",
+        FORCE_COLOR: "0",
+        NO_COLOR: "1"
+      },
+      stdio: ["ignore", "pipe", "pipe"]
+    });
+    this.runningTask = {
+      taskId,
+      process: childProcess,
+      startedAt,
+      output: []
+    };
+    this.emit("task:started", { taskId, timestamp: startedAt.toISOString() });
+    let stdoutBuffer = "";
+    childProcess.stdout?.on("data", (data) => {
+      stdoutBuffer += data.toString();
+      const lines = stdoutBuffer.split("\n");
+      stdoutBuffer = lines.pop() || "";
+      for (const line of lines) {
+        if (!line.trim()) continue;
+        try {
+          const json = JSON.parse(line);
+          let text = "";
+          if (json.type === "assistant" && json.message?.content) {
+            for (const block of json.message.content) {
+              if (block.type === "text") {
+                text += block.text;
+              } else if (block.type === "tool_use") {
+                text += this.formatToolUse(block.name, block.input);
+              }
+            }
+          } else if (json.type === "content_block_delta" && json.delta?.text) {
+            text = json.delta.text;
+          }
+          if (text) {
+            this.runningTask?.output.push(text);
+            this.emit("task:output", { taskId, line: text, lineType: "stdout" });
+          }
+        } catch {
+          const cleanText = line.replace(/\x1B\[[0-9;]*[A-Za-z]/g, "");
+          if (cleanText.trim()) {
+            this.runningTask?.output.push(cleanText + "\n");
+            this.emit("task:output", { taskId, line: cleanText + "\n", lineType: "stdout" });
+          }
+        }
+      }
+    });
+    childProcess.stderr?.on("data", (data) => {
+      const text = data.toString();
+      this.runningTask?.output.push(`[stderr] ${text}`);
+      this.emit("task:output", { taskId, line: `[stderr] ${text}`, lineType: "stderr" });
+    });
+    childProcess.on("error", (error) => {
+      try {
+        unlinkSync(promptFile);
+      } catch {
+      }
+      this.handleQAComplete(taskId, false, [`Fix process error: ${error.message}`]);
+    });
+    childProcess.on("close", (code) => {
+      try {
+        unlinkSync(promptFile);
+      } catch {
+      }
+      const output = this.runningTask?.output.join("") || "";
+      const isComplete = output.includes("<promise>COMPLETE</promise>");
+      this.runningTask = null;
+      if (isComplete || code === 0) {
+        this.runQAVerification(taskId).catch((error) => {
+          console.error("QA verification error after fix:", error);
+          this.handleQAComplete(taskId, false, ["QA verification failed after fix"]);
+        });
+      } else {
+        this.handleQAComplete(taskId, false, [`Fix process exited with code ${code}`]);
+      }
+    });
+  }
+  /**
+   * Cancel QA verification
+   */
+  cancelQA(reason = "Cancelled") {
+    if (!this.qaSession) return false;
+    const { taskId, process: childProcess } = this.qaSession;
+    try {
+      childProcess.kill("SIGTERM");
+      setTimeout(() => {
+        try {
+          if (!childProcess.killed) {
+            childProcess.kill("SIGKILL");
+          }
+        } catch {
+        }
+      }, 2e3);
+    } catch {
+    }
+    this.emit("qa:failed", { taskId, issues: [reason], willRetry: false });
+    this.qaSession = null;
+    this.pendingQATaskId = null;
+    return true;
+  }
+  /**
+   * Cancel the running task
+   */
+  cancelTask(reason = "Cancelled by user") {
+    if (!this.runningTask) return false;
+    const { taskId, process: childProcess, startedAt } = this.runningTask;
+    const endedAt = /* @__PURE__ */ new Date();
+    const duration = endedAt.getTime() - startedAt.getTime();
+    const task = getTaskById(this.projectPath, taskId);
+    try {
+      childProcess.kill("SIGTERM");
+      setTimeout(() => {
+        try {
+          if (!childProcess.killed) {
+            childProcess.kill("SIGKILL");
+          }
+        } catch {
+        }
+      }, 2e3);
+    } catch {
+    }
+    updateTask(this.projectPath, taskId, { status: "ready" });
+    addExecutionEntry(this.projectPath, taskId, {
+      startedAt: startedAt.toISOString(),
+      endedAt: endedAt.toISOString(),
+      status: "cancelled",
+      duration,
+      error: reason
+    });
+    logTaskExecution(this.projectPath, {
+      taskId,
+      taskTitle: task?.title || "Unknown",
+      status: "cancelled",
+      duration,
+      error: reason
+    });
+    this.emit("task:cancelled", { taskId });
+    this.runningTask = null;
+    return true;
+  }
+  /**
+   * Start AFK mode - run tasks sequentially until done
+   */
+  startAFKMode(maxIterations) {
+    if (this.afkMode) {
+      throw new Error("AFK mode already running");
+    }
+    if (this.isBusy()) {
+      throw new Error("Cannot start AFK mode while another operation is in progress");
+    }
+    this.afkMode = true;
     this.afkIteration = 0;
     this.afkMaxIterations = maxIterations;
     this.afkTasksCompleted = 0;
@@ -960,67 +1641,523 @@ Focus only on this task. When done, output: <promise>COMPLETE</promise>`;
     this.continueAFKMode();
   }
   /**
-   * Continue AFK mode - pick next task
+   * Continue AFK mode - pick next task
+   */
+  continueAFKMode() {
+    if (!this.afkMode) return;
+    if (this.afkIteration >= this.afkMaxIterations) {
+      this.stopAFKMode();
+      return;
+    }
+    if (this.isBusy()) return;
+    const nextTask = getNextReadyTask(this.projectPath);
+    if (!nextTask) {
+      this.stopAFKMode();
+      return;
+    }
+    this.afkIteration++;
+    this.runTask(nextTask.id).catch((error) => {
+      console.error("AFK task error:", error);
+    });
+    this.emitAFKStatus();
+  }
+  /**
+   * Stop AFK mode
+   */
+  stopAFKMode() {
+    this.afkMode = false;
+    this.emitAFKStatus();
+  }
+  /**
+   * Emit AFK status
+   */
+  emitAFKStatus() {
+    this.emit("afk:status", {
+      running: this.afkMode,
+      currentIteration: this.afkIteration,
+      maxIterations: this.afkMaxIterations,
+      tasksCompleted: this.afkTasksCompleted
+    });
+  }
+  /**
+   * Get AFK status
+   */
+  getAFKStatus() {
+    return {
+      running: this.afkMode,
+      currentIteration: this.afkIteration,
+      maxIterations: this.afkMaxIterations,
+      tasksCompleted: this.afkTasksCompleted
+    };
+  }
+  /**
+   * Cancel running task/planning/QA and stop AFK mode
+   */
+  cancelAll() {
+    if (this.runningTask) {
+      try {
+        this.runningTask.process.kill("SIGKILL");
+      } catch {
+      }
+      this.runningTask = null;
+    }
+    if (this.planningSession) {
+      try {
+        this.planningSession.process.kill("SIGKILL");
+      } catch {
+      }
+      this.planningSession = null;
+    }
+    if (this.qaSession) {
+      try {
+        this.qaSession.process.kill("SIGKILL");
+      } catch {
+      }
+      this.qaSession = null;
+    }
+    this.pendingQATaskId = null;
+    this.qaRetryCount.clear();
+    this.stopAFKMode();
+  }
+};
+
+// src/server/services/roadmap.ts
+import { spawn as spawn2 } from "child_process";
+import { EventEmitter as EventEmitter2 } from "events";
+import { existsSync as existsSync3, readFileSync as readFileSync5, writeFileSync as writeFileSync5, mkdirSync as mkdirSync3 } from "fs";
+import { join as join5, basename as basename2 } from "path";
+import { nanoid as nanoid2 } from "nanoid";
+var ROADMAP_DIR = ".claude-kanban";
+var ROADMAP_FILE = "roadmap.json";
+var RoadmapService = class extends EventEmitter2 {
+  projectPath;
+  session = null;
+  config = null;
+  constructor(projectPath) {
+    super();
+    this.projectPath = projectPath;
+    this.loadConfig();
+  }
+  loadConfig() {
+    const configPath = join5(this.projectPath, ROADMAP_DIR, "config.json");
+    if (existsSync3(configPath)) {
+      this.config = JSON.parse(readFileSync5(configPath, "utf-8"));
+    }
+  }
+  /**
+   * Check if roadmap generation is in progress
+   */
+  isRunning() {
+    return this.session !== null;
+  }
+  /**
+   * Get existing roadmap if it exists
+   */
+  getRoadmap() {
+    const roadmapPath = join5(this.projectPath, ROADMAP_DIR, ROADMAP_FILE);
+    if (!existsSync3(roadmapPath)) {
+      return null;
+    }
+    try {
+      return JSON.parse(readFileSync5(roadmapPath, "utf-8"));
+    } catch {
+      return null;
+    }
+  }
+  /**
+   * Save roadmap to file
+   */
+  saveRoadmap(roadmap) {
+    const roadmapDir = join5(this.projectPath, ROADMAP_DIR);
+    if (!existsSync3(roadmapDir)) {
+      mkdirSync3(roadmapDir, { recursive: true });
+    }
+    const roadmapPath = join5(roadmapDir, ROADMAP_FILE);
+    writeFileSync5(roadmapPath, JSON.stringify(roadmap, null, 2));
+  }
+  /**
+   * Generate a new roadmap using Claude
+   */
+  async generate(request = {}) {
+    if (this.session) {
+      throw new Error("Roadmap generation already in progress");
+    }
+    this.emit("roadmap:started", {
+      type: "roadmap:started",
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    });
+    try {
+      this.emit("roadmap:progress", {
+        type: "roadmap:progress",
+        phase: "analyzing",
+        message: "Analyzing project structure..."
+      });
+      const projectInfo = await this.analyzeProject();
+      let competitors;
+      if (request.enableCompetitorResearch) {
+        this.emit("roadmap:progress", {
+          type: "roadmap:progress",
+          phase: "researching",
+          message: "Researching competitors..."
+        });
+        competitors = await this.researchCompetitors(projectInfo);
+      }
+      this.emit("roadmap:progress", {
+        type: "roadmap:progress",
+        phase: "generating",
+        message: "Generating feature roadmap..."
+      });
+      const roadmap = await this.generateRoadmap(projectInfo, competitors, request);
+      this.saveRoadmap(roadmap);
+      this.emit("roadmap:completed", {
+        type: "roadmap:completed",
+        roadmap
+      });
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : "Unknown error";
+      this.emit("roadmap:failed", {
+        type: "roadmap:failed",
+        error: errorMessage
+      });
+      throw error;
+    } finally {
+      this.session = null;
+    }
+  }
+  /**
+   * Cancel ongoing roadmap generation
+   */
+  cancel() {
+    if (this.session) {
+      this.session.process.kill("SIGTERM");
+      this.session = null;
+    }
+  }
+  /**
+   * Analyze the project structure
+   */
+  async analyzeProject() {
+    const projectName = basename2(this.projectPath);
+    let description = "";
+    let stack = [];
+    let existingFeatures = [];
+    const packageJsonPath = join5(this.projectPath, "package.json");
+    if (existsSync3(packageJsonPath)) {
+      try {
+        const pkg = JSON.parse(readFileSync5(packageJsonPath, "utf-8"));
+        description = pkg.description || "";
+        const deps = { ...pkg.dependencies, ...pkg.devDependencies };
+        if (deps.react) stack.push("React");
+        if (deps.vue) stack.push("Vue");
+        if (deps.angular) stack.push("Angular");
+        if (deps.next) stack.push("Next.js");
+        if (deps.express) stack.push("Express");
+        if (deps.fastify) stack.push("Fastify");
+        if (deps.typescript) stack.push("TypeScript");
+        if (deps.tailwindcss) stack.push("Tailwind CSS");
+      } catch {
+      }
+    }
+    const readmePaths = ["README.md", "readme.md", "README.txt", "readme.txt"];
+    for (const readmePath of readmePaths) {
+      const fullPath = join5(this.projectPath, readmePath);
+      if (existsSync3(fullPath)) {
+        const readme = readFileSync5(fullPath, "utf-8");
+        if (!description) {
+          const lines = readme.split("\n").filter((l) => l.trim() && !l.startsWith("#"));
+          if (lines.length > 0) {
+            description = lines[0].trim().slice(0, 500);
+          }
+        }
+        break;
+      }
+    }
+    const prdPath = join5(this.projectPath, ROADMAP_DIR, "prd.json");
+    if (existsSync3(prdPath)) {
+      try {
+        const prd = JSON.parse(readFileSync5(prdPath, "utf-8"));
+        existingFeatures = prd.tasks?.map((t) => t.title) || [];
+      } catch {
+      }
+    }
+    return {
+      name: projectName,
+      description,
+      stack,
+      existingFeatures
+    };
+  }
+  /**
+   * Research competitors using Claude with web search
+   */
+  async researchCompetitors(projectInfo) {
+    const prompt = this.buildCompetitorResearchPrompt(projectInfo);
+    const result = await this.runClaudeCommand(prompt);
+    try {
+      const jsonMatch = result.match(/```json\n([\s\S]*?)\n```/);
+      if (jsonMatch) {
+        return JSON.parse(jsonMatch[1]);
+      }
+      return JSON.parse(result);
+    } catch {
+      console.error("[roadmap] Failed to parse competitor research:", result);
+      return [];
+    }
+  }
+  /**
+   * Generate the roadmap using Claude
+   */
+  async generateRoadmap(projectInfo, competitors, request) {
+    const prompt = this.buildRoadmapPrompt(projectInfo, competitors, request);
+    const result = await this.runClaudeCommand(prompt);
+    try {
+      const jsonMatch = result.match(/```json\n([\s\S]*?)\n```/);
+      let roadmapData;
+      if (jsonMatch) {
+        roadmapData = JSON.parse(jsonMatch[1]);
+      } else {
+        roadmapData = JSON.parse(result);
+      }
+      const roadmap = {
+        id: `roadmap_${nanoid2(8)}`,
+        projectName: projectInfo.name,
+        projectDescription: roadmapData.projectDescription || projectInfo.description,
+        targetAudience: roadmapData.targetAudience || "Developers",
+        phases: roadmapData.phases.map((p, i) => ({
+          id: `phase_${nanoid2(8)}`,
+          name: p.name,
+          description: p.description,
+          order: i
+        })),
+        features: roadmapData.features.map((f) => ({
+          id: `feature_${nanoid2(8)}`,
+          title: f.title,
+          description: f.description,
+          priority: f.priority,
+          category: f.category || "functional",
+          effort: f.effort || "medium",
+          impact: f.impact || "medium",
+          phase: f.phase,
+          rationale: f.rationale || "",
+          steps: f.steps,
+          addedToKanban: false
+        })),
+        competitors,
+        generatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+        updatedAt: (/* @__PURE__ */ new Date()).toISOString()
+      };
+      return roadmap;
+    } catch (error) {
+      console.error("[roadmap] Failed to parse roadmap:", result);
+      throw new Error("Failed to parse roadmap from Claude response");
+    }
+  }
+  /**
+   * Build the competitor research prompt
+   */
+  buildCompetitorResearchPrompt(projectInfo) {
+    return `You are a product research analyst. Research competitors for the following project:
+
+Project: ${projectInfo.name}
+Description: ${projectInfo.description}
+Tech Stack: ${projectInfo.stack.join(", ") || "Unknown"}
+
+Your task:
+1. Use web search to find 3-5 competitors or similar projects
+2. Analyze their strengths and weaknesses
+3. Identify differentiating features
+
+Return your findings as JSON in this format:
+\`\`\`json
+[
+  {
+    "name": "Competitor Name",
+    "url": "https://example.com",
+    "strengths": ["strength 1", "strength 2"],
+    "weaknesses": ["weakness 1", "weakness 2"],
+    "differentiators": ["feature 1", "feature 2"]
+  }
+]
+\`\`\`
+
+Only return the JSON, no other text.`;
+  }
+  /**
+   * Build the roadmap generation prompt
    */
-  continueAFKMode() {
-    if (!this.afkMode) return;
-    if (this.afkIteration >= this.afkMaxIterations) {
-      this.stopAFKMode();
-      return;
+  buildRoadmapPrompt(projectInfo, competitors, request) {
+    let prompt = `You are a product strategist creating a feature roadmap for a software project.
+
+## Project Information
+Name: ${projectInfo.name}
+Description: ${projectInfo.description}
+Tech Stack: ${projectInfo.stack.join(", ") || "Unknown"}
+${projectInfo.existingFeatures.length > 0 ? `
+Existing Features/Tasks:
+${projectInfo.existingFeatures.map((f) => `- ${f}`).join("\n")}` : ""}
+`;
+    if (competitors && competitors.length > 0) {
+      prompt += `
+## Competitor Analysis
+${competitors.map((c) => `
+### ${c.name}
+- Strengths: ${c.strengths.join(", ")}
+- Weaknesses: ${c.weaknesses.join(", ")}
+- Key Features: ${c.differentiators.join(", ")}
+`).join("\n")}
+`;
     }
-    if (this.isRunning()) return;
-    const nextTask = getNextReadyTask(this.projectPath);
-    if (!nextTask) {
-      this.stopAFKMode();
-      return;
+    if (request.focusAreas && request.focusAreas.length > 0) {
+      prompt += `
+## Focus Areas
+The user wants to focus on: ${request.focusAreas.join(", ")}
+`;
     }
-    this.afkIteration++;
-    this.runTask(nextTask.id).catch((error) => {
-      console.error("AFK task error:", error);
-    });
-    this.emitAFKStatus();
-  }
-  /**
-   * Stop AFK mode
-   */
-  stopAFKMode() {
-    this.afkMode = false;
-    this.emitAFKStatus();
+    if (request.customPrompt) {
+      prompt += `
+## Additional Context
+${request.customPrompt}
+`;
+    }
+    prompt += `
+## Your Task
+Create a comprehensive product roadmap with features organized into phases.
+
+Use the MoSCoW prioritization framework:
+- must: Critical features that must be implemented
+- should: Important features that should be implemented
+- could: Nice-to-have features that could be implemented
+- wont: Features that won't be implemented in the near term
+
+For each feature, estimate:
+- effort: low, medium, or high
+- impact: low, medium, or high
+
+Categories should be one of: functional, ui, bug, enhancement, testing, refactor
+
+Return your roadmap as JSON:
+\`\`\`json
+{
+  "projectDescription": "Brief description of the project",
+  "targetAudience": "Who this project is for",
+  "phases": [
+    {
+      "name": "Phase 1: MVP",
+      "description": "Core features for minimum viable product"
+    },
+    {
+      "name": "Phase 2: Enhancement",
+      "description": "Features to improve user experience"
+    }
+  ],
+  "features": [
+    {
+      "title": "Feature title",
+      "description": "What this feature does",
+      "priority": "must",
+      "category": "functional",
+      "effort": "medium",
+      "impact": "high",
+      "phase": "Phase 1: MVP",
+      "rationale": "Why this feature is important",
+      "steps": ["Step 1", "Step 2"]
+    }
+  ]
+}
+\`\`\`
+
+Generate 10-20 strategic features across 3-4 phases. Be specific and actionable.
+Don't duplicate features that already exist in the project.
+Only return the JSON, no other text.`;
+    return prompt;
   }
   /**
-   * Emit AFK status
+   * Run a Claude command and return the output
    */
-  emitAFKStatus() {
-    this.emit("afk:status", {
-      running: this.afkMode,
-      currentIteration: this.afkIteration,
-      maxIterations: this.afkMaxIterations,
-      tasksCompleted: this.afkTasksCompleted
+  runClaudeCommand(prompt) {
+    return new Promise((resolve, reject) => {
+      const command = this.config?.agent.command || "claude";
+      const permissionMode = this.config?.agent.permissionMode || "auto";
+      const model = this.config?.agent.model;
+      const promptPath = join5(this.projectPath, ROADMAP_DIR, "prompt-roadmap.txt");
+      writeFileSync5(promptPath, prompt);
+      const args = [
+        "--permission-mode",
+        permissionMode,
+        "-p",
+        "--verbose",
+        "--output-format",
+        "text",
+        `@${promptPath}`
+      ];
+      if (model) {
+        args.unshift("--model", model);
+      }
+      console.log(`[roadmap] Command: ${command} ${args.join(" ")}`);
+      const childProcess = spawn2(command, args, {
+        cwd: this.projectPath,
+        stdio: ["pipe", "pipe", "pipe"],
+        env: {
+          ...process.env,
+          FORCE_COLOR: "0"
+        }
+      });
+      this.session = {
+        process: childProcess,
+        startedAt: /* @__PURE__ */ new Date(),
+        output: []
+      };
+      let stdout = "";
+      let stderr = "";
+      childProcess.stdout?.on("data", (data) => {
+        const chunk = data.toString();
+        stdout += chunk;
+        this.session?.output.push(chunk);
+      });
+      childProcess.stderr?.on("data", (data) => {
+        stderr += data.toString();
+      });
+      childProcess.on("close", (code) => {
+        this.session = null;
+        if (code === 0) {
+          resolve(stdout);
+        } else {
+          reject(new Error(`Claude command failed with code ${code}: ${stderr}`));
+        }
+      });
+      childProcess.on("error", (error) => {
+        this.session = null;
+        reject(error);
+      });
     });
   }
   /**
-   * Get AFK status
+   * Mark a feature as added to kanban
    */
-  getAFKStatus() {
-    return {
-      running: this.afkMode,
-      currentIteration: this.afkIteration,
-      maxIterations: this.afkMaxIterations,
-      tasksCompleted: this.afkTasksCompleted
-    };
+  markFeatureAdded(featureId) {
+    const roadmap = this.getRoadmap();
+    if (!roadmap) return null;
+    const feature = roadmap.features.find((f) => f.id === featureId);
+    if (feature) {
+      feature.addedToKanban = true;
+      roadmap.updatedAt = (/* @__PURE__ */ new Date()).toISOString();
+      this.saveRoadmap(roadmap);
+    }
+    return roadmap;
   }
   /**
-   * Cancel running task and stop AFK mode
+   * Delete a feature from the roadmap
    */
-  cancelAll() {
-    if (this.runningTask) {
-      try {
-        this.runningTask.process.kill("SIGKILL");
-      } catch {
-      }
-      this.runningTask = null;
+  deleteFeature(featureId) {
+    const roadmap = this.getRoadmap();
+    if (!roadmap) return null;
+    const index = roadmap.features.findIndex((f) => f.id === featureId);
+    if (index !== -1) {
+      roadmap.features.splice(index, 1);
+      roadmap.updatedAt = (/* @__PURE__ */ new Date()).toISOString();
+      this.saveRoadmap(roadmap);
     }
-    this.stopAFKMode();
+    return roadmap;
   }
 };
 
@@ -1327,7 +2464,7 @@ function getTemplateById(id) {
 }
 
 // src/server/services/ai.ts
-import { spawn as spawn2 } from "child_process";
+import { spawn as spawn3 } from "child_process";
 async function generateTaskFromPrompt(projectPath, userPrompt) {
   const config = getConfig(projectPath);
   const systemPrompt = `You are a task generator for a Kanban board used in software development.
@@ -1366,7 +2503,7 @@ User request: ${userPrompt}`;
     }
     let output = "";
     let errorOutput = "";
-    const proc = spawn2(config.agent.command, args, {
+    const proc = spawn3(config.agent.command, args, {
       cwd: projectPath,
       shell: true,
       env: { ...process.env }
@@ -1438,12 +2575,22 @@ async function createServer(projectPath, port) {
   });
   app.use(express.json());
   const executor = new TaskExecutor(projectPath);
+  const roadmapService = new RoadmapService(projectPath);
   executor.on("task:started", (data) => io.emit("task:started", data));
   executor.on("task:output", (data) => io.emit("task:output", data));
   executor.on("task:completed", (data) => io.emit("task:completed", data));
   executor.on("task:failed", (data) => io.emit("task:failed", data));
   executor.on("task:cancelled", (data) => io.emit("task:cancelled", data));
   executor.on("afk:status", (data) => io.emit("afk:status", data));
+  executor.on("planning:started", (data) => io.emit("planning:started", data));
+  executor.on("planning:output", (data) => io.emit("planning:output", data));
+  executor.on("planning:completed", (data) => io.emit("planning:completed", data));
+  executor.on("planning:failed", (data) => io.emit("planning:failed", data));
+  executor.on("planning:cancelled", (data) => io.emit("planning:cancelled", data));
+  roadmapService.on("roadmap:started", (data) => io.emit("roadmap:started", data));
+  roadmapService.on("roadmap:progress", (data) => io.emit("roadmap:progress", data));
+  roadmapService.on("roadmap:completed", (data) => io.emit("roadmap:completed", data));
+  roadmapService.on("roadmap:failed", (data) => io.emit("roadmap:failed", data));
   app.get("/api/tasks", (_req, res) => {
     try {
       const tasks = getAllTasks(projectPath);
@@ -1658,6 +2805,40 @@ async function createServer(projectPath, port) {
       res.status(500).json({ error: String(error) });
     }
   });
+  app.post("/api/plan", async (req, res) => {
+    try {
+      const { goal } = req.body;
+      if (!goal) {
+        res.status(400).json({ error: "Goal is required" });
+        return;
+      }
+      await executor.runPlanningSession(goal);
+      res.json({ success: true });
+    } catch (error) {
+      res.status(400).json({ error: String(error) });
+    }
+  });
+  app.post("/api/plan/cancel", (_req, res) => {
+    try {
+      const cancelled = executor.cancelPlanning();
+      if (!cancelled) {
+        res.status(404).json({ error: "No planning session running" });
+        return;
+      }
+      res.json({ success: true });
+    } catch (error) {
+      res.status(500).json({ error: String(error) });
+    }
+  });
+  app.get("/api/plan/status", (_req, res) => {
+    try {
+      const planning = executor.isPlanning();
+      const goal = executor.getPlanningGoal();
+      res.json({ planning, goal: goal || null });
+    } catch (error) {
+      res.status(500).json({ error: String(error) });
+    }
+  });
   app.get("/api/running", (_req, res) => {
     try {
       const taskId = executor.getRunningTaskId();
@@ -1671,13 +2852,104 @@ async function createServer(projectPath, port) {
       const counts = getTaskCounts(projectPath);
       const running = executor.isRunning() ? 1 : 0;
       const afk = executor.getAFKStatus();
-      res.json({ counts, running, afk });
+      const planning = executor.isPlanning();
+      res.json({ counts, running, afk, planning });
+    } catch (error) {
+      res.status(500).json({ error: String(error) });
+    }
+  });
+  app.get("/api/roadmap", (_req, res) => {
+    try {
+      const roadmap = roadmapService.getRoadmap();
+      res.json({ roadmap });
+    } catch (error) {
+      res.status(500).json({ error: String(error) });
+    }
+  });
+  app.post("/api/roadmap/generate", async (req, res) => {
+    try {
+      const request = req.body;
+      if (roadmapService.isRunning()) {
+        res.status(400).json({ error: "Roadmap generation already in progress" });
+        return;
+      }
+      roadmapService.generate(request).catch(console.error);
+      res.json({ success: true, message: "Roadmap generation started" });
+    } catch (error) {
+      res.status(500).json({ error: String(error) });
+    }
+  });
+  app.post("/api/roadmap/cancel", (_req, res) => {
+    try {
+      if (!roadmapService.isRunning()) {
+        res.status(400).json({ error: "No roadmap generation in progress" });
+        return;
+      }
+      roadmapService.cancel();
+      res.json({ success: true });
+    } catch (error) {
+      res.status(500).json({ error: String(error) });
+    }
+  });
+  app.post("/api/roadmap/features/:id/add-to-kanban", (req, res) => {
+    try {
+      const roadmap = roadmapService.getRoadmap();
+      if (!roadmap) {
+        res.status(404).json({ error: "No roadmap found" });
+        return;
+      }
+      const feature = roadmap.features.find((f) => f.id === req.params.id);
+      if (!feature) {
+        res.status(404).json({ error: "Feature not found" });
+        return;
+      }
+      if (feature.addedToKanban) {
+        res.status(400).json({ error: "Feature already added to kanban" });
+        return;
+      }
+      const priorityMap = {
+        must: "critical",
+        should: "high",
+        could: "medium",
+        wont: "low"
+      };
+      const task = createTask(projectPath, {
+        title: feature.title,
+        description: feature.description,
+        category: feature.category,
+        priority: priorityMap[feature.priority] || "medium",
+        steps: feature.steps || [],
+        status: "draft"
+      });
+      roadmapService.markFeatureAdded(req.params.id);
+      io.emit("task:created", task);
+      res.json({ task });
+    } catch (error) {
+      res.status(500).json({ error: String(error) });
+    }
+  });
+  app.delete("/api/roadmap/features/:id", (req, res) => {
+    try {
+      const roadmap = roadmapService.deleteFeature(req.params.id);
+      if (!roadmap) {
+        res.status(404).json({ error: "Roadmap or feature not found" });
+        return;
+      }
+      io.emit("roadmap:updated", roadmap);
+      res.json({ success: true });
+    } catch (error) {
+      res.status(500).json({ error: String(error) });
+    }
+  });
+  app.get("/api/roadmap/status", (_req, res) => {
+    try {
+      res.json({ generating: roadmapService.isRunning() });
     } catch (error) {
       res.status(500).json({ error: String(error) });
     }
   });
-  const clientPath = join5(__dirname2, "..", "client");
-  if (existsSync3(clientPath)) {
+  const clientPath = join6(__dirname2, "..", "client");
+  if (existsSync4(clientPath)) {
     app.use(express.static(clientPath));
   }
   app.get("*", (_req, res) => {
@@ -1698,8 +2970,11 @@ async function createServer(projectPath, port) {
       tasks: getAllTasks(projectPath),
       running: runningIds,
       afk: executor.getAFKStatus(),
-      taskLogs
+      taskLogs,
       // Include logs for running task
+      planning: executor.isPlanning(),
+      planningGoal: executor.getPlanningGoal() || null,
+      planningOutput: executor.getPlanningOutput() || []
     });
     socket.on("get-logs", (taskId) => {
       const logs = executor.getTaskLog(taskId);
@@ -1929,7 +3204,7 @@ function getClientHTML() {
       transition: all 0.2s var(--ease-out-expo);
     }
     .side-panel-header {
-      padding: 16px 20px;
+      padding: 12px 16px;
       border-bottom: 1px solid #e5e5e5;
       flex-shrink: 0;
     }
@@ -1947,7 +3222,8 @@ function getClientHTML() {
       flex-shrink: 0;
     }
     .side-panel-tab {
-      padding: 12px 16px;
+      padding: 10px 14px;
+      font-size: 13px;
       color: #737373;
       cursor: pointer;
       border-bottom: 2px solid transparent;
@@ -2240,6 +3516,10 @@ let state = {
   logFullscreen: false,
   closedTabs: new Set(),
   sidePanel: null, // task id for side panel
+  // Planning state
+  planning: false,
+  planningGoal: '',
+  planningOutput: [],
   sidePanelTab: 'logs', // 'logs' or 'details'
   darkMode: localStorage.getItem('darkMode') === 'true', // Add dark mode state
 };
@@ -2334,6 +3614,14 @@ socket.on('init', (data) => {
   state.running = data.running;
   state.afk = data.afk;
 
+  // Planning state
+  state.planning = data.planning || false;
+  state.planningGoal = data.planningGoal || '';
+  state.planningOutput = (data.planningOutput || []).map(text => ({
+    text: text,
+    timestamp: new Date().toISOString()
+  }));
+
   // Load persisted logs for running tasks
   if (data.taskLogs) {
     for (const [taskId, logs] of Object.entries(data.taskLogs)) {
@@ -2438,6 +3726,48 @@ socket.on('afk:status', (status) => {
   render();
 });
 
+// Planning socket handlers
+socket.on('planning:started', ({ goal, timestamp }) => {
+  state.planning = true;
+  state.planningGoal = goal;
+  state.planningOutput = [];
+  state.showModal = 'planning';
+  showToast('Planning started: ' + goal.substring(0, 50) + (goal.length > 50 ? '...' : ''), 'info');
+  render();
+});
+
+socket.on('planning:output', ({ line }) => {
+  state.planningOutput.push({
+    text: line,
+    timestamp: new Date().toISOString()
+  });
+  render();
+});
+
+socket.on('planning:completed', () => {
+  state.planning = false;
+  showToast('Planning complete! New tasks added to board.', 'success');
+  // Refresh tasks from server
+  fetch('/api/tasks').then(r => r.json()).then(data => {
+    state.tasks = data.tasks;
+    state.showModal = null;
+    render();
+  });
+});
+
+socket.on('planning:failed', ({ error }) => {
+  state.planning = false;
+  showToast('Planning failed: ' + error, 'error');
+  render();
+});
+
+socket.on('planning:cancelled', () => {
+  state.planning = false;
+  state.showModal = null;
+  showToast('Planning cancelled', 'warning');
+  render();
+});
+
 // Load templates
 fetch('/api/templates').then(r => r.json()).then(data => {
   state.templates = data.templates;
@@ -2517,6 +3847,18 @@ async function stopAFK() {
   await fetch('/api/afk/stop', { method: 'POST' });
 }
 
+async function startPlanning(goal) {
+  await fetch('/api/plan', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ goal })
+  });
+}
+
+async function cancelPlanning() {
+  await fetch('/api/plan/cancel', { method: 'POST' });
+}
+
 // Enhanced Drag and drop
 let draggedTask = null;
 let draggedElement = null;
@@ -2661,6 +4003,11 @@ function openSidePanel(taskId) {
   state.activeTab = taskId;
   state.closedTabs.delete(taskId);
 
+  // Auto-switch to logs tab if task is running
+  if (state.running.includes(taskId)) {
+    state.sidePanelTab = 'logs';
+  }
+
   // Request logs from server if not already loaded
   if (!state.taskOutput[taskId] || state.taskOutput[taskId].length === 0) {
     socket.emit('get-logs', taskId);
@@ -2965,6 +4312,71 @@ function renderModal() {
     \`;
   }
 
+  // Planning input modal
+  if (state.showModal === 'plan-input') {
+    return \`
+      <div class="modal-backdrop fixed inset-0 flex items-center justify-center z-50" onclick="if(event.target === event.currentTarget) { state.showModal = null; render(); }">
+        <div class="modal-content card rounded-xl w-full max-w-lg mx-4">
+          <div class="px-6 py-4 border-b border-white/5 flex justify-between items-center">
+            <h3 class="font-display font-semibold text-canvas-800 text-lg">\u{1F3AF} AI Task Planner</h3>
+            <button onclick="state.showModal = null; render();" class="btn btn-ghost p-1.5 text-canvas-500 hover:text-canvas-700">\u2715</button>
+          </div>
+          <div class="p-6">
+            <p class="text-sm text-canvas-600 mb-4">Describe your goal and the AI will analyze the codebase and break it down into concrete tasks.</p>
+            <div class="space-y-4">
+              <div>
+                <label class="block text-sm font-medium text-canvas-700 mb-2">What do you want to build?</label>
+                <textarea id="planning-goal" rows="4" placeholder="e.g., Add user authentication with JWT tokens, login/logout functionality, and protected routes..."
+                          class="input w-full resize-none"></textarea>
+              </div>
+              <div class="bg-blue-50 border border-blue-200 rounded-lg p-3">
+                <p class="text-xs text-blue-700">\u{1F4A1} Be specific about what you want. The AI will explore your codebase and create 3-8 tasks with implementation guidance.</p>
+              </div>
+            </div>
+            <div class="flex justify-end gap-3 mt-6">
+              <button onclick="state.showModal = null; render();"
+                      class="btn btn-ghost px-4 py-2.5">Cancel</button>
+              <button onclick="handleStartPlanning()"
+                      class="btn px-5 py-2.5 bg-blue-500 hover:bg-blue-600 text-white font-medium">\u{1F680} Start Planning</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    \`;
+  }
+
+  // Planning progress modal
+  if (state.showModal === 'planning') {
+    const outputHtml = state.planningOutput.length > 0
+      ? state.planningOutput.map(l => \`<div class="log-line">\${highlightLog(l.text || l)}</div>\`).join('')
+      : '<div class="text-canvas-400 text-sm">Analyzing codebase and generating tasks...</div>';
+
+    return \`
+      <div class="modal-backdrop fixed inset-0 flex items-center justify-center z-50">
+        <div class="modal-content card rounded-xl w-full max-w-3xl mx-4 max-h-[80vh] flex flex-col">
+          <div class="px-6 py-4 border-b border-white/5 flex justify-between items-center flex-shrink-0">
+            <div class="flex items-center gap-3">
+              <span class="text-xl animate-pulse">\u{1F3AF}</span>
+              <div>
+                <h3 class="font-display font-semibold text-canvas-800 text-lg">Planning in Progress</h3>
+                <p class="text-xs text-canvas-500 truncate max-w-[400px]">\${escapeHtml(state.planningGoal)}</p>
+              </div>
+            </div>
+            <button onclick="if(confirm('Cancel planning?')) cancelPlanning();"
+                    class="btn btn-ghost px-3 py-1.5 text-sm text-status-failed hover:bg-status-failed/10">
+              \u23F9 Cancel
+            </button>
+          </div>
+          <div class="flex-1 overflow-hidden p-4">
+            <div class="log-container h-full overflow-y-auto" id="planning-log">
+              \${outputHtml}
+            </div>
+          </div>
+        </div>
+      </div>
+    \`;
+  }
+
   return '';
 }
 
@@ -2978,100 +4390,55 @@ function renderSidePanel() {
   const output = state.taskOutput[task.id] || [];
   const startTime = state.taskStartTime[task.id];
   const lastExec = task.executionHistory?.[task.executionHistory.length - 1];
+  const elapsed = isRunning && startTime ? formatElapsed(startTime) : null;
 
   return \`
     <div class="side-panel">
-      <!-- Header -->
-      <div class="side-panel-header">
-        <div class="flex justify-between items-start">
-          <div class="flex-1 pr-4">
-            <h2 class="font-semibold text-canvas-900 text-lg leading-tight">\${escapeHtml(task.title)}</h2>
-            <div class="flex items-center gap-2 mt-2">
-              <span class="status-badge status-badge-\${task.status}">
+      <!-- Compact Header -->
+      <div class="side-panel-header" style="padding: 12px 16px;">
+        <div class="flex justify-between items-start gap-2">
+          <div class="flex-1 min-w-0">
+            <h2 class="font-semibold text-canvas-900 text-base leading-tight truncate" title="\${escapeHtml(task.title)}">\${escapeHtml(task.title)}</h2>
+            <div class="flex items-center gap-2 mt-1.5 flex-wrap">
+              <span class="status-badge status-badge-\${task.status}" style="font-size: 11px; padding: 2px 8px;">
                 <span class="w-1.5 h-1.5 rounded-full bg-current \${isRunning ? 'animate-pulse' : ''}"></span>
                 \${task.status.replace('_', ' ')}
               </span>
+              \${elapsed ? \`<span class="text-xs text-canvas-500">\u23F1 \${elapsed}</span>\` : ''}
+              <span class="text-xs text-canvas-400">\${task.priority} \xB7 \${task.category}</span>
             </div>
           </div>
-          <div class="flex items-center gap-1">
+          <div class="flex items-center gap-0.5 flex-shrink-0">
+            \${task.status === 'in_progress' ? \`
+              <button onclick="cancelTask('\${task.id}')" class="btn btn-ghost p-1.5 text-status-failed hover:bg-status-failed/10" title="Stop">
+                \u23F9
+              </button>
+            \` : task.status === 'ready' ? \`
+              <button onclick="runTask('\${task.id}')" class="btn btn-ghost p-1.5 text-status-success hover:bg-status-success/10" title="Run">
+                \u25B6
+              </button>
+            \` : task.status === 'draft' ? \`
+              <button onclick="updateTask('\${task.id}', { status: 'ready' })" class="btn btn-ghost p-1.5 text-blue-500 hover:bg-blue-50" title="Move to Ready">
+                \u2192
+              </button>
+            \` : task.status === 'failed' ? \`
+              <button onclick="retryTask('\${task.id}')" class="btn btn-ghost p-1.5 text-canvas-500 hover:bg-canvas-100" title="Retry">
+                \u21BB
+              </button>
+            \` : ''}
             <button onclick="state.editingTask = state.tasks.find(t => t.id === '\${task.id}'); state.showModal = 'edit'; render();"
-                    class="btn btn-ghost p-2 text-canvas-500 hover:text-canvas-700" title="Edit">
+                    class="btn btn-ghost p-1.5 text-canvas-400 hover:text-canvas-600" title="Edit">
               \u270F\uFE0F
             </button>
-            <button onclick="if(confirm('Delete this task?')) { deleteTask('\${task.id}'); closeSidePanel(); }"
-                    class="btn btn-ghost p-2 text-canvas-500 hover:text-status-failed" title="Delete">
-              \u{1F5D1}\uFE0F
-            </button>
-            <button onclick="closeSidePanel()" class="btn btn-ghost p-2 text-canvas-500 hover:text-canvas-700" title="Close">
+            <button onclick="closeSidePanel()" class="btn btn-ghost p-1.5 text-canvas-400 hover:text-canvas-600" title="Close">
               \u2715
             </button>
           </div>
         </div>
       </div>
 
-      <!-- Description -->
-      <div class="px-5 py-4 border-b border-canvas-200 flex-shrink-0">
-        <p class="text-sm text-canvas-600 leading-relaxed">\${escapeHtml(task.description)}</p>
-        \${task.steps && task.steps.length > 0 ? \`
-          <div class="mt-3">
-            <div class="text-xs font-medium text-canvas-500 mb-2">Steps:</div>
-            <ul class="text-sm text-canvas-600 space-y-1">
-              \${task.steps.map(s => \`<li class="flex gap-2"><span class="text-canvas-400">\u2022</span>\${escapeHtml(s)}</li>\`).join('')}
-            </ul>
-          </div>
-        \` : ''}
-      </div>
-
-      <!-- Task Details Grid -->
-      <div class="details-grid">
-        <div class="details-item">
-          <span class="details-label">Priority</span>
-          <span class="details-value capitalize">\${task.priority}</span>
-        </div>
-        <div class="details-item">
-          <span class="details-label">Category</span>
-          <span class="details-value">\${categoryIcons[task.category] || ''} \${task.category}</span>
-        </div>
-        \${startTime || lastExec ? \`
-          <div class="details-item">
-            <span class="details-label">Started</span>
-            <span class="details-value">\${new Date(startTime || lastExec?.startedAt).toLocaleString()}</span>
-          </div>
-        \` : ''}
-        \${lastExec?.duration ? \`
-          <div class="details-item">
-            <span class="details-label">Duration</span>
-            <span class="details-value">\${Math.round(lastExec.duration / 1000)}s</span>
-          </div>
-        \` : ''}
-      </div>
-
-      <!-- Action Buttons -->
-      <div class="px-5 py-4 border-b border-canvas-200 flex flex-wrap gap-2 flex-shrink-0">
-        \${task.status === 'draft' ? \`
-          <button onclick="updateTask('\${task.id}', { status: 'ready' })" class="btn btn-primary px-4 py-2 text-sm">
-            \u2192 Move to Ready
-          </button>
-        \` : ''}
-        \${task.status === 'ready' ? \`
-          <button onclick="runTask('\${task.id}')" class="btn btn-primary px-4 py-2 text-sm">
-            \u25B6 Run Task
-          </button>
-        \` : ''}
-        \${task.status === 'in_progress' ? \`
-          <button onclick="cancelTask('\${task.id}')" class="btn btn-danger px-4 py-2 text-sm">
-            \u23F9 Stop Attempt
-          </button>
-        \` : ''}
-        \${task.status === 'failed' ? \`
-          <button onclick="retryTask('\${task.id}')" class="btn btn-primary px-4 py-2 text-sm">
-            \u21BB Retry
-          </button>
-        \` : ''}
-      </div>
-
-      <!-- Tabs -->
-      <div class="side-panel-tabs">
+      <!-- Tabs (moved up, right after header) -->
+      <div class="side-panel-tabs" style="padding: 0 12px;">
         <div class="side-panel-tab \${state.sidePanelTab === 'logs' ? 'active' : ''}" onclick="state.sidePanelTab = 'logs'; render();">
           \u{1F4CB} Logs
         </div>
@@ -3081,9 +4448,9 @@ function renderSidePanel() {
       </div>
 
       <!-- Tab Content -->
-      <div class="side-panel-body">
+      <div class="side-panel-body" style="flex: 1; overflow: hidden; display: flex; flex-direction: column;">
         \${state.sidePanelTab === 'logs' ? \`
-          <div class="log-container" id="side-panel-log">
+          <div class="log-container" id="side-panel-log" style="flex: 1; overflow-y: auto;">
             \${output.length > 0
               ? output.map((l, i) => {
                   const text = l.text || l;
@@ -3093,34 +4460,62 @@ function renderSidePanel() {
             }
           </div>
         \` : \`
-          <div class="p-5">
-            <div class="text-sm text-canvas-600">
-              <div class="mb-4">
-                <div class="text-xs font-medium text-canvas-500 mb-1">Created</div>
-                <div>\${new Date(task.createdAt).toLocaleString()}</div>
+          <div style="flex: 1; overflow-y: auto; padding: 16px;">
+            <!-- Description -->
+            <div class="mb-5">
+              <div class="text-xs font-semibold text-canvas-500 uppercase tracking-wide mb-2">Description</div>
+              <div class="text-sm text-canvas-700 leading-relaxed bg-canvas-50 rounded-lg p-3 border border-canvas-200">
+                \${escapeHtml(task.description || 'No description provided.')}
               </div>
-              <div class="mb-4">
-                <div class="text-xs font-medium text-canvas-500 mb-1">Last Updated</div>
-                <div>\${new Date(task.updatedAt).toLocaleString()}</div>
+            </div>
+
+            <!-- Steps -->
+            \${task.steps && task.steps.length > 0 ? \`
+              <div class="mb-5">
+                <div class="text-xs font-semibold text-canvas-500 uppercase tracking-wide mb-2">Steps (\${task.steps.length})</div>
+                <div class="bg-canvas-50 rounded-lg border border-canvas-200 divide-y divide-canvas-200">
+                  \${task.steps.map((step, i) => \`
+                    <div class="flex gap-3 p-3 text-sm">
+                      <span class="flex-shrink-0 w-5 h-5 rounded-full bg-canvas-200 text-canvas-500 flex items-center justify-center text-xs font-medium">\${i + 1}</span>
+                      <span class="text-canvas-700">\${escapeHtml(step)}</span>
+                    </div>
+                  \`).join('')}
+                </div>
+              </div>
+            \` : ''}
+
+            <!-- Metadata -->
+            <div class="mb-5 grid grid-cols-2 gap-3">
+              <div class="bg-canvas-50 rounded-lg p-3 border border-canvas-200">
+                <div class="text-xs text-canvas-500 mb-1">Created</div>
+                <div class="text-sm text-canvas-700">\${new Date(task.createdAt).toLocaleDateString()}</div>
               </div>
-              \${task.executionHistory && task.executionHistory.length > 0 ? \`
-                <div>
-                  <div class="text-xs font-medium text-canvas-500 mb-2">Execution History</div>
-                  <div class="space-y-2">
-                    \${task.executionHistory.slice(-5).reverse().map(exec => \`
-                      <div class="bg-canvas-100 rounded p-2 text-xs">
-                        <div class="flex justify-between">
-                          <span class="\${exec.status === 'completed' ? 'text-status-success' : 'text-status-failed'}">\${exec.status}</span>
-                          <span class="text-canvas-500">\${Math.round(exec.duration / 1000)}s</span>
-                        </div>
-                        <div class="text-canvas-500 mt-1">\${new Date(exec.startedAt).toLocaleString()}</div>
-                        \${exec.error ? \`<div class="text-status-failed mt-1">\${escapeHtml(exec.error)}</div>\` : ''}
+              <div class="bg-canvas-50 rounded-lg p-3 border border-canvas-200">
+                <div class="text-xs text-canvas-500 mb-1">Updated</div>
+                <div class="text-sm text-canvas-700">\${new Date(task.updatedAt).toLocaleDateString()}</div>
+              </div>
+            </div>
+
+            <!-- Execution History -->
+            \${task.executionHistory && task.executionHistory.length > 0 ? \`
+              <div>
+                <div class="text-xs font-semibold text-canvas-500 uppercase tracking-wide mb-2">Execution History</div>
+                <div class="space-y-2">
+                  \${task.executionHistory.slice(-5).reverse().map(exec => \`
+                    <div class="bg-canvas-50 rounded-lg p-3 border border-canvas-200">
+                      <div class="flex justify-between items-center">
+                        <span class="text-sm font-medium \${exec.status === 'completed' ? 'text-status-success' : 'text-status-failed'}">
+                          \${exec.status === 'completed' ? '\u2713' : '\u2717'} \${exec.status}
+                        </span>
+                        <span class="text-xs text-canvas-500">\${Math.round(exec.duration / 1000)}s</span>
                       </div>
-                    \`).join('')}
-                  </div>
+                      <div class="text-xs text-canvas-500 mt-1">\${new Date(exec.startedAt).toLocaleString()}</div>
+                      \${exec.error ? \`<div class="text-xs text-status-failed mt-2 bg-status-failed/5 rounded p-2">\${escapeHtml(exec.error)}</div>\` : ''}
+                    </div>
+                  \`).join('')}
                 </div>
-              \` : ''}
-            </div>
+              </div>
+            \` : ''}
           </div>
         \`}
       </div>
@@ -3262,6 +4657,25 @@ function handleStartAFK() {
   render();
 }
 
+async function handleStartPlanning() {
+  const goal = document.getElementById('planning-goal').value;
+  if (!goal.trim()) {
+    showToast('Please enter a goal', 'warning');
+    return;
+  }
+  try {
+    await startPlanning(goal);
+    // Modal will be shown when planning:started event is received
+  } catch (e) {
+    showToast('Failed to start planning: ' + e.message, 'error');
+  }
+}
+
+function openPlanningModal() {
+  state.showModal = 'plan-input';
+  render();
+}
+
 // Filter tasks based on search query
 function filterTasks(tasks) {
   if (!state.searchQuery) return tasks;
@@ -3300,6 +4714,12 @@ function render() {
             </div>
           </div>
           <div class="flex items-center gap-2">
+            <button onclick="openPlanningModal();"
+                    class="btn px-4 py-2 text-sm bg-blue-500 hover:bg-blue-600 text-white \${state.planning ? 'opacity-50 cursor-not-allowed' : ''}"
+                    \${state.planning ? 'disabled' : ''}
+                    title="AI Task Planner">
+              \u{1F3AF} \${state.planning ? 'Planning...' : 'Plan'}
+            </button>
             <button onclick="state.showModal = 'new'; render();"
                     class="btn btn-primary px-4 py-2 text-sm">
               + Add Task
@@ -3366,6 +4786,10 @@ window.retryTask = retryTask;
 window.generateTask = generateTask;
 window.startAFK = startAFK;
 window.stopAFK = stopAFK;
+window.startPlanning = startPlanning;
+window.cancelPlanning = cancelPlanning;
+window.handleStartPlanning = handleStartPlanning;
+window.openPlanningModal = openPlanningModal;
 window.handleDragStart = handleDragStart;
 window.handleDragEnd = handleDragEnd;
 window.handleDragOver = handleDragOver;
@@ -3462,7 +4886,7 @@ async function findAvailablePort(startPort, maxAttempts = 10) {
 
 // src/bin/cli.ts
 function isGitRepo(dir) {
-  return existsSync4(join6(dir, ".git"));
+  return existsSync5(join7(dir, ".git"));
 }
 function hasGitRemote(dir) {
   try {