claude-kanban 0.5.1 → 0.6.1

package/dist/server/index.js

@@ -2,9 +2,9 @@
 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";
@@ -67,7 +67,8 @@ function createTask(projectPath, request) {
     passes: false,
     createdAt: now,
     updatedAt: now,
-    executionHistory: []
+    executionHistory: [],
+    dependsOn: request.dependsOn || []
   };
   prd.tasks.push(task);
   writePRD(projectPath, prd);
@@ -110,23 +111,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);
@@ -210,6 +228,11 @@ 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;
@@ -342,10 +365,16 @@ ${summary}
     return this.planningSession !== null;
   }
   /**
-   * Check if executor is busy (task or planning running)
+   * Check if executor is busy (task, planning, or QA running)
    */
   isBusy() {
-    return this.runningTask !== null || this.planningSession !== null;
+    return this.runningTask !== null || this.planningSession !== null || this.qaSession !== null;
+  }
+  /**
+   * Check if QA is running
+   */
+  isQARunning() {
+    return this.qaSession !== null;
   }
   /**
    * Get planning session output
@@ -768,27 +797,52 @@ When done, output: <promise>PLANNING_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",
@@ -810,12 +864,397 @@ When done, output: <promise>PLANNING_COMPLETE</promise>`;
         error
       });
       this.emit("task:failed", { taskId, error });
+      this.runningTask = null;
+      if (this.afkMode) {
+        this.continueAFKMode();
+      }
     }
-    this.runningTask = null;
-    if (this.afkMode) {
+  }
+  /**
+   * Build the QA verification prompt
+   */
+  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);
+    }
+    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.`;
+  }
+  /**
+   * Run QA verification for a task
+   */
+  async runQAVerification(taskId) {
+    const config = getConfig(this.projectPath);
+    const task = getTaskById(this.projectPath, taskId);
+    if (!task) {
+      throw new Error(`Task not found: ${taskId}`);
+    }
+    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
    */
@@ -888,60 +1327,509 @@ When done, output: <promise>PLANNING_COMPLETE</promise>`;
       this.stopAFKMode();
       return;
     }
-    this.afkIteration++;
-    this.runTask(nextTask.id).catch((error) => {
-      console.error("AFK task error:", error);
-    });
-    this.emitAFKStatus();
+    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");
+    }
   }
   /**
-   * Stop AFK mode
+   * Build the competitor research prompt
    */
-  stopAFKMode() {
-    this.afkMode = false;
-    this.emitAFKStatus();
+  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.`;
   }
   /**
-   * Emit AFK status
+   * Build the roadmap generation prompt
    */
-  emitAFKStatus() {
-    this.emit("afk:status", {
-      running: this.afkMode,
-      currentIteration: this.afkIteration,
-      maxIterations: this.afkMaxIterations,
-      tasksCompleted: this.afkTasksCompleted
-    });
+  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 (request.focusAreas && request.focusAreas.length > 0) {
+      prompt += `
+## Focus Areas
+The user wants to focus on: ${request.focusAreas.join(", ")}
+`;
+    }
+    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;
   }
   /**
-   * Get AFK status
+   * Run a Claude command and return the output
    */
-  getAFKStatus() {
-    return {
-      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);
+      });
+    });
   }
   /**
-   * Cancel running task/planning and stop AFK mode
+   * Mark a feature as added to kanban
    */
-  cancelAll() {
-    if (this.runningTask) {
-      try {
-        this.runningTask.process.kill("SIGKILL");
-      } catch {
-      }
-      this.runningTask = null;
+  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);
     }
-    if (this.planningSession) {
-      try {
-        this.planningSession.process.kill("SIGKILL");
-      } catch {
-      }
-      this.planningSession = null;
+    return roadmap;
+  }
+  /**
+   * Delete a feature from the roadmap
+   */
+  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;
   }
 };
 
@@ -1248,7 +2136,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.
@@ -1287,7 +2175,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 }
@@ -1359,6 +2247,7 @@ 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));
@@ -1370,6 +2259,10 @@ async function createServer(projectPath, port) {
   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);
@@ -1637,8 +2530,98 @@ async function createServer(projectPath, port) {
       res.status(500).json({ error: String(error) });
     }
   });
-  const clientPath = join5(__dirname2, "..", "client");
-  if (existsSync3(clientPath)) {
+  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 = join6(__dirname2, "..", "client");
+  if (existsSync4(clientPath)) {
     app.use(express.static(clientPath));
   }
   app.get("*", (_req, res) => {
@@ -2211,6 +3194,16 @@ let state = {
   planningOutput: [],
   sidePanelTab: 'logs', // 'logs' or 'details'
   darkMode: localStorage.getItem('darkMode') === 'true', // Add dark mode state
+  // View state (board or roadmap)
+  currentView: 'board', // 'board' or 'roadmap'
+  // Roadmap state
+  roadmap: null,
+  roadmapGenerating: false,
+  roadmapProgress: null,
+  roadmapError: null,
+  roadmapSelectedFeature: null,
+  roadmapEnableCompetitors: false,
+  roadmapCustomPrompt: '',
 };
 
 // Toast notifications
@@ -2457,6 +3450,41 @@ socket.on('planning:cancelled', () => {
   render();
 });
 
+// Roadmap events
+socket.on('roadmap:started', () => {
+  state.roadmapGenerating = true;
+  state.roadmapProgress = { phase: 'analyzing', message: 'Starting roadmap generation...' };
+  state.roadmapError = null;
+  render();
+});
+
+socket.on('roadmap:progress', ({ phase, message }) => {
+  state.roadmapProgress = { phase, message };
+  render();
+});
+
+socket.on('roadmap:completed', ({ roadmap }) => {
+  state.roadmap = roadmap;
+  state.roadmapGenerating = false;
+  state.roadmapProgress = null;
+  state.showModal = null;
+  showToast('Roadmap generated successfully!', 'success');
+  render();
+});
+
+socket.on('roadmap:failed', ({ error }) => {
+  state.roadmapGenerating = false;
+  state.roadmapProgress = null;
+  state.roadmapError = error;
+  showToast('Roadmap generation failed: ' + error, 'error');
+  render();
+});
+
+socket.on('roadmap:updated', (roadmap) => {
+  state.roadmap = roadmap;
+  render();
+});
+
 // Load templates
 fetch('/api/templates').then(r => r.json()).then(data => {
   state.templates = data.templates;
@@ -2548,6 +3576,69 @@ async function cancelPlanning() {
   await fetch('/api/plan/cancel', { method: 'POST' });
 }
 
+// Roadmap API functions
+async function loadRoadmap() {
+  const res = await fetch('/api/roadmap');
+  const data = await res.json();
+  state.roadmap = data.roadmap;
+  render();
+}
+
+async function generateRoadmap() {
+  state.roadmapGenerating = true;
+  state.roadmapError = null;
+  render();
+  try {
+    await fetch('/api/roadmap/generate', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        enableCompetitorResearch: state.roadmapEnableCompetitors,
+        customPrompt: state.roadmapCustomPrompt || undefined
+      })
+    });
+  } catch (e) {
+    state.roadmapGenerating = false;
+    state.roadmapError = e.message;
+    render();
+  }
+}
+
+async function cancelRoadmap() {
+  await fetch('/api/roadmap/cancel', { method: 'POST' });
+  state.roadmapGenerating = false;
+  state.roadmapProgress = null;
+  render();
+}
+
+async function addFeatureToKanban(featureId) {
+  try {
+    const res = await fetch('/api/roadmap/features/' + featureId + '/add-to-kanban', {
+      method: 'POST'
+    });
+    const data = await res.json();
+    if (data.task) {
+      showToast('Feature added to kanban!', 'success');
+      // Reload roadmap to update addedToKanban status
+      await loadRoadmap();
+    }
+  } catch (e) {
+    showToast('Failed to add feature: ' + e.message, 'error');
+  }
+}
+
+async function deleteRoadmapFeature(featureId) {
+  try {
+    await fetch('/api/roadmap/features/' + featureId, { method: 'DELETE' });
+    showToast('Feature removed', 'info');
+  } catch (e) {
+    showToast('Failed to remove feature: ' + e.message, 'error');
+  }
+}
+
+// Load roadmap on init
+loadRoadmap();
+
 // Enhanced Drag and drop
 let draggedTask = null;
 let draggedElement = null;
@@ -2720,6 +3811,185 @@ function showTaskMenu(taskId) {
   openSidePanel(taskId);
 }
 
+// Roadmap rendering functions
+function renderRoadmap() {
+  if (state.roadmapGenerating) {
+    return \`
+      <div class="flex-1 flex items-center justify-center">
+        <div class="text-center">
+          <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-accent mx-auto mb-4"></div>
+          <h3 class="text-lg font-medium text-canvas-800 mb-2">Generating Roadmap...</h3>
+          <p class="text-canvas-500">\${state.roadmapProgress?.message || 'Please wait...'}</p>
+          <button onclick="cancelRoadmap()" class="btn btn-ghost mt-4 text-sm">Cancel</button>
+        </div>
+      </div>
+    \`;
+  }
+
+  if (!state.roadmap) {
+    return \`
+      <div class="flex-1 flex items-center justify-center">
+        <div class="text-center max-w-md">
+          <div class="text-6xl mb-4">\u{1F5FA}\uFE0F</div>
+          <h3 class="text-xl font-semibold text-canvas-800 mb-2">No Roadmap Yet</h3>
+          <p class="text-canvas-500 mb-6">Generate a strategic feature roadmap using AI to analyze your project and suggest features.</p>
+          <button onclick="state.showModal = 'roadmap'; render();" class="btn btn-primary px-6 py-2">
+            \u{1F680} Generate Roadmap
+          </button>
+        </div>
+      </div>
+    \`;
+  }
+
+  const roadmap = state.roadmap;
+  const phases = roadmap.phases || [];
+  const features = roadmap.features || [];
+
+  return \`
+    <div class="flex-1 overflow-y-auto p-6">
+      <!-- Roadmap Header -->
+      <div class="mb-6 flex items-start justify-between">
+        <div>
+          <h2 class="text-2xl font-semibold text-canvas-900">\${escapeHtml(roadmap.projectName)} Roadmap</h2>
+          <p class="text-canvas-500 mt-1">\${escapeHtml(roadmap.projectDescription || '')}</p>
+          <p class="text-sm text-canvas-400 mt-2">Target: \${escapeHtml(roadmap.targetAudience || 'Developers')}</p>
+        </div>
+        <div class="flex gap-2">
+          <button onclick="state.showModal = 'roadmap'; render();" class="btn btn-ghost text-sm">
+            \u{1F504} Regenerate
+          </button>
+        </div>
+      </div>
+
+      <!-- Competitors (if available) -->
+      \${roadmap.competitors && roadmap.competitors.length > 0 ? \`
+        <div class="mb-6">
+          <h3 class="text-sm font-medium text-canvas-700 mb-2">Competitor Insights</h3>
+          <div class="flex gap-2 flex-wrap">
+            \${roadmap.competitors.map(c => \`
+              <span class="px-3 py-1 bg-canvas-100 rounded-full text-sm text-canvas-600">
+                \${escapeHtml(c.name)}
+              </span>
+            \`).join('')}
+          </div>
+        </div>
+      \` : ''}
+
+      <!-- Phases -->
+      <div class="space-y-8">
+        \${phases.map(phase => {
+          const phaseFeatures = features.filter(f => f.phase === phase.name);
+          return \`
+            <div class="phase-section">
+              <div class="flex items-center gap-3 mb-4">
+                <h3 class="text-lg font-semibold text-canvas-800">\${escapeHtml(phase.name)}</h3>
+                <span class="text-xs bg-canvas-100 px-2 py-0.5 rounded-full text-canvas-500">\${phaseFeatures.length} features</span>
+              </div>
+              <p class="text-sm text-canvas-500 mb-4">\${escapeHtml(phase.description || '')}</p>
+              <div class="grid gap-3 md:grid-cols-2 lg:grid-cols-3">
+                \${phaseFeatures.map(f => renderRoadmapFeature(f)).join('')}
+              </div>
+            </div>
+          \`;
+        }).join('')}
+      </div>
+    </div>
+  \`;
+}
+
+function renderRoadmapFeature(feature) {
+  const priorityColors = {
+    must: 'bg-red-100 text-red-700',
+    should: 'bg-orange-100 text-orange-700',
+    could: 'bg-blue-100 text-blue-700',
+    wont: 'bg-gray-100 text-gray-500'
+  };
+  const priorityLabels = {
+    must: 'Must Have',
+    should: 'Should Have',
+    could: 'Could Have',
+    wont: "Won't Have"
+  };
+  const effortIcons = {
+    low: '\u26A1',
+    medium: '\u23F1\uFE0F',
+    high: '\u{1F3CB}\uFE0F'
+  };
+  const impactIcons = {
+    low: '\u{1F4C9}',
+    medium: '\u{1F4CA}',
+    high: '\u{1F4C8}'
+  };
+
+  return \`
+    <div class="card p-4 \${feature.addedToKanban ? 'opacity-60' : ''}" onclick="state.roadmapSelectedFeature = '\${feature.id}'; render();">
+      <div class="flex items-start justify-between mb-2">
+        <h4 class="font-medium text-canvas-800 text-sm">\${escapeHtml(feature.title)}</h4>
+        <span class="text-xs px-2 py-0.5 rounded-full \${priorityColors[feature.priority] || 'bg-gray-100'}">\${priorityLabels[feature.priority] || feature.priority}</span>
+      </div>
+      <p class="text-xs text-canvas-500 mb-3 line-clamp-2">\${escapeHtml(feature.description)}</p>
+      <div class="flex items-center justify-between">
+        <div class="flex gap-2 text-xs text-canvas-400">
+          <span title="Effort">\${effortIcons[feature.effort] || '\u23F1\uFE0F'} \${feature.effort}</span>
+          <span title="Impact">\${impactIcons[feature.impact] || '\u{1F4CA}'} \${feature.impact}</span>
+        </div>
+        \${feature.addedToKanban ? \`
+          <span class="text-xs text-green-600">\u2713 Added</span>
+        \` : \`
+          <button onclick="event.stopPropagation(); addFeatureToKanban('\${feature.id}')" class="text-xs text-accent hover:underline">+ Add to Kanban</button>
+        \`}
+      </div>
+    </div>
+  \`;
+}
+
+function renderRoadmapModal() {
+  return \`
+    <div class="modal-backdrop" onclick="state.showModal = null; render();">
+      <div class="modal-content max-w-lg" onclick="event.stopPropagation();">
+        <div class="modal-header">
+          <h2 class="modal-title">Generate Roadmap</h2>
+          <button onclick="state.showModal = null; render();" class="modal-close">\xD7</button>
+        </div>
+        <div class="modal-body">
+          <p class="text-sm text-canvas-500 mb-4">
+            Generate a strategic feature roadmap by analyzing your project structure and optionally researching competitors.
+          </p>
+
+          <div class="space-y-4">
+            <label class="flex items-center gap-3 cursor-pointer">
+              <input type="checkbox"
+                     \${state.roadmapEnableCompetitors ? 'checked' : ''}
+                     onchange="state.roadmapEnableCompetitors = this.checked; render();"
+                     class="w-4 h-4 accent-accent">
+              <div>
+                <span class="text-sm font-medium text-canvas-700">Enable competitor research</span>
+                <p class="text-xs text-canvas-400">Use web search to analyze competitors (takes longer)</p>
+              </div>
+            </label>
+
+            <div>
+              <label class="text-sm font-medium text-canvas-700">Additional context (optional)</label>
+              <textarea
+                class="input w-full mt-1 text-sm"
+                rows="3"
+                placeholder="E.g., Focus on mobile features, target enterprise users..."
+                oninput="state.roadmapCustomPrompt = this.value;"
+              >\${escapeHtml(state.roadmapCustomPrompt)}</textarea>
+            </div>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button onclick="state.showModal = null; render();" class="btn btn-ghost">Cancel</button>
+          <button onclick="generateRoadmap(); state.showModal = null; render();" class="btn btn-primary">
+            \u{1F680} Generate Roadmap
+          </button>
+        </div>
+      </div>
+    </div>
+  \`;
+}
+
 function renderColumn(status, title, tasks) {
   const columnTasks = tasks.filter(t => t.status === status);
   const statusLabels = {
@@ -3066,6 +4336,11 @@ function renderModal() {
     \`;
   }
 
+  // Roadmap generation modal
+  if (state.showModal === 'roadmap') {
+    return renderRoadmapModal();
+  }
+
   return '';
 }
 
@@ -3385,7 +4660,7 @@ function escapeHtml(str) {
 // Main render
 function render() {
   const app = document.getElementById('app');
-  const hasSidePanel = state.sidePanel !== null;
+  const hasSidePanel = state.sidePanel !== null && state.currentView === 'board';
 
   app.innerHTML = \`
     <div class="min-h-screen flex flex-col bg-canvas-50">
@@ -3394,51 +4669,76 @@ function render() {
         <div class="px-6 py-3 flex items-center justify-between">
           <div class="flex items-center gap-6">
             <h1 class="text-lg font-semibold text-canvas-900">Claude Kanban</h1>
-            <div class="flex items-center gap-2">
-              <input type="text"
-                     placeholder="Search tasks..."
-                     value="\${escapeHtml(state.searchQuery)}"
-                     oninput="state.searchQuery = this.value; render();"
-                     class="input text-sm py-1.5 w-48">
-            </div>
+            <!-- Navigation Tabs -->
+            <nav class="flex items-center gap-1 bg-canvas-100 rounded-lg p-1">
+              <button onclick="state.currentView = 'board'; render();"
+                      class="px-3 py-1.5 text-sm rounded-md transition-colors \${state.currentView === 'board' ? 'bg-white shadow-sm text-canvas-900 font-medium' : 'text-canvas-500 hover:text-canvas-700'}">
+                \u{1F4CB} Board
+              </button>
+              <button onclick="state.currentView = 'roadmap'; render();"
+                      class="px-3 py-1.5 text-sm rounded-md transition-colors \${state.currentView === 'roadmap' ? 'bg-white shadow-sm text-canvas-900 font-medium' : 'text-canvas-500 hover:text-canvas-700'}">
+                \u{1F5FA}\uFE0F Roadmap
+              </button>
+            </nav>
+            \${state.currentView === 'board' ? \`
+              <div class="flex items-center gap-2">
+                <input type="text"
+                       placeholder="Search tasks..."
+                       value="\${escapeHtml(state.searchQuery)}"
+                       oninput="state.searchQuery = this.value; render();"
+                       class="input text-sm py-1.5 w-48">
+              </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
-            </button>
-            <button onclick="state.showModal = 'afk'; render();"
-                    class="btn btn-ghost px-3 py-2 text-sm \${state.afk.running ? 'text-status-success' : ''}"
-                    title="AFK Mode">
-              \u{1F504} \${state.afk.running ? 'AFK On' : 'AFK'}
-            </button>
+            \${state.currentView === 'board' ? \`
+              <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
+              </button>
+              <button onclick="state.showModal = 'afk'; render();"
+                      class="btn btn-ghost px-3 py-2 text-sm \${state.afk.running ? 'text-status-success' : ''}"
+                      title="AFK Mode">
+                \u{1F504} \${state.afk.running ? 'AFK On' : 'AFK'}
+              </button>
+            \` : \`
+              <button onclick="state.showModal = 'roadmap'; render();"
+                      class="btn btn-primary px-4 py-2 text-sm \${state.roadmapGenerating ? 'opacity-50 cursor-not-allowed' : ''}"
+                      \${state.roadmapGenerating ? 'disabled' : ''}>
+                \${state.roadmapGenerating ? '\u23F3 Generating...' : '\u{1F680} Generate Roadmap'}
+              </button>
+            \`}
           </div>
         </div>
       </header>
 
-      \${renderAFKBar()}
+      \${state.currentView === 'board' ? renderAFKBar() : ''}
 
-      <!-- Main Content Area - Flex container for board + sidebar -->
+      <!-- Main Content Area -->
       <div class="flex flex-1 overflow-hidden">
-        <!-- Kanban Board -->
-        <main class="main-content overflow-x-auto p-6">
-          <div class="flex gap-4">
-            \${renderColumn('draft', 'To Do', filterTasks(state.tasks))}
-            \${renderColumn('ready', 'Ready', filterTasks(state.tasks))}
-            \${renderColumn('in_progress', 'In Progress', filterTasks(state.tasks))}
-            \${renderColumn('completed', 'Done', filterTasks(state.tasks))}
-            \${renderColumn('failed', 'Failed', filterTasks(state.tasks))}
-          </div>
-        </main>
-
-        <!-- Side Panel (pushes content when open) -->
-        \${hasSidePanel ? renderSidePanel() : ''}
+        \${state.currentView === 'board' ? \`
+          <!-- Kanban Board -->
+          <main class="main-content overflow-x-auto p-6">
+            <div class="flex gap-4">
+              \${renderColumn('draft', 'To Do', filterTasks(state.tasks))}
+              \${renderColumn('ready', 'Ready', filterTasks(state.tasks))}
+              \${renderColumn('in_progress', 'In Progress', filterTasks(state.tasks))}
+              \${renderColumn('completed', 'Done', filterTasks(state.tasks))}
+              \${renderColumn('failed', 'Failed', filterTasks(state.tasks))}
+            </div>
+          </main>
+          <!-- Side Panel (pushes content when open) -->
+          \${hasSidePanel ? renderSidePanel() : ''}
+        \` : \`
+          <!-- Roadmap View -->
+          \${renderRoadmap()}
+        \`}
       </div>
 
       \${renderModal()}
@@ -3500,6 +4800,11 @@ window.closeSidePanel = closeSidePanel;
 window.showTaskMenu = showTaskMenu;
 window.filterTasks = filterTasks;
 window.scrollSidePanelLog = scrollSidePanelLog;
+window.generateRoadmap = generateRoadmap;
+window.cancelRoadmap = cancelRoadmap;
+window.addFeatureToKanban = addFeatureToKanban;
+window.deleteRoadmapFeature = deleteRoadmapFeature;
+window.loadRoadmap = loadRoadmap;
 
 // Keyboard shortcuts
 document.addEventListener('keydown', (e) => {