claude-kanban 0.1.0

package/dist/bin/cli.js

@@ -0,0 +1,3413 @@
+#!/usr/bin/env node
+
+// src/bin/cli.ts
+import { Command } from "commander";
+import chalk from "chalk";
+import open from "open";
+
+// 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 { fileURLToPath } from "url";
+import { existsSync as existsSync3 } from "fs";
+
+// src/server/services/executor.ts
+import { spawn } from "child_process";
+import { join as join4 } from "path";
+import { writeFileSync as writeFileSync4, unlinkSync, mkdirSync as mkdirSync2, existsSync as existsSync2, appendFileSync as appendFileSync2, readFileSync as readFileSync4 } from "fs";
+import { EventEmitter } from "events";
+
+// src/server/services/project.ts
+import { existsSync, mkdirSync, writeFileSync, readFileSync } from "fs";
+import { join, basename } from "path";
+var KANBAN_DIR = ".claude-kanban";
+var SCRIPTS_DIR = "scripts";
+async function isProjectInitialized(projectPath) {
+  const kanbanDir = join(projectPath, KANBAN_DIR);
+  const prdPath = join(kanbanDir, "prd.json");
+  const configPath = join(kanbanDir, "config.json");
+  return existsSync(kanbanDir) && existsSync(prdPath) && existsSync(configPath);
+}
+function detectPackageManager(projectPath) {
+  if (existsSync(join(projectPath, "pnpm-lock.yaml"))) return "pnpm";
+  if (existsSync(join(projectPath, "yarn.lock"))) return "yarn";
+  if (existsSync(join(projectPath, "bun.lockb"))) return "bun";
+  return "npm";
+}
+function detectProjectCommands(projectPath) {
+  const pm = detectPackageManager(projectPath);
+  const run = pm === "npm" ? "npm run" : pm;
+  const packageJsonPath = join(projectPath, "package.json");
+  let scripts = {};
+  if (existsSync(packageJsonPath)) {
+    try {
+      const pkg = JSON.parse(readFileSync(packageJsonPath, "utf-8"));
+      scripts = pkg.scripts || {};
+    } catch {
+    }
+  }
+  const testCommand = scripts.test ? `${run} test` : 'echo "No test command configured"';
+  const typecheckCommand = scripts.typecheck ? `${run} typecheck` : scripts["type-check"] ? `${run} type-check` : existsSync(join(projectPath, "tsconfig.json")) ? `${run === "npm run" ? "npx" : pm} tsc --noEmit` : 'echo "No typecheck command configured"';
+  const buildCommand = scripts.build ? `${run} build` : 'echo "No build command configured"';
+  return { testCommand, typecheckCommand, buildCommand };
+}
+function createInitialPRD(projectName) {
+  return {
+    version: "1.0",
+    projectName,
+    tasks: []
+  };
+}
+function createInitialConfig(projectPath) {
+  const { testCommand, typecheckCommand, buildCommand } = detectProjectCommands(projectPath);
+  return {
+    version: "1.0",
+    agent: {
+      command: "claude",
+      permissionMode: "acceptEdits",
+      model: null
+    },
+    project: {
+      testCommand,
+      typecheckCommand,
+      buildCommand
+    },
+    ui: {
+      port: 4242,
+      theme: "system"
+    },
+    execution: {
+      maxConcurrent: 3,
+      timeout: 30
+      // 30 minutes
+    }
+  };
+}
+function createRalphScript(config) {
+  const { testCommand, typecheckCommand } = config.project;
+  return `#!/bin/bash
+set -e
+
+if [ -z "$1" ]; then
+  echo "Usage: $0 <iterations>"
+  exit 1
+fi
+
+KANBAN_DIR=".claude-kanban"
+
+for ((i=1; i<=$1; i++)); do
+  echo ""
+  echo "=== Iteration $i of $1 ==="
+  echo ""
+
+  result=$(${config.agent.command} --permission-mode ${config.agent.permissionMode} -p \\
+    "@$KANBAN_DIR/prd.json" \\
+    "@$KANBAN_DIR/progress.txt" \\
+    "You are working on tasks from a Kanban board. Follow these steps:
+
+1. Read the PRD to find the highest-priority task with status 'ready'.
+   Priority order: critical > high > medium > low
+   If multiple tasks have the same priority, pick the first one.
+
+2. Work on ONLY that single task. Do not touch other tasks.
+
+3. Check that types pass via: ${typecheckCommand}
+   Check that tests pass via: ${testCommand}
+
+4. When the task is complete:
+   - Update the task's 'passes' field to true
+   - Update the task's 'status' field to 'completed'
+
+5. Append your progress to progress.txt with:
+   - Date and time
+   - Task ID and title
+   - What you implemented
+   - Files changed
+   - Any notes for future work
+
+6. Make a git commit with a descriptive message.
+
+IMPORTANT: Only work on ONE task per iteration.
+
+If all tasks with status 'ready' are complete (passes: true), output <promise>COMPLETE</promise>.")
+
+  echo "$result"
+
+  if [[ "$result" == *"<promise>COMPLETE</promise>"* ]]; then
+    echo ""
+    echo "=== All tasks complete! ==="
+    exit 0
+  fi
+done
+
+echo ""
+echo "=== Completed $1 iterations ==="
+`;
+}
+function createRalphOnceScript(config) {
+  const { testCommand, typecheckCommand } = config.project;
+  return `#!/bin/bash
+set -e
+
+KANBAN_DIR=".claude-kanban"
+TASK_ID="$1"
+
+if [ -z "$TASK_ID" ]; then
+  # No task ID specified, let Claude pick
+  ${config.agent.command} --permission-mode ${config.agent.permissionMode} -p \\
+    "@$KANBAN_DIR/prd.json" \\
+    "@$KANBAN_DIR/progress.txt" \\
+    "You are working on tasks from a Kanban board. Follow these steps:
+
+1. Read the PRD to find the highest-priority task with status 'ready'.
+   Priority order: critical > high > medium > low
+
+2. Work on ONLY that single task.
+
+3. Check that types pass via: ${typecheckCommand}
+   Check that tests pass via: ${testCommand}
+
+4. When complete:
+   - Update the task's 'passes' field to true
+   - Update the task's 'status' field to 'completed'
+
+5. Append progress to progress.txt.
+
+6. Make a git commit.
+
+If all 'ready' tasks are complete, output <promise>COMPLETE</promise>."
+else
+  # Specific task ID provided
+  ${config.agent.command} --permission-mode ${config.agent.permissionMode} -p \\
+    "@$KANBAN_DIR/prd.json" \\
+    "@$KANBAN_DIR/progress.txt" \\
+    "You are working on a specific task from the Kanban board.
+
+TASK ID: $TASK_ID
+
+Find this task in the PRD and work on it. Follow these steps:
+
+1. Locate the task with id '$TASK_ID' in the PRD.
+
+2. Implement the feature as described.
+
+3. Check that types pass via: ${typecheckCommand}
+   Check that tests pass via: ${testCommand}
+
+4. When complete:
+   - Update the task's 'passes' field to true
+   - Update the task's 'status' field to 'completed'
+
+5. Append progress to progress.txt.
+
+6. Make a git commit.
+
+If the task is complete, output <promise>COMPLETE</promise>."
+fi
+`;
+}
+async function initializeProject(projectPath, reset = false) {
+  const kanbanDir = join(projectPath, KANBAN_DIR);
+  const scriptsDir = join(projectPath, SCRIPTS_DIR);
+  const projectName = basename(projectPath);
+  if (!existsSync(kanbanDir)) {
+    mkdirSync(kanbanDir, { recursive: true });
+  }
+  if (!existsSync(scriptsDir)) {
+    mkdirSync(scriptsDir, { recursive: true });
+  }
+  const prdPath = join(kanbanDir, "prd.json");
+  if (!existsSync(prdPath) || reset) {
+    const prd = createInitialPRD(projectName);
+    writeFileSync(prdPath, JSON.stringify(prd, null, 2));
+  }
+  const configPath = join(kanbanDir, "config.json");
+  let config;
+  if (!existsSync(configPath)) {
+    config = createInitialConfig(projectPath);
+    writeFileSync(configPath, JSON.stringify(config, null, 2));
+  } else {
+    config = JSON.parse(readFileSync(configPath, "utf-8"));
+  }
+  const progressPath = join(kanbanDir, "progress.txt");
+  if (!existsSync(progressPath)) {
+    const date = (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
+    writeFileSync(progressPath, `# Claude Kanban Progress Log
+
+Project: ${projectName}
+Created: ${date}
+
+---
+
+`);
+  }
+  const ralphPath = join(scriptsDir, "ralph.sh");
+  const ralphOncePath = join(scriptsDir, "ralph-once.sh");
+  writeFileSync(ralphPath, createRalphScript(config));
+  writeFileSync(ralphOncePath, createRalphOnceScript(config));
+  try {
+    const { chmodSync } = await import("fs");
+    chmodSync(ralphPath, 493);
+    chmodSync(ralphOncePath, 493);
+  } catch {
+  }
+}
+function getConfig(projectPath) {
+  const configPath = join(projectPath, KANBAN_DIR, "config.json");
+  return JSON.parse(readFileSync(configPath, "utf-8"));
+}
+function saveConfig(projectPath, config) {
+  const configPath = join(projectPath, KANBAN_DIR, "config.json");
+  writeFileSync(configPath, JSON.stringify(config, null, 2));
+}
+
+// src/server/services/prd.ts
+import { readFileSync as readFileSync2, writeFileSync as writeFileSync2 } from "fs";
+import { join as join2 } from "path";
+import { nanoid } from "nanoid";
+var KANBAN_DIR2 = ".claude-kanban";
+function getPRDPath(projectPath) {
+  return join2(projectPath, KANBAN_DIR2, "prd.json");
+}
+function readPRD(projectPath) {
+  const path = getPRDPath(projectPath);
+  return JSON.parse(readFileSync2(path, "utf-8"));
+}
+function writePRD(projectPath, prd) {
+  const path = getPRDPath(projectPath);
+  writeFileSync2(path, JSON.stringify(prd, null, 2));
+}
+function getAllTasks(projectPath) {
+  const prd = readPRD(projectPath);
+  return prd.tasks;
+}
+function getTaskById(projectPath, taskId) {
+  const prd = readPRD(projectPath);
+  return prd.tasks.find((t) => t.id === taskId);
+}
+function getTasksByStatus(projectPath, status) {
+  const prd = readPRD(projectPath);
+  return prd.tasks.filter((t) => t.status === status);
+}
+function createTask(projectPath, request) {
+  const prd = readPRD(projectPath);
+  const now = (/* @__PURE__ */ new Date()).toISOString();
+  const task = {
+    id: `task_${nanoid(8)}`,
+    title: request.title,
+    description: request.description,
+    category: request.category || "functional",
+    priority: request.priority || "medium",
+    status: request.status || "draft",
+    steps: request.steps || [],
+    passes: false,
+    createdAt: now,
+    updatedAt: now,
+    executionHistory: []
+  };
+  prd.tasks.push(task);
+  writePRD(projectPath, prd);
+  return task;
+}
+function updateTask(projectPath, taskId, updates) {
+  const prd = readPRD(projectPath);
+  const taskIndex = prd.tasks.findIndex((t) => t.id === taskId);
+  if (taskIndex === -1) {
+    return null;
+  }
+  const task = prd.tasks[taskIndex];
+  const updatedTask = {
+    ...task,
+    ...updates,
+    updatedAt: (/* @__PURE__ */ new Date()).toISOString()
+  };
+  prd.tasks[taskIndex] = updatedTask;
+  writePRD(projectPath, prd);
+  return updatedTask;
+}
+function deleteTask(projectPath, taskId) {
+  const prd = readPRD(projectPath);
+  const initialLength = prd.tasks.length;
+  prd.tasks = prd.tasks.filter((t) => t.id !== taskId);
+  if (prd.tasks.length < initialLength) {
+    writePRD(projectPath, prd);
+    return true;
+  }
+  return false;
+}
+function addExecutionEntry(projectPath, taskId, entry) {
+  const prd = readPRD(projectPath);
+  const taskIndex = prd.tasks.findIndex((t) => t.id === taskId);
+  if (taskIndex === -1) {
+    return null;
+  }
+  prd.tasks[taskIndex].executionHistory.push(entry);
+  prd.tasks[taskIndex].updatedAt = (/* @__PURE__ */ new Date()).toISOString();
+  writePRD(projectPath, prd);
+  return prd.tasks[taskIndex];
+}
+function getNextReadyTask(projectPath) {
+  const readyTasks = getTasksByStatus(projectPath, "ready");
+  if (readyTasks.length === 0) {
+    return null;
+  }
+  const priorityOrder = {
+    critical: 0,
+    high: 1,
+    medium: 2,
+    low: 3
+  };
+  readyTasks.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];
+}
+function getTaskCounts(projectPath) {
+  const tasks = getAllTasks(projectPath);
+  const counts = {
+    draft: 0,
+    ready: 0,
+    in_progress: 0,
+    completed: 0,
+    failed: 0
+  };
+  for (const task of tasks) {
+    counts[task.status]++;
+  }
+  return counts;
+}
+
+// src/server/services/progress.ts
+import { readFileSync as readFileSync3, writeFileSync as writeFileSync3, appendFileSync } from "fs";
+import { join as join3 } from "path";
+var KANBAN_DIR3 = ".claude-kanban";
+function getProgressPath(projectPath) {
+  return join3(projectPath, KANBAN_DIR3, "progress.txt");
+}
+function readProgress(projectPath) {
+  const path = getProgressPath(projectPath);
+  return readFileSync3(path, "utf-8");
+}
+function appendProgress(projectPath, entry) {
+  const path = getProgressPath(projectPath);
+  appendFileSync(path, entry + "\n");
+}
+function logTaskExecution(projectPath, options) {
+  const now = /* @__PURE__ */ new Date();
+  const dateStr = now.toISOString().split("T")[0];
+  const timeStr = now.toTimeString().split(" ")[0];
+  const durationStr = formatDuration(options.duration);
+  const statusEmoji = options.status === "completed" ? "\u2713" : options.status === "failed" ? "\u2717" : "\u25CB";
+  let entry = `
+## ${dateStr} ${timeStr}
+
+`;
+  entry += `### Task: ${options.taskId} - ${options.taskTitle}
+`;
+  entry += `Status: ${statusEmoji} ${options.status.toUpperCase()}
+`;
+  entry += `Duration: ${durationStr}
+`;
+  if (options.error) {
+    entry += `
+Error: ${options.error}
+`;
+  }
+  entry += "\n---\n";
+  appendProgress(projectPath, entry);
+}
+function formatDuration(ms) {
+  const seconds = Math.floor(ms / 1e3);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  if (hours > 0) {
+    return `${hours}h ${minutes % 60}m ${seconds % 60}s`;
+  }
+  if (minutes > 0) {
+    return `${minutes}m ${seconds % 60}s`;
+  }
+  return `${seconds}s`;
+}
+function getRecentProgress(projectPath, lines = 100) {
+  const content = readProgress(projectPath);
+  const allLines = content.split("\n");
+  if (allLines.length <= lines) {
+    return content;
+  }
+  return allLines.slice(-lines).join("\n");
+}
+
+// src/server/services/executor.ts
+var KANBAN_DIR4 = ".claude-kanban";
+var LOGS_DIR = "logs";
+var TaskExecutor = class extends EventEmitter {
+  projectPath;
+  runningTasks = /* @__PURE__ */ new Map();
+  afkMode = false;
+  afkIteration = 0;
+  afkMaxIterations = 0;
+  afkTasksCompleted = 0;
+  constructor(projectPath) {
+    super();
+    this.projectPath = projectPath;
+    this.ensureLogsDir();
+  }
+  /**
+   * Ensure logs directory exists
+   */
+  ensureLogsDir() {
+    const logsPath = join4(this.projectPath, KANBAN_DIR4, LOGS_DIR);
+    if (!existsSync2(logsPath)) {
+      mkdirSync2(logsPath, { recursive: true });
+    }
+  }
+  /**
+   * Get log file path for a task
+   */
+  getLogFilePath(taskId) {
+    return join4(this.projectPath, KANBAN_DIR4, LOGS_DIR, `${taskId}.log`);
+  }
+  /**
+   * Initialize log file for a task (clear existing)
+   */
+  initLogFile(taskId) {
+    const logPath = this.getLogFilePath(taskId);
+    writeFileSync4(logPath, "");
+  }
+  /**
+   * Append to task log file
+   */
+  appendToLog(taskId, text) {
+    const logPath = this.getLogFilePath(taskId);
+    appendFileSync2(logPath, text);
+  }
+  /**
+   * Read task log file
+   */
+  getTaskLog(taskId) {
+    const logPath = this.getLogFilePath(taskId);
+    if (!existsSync2(logPath)) return null;
+    return readFileSync4(logPath, "utf-8");
+  }
+  /**
+   * Get number of currently running tasks
+   */
+  getRunningCount() {
+    return this.runningTasks.size;
+  }
+  /**
+   * Check if a task is running
+   */
+  isTaskRunning(taskId) {
+    return this.runningTasks.has(taskId);
+  }
+  /**
+   * Get all running task IDs
+   */
+  getRunningTaskIds() {
+    return Array.from(this.runningTasks.keys());
+  }
+  /**
+   * Get running task output
+   */
+  getTaskOutput(taskId) {
+    return this.runningTasks.get(taskId)?.output;
+  }
+  /**
+   * Build the prompt for a specific task
+   */
+  buildTaskPrompt(task, config) {
+    const kanbanDir = join4(this.projectPath, KANBAN_DIR4);
+    const prdPath = join4(kanbanDir, "prd.json");
+    const progressPath = join4(kanbanDir, "progress.txt");
+    const stepsText = task.steps.length > 0 ? `
+Verification steps:
+${task.steps.map((s, i) => `${i + 1}. ${s}`).join("\n")}` : "";
+    return `You are an AI coding agent. Complete the following task:
+
+## TASK
+Title: ${task.title}
+Category: ${task.category}
+Priority: ${task.priority}
+
+${task.description}
+${stepsText}
+
+## INSTRUCTIONS
+1. Implement this task as described above.
+
+2. Verify your work:
+   - Run typecheck: ${config.project.typecheckCommand}
+   - Run tests: ${config.project.testCommand}
+
+3. When complete, update the task in ${prdPath}:
+   - Find the task with id "${task.id}"
+   - Set "passes": true
+   - Set "status": "completed"
+
+4. Document your work in ${progressPath}:
+   - What you implemented and files changed
+   - Key decisions made and why
+   - Gotchas, edge cases, or tricky parts discovered
+   - Useful patterns or approaches that worked well
+   - Anything a future agent should know about this area of the codebase
+
+5. Make a git commit with a descriptive message.
+
+Focus only on this task. When successfully complete, output: <promise>COMPLETE</promise>`;
+  }
+  /**
+   * Run a specific task
+   */
+  async runTask(taskId) {
+    const config = getConfig(this.projectPath);
+    const task = getTaskById(this.projectPath, taskId);
+    if (!task) {
+      throw new Error(`Task not found: ${taskId}`);
+    }
+    if (this.isTaskRunning(taskId)) {
+      throw new Error(`Task already running: ${taskId}`);
+    }
+    const maxConcurrent = config.execution.maxConcurrent || 3;
+    if (this.getRunningCount() >= maxConcurrent) {
+      throw new Error(`Maximum concurrent tasks (${maxConcurrent}) reached`);
+    }
+    updateTask(this.projectPath, taskId, { status: "in_progress" });
+    const startedAt = /* @__PURE__ */ new Date();
+    const prompt = this.buildTaskPrompt(task, config);
+    const kanbanDir = join4(this.projectPath, KANBAN_DIR4);
+    const prdPath = join4(kanbanDir, "prd.json");
+    const progressPath = join4(kanbanDir, "progress.txt");
+    const promptFile = join4(kanbanDir, `prompt-${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 commandDisplay = `${config.agent.command} ${args.join(" ")}`;
+    const fullCommand = `${config.agent.command} ${args.join(" ")}`;
+    console.log("[executor] 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",
+        // Disable colors to avoid escape codes
+        NO_COLOR: "1"
+        // Standard way to disable colors
+      },
+      stdio: ["ignore", "pipe", "pipe"]
+      // Close stdin since we don't need interactive input
+    });
+    const runningTask = {
+      taskId,
+      process: childProcess,
+      startedAt,
+      output: []
+    };
+    this.runningTasks.set(taskId, runningTask);
+    this.initLogFile(taskId);
+    const logOutput = (line) => {
+      this.appendToLog(taskId, line);
+      runningTask.output.push(line);
+      this.emit("task:output", { taskId, line, lineType: "stdout" });
+    };
+    this.emit("task:started", { taskId, timestamp: startedAt.toISOString() });
+    logOutput(`[claude-kanban] Starting task: ${task.title}
+`);
+    logOutput(`[claude-kanban] Command: ${commandDisplay}
+`);
+    logOutput(`[claude-kanban] Process spawned (PID: ${childProcess.pid})
+`);
+    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 += `[Tool: ${block.name}]
+`;
+              }
+            }
+          } 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("spawn", () => {
+      console.log("[executor] Process spawned successfully");
+    });
+    childProcess.on("error", (error) => {
+      console.log("[executor] Spawn error:", error.message);
+      this.emit("task:output", { taskId, line: `[claude-kanban] Error: ${error.message}
+`, lineType: "stderr" });
+      try {
+        unlinkSync(promptFile);
+      } catch {
+      }
+      updateTask(this.projectPath, taskId, { status: "failed", passes: false });
+      const endedAt = /* @__PURE__ */ new Date();
+      addExecutionEntry(this.projectPath, taskId, {
+        startedAt: startedAt.toISOString(),
+        endedAt: endedAt.toISOString(),
+        status: "failed",
+        duration: endedAt.getTime() - startedAt.getTime(),
+        error: error.message
+      });
+      this.emit("task:failed", { taskId, error: error.message });
+      this.runningTasks.delete(taskId);
+    });
+    childProcess.on("close", (code, signal) => {
+      console.log("[executor] Process closed with code:", code, "signal:", signal);
+      try {
+        unlinkSync(promptFile);
+      } catch {
+      }
+      logOutput(`[claude-kanban] Process exited with code ${code}
+`);
+      this.handleTaskComplete(taskId, code, startedAt);
+    });
+    const timeoutMs = (config.execution.timeout || 30) * 60 * 1e3;
+    setTimeout(() => {
+      if (this.isTaskRunning(taskId)) {
+        this.cancelTask(taskId, "Timeout exceeded");
+      }
+    }, timeoutMs);
+  }
+  /**
+   * Handle task completion
+   */
+  handleTaskComplete(taskId, exitCode, startedAt) {
+    const runningTask = this.runningTasks.get(taskId);
+    if (!runningTask) return;
+    const endedAt = /* @__PURE__ */ new Date();
+    const duration = endedAt.getTime() - startedAt.getTime();
+    const output = runningTask.output.join("");
+    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++;
+    } else {
+      updateTask(this.projectPath, taskId, {
+        status: "failed",
+        passes: false
+      });
+      const error = `Process exited with code ${exitCode}`;
+      addExecutionEntry(this.projectPath, taskId, {
+        startedAt: startedAt.toISOString(),
+        endedAt: endedAt.toISOString(),
+        status: "failed",
+        duration,
+        error
+      });
+      logTaskExecution(this.projectPath, {
+        taskId,
+        taskTitle: task?.title || "Unknown",
+        status: "failed",
+        duration,
+        error
+      });
+      this.emit("task:failed", { taskId, error });
+    }
+    this.runningTasks.delete(taskId);
+    if (this.afkMode) {
+      this.continueAFKMode();
+    }
+  }
+  /**
+   * Cancel a running task
+   */
+  cancelTask(taskId, reason = "Cancelled by user") {
+    const runningTask = this.runningTasks.get(taskId);
+    if (!runningTask) return false;
+    const startedAt = runningTask.startedAt;
+    const endedAt = /* @__PURE__ */ new Date();
+    const duration = endedAt.getTime() - startedAt.getTime();
+    const task = getTaskById(this.projectPath, taskId);
+    try {
+      runningTask.process.kill("SIGTERM");
+      setTimeout(() => {
+        try {
+          if (!runningTask.process.killed) {
+            runningTask.process.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.runningTasks.delete(taskId);
+    return true;
+  }
+  /**
+   * Start AFK mode
+   */
+  startAFKMode(maxIterations, concurrent) {
+    if (this.afkMode) {
+      throw new Error("AFK mode already running");
+    }
+    this.afkMode = true;
+    this.afkIteration = 0;
+    this.afkMaxIterations = maxIterations;
+    this.afkTasksCompleted = 0;
+    this.emitAFKStatus();
+    this.continueAFKMode(concurrent);
+  }
+  /**
+   * Continue AFK mode - pick up next tasks
+   */
+  continueAFKMode(concurrent = 1) {
+    if (!this.afkMode) return;
+    if (this.afkIteration >= this.afkMaxIterations) {
+      this.stopAFKMode();
+      return;
+    }
+    const config = getConfig(this.projectPath);
+    const maxConcurrent = Math.min(concurrent, config.execution.maxConcurrent || 3);
+    while (this.getRunningCount() < maxConcurrent) {
+      const nextTask = getNextReadyTask(this.projectPath);
+      if (!nextTask) {
+        if (this.getRunningCount() === 0) {
+          this.stopAFKMode();
+        }
+        break;
+      }
+      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 all running tasks
+   */
+  cancelAll() {
+    for (const [taskId, runningTask] of this.runningTasks.entries()) {
+      try {
+        runningTask.process.kill("SIGKILL");
+      } catch {
+      }
+      this.runningTasks.delete(taskId);
+    }
+    this.stopAFKMode();
+  }
+};
+
+// src/server/services/templates.ts
+var taskTemplates = [
+  {
+    id: "auth-login",
+    name: "Authentication - Login",
+    icon: "\u{1F510}",
+    description: "User login functionality with email/password",
+    category: "functional",
+    priority: "high",
+    titleTemplate: "Add user login functionality",
+    descriptionTemplate: `Implement user login with email and password authentication.
+
+Requirements:
+- Login form with email and password fields
+- Form validation with error messages
+- Submit credentials to auth API
+- Handle success (redirect) and failure (show error)
+- Store auth token/session`,
+    stepsTemplate: [
+      "Navigate to /login",
+      "Verify login form displays with email and password fields",
+      "Enter invalid credentials and verify error message",
+      "Enter valid credentials and submit",
+      "Verify redirect to dashboard/home",
+      "Verify auth state persists on page reload"
+    ]
+  },
+  {
+    id: "auth-signup",
+    name: "Authentication - Signup",
+    icon: "\u{1F510}",
+    description: "User registration with validation",
+    category: "functional",
+    priority: "high",
+    titleTemplate: "Add user signup/registration",
+    descriptionTemplate: `Implement user registration with form validation.
+
+Requirements:
+- Signup form with name, email, password fields
+- Password confirmation field
+- Client-side validation
+- Submit to registration API
+- Handle success and error states`,
+    stepsTemplate: [
+      "Navigate to /signup",
+      "Verify signup form displays all required fields",
+      "Submit with invalid data and verify validation errors",
+      "Submit with valid data",
+      "Verify success message or redirect",
+      "Verify new user can log in"
+    ]
+  },
+  {
+    id: "auth-logout",
+    name: "Authentication - Logout",
+    icon: "\u{1F510}",
+    description: "User logout functionality",
+    category: "functional",
+    priority: "medium",
+    titleTemplate: "Add user logout functionality",
+    descriptionTemplate: `Implement logout functionality.
+
+Requirements:
+- Logout button/link in navigation
+- Clear auth token/session on logout
+- Redirect to login or home page
+- Protect routes after logout`,
+    stepsTemplate: [
+      "Log in as a user",
+      "Click logout button",
+      "Verify redirect to login/home page",
+      "Verify auth state is cleared",
+      "Verify protected routes redirect to login"
+    ]
+  },
+  {
+    id: "crud-create",
+    name: "CRUD - Create",
+    icon: "\u{1F4DD}",
+    description: "Create new entity form",
+    category: "functional",
+    priority: "medium",
+    titleTemplate: "Add create [Entity] form",
+    descriptionTemplate: `Implement form to create a new [Entity].
+
+Requirements:
+- Form with all required fields
+- Client-side validation
+- Submit to create API endpoint
+- Handle loading, success, and error states
+- Redirect or show success message after creation`,
+    stepsTemplate: [
+      "Navigate to create form",
+      "Verify all form fields display correctly",
+      "Submit empty form and verify validation",
+      "Fill in valid data and submit",
+      "Verify entity is created",
+      "Verify redirect or success message"
+    ]
+  },
+  {
+    id: "crud-read",
+    name: "CRUD - Read/List",
+    icon: "\u{1F4DD}",
+    description: "List and view entities",
+    category: "functional",
+    priority: "medium",
+    titleTemplate: "Add [Entity] list view",
+    descriptionTemplate: `Implement list view for [Entity] items.
+
+Requirements:
+- Fetch and display list of entities
+- Show loading state
+- Handle empty state
+- Display relevant fields for each item
+- Link to detail view`,
+    stepsTemplate: [
+      "Navigate to list page",
+      "Verify loading state displays",
+      "Verify items render correctly",
+      "Verify empty state when no items",
+      "Click item and verify navigation to detail"
+    ]
+  },
+  {
+    id: "crud-update",
+    name: "CRUD - Update",
+    icon: "\u{1F4DD}",
+    description: "Edit existing entity",
+    category: "functional",
+    priority: "medium",
+    titleTemplate: "Add edit [Entity] form",
+    descriptionTemplate: `Implement form to edit an existing [Entity].
+
+Requirements:
+- Pre-populate form with existing data
+- Allow modification of fields
+- Submit changes to update API
+- Handle validation and errors
+- Show success feedback`,
+    stepsTemplate: [
+      "Navigate to edit form for existing item",
+      "Verify form pre-populates with current data",
+      "Modify fields",
+      "Submit form",
+      "Verify changes are saved",
+      "Verify updated data displays correctly"
+    ]
+  },
+  {
+    id: "crud-delete",
+    name: "CRUD - Delete",
+    icon: "\u{1F4DD}",
+    description: "Delete entity with confirmation",
+    category: "functional",
+    priority: "medium",
+    titleTemplate: "Add delete [Entity] functionality",
+    descriptionTemplate: `Implement delete functionality for [Entity].
+
+Requirements:
+- Delete button on item or list
+- Confirmation dialog before delete
+- Call delete API endpoint
+- Remove item from UI on success
+- Handle errors gracefully`,
+    stepsTemplate: [
+      "Navigate to item with delete option",
+      "Click delete button",
+      "Verify confirmation dialog appears",
+      "Confirm deletion",
+      "Verify item is removed from list",
+      "Verify item no longer accessible"
+    ]
+  },
+  {
+    id: "api-endpoint",
+    name: "API Endpoint",
+    icon: "\u{1F310}",
+    description: "REST API endpoint with validation",
+    category: "functional",
+    priority: "medium",
+    titleTemplate: "Add [METHOD] /api/[resource] endpoint",
+    descriptionTemplate: `Implement REST API endpoint.
+
+Requirements:
+- Define route handler
+- Validate request body/params
+- Implement business logic
+- Return appropriate response codes
+- Add error handling`,
+    stepsTemplate: [
+      "Endpoint responds to correct HTTP method",
+      "Invalid requests return 400 with error details",
+      "Valid requests process correctly",
+      "Returns appropriate status codes",
+      "Handles edge cases gracefully"
+    ]
+  },
+  {
+    id: "ui-component",
+    name: "UI Component",
+    icon: "\u{1F3A8}",
+    description: "Reusable UI component",
+    category: "ui",
+    priority: "medium",
+    titleTemplate: "Create [ComponentName] component",
+    descriptionTemplate: `Create a reusable UI component.
+
+Requirements:
+- Component accepts appropriate props
+- Handles different states (loading, error, empty)
+- Follows design system/styling conventions
+- Accessible (keyboard, screen reader)
+- Includes any needed interactivity`,
+    stepsTemplate: [
+      "Component renders without errors",
+      "Props affect rendering correctly",
+      "Different states display appropriately",
+      "Component is accessible",
+      "Interactive elements work correctly"
+    ]
+  },
+  {
+    id: "form-validation",
+    name: "Form with Validation",
+    icon: "\u{1F4C4}",
+    description: "Form with client-side validation",
+    category: "ui",
+    priority: "medium",
+    titleTemplate: "Create [FormName] form with validation",
+    descriptionTemplate: `Create a form with comprehensive validation.
+
+Requirements:
+- All necessary input fields
+- Real-time validation feedback
+- Clear error messages
+- Submit button state management
+- Form submission handling`,
+    stepsTemplate: [
+      "Form displays all required fields",
+      "Invalid input shows error message",
+      "Valid input clears error",
+      "Submit disabled when form invalid",
+      "Form submits with valid data"
+    ]
+  },
+  {
+    id: "test-unit",
+    name: "Unit Tests",
+    icon: "\u{1F9EA}",
+    description: "Unit test suite for module",
+    category: "testing",
+    priority: "medium",
+    titleTemplate: "Add unit tests for [module/component]",
+    descriptionTemplate: `Write comprehensive unit tests.
+
+Requirements:
+- Test all public functions/methods
+- Cover edge cases
+- Test error handling
+- Achieve good coverage
+- Tests should be fast and isolated`,
+    stepsTemplate: [
+      "All tests pass",
+      "Core functionality covered",
+      "Edge cases tested",
+      "Error cases handled",
+      "No flaky tests"
+    ]
+  },
+  {
+    id: "test-e2e",
+    name: "E2E Tests",
+    icon: "\u{1F9EA}",
+    description: "End-to-end test for user flow",
+    category: "testing",
+    priority: "medium",
+    titleTemplate: "Add E2E tests for [feature/flow]",
+    descriptionTemplate: `Write end-to-end tests for user flow.
+
+Requirements:
+- Test complete user journey
+- Use realistic test data
+- Verify UI and data changes
+- Handle async operations
+- Clean up test data`,
+    stepsTemplate: [
+      "Tests run successfully",
+      "User flow completes correctly",
+      "UI updates verified",
+      "Data persisted correctly",
+      "Tests are reliable (not flaky)"
+    ]
+  }
+];
+function getAllTemplates() {
+  return taskTemplates;
+}
+function getTemplateById(id) {
+  return taskTemplates.find((t) => t.id === id);
+}
+
+// src/server/services/ai.ts
+import { spawn as spawn2 } 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.
+Given a user's description of what they want to build, generate a structured task.
+
+Respond with ONLY valid JSON in this exact format:
+{
+  "title": "Short, action-oriented title (max 80 chars)",
+  "description": "Detailed description of what needs to be implemented",
+  "category": "functional|ui|bug|enhancement|testing|refactor",
+  "priority": "low|medium|high|critical",
+  "steps": ["Step 1 to verify", "Step 2 to verify", "..."]
+}
+
+Guidelines:
+- Title should be concise and start with a verb (Add, Create, Implement, Fix, etc.)
+- Description should be comprehensive but focused
+- Steps should be verification steps to confirm the feature works
+- Include 3-7 verification steps
+- Choose appropriate category based on the work type
+- Priority should reflect typical importance (most features are medium)
+
+Respond with ONLY the JSON, no other text.`;
+  const fullPrompt = `${systemPrompt}
+
+User request: ${userPrompt}`;
+  return new Promise((resolve, reject) => {
+    const args = [
+      "--permission-mode",
+      "ask",
+      "-p",
+      fullPrompt
+    ];
+    if (config.agent.model) {
+      args.unshift("--model", config.agent.model);
+    }
+    let output = "";
+    let errorOutput = "";
+    const proc = spawn2(config.agent.command, args, {
+      cwd: projectPath,
+      shell: true,
+      env: { ...process.env }
+    });
+    proc.stdout?.on("data", (data) => {
+      output += data.toString();
+    });
+    proc.stderr?.on("data", (data) => {
+      errorOutput += data.toString();
+    });
+    proc.on("close", (code) => {
+      if (code !== 0) {
+        reject(new Error(`AI generation failed: ${errorOutput || "Unknown error"}`));
+        return;
+      }
+      try {
+        const jsonMatch = output.match(/\{[\s\S]*\}/);
+        if (!jsonMatch) {
+          throw new Error("No JSON found in response");
+        }
+        const parsed = JSON.parse(jsonMatch[0]);
+        if (!parsed.title || !parsed.description) {
+          throw new Error("Missing required fields in response");
+        }
+        const task = {
+          title: String(parsed.title).slice(0, 200),
+          description: String(parsed.description),
+          category: validateCategory(parsed.category),
+          priority: validatePriority(parsed.priority),
+          steps: Array.isArray(parsed.steps) ? parsed.steps.map(String) : [],
+          status: "draft"
+        };
+        resolve(task);
+      } catch (parseError) {
+        reject(new Error(`Failed to parse AI response: ${parseError}`));
+      }
+    });
+    proc.on("error", (error) => {
+      reject(new Error(`Failed to spawn AI process: ${error.message}`));
+    });
+    setTimeout(() => {
+      proc.kill();
+      reject(new Error("AI generation timed out"));
+    }, 6e4);
+  });
+}
+function validateCategory(category) {
+  const valid = ["functional", "ui", "bug", "enhancement", "testing", "refactor"];
+  if (typeof category === "string" && valid.includes(category)) {
+    return category;
+  }
+  return "functional";
+}
+function validatePriority(priority) {
+  const valid = ["low", "medium", "high", "critical"];
+  if (typeof priority === "string" && valid.includes(priority)) {
+    return priority;
+  }
+  return "medium";
+}
+
+// src/server/index.ts
+var __dirname2 = dirname(fileURLToPath(import.meta.url));
+async function createServer(projectPath, port) {
+  const app = express();
+  const httpServer = createHttpServer(app);
+  const io = new SocketIOServer(httpServer, {
+    cors: { origin: "*" }
+  });
+  app.use(express.json());
+  const executor = new TaskExecutor(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));
+  app.get("/api/tasks", (_req, res) => {
+    try {
+      const tasks = getAllTasks(projectPath);
+      res.json({ tasks });
+    } catch (error) {
+      res.status(500).json({ error: String(error) });
+    }
+  });
+  app.post("/api/tasks", (req, res) => {
+    try {
+      const request = req.body;
+      if (!request.title || !request.description) {
+        res.status(400).json({ error: "Title and description are required" });
+        return;
+      }
+      const task = createTask(projectPath, request);
+      io.emit("task:created", task);
+      res.status(201).json({ task });
+    } catch (error) {
+      res.status(500).json({ error: String(error) });
+    }
+  });
+  app.post("/api/tasks/generate", async (req, res) => {
+    try {
+      const { prompt } = req.body;
+      if (!prompt) {
+        res.status(400).json({ error: "Prompt is required" });
+        return;
+      }
+      const taskRequest = await generateTaskFromPrompt(projectPath, prompt);
+      res.json({ task: taskRequest });
+    } catch (error) {
+      res.status(500).json({ error: String(error) });
+    }
+  });
+  app.get("/api/tasks/:id", (req, res) => {
+    try {
+      const task = getTaskById(projectPath, req.params.id);
+      if (!task) {
+        res.status(404).json({ error: "Task not found" });
+        return;
+      }
+      res.json({ task });
+    } catch (error) {
+      res.status(500).json({ error: String(error) });
+    }
+  });
+  app.put("/api/tasks/:id", (req, res) => {
+    try {
+      const updates = req.body;
+      const task = updateTask(projectPath, req.params.id, updates);
+      if (!task) {
+        res.status(404).json({ error: "Task not found" });
+        return;
+      }
+      io.emit("task:updated", task);
+      res.json({ task });
+    } catch (error) {
+      res.status(500).json({ error: String(error) });
+    }
+  });
+  app.delete("/api/tasks/:id", (req, res) => {
+    try {
+      const deleted = deleteTask(projectPath, req.params.id);
+      if (!deleted) {
+        res.status(404).json({ error: "Task not found" });
+        return;
+      }
+      io.emit("task:deleted", { id: req.params.id });
+      res.json({ success: true });
+    } catch (error) {
+      res.status(500).json({ error: String(error) });
+    }
+  });
+  app.post("/api/tasks/:id/run", async (req, res) => {
+    try {
+      await executor.runTask(req.params.id);
+      res.json({ success: true });
+    } catch (error) {
+      res.status(400).json({ error: String(error) });
+    }
+  });
+  app.post("/api/tasks/:id/cancel", (req, res) => {
+    try {
+      const cancelled = executor.cancelTask(req.params.id);
+      if (!cancelled) {
+        res.status(404).json({ error: "Task not running" });
+        return;
+      }
+      res.json({ success: true });
+    } catch (error) {
+      res.status(500).json({ error: String(error) });
+    }
+  });
+  app.post("/api/tasks/:id/retry", async (req, res) => {
+    try {
+      const task = updateTask(projectPath, req.params.id, {
+        status: "ready",
+        passes: false
+      });
+      if (!task) {
+        res.status(404).json({ error: "Task not found" });
+        return;
+      }
+      io.emit("task:updated", task);
+      if (req.body.autoRun) {
+        await executor.runTask(req.params.id);
+      }
+      res.json({ task });
+    } catch (error) {
+      res.status(500).json({ error: String(error) });
+    }
+  });
+  app.get("/api/tasks/:id/logs", (req, res) => {
+    try {
+      const logs = executor.getTaskLog(req.params.id);
+      if (logs === null) {
+        res.json({ logs: "" });
+        return;
+      }
+      res.json({ logs });
+    } catch (error) {
+      res.status(500).json({ error: String(error) });
+    }
+  });
+  app.get("/api/tasks/:id/output", (req, res) => {
+    try {
+      const output = executor.getTaskOutput(req.params.id);
+      if (!output) {
+        res.status(404).json({ error: "Task not running or not found" });
+        return;
+      }
+      res.json({ output });
+    } catch (error) {
+      res.status(500).json({ error: String(error) });
+    }
+  });
+  app.get("/api/progress", (req, res) => {
+    try {
+      const lines = parseInt(String(req.query.lines)) || 100;
+      const content = getRecentProgress(projectPath, lines);
+      res.json({ content });
+    } catch (error) {
+      res.status(500).json({ error: String(error) });
+    }
+  });
+  app.get("/api/config", (_req, res) => {
+    try {
+      const config = getConfig(projectPath);
+      res.json({ config });
+    } catch (error) {
+      res.status(500).json({ error: String(error) });
+    }
+  });
+  app.put("/api/config", (req, res) => {
+    try {
+      const currentConfig = getConfig(projectPath);
+      const updatedConfig = { ...currentConfig, ...req.body };
+      saveConfig(projectPath, updatedConfig);
+      res.json({ config: updatedConfig });
+    } catch (error) {
+      res.status(500).json({ error: String(error) });
+    }
+  });
+  app.get("/api/templates", (_req, res) => {
+    try {
+      const templates = getAllTemplates();
+      res.json({ templates });
+    } catch (error) {
+      res.status(500).json({ error: String(error) });
+    }
+  });
+  app.get("/api/templates/:id", (req, res) => {
+    try {
+      const template = getTemplateById(req.params.id);
+      if (!template) {
+        res.status(404).json({ error: "Template not found" });
+        return;
+      }
+      res.json({ template });
+    } catch (error) {
+      res.status(500).json({ error: String(error) });
+    }
+  });
+  app.post("/api/afk/start", (req, res) => {
+    try {
+      const { maxIterations, concurrent } = req.body;
+      executor.startAFKMode(maxIterations || 10, concurrent || 1);
+      res.json({ success: true, status: executor.getAFKStatus() });
+    } catch (error) {
+      res.status(400).json({ error: String(error) });
+    }
+  });
+  app.post("/api/afk/stop", (_req, res) => {
+    try {
+      executor.stopAFKMode();
+      res.json({ success: true });
+    } catch (error) {
+      res.status(500).json({ error: String(error) });
+    }
+  });
+  app.get("/api/afk/status", (_req, res) => {
+    try {
+      const status = executor.getAFKStatus();
+      res.json({ status });
+    } catch (error) {
+      res.status(500).json({ error: String(error) });
+    }
+  });
+  app.get("/api/running", (_req, res) => {
+    try {
+      const taskIds = executor.getRunningTaskIds();
+      res.json({ running: taskIds, count: taskIds.length });
+    } catch (error) {
+      res.status(500).json({ error: String(error) });
+    }
+  });
+  app.get("/api/stats", (_req, res) => {
+    try {
+      const counts = getTaskCounts(projectPath);
+      const running = executor.getRunningCount();
+      const afk = executor.getAFKStatus();
+      res.json({ counts, running, afk });
+    } catch (error) {
+      res.status(500).json({ error: String(error) });
+    }
+  });
+  const clientPath = join5(__dirname2, "..", "client");
+  if (existsSync3(clientPath)) {
+    app.use(express.static(clientPath));
+  }
+  app.get("*", (_req, res) => {
+    res.send(getClientHTML());
+  });
+  io.on("connection", (socket) => {
+    console.log("Client connected");
+    const runningIds = executor.getRunningTaskIds();
+    const taskLogs = {};
+    for (const taskId of runningIds) {
+      const logs = executor.getTaskLog(taskId);
+      if (logs) {
+        taskLogs[taskId] = logs;
+      }
+    }
+    socket.emit("init", {
+      tasks: getAllTasks(projectPath),
+      running: runningIds,
+      afk: executor.getAFKStatus(),
+      taskLogs
+      // Include logs for running tasks
+    });
+    socket.on("get-logs", (taskId) => {
+      const logs = executor.getTaskLog(taskId);
+      socket.emit("task-logs", { taskId, logs: logs || "" });
+    });
+    socket.on("disconnect", () => {
+      console.log("Client disconnected");
+    });
+  });
+  return new Promise((resolve, reject) => {
+    httpServer.on("error", (error) => {
+      if (error.code === "EADDRINUSE") {
+        reject(new Error(`Port ${port} is already in use. Try a different port with --port`));
+      } else {
+        reject(error);
+      }
+    });
+    httpServer.listen(port, () => {
+      httpServer.cleanup = () => {
+        console.log("Cleaning up executor...");
+        executor.cancelAll();
+        io.close();
+      };
+      resolve(httpServer);
+    });
+  });
+}
+function getClientHTML() {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Claude Kanban</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=DM+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="/socket.io/socket.io.js"></script>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          fontFamily: {
+            display: ['DM Sans', 'system-ui', 'sans-serif'],
+            sans: ['DM Sans', 'system-ui', 'sans-serif'],
+            mono: ['IBM Plex Mono', 'monospace'],
+          },
+          colors: {
+            canvas: {
+              DEFAULT: '#ffffff',
+              50: '#fafafa',
+              100: '#f5f5f5',
+              200: '#e5e5e5',
+              300: '#d4d4d4',
+              400: '#a3a3a3',
+              500: '#737373',
+              600: '#525252',
+              700: '#404040',
+              800: '#262626',
+              900: '#171717',
+            },
+            accent: {
+              DEFAULT: '#f97316',
+              light: '#fb923c',
+              dark: '#ea580c',
+              muted: 'rgba(249, 115, 22, 0.1)',
+            },
+            status: {
+              draft: '#a3a3a3',
+              ready: '#3b82f6',
+              running: '#f97316',
+              success: '#22c55e',
+              failed: '#ef4444',
+            }
+          },
+        },
+      },
+    };
+  </script>
+  <style>
+    /* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550
+       CLEAN LIGHT THEME - Inspired by vibe-kanban
+       \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 */
+
+    :root {
+      --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
+      --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
+    }
+
+    * { box-sizing: border-box; }
+
+    html {
+      background: #fafafa;
+      color: #171717;
+    }
+
+    body {
+      font-family: 'DM Sans', system-ui, sans-serif;
+      background: #fafafa;
+      min-height: 100vh;
+      overflow-x: hidden;
+    }
+
+    /* Clean scrollbar */
+    ::-webkit-scrollbar { width: 6px; height: 6px; }
+    ::-webkit-scrollbar-track { background: transparent; }
+    ::-webkit-scrollbar-thumb {
+      background: rgba(0, 0, 0, 0.15);
+      border-radius: 3px;
+    }
+    ::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.25); }
+
+    /* \u2500\u2500\u2500 Typography \u2500\u2500\u2500 */
+    .font-display { font-family: 'DM Sans', system-ui, sans-serif; }
+    .font-mono { font-family: 'IBM Plex Mono', monospace; }
+
+    /* \u2500\u2500\u2500 Card System \u2500\u2500\u2500 */
+    .card {
+      background: #ffffff;
+      border: 1px solid #e5e5e5;
+      border-radius: 8px;
+      transition: all 0.2s var(--ease-out-expo);
+    }
+    .card:hover {
+      border-color: #d4d4d4;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    }
+
+    /* \u2500\u2500\u2500 Task Card - Minimal like vibe-kanban \u2500\u2500\u2500 */
+    .task-card {
+      cursor: pointer;
+      padding: 12px 14px;
+    }
+    .task-card:hover {
+      background: #fafafa;
+    }
+    .task-card.selected {
+      border-color: #f97316;
+      background: rgba(249, 115, 22, 0.03);
+    }
+
+    /* \u2500\u2500\u2500 Drag & Drop \u2500\u2500\u2500 */
+    .dragging {
+      opacity: 0.9;
+      transform: scale(1.02) rotate(0.5deg);
+      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
+      z-index: 1000;
+    }
+    .drag-over {
+      background: rgba(249, 115, 22, 0.05);
+      border: 2px dashed #f97316;
+      border-radius: 8px;
+    }
+
+    /* \u2500\u2500\u2500 Column Headers - Minimal \u2500\u2500\u2500 */
+    .column-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 4px;
+      margin-bottom: 8px;
+      border-bottom: 1px solid #f0f0f0;
+    }
+    .status-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+    }
+    .status-dot-draft { background: #a3a3a3; }
+    .status-dot-ready { background: #3b82f6; }
+    .status-dot-in_progress { background: #f97316; }
+    .status-dot-completed { background: #22c55e; }
+    .status-dot-failed { background: #ef4444; }
+
+    /* \u2500\u2500\u2500 Buttons \u2500\u2500\u2500 */
+    .btn {
+      font-weight: 500;
+      border-radius: 6px;
+      transition: all 0.15s ease;
+      cursor: pointer;
+      border: none;
+    }
+    .btn:active { transform: scale(0.98); }
+
+    .btn-primary {
+      background: #f97316;
+      color: white;
+    }
+    .btn-primary:hover {
+      background: #ea580c;
+    }
+
+    .btn-ghost {
+      background: transparent;
+      border: 1px solid #e5e5e5;
+      color: #525252;
+    }
+    .btn-ghost:hover {
+      background: #f5f5f5;
+      border-color: #d4d4d4;
+    }
+
+    .btn-danger {
+      background: #fef2f2;
+      color: #ef4444;
+      border: 1px solid #fecaca;
+    }
+    .btn-danger:hover {
+      background: #fee2e2;
+    }
+
+    /* \u2500\u2500\u2500 Side Panel (pushes content, not overlay) \u2500\u2500\u2500 */
+    .side-panel {
+      width: 420px;
+      flex-shrink: 0;
+      background: #ffffff;
+      border-left: 1px solid #e5e5e5;
+      display: flex;
+      flex-direction: column;
+      height: calc(100vh - 57px);
+      overflow: hidden;
+    }
+    .main-content {
+      flex: 1;
+      min-width: 0;
+      transition: all 0.2s var(--ease-out-expo);
+    }
+    .side-panel-header {
+      padding: 16px 20px;
+      border-bottom: 1px solid #e5e5e5;
+      flex-shrink: 0;
+    }
+    .side-panel-body {
+      flex: 1;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+    }
+    .side-panel-tabs {
+      display: flex;
+      border-bottom: 1px solid #e5e5e5;
+      padding: 0 20px;
+      flex-shrink: 0;
+    }
+    .side-panel-tab {
+      padding: 12px 16px;
+      color: #737373;
+      cursor: pointer;
+      border-bottom: 2px solid transparent;
+      transition: all 0.15s ease;
+    }
+    .side-panel-tab:hover { color: #171717; }
+    .side-panel-tab.active {
+      color: #171717;
+      border-bottom-color: #f97316;
+    }
+
+    /* \u2500\u2500\u2500 Terminal/Log Panel \u2500\u2500\u2500 */
+    .log-container {
+      background: #1a1a1a;
+      color: #e5e5e5;
+      font-family: 'IBM Plex Mono', monospace;
+      font-size: 12px;
+      line-height: 1.6;
+      padding: 16px;
+      flex: 1;
+      overflow-y: auto;
+      overflow-x: hidden;
+      min-height: 0;
+    }
+    .log-line {
+      padding: 2px 0;
+      word-wrap: break-word;
+      white-space: pre-wrap;
+    }
+    .log-line:hover {
+      background: rgba(255, 255, 255, 0.05);
+    }
+
+    /* ANSI colors */
+    .ansi-red { color: #f87171; }
+    .ansi-green { color: #86efac; }
+    .ansi-yellow { color: #fde047; }
+    .ansi-blue { color: #93c5fd; }
+    .ansi-magenta { color: #e879f9; }
+    .ansi-cyan { color: #67e8f9; }
+    .ansi-bold { font-weight: 600; }
+    .log-path { color: #93c5fd; }
+    .log-error { color: #fca5a5; }
+    .log-success { color: #86efac; }
+
+    /* \u2500\u2500\u2500 Tab System \u2500\u2500\u2500 */
+    .tab {
+      padding: 10px 16px;
+      color: #737373;
+      cursor: pointer;
+      border-bottom: 2px solid transparent;
+      transition: all 0.15s ease;
+    }
+    .tab:hover { color: #171717; }
+    .tab.active {
+      color: #171717;
+      border-bottom-color: #f97316;
+    }
+
+    /* \u2500\u2500\u2500 Modal \u2500\u2500\u2500 */
+    .modal-backdrop {
+      background: rgba(0, 0, 0, 0.5);
+      backdrop-filter: blur(4px);
+    }
+    .modal-content {
+      animation: modal-enter 0.2s var(--ease-out-expo);
+    }
+    @keyframes modal-enter {
+      from { opacity: 0; transform: scale(0.95); }
+      to { opacity: 1; transform: scale(1); }
+    }
+
+    /* \u2500\u2500\u2500 Form Inputs \u2500\u2500\u2500 */
+    .input {
+      background: #ffffff;
+      border: 1px solid #e5e5e5;
+      border-radius: 6px;
+      padding: 10px 12px;
+      color: #171717;
+      transition: all 0.15s ease;
+      font-size: 14px;
+    }
+    .input::placeholder { color: #a3a3a3; }
+    .input:focus {
+      outline: none;
+      border-color: #f97316;
+      box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
+    }
+
+    /* \u2500\u2500\u2500 Toast Notifications \u2500\u2500\u2500 */
+    .toast-container {
+      position: fixed;
+      bottom: 24px;
+      right: 24px;
+      z-index: 9999;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+    .toast {
+      padding: 12px 16px;
+      border-radius: 8px;
+      background: #ffffff;
+      border: 1px solid #e5e5e5;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      animation: toast-enter 0.3s var(--ease-out-expo);
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      color: #171717;
+    }
+    @keyframes toast-enter {
+      from { opacity: 0; transform: translateY(8px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    .toast-success { border-left: 3px solid #22c55e; }
+    .toast-error { border-left: 3px solid #ef4444; }
+    .toast-info { border-left: 3px solid #3b82f6; }
+    .toast-warning { border-left: 3px solid #f97316; }
+
+    /* \u2500\u2500\u2500 Status Badges \u2500\u2500\u2500 */
+    .status-badge {
+      font-size: 12px;
+      font-weight: 500;
+      padding: 4px 10px;
+      border-radius: 12px;
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .status-badge-draft { background: #f5f5f5; color: #737373; }
+    .status-badge-ready { background: #eff6ff; color: #3b82f6; }
+    .status-badge-in_progress { background: #fff7ed; color: #f97316; }
+    .status-badge-completed { background: #f0fdf4; color: #22c55e; }
+    .status-badge-failed { background: #fef2f2; color: #ef4444; }
+
+    /* \u2500\u2500\u2500 Priority Badges \u2500\u2500\u2500 */
+    .badge {
+      font-size: 11px;
+      font-weight: 500;
+      padding: 2px 8px;
+      border-radius: 4px;
+    }
+    .badge-critical { background: #fef2f2; color: #ef4444; }
+    .badge-high { background: #fff7ed; color: #f97316; }
+    .badge-medium { background: #eff6ff; color: #3b82f6; }
+    .badge-low { background: #f5f5f5; color: #737373; }
+
+    /* \u2500\u2500\u2500 Stats Pills \u2500\u2500\u2500 */
+    .stat-pill {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 4px 10px;
+      background: #f5f5f5;
+      border-radius: 12px;
+      font-size: 12px;
+      font-weight: 500;
+      color: #525252;
+    }
+    .stat-dot {
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+    }
+
+    /* \u2500\u2500\u2500 Column Container \u2500\u2500\u2500 */
+    .column-container {
+      background: #ffffff;
+      border: 1px solid #e5e5e5;
+      border-radius: 12px;
+      padding: 12px;
+      min-height: 500px;
+    }
+
+    /* \u2500\u2500\u2500 Column Drop Zone \u2500\u2500\u2500 */
+    .column-zone {
+      min-height: 400px;
+      padding: 4px;
+      transition: all 0.2s ease;
+    }
+
+    /* \u2500\u2500\u2500 Chat Input \u2500\u2500\u2500 */
+    .chat-input-container {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      padding: 16px 24px;
+      background: #ffffff;
+      border-top: 1px solid #e5e5e5;
+      z-index: 50;
+    }
+    .chat-input {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      background: #f5f5f5;
+      border: 1px solid #e5e5e5;
+      border-radius: 8px;
+      padding: 10px 16px;
+    }
+    .chat-input input {
+      flex: 1;
+      background: transparent;
+      border: none;
+      outline: none;
+      font-size: 14px;
+      color: #171717;
+    }
+    .chat-input input::placeholder { color: #a3a3a3; }
+    .chat-input button {
+      background: #f97316;
+      color: white;
+      border: none;
+      border-radius: 6px;
+      padding: 8px 16px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: background 0.15s;
+    }
+    .chat-input button:hover { background: #ea580c; }
+
+    /* \u2500\u2500\u2500 Details Grid \u2500\u2500\u2500 */
+    .details-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 16px;
+      padding: 16px 20px;
+      border-bottom: 1px solid #e5e5e5;
+      flex-shrink: 0;
+    }
+    .details-item {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+    .details-label {
+      font-size: 11px;
+      font-weight: 500;
+      color: #737373;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+    .details-value {
+      font-size: 13px;
+      color: #171717;
+    }
+
+    /* \u2500\u2500\u2500 Page animations \u2500\u2500\u2500 */
+    .fade-in {
+      animation: fade-in 0.3s ease;
+    }
+    @keyframes fade-in {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+  </style>
+</head>
+<body class="grain">
+  <div id="app"></div>
+  <div id="toast-container" class="toast-container"></div>
+  <script type="module">
+${getClientJS()}
+  </script>
+</body>
+</html>`;
+}
+function getClientJS() {
+  return `
+// State
+let state = {
+  tasks: [],
+  running: [],
+  afk: { running: false, currentIteration: 0, maxIterations: 0, tasksCompleted: 0 },
+  templates: [],
+  config: null,
+  selectedTask: null,
+  taskOutput: {},
+  taskStartTime: {},
+  activeTab: null,
+  showModal: null,
+  aiPrompt: '',
+  aiGenerating: false,
+  editingTask: null,
+  searchQuery: '',
+  logSearch: '',
+  showLineNumbers: false,
+  autoScroll: true,
+  logFullscreen: false,
+  closedTabs: new Set(),
+  sidePanel: null, // task id for side panel
+  sidePanelTab: 'logs', // 'logs' or 'details'
+  darkMode: localStorage.getItem('darkMode') === 'true', // Add dark mode state
+};
+
+// Toast notifications
+function showToast(message, type = 'info') {
+  const container = document.getElementById('toast-container');
+  const toast = document.createElement('div');
+  toast.className = 'toast toast-' + type;
+  const icons = { success: '\u2713', error: '\u2715', info: '\u2139', warning: '\u26A0' };
+  toast.innerHTML = '<span>' + (icons[type] || '') + '</span><span>' + escapeHtml(message) + '</span>';
+  container.appendChild(toast);
+  setTimeout(() => toast.remove(), 4000);
+}
+
+// ANSI color parser
+function parseAnsi(text) {
+  const ansiRegex = /\\x1B\\[([0-9;]*)m/g;
+  let result = '';
+  let lastIndex = 0;
+  let currentClasses = [];
+
+  text.replace(ansiRegex, (match, codes, offset) => {
+    result += escapeHtml(text.slice(lastIndex, offset));
+    lastIndex = offset + match.length;
+
+    codes.split(';').forEach(code => {
+      const c = parseInt(code);
+      if (c === 0) currentClasses = [];
+      else if (c === 1) currentClasses.push('ansi-bold');
+      else if (c === 2) currentClasses.push('ansi-dim');
+      else if (c === 3) currentClasses.push('ansi-italic');
+      else if (c === 4) currentClasses.push('ansi-underline');
+      else if (c === 30) currentClasses.push('ansi-black');
+      else if (c === 31) currentClasses.push('ansi-red');
+      else if (c === 32) currentClasses.push('ansi-green');
+      else if (c === 33) currentClasses.push('ansi-yellow');
+      else if (c === 34) currentClasses.push('ansi-blue');
+      else if (c === 35) currentClasses.push('ansi-magenta');
+      else if (c === 36) currentClasses.push('ansi-cyan');
+      else if (c === 37) currentClasses.push('ansi-white');
+      else if (c === 90) currentClasses.push('ansi-bright-black');
+      else if (c === 91) currentClasses.push('ansi-bright-red');
+      else if (c === 92) currentClasses.push('ansi-bright-green');
+      else if (c === 93) currentClasses.push('ansi-bright-yellow');
+      else if (c === 94) currentClasses.push('ansi-bright-blue');
+      else if (c === 95) currentClasses.push('ansi-bright-magenta');
+      else if (c === 96) currentClasses.push('ansi-bright-cyan');
+      else if (c === 97) currentClasses.push('ansi-bright-white');
+    });
+
+    if (currentClasses.length > 0) {
+      result += '<span class="' + currentClasses.join(' ') + '">';
+    }
+  });
+
+  result += escapeHtml(text.slice(lastIndex));
+  return result;
+}
+
+// Syntax highlight log lines
+function highlightLog(text) {
+  let highlighted = parseAnsi(text);
+  // Highlight file paths
+  highlighted = highlighted.replace(/([\\/\\w.-]+\\.(ts|js|tsx|jsx|json|md|css|html))/g, '<span class="log-path">$1</span>');
+  // Highlight errors
+  highlighted = highlighted.replace(/(error|Error|ERROR|failed|Failed|FAILED)/g, '<span class="log-error">$1</span>');
+  // Highlight success
+  highlighted = highlighted.replace(/(success|Success|SUCCESS|complete|Complete|COMPLETE|passed|Passed|PASSED)/g, '<span class="log-success">$1</span>');
+  // Highlight warnings
+  highlighted = highlighted.replace(/(warning|Warning|WARNING|warn|Warn|WARN)/g, '<span class="log-warning">$1</span>');
+  return highlighted;
+}
+
+// Format elapsed time
+function formatElapsed(startTime) {
+  if (!startTime) return '';
+  const elapsed = Date.now() - new Date(startTime).getTime();
+  const seconds = Math.floor(elapsed / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  if (hours > 0) return hours + 'h ' + (minutes % 60) + 'm';
+  if (minutes > 0) return minutes + 'm ' + (seconds % 60) + 's';
+  return seconds + 's';
+}
+
+// Socket connection
+const socket = io();
+
+socket.on('init', (data) => {
+  state.tasks = data.tasks;
+  state.running = data.running;
+  state.afk = data.afk;
+
+  // Load persisted logs for running tasks
+  if (data.taskLogs) {
+    for (const [taskId, logs] of Object.entries(data.taskLogs)) {
+      if (logs) {
+        // Parse logs into lines for the taskOutput format
+        state.taskOutput[taskId] = String(logs).split('\\n').filter(l => l).map(text => ({
+          text: text + '\\n',
+          timestamp: new Date().toISOString()
+        }));
+      }
+    }
+  }
+
+  render();
+});
+
+// Handle logs response from server
+socket.on('task-logs', ({ taskId, logs }) => {
+  if (logs) {
+    state.taskOutput[taskId] = logs.split('\\n').filter(l => l).map(text => ({
+      text: text + '\\n',
+      timestamp: new Date().toISOString()
+    }));
+    render();
+    if (state.autoScroll) {
+      requestAnimationFrame(() => scrollSidePanelLog());
+    }
+  }
+});
+
+socket.on('task:created', (task) => {
+  state.tasks.push(task);
+  showToast('Task created: ' + task.title, 'success');
+  render();
+});
+
+socket.on('task:updated', (task) => {
+  const idx = state.tasks.findIndex(t => t.id === task.id);
+  if (idx >= 0) state.tasks[idx] = task;
+  render();
+});
+
+socket.on('task:deleted', ({ id }) => {
+  state.tasks = state.tasks.filter(t => t.id !== id);
+  render();
+});
+
+socket.on('task:started', ({ taskId, timestamp }) => {
+  if (!state.running.includes(taskId)) state.running.push(taskId);
+  const task = state.tasks.find(t => t.id === taskId);
+  if (task) task.status = 'in_progress';
+  state.taskOutput[taskId] = [];
+  state.taskStartTime[taskId] = timestamp || new Date().toISOString();
+  state.activeTab = taskId;
+  state.closedTabs.delete(taskId);
+  showToast('Task started: ' + (task?.title || taskId), 'info');
+  render();
+});
+
+socket.on('task:output', ({ taskId, line }) => {
+  if (!state.taskOutput[taskId]) state.taskOutput[taskId] = [];
+  state.taskOutput[taskId].push({ text: line, timestamp: new Date().toISOString() });
+  render();
+  // Auto-scroll after DOM update
+  if (state.autoScroll) {
+    requestAnimationFrame(() => {
+      scrollLogToBottom();
+      scrollSidePanelLog();
+    });
+  }
+});
+
+socket.on('task:completed', ({ taskId }) => {
+  state.running = state.running.filter(id => id !== taskId);
+  const task = state.tasks.find(t => t.id === taskId);
+  if (task) { task.status = 'completed'; task.passes = true; }
+  showToast('Task completed: ' + (task?.title || taskId), 'success');
+  render();
+});
+
+socket.on('task:failed', ({ taskId }) => {
+  state.running = state.running.filter(id => id !== taskId);
+  const task = state.tasks.find(t => t.id === taskId);
+  if (task) { task.status = 'failed'; task.passes = false; }
+  showToast('Task failed: ' + (task?.title || taskId), 'error');
+  render();
+});
+
+socket.on('task:cancelled', ({ taskId }) => {
+  state.running = state.running.filter(id => id !== taskId);
+  const task = state.tasks.find(t => t.id === taskId);
+  if (task) task.status = 'ready';
+  showToast('Task cancelled', 'warning');
+  render();
+});
+
+socket.on('afk:status', (status) => {
+  state.afk = status;
+  render();
+});
+
+// Load templates
+fetch('/api/templates').then(r => r.json()).then(data => {
+  state.templates = data.templates;
+});
+
+// Load config
+fetch('/api/config').then(r => r.json()).then(data => {
+  state.config = data.config;
+});
+
+// API calls
+async function createTask(task) {
+  const res = await fetch('/api/tasks', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(task)
+  });
+  return res.json();
+}
+
+async function updateTask(id, updates) {
+  const res = await fetch('/api/tasks/' + id, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(updates)
+  });
+  return res.json();
+}
+
+async function deleteTask(id) {
+  await fetch('/api/tasks/' + id, { method: 'DELETE' });
+}
+
+async function runTask(id) {
+  await fetch('/api/tasks/' + id + '/run', { method: 'POST' });
+}
+
+async function cancelTask(id) {
+  await fetch('/api/tasks/' + id + '/cancel', { method: 'POST' });
+}
+
+async function retryTask(id) {
+  await fetch('/api/tasks/' + id + '/retry', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ autoRun: false })
+  });
+}
+
+async function generateTask(prompt) {
+  state.aiGenerating = true;
+  render();
+  try {
+    const res = await fetch('/api/tasks/generate', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ prompt })
+    });
+    const data = await res.json();
+    state.aiGenerating = false;
+    return data.task;
+  } catch (e) {
+    state.aiGenerating = false;
+    throw e;
+  }
+}
+
+async function startAFK(maxIterations, concurrent) {
+  await fetch('/api/afk/start', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ maxIterations, concurrent })
+  });
+}
+
+async function stopAFK() {
+  await fetch('/api/afk/stop', { method: 'POST' });
+}
+
+// Enhanced Drag and drop
+let draggedTask = null;
+let draggedElement = null;
+
+function handleDragStart(e, taskId) {
+  draggedTask = taskId;
+  draggedElement = e.target;
+  e.target.classList.add('dragging');
+  e.dataTransfer.effectAllowed = 'move';
+  e.dataTransfer.setData('text/plain', taskId);
+
+  // Add visual feedback to valid drop zones
+  setTimeout(() => {
+    document.querySelectorAll('.column-drop-zone').forEach(zone => {
+      const status = zone.dataset.status;
+      if (status !== 'in_progress') {
+        zone.classList.add('border-dashed', 'border-2', 'border-blue-400/30');
+      }
+    });
+  }, 0);
+}
+
+function handleDragEnd(e) {
+  e.target.classList.remove('dragging');
+  document.querySelectorAll('.drag-over').forEach(el => el.classList.remove('drag-over'));
+  document.querySelectorAll('.column-drop-zone').forEach(zone => {
+    zone.classList.remove('border-dashed', 'border-2', 'border-blue-400/30');
+  });
+  draggedTask = null;
+  draggedElement = null;
+}
+
+function handleDragOver(e) {
+  e.preventDefault();
+  e.dataTransfer.dropEffect = 'move';
+  const zone = e.currentTarget;
+  if (!zone.classList.contains('drag-over') && zone.dataset.status !== 'in_progress') {
+    zone.classList.add('drag-over');
+  }
+}
+
+function handleDragLeave(e) {
+  // Only remove if actually leaving the zone
+  const rect = e.currentTarget.getBoundingClientRect();
+  const x = e.clientX;
+  const y = e.clientY;
+  if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) {
+    e.currentTarget.classList.remove('drag-over');
+  }
+}
+
+function handleDrop(e, newStatus) {
+  e.preventDefault();
+  e.currentTarget.classList.remove('drag-over');
+  if (draggedTask && newStatus !== 'in_progress') {
+    const task = state.tasks.find(t => t.id === draggedTask);
+    if (task && task.status !== newStatus) {
+      updateTask(draggedTask, { status: newStatus });
+      showToast('Moved to ' + newStatus.replace('_', ' '), 'info');
+    }
+  }
+  draggedTask = null;
+}
+
+function scrollLogToBottom() {
+  const logEl = document.getElementById('log-content');
+  if (logEl) logEl.scrollTop = logEl.scrollHeight;
+}
+
+function scrollSidePanelLog() {
+  const logEl = document.getElementById('side-panel-log');
+  if (logEl) logEl.scrollTop = logEl.scrollHeight;
+}
+
+function copyLogToClipboard() {
+  const output = state.taskOutput[state.activeTab] || [];
+  const text = output.map(l => l.text || l).join('');
+  navigator.clipboard.writeText(text).then(() => {
+    showToast('Log copied to clipboard', 'success');
+  });
+}
+
+function clearLog(taskId) {
+  state.taskOutput[taskId] = [];
+  render();
+}
+
+function closeLogTab(taskId) {
+  state.closedTabs.add(taskId);
+  if (state.activeTab === taskId) {
+    const remaining = Object.keys(state.taskOutput).filter(id => !state.closedTabs.has(id));
+    state.activeTab = remaining[0] || null;
+  }
+  render();
+}
+
+function toggleLogFullscreen() {
+  state.logFullscreen = !state.logFullscreen;
+  render();
+}
+
+const categoryIcons = {
+  functional: '\u2699\uFE0F',
+  ui: '\u{1F3A8}',
+  bug: '\u{1F41B}',
+  enhancement: '\u2728',
+  testing: '\u{1F9EA}',
+  refactor: '\u{1F527}'
+};
+
+// Render functions
+function renderCard(task) {
+  const isRunning = state.running.includes(task.id);
+  const isSelected = state.sidePanel === task.id;
+
+  return \`
+    <div class="card task-card mb-2 group \${isRunning ? 'running' : ''} \${isSelected ? 'selected' : ''}"
+         onclick="openSidePanel('\${task.id}')"
+         draggable="\${!isRunning}"
+         ondragstart="handleDragStart(event, '\${task.id}')"
+         ondragend="handleDragEnd(event)">
+      <div class="flex justify-between items-start gap-2">
+        <h3 class="font-medium text-canvas-800 text-sm leading-snug">\${escapeHtml(task.title)}</h3>
+        <button onclick="event.stopPropagation(); showTaskMenu('\${task.id}')"
+                class="text-canvas-400 hover:text-canvas-600 p-1 -mr-1 opacity-0 group-hover:opacity-100">
+          \u22EF
+        </button>
+      </div>
+      <p class="text-xs text-canvas-500 mt-1 line-clamp-2">\${escapeHtml(task.description.substring(0, 80))}\${task.description.length > 80 ? '...' : ''}</p>
+      \${isRunning ? \`
+        <div class="flex items-center gap-2 mt-2 text-xs text-status-running">
+          <span class="w-1.5 h-1.5 bg-status-running rounded-full animate-pulse"></span>
+          Running...
+        </div>
+      \` : ''}
+    </div>
+  \`;
+}
+
+function openSidePanel(taskId) {
+  state.sidePanel = taskId;
+  state.activeTab = taskId;
+  state.closedTabs.delete(taskId);
+
+  // Request logs from server if not already loaded
+  if (!state.taskOutput[taskId] || state.taskOutput[taskId].length === 0) {
+    socket.emit('get-logs', taskId);
+  }
+
+  render();
+
+  // Scroll to bottom after render
+  if (state.autoScroll) {
+    requestAnimationFrame(() => scrollSidePanelLog());
+  }
+}
+
+function closeSidePanel() {
+  state.sidePanel = null;
+  render();
+}
+
+function showTaskMenu(taskId) {
+  // For now just open side panel, could add dropdown menu later
+  openSidePanel(taskId);
+}
+
+function renderColumn(status, title, tasks) {
+  const columnTasks = tasks.filter(t => t.status === status);
+  const statusLabels = {
+    draft: 'To Do',
+    ready: 'Ready',
+    in_progress: 'In Progress',
+    completed: 'Done',
+    failed: 'Failed'
+  };
+  const taskCount = columnTasks.length;
+
+  return \`
+    <div class="flex-1 min-w-[240px] max-w-[300px]">
+      <div class="column-container">
+        <div class="column-header">
+          <span class="status-dot status-dot-\${status}"></span>
+          <span class="font-medium text-canvas-700 text-sm">\${statusLabels[status] || title}</span>
+          <span class="text-xs text-canvas-400 ml-auto">\${taskCount}</span>
+        </div>
+        <div class="column-zone column-drop-zone max-h-[calc(100vh-280px)] overflow-y-auto"
+             data-status="\${status}"
+             ondragover="handleDragOver(event)"
+             ondragleave="handleDragLeave(event)"
+             ondrop="handleDrop(event, '\${status}')">
+          \${columnTasks.map(t => renderCard(t)).join('')}
+          \${columnTasks.length === 0 ? \`
+            <div class="flex items-center justify-center py-12 text-canvas-400 text-sm">
+              No tasks
+            </div>
+          \` : ''}
+        </div>
+      </div>
+    </div>
+  \`;
+}
+
+function renderLog() {
+  const allTabs = Object.keys(state.taskOutput).filter(id => !state.closedTabs.has(id));
+  const activeOutput = state.taskOutput[state.activeTab] || [];
+  const activeTask = state.tasks.find(t => t.id === state.activeTab);
+  const isRunning = state.running.includes(state.activeTab);
+
+  // Filter output based on search
+  let filteredOutput = activeOutput;
+  if (state.logSearch) {
+    const searchLower = state.logSearch.toLowerCase();
+    filteredOutput = activeOutput.filter(l => {
+      const text = l.text || l;
+      return text.toLowerCase().includes(searchLower);
+    });
+  }
+
+  const fullscreenClass = state.logFullscreen ? 'fixed inset-4 z-50' : 'mt-6';
+  const logHeight = state.logFullscreen ? 'calc(100vh - 180px)' : '300px';
+
+  return \`
+    <div class="terminal \${fullscreenClass} \${state.logFullscreen ? 'shadow-2xl' : ''}">
+      <!-- Tab bar -->
+      <div class="terminal-header flex items-center rounded-t-xl">
+        <div class="flex-1 flex items-center overflow-x-auto">
+          \${allTabs.length > 0 ? allTabs.map(id => {
+            const task = state.tasks.find(t => t.id === id);
+            const isActive = state.activeTab === id;
+            const isTaskRunning = state.running.includes(id);
+            return \`
+              <div class="tab flex items-center gap-2 group \${isActive ? 'active' : ''}"
+                   onclick="state.activeTab = '\${id}'; render();">
+                <span class="w-2 h-2 rounded-full \${isTaskRunning ? 'bg-status-running animate-pulse' : task?.status === 'completed' ? 'bg-status-success' : task?.status === 'failed' ? 'bg-status-failed' : 'bg-canvas-400'}"></span>
+                <span class="text-sm truncate max-w-[150px]">\${task?.title?.substring(0, 25) || id}</span>
+                <button onclick="event.stopPropagation(); closeLogTab('\${id}')"
+                        class="opacity-0 group-hover:opacity-100 text-canvas-500 hover:text-status-failed transition-opacity ml-1">
+                  \u2715
+                </button>
+              </div>
+            \`;
+          }).join('') : '<div class="px-4 py-2.5 text-canvas-500 text-sm">No logs</div>'}
+        </div>
+
+        <!-- Controls -->
+        <div class="flex items-center gap-1 px-3 border-l border-white/5">
+          <button onclick="state.showLineNumbers = !state.showLineNumbers; render();"
+                  class="btn btn-ghost p-1.5 text-xs tooltip" data-tooltip="\${state.showLineNumbers ? 'Hide' : 'Show'} line numbers">
+            #
+          </button>
+          <button onclick="state.autoScroll = !state.autoScroll; render();"
+                  class="btn btn-ghost p-1.5 text-xs \${state.autoScroll ? 'text-accent' : ''} tooltip" data-tooltip="Auto-scroll \${state.autoScroll ? 'on' : 'off'}">
+            \u2193
+          </button>
+          <button onclick="copyLogToClipboard()"
+                  class="btn btn-ghost p-1.5 text-xs tooltip" data-tooltip="Copy to clipboard">
+            \u{1F4CB}
+          </button>
+          <button onclick="clearLog('\${state.activeTab}')"
+                  class="btn btn-ghost p-1.5 text-xs tooltip" data-tooltip="Clear log">
+            \u{1F5D1}
+          </button>
+          <button onclick="toggleLogFullscreen()"
+                  class="btn btn-ghost p-1.5 text-xs tooltip" data-tooltip="\${state.logFullscreen ? 'Exit' : 'Enter'} fullscreen">
+            \${state.logFullscreen ? '\u2299' : '\u26F6'}
+          </button>
+        </div>
+      </div>
+
+      <!-- Search and task info bar -->
+      <div class="flex items-center justify-between px-4 py-2.5 bg-canvas-50/50 border-b border-white/5">
+        <div class="flex items-center gap-3">
+          <span class="text-sm font-display font-medium text-canvas-700">
+            \${activeTask ? activeTask.title : 'Execution Log'}
+          </span>
+          \${isRunning ? \`
+            <span class="stat-pill text-status-running border-status-running/20">
+              <span class="stat-dot bg-status-running animate-pulse"></span>
+              Running \${formatElapsed(state.taskStartTime[state.activeTab])}
+            </span>
+          \` : ''}
+          <span class="text-xs text-canvas-500 font-mono">\${filteredOutput.length} lines</span>
+        </div>
+        <div class="flex items-center gap-2">
+          <div class="relative">
+            <input type="text"
+                   placeholder="Search logs..."
+                   value="\${escapeHtml(state.logSearch)}"
+                   oninput="state.logSearch = this.value; render();"
+                   class="input text-xs py-1.5 pr-8 w-48">
+            \${state.logSearch ? \`
+              <button onclick="state.logSearch = ''; render();"
+                      class="absolute right-2 top-1/2 -translate-y-1/2 text-canvas-500 hover:text-canvas-700">
+                \u2715
+              </button>
+            \` : ''}
+          </div>
+        </div>
+      </div>
+
+      <!-- Log content -->
+      <div id="log-content"
+           class="p-4 overflow-y-auto text-canvas-600 rounded-b-xl font-mono"
+           style="height: \${logHeight}">
+        \${filteredOutput.length > 0
+          ? filteredOutput.map((l, i) => {
+              const text = l.text || l;
+              const timestamp = l.timestamp ? new Date(l.timestamp).toLocaleTimeString() : '';
+              return \`
+                <div class="log-line flex items-start gap-3">
+                  \${state.showLineNumbers ? \`<span class="text-canvas-400 select-none w-8 text-right flex-shrink-0">\${i + 1}</span>\` : ''}
+                  \${timestamp ? \`<span class="text-canvas-400 select-none flex-shrink-0">\${timestamp}</span>\` : ''}
+                  <span class="whitespace-pre-wrap flex-1">\${highlightLog(text)}</span>
+                </div>
+              \`;
+            }).join('')
+          : \`<div class="flex flex-col items-center justify-center h-full text-canvas-500">
+              <span class="text-4xl mb-3 opacity-20">\u{1F4CB}</span>
+              <span class="text-sm">\${state.logSearch ? 'No matching lines' : 'No output yet. Run a task to see logs here.'}</span>
+            </div>\`}
+      </div>
+    </div>
+  \`;
+}
+
+function renderModal() {
+  if (!state.showModal) return '';
+
+  if (state.showModal === 'new' || state.showModal === 'edit') {
+    const task = state.editingTask || { title: '', description: '', category: 'functional', priority: 'medium', steps: [], status: 'draft' };
+    const isEdit = state.showModal === 'edit';
+
+    return \`
+      <div class="modal-backdrop fixed inset-0 flex items-center justify-center z-50" onclick="if(event.target === event.currentTarget) { state.showModal = null; state.editingTask = null; render(); }">
+        <div class="modal-content card rounded-xl w-full max-w-lg mx-4 max-h-[90vh] overflow-y-auto">
+          <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">\${isEdit ? '\u270F\uFE0F Edit Task' : '\u{1F4DD} New Task'}</h3>
+            <button onclick="state.showModal = null; state.editingTask = null; render();" class="btn btn-ghost p-1.5 text-canvas-500 hover:text-canvas-700">\u2715</button>
+          </div>
+          <form onsubmit="handleTaskSubmit(event, \${isEdit})" class="p-6 space-y-5">
+            <div>
+              <label class="block text-sm font-medium text-canvas-700 mb-2">Title *</label>
+              <input type="text" name="title" value="\${escapeHtml(task.title)}" required
+                     class="input w-full" placeholder="Add login functionality">
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-canvas-700 mb-2">Description *</label>
+              <textarea name="description" rows="4" required
+                        class="input w-full resize-none" placeholder="Describe what needs to be done...">\${escapeHtml(task.description)}</textarea>
+            </div>
+            <div class="grid grid-cols-2 gap-4">
+              <div>
+                <label class="block text-sm font-medium text-canvas-700 mb-2">Category</label>
+                <select name="category" class="input w-full">
+                  <option value="functional" \${task.category === 'functional' ? 'selected' : ''}>\u2699\uFE0F Functional</option>
+                  <option value="ui" \${task.category === 'ui' ? 'selected' : ''}>\u{1F3A8} UI</option>
+                  <option value="bug" \${task.category === 'bug' ? 'selected' : ''}>\u{1F41B} Bug</option>
+                  <option value="enhancement" \${task.category === 'enhancement' ? 'selected' : ''}>\u2728 Enhancement</option>
+                  <option value="testing" \${task.category === 'testing' ? 'selected' : ''}>\u{1F9EA} Testing</option>
+                  <option value="refactor" \${task.category === 'refactor' ? 'selected' : ''}>\u{1F527} Refactor</option>
+                </select>
+              </div>
+              <div>
+                <label class="block text-sm font-medium text-canvas-700 mb-2">Priority</label>
+                <select name="priority" class="input w-full">
+                  <option value="low" \${task.priority === 'low' ? 'selected' : ''}>Low</option>
+                  <option value="medium" \${task.priority === 'medium' ? 'selected' : ''}>Medium</option>
+                  <option value="high" \${task.priority === 'high' ? 'selected' : ''}>High</option>
+                  <option value="critical" \${task.priority === 'critical' ? 'selected' : ''}>Critical</option>
+                </select>
+              </div>
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-canvas-700 mb-2">Verification Steps (one per line)</label>
+              <textarea name="steps" rows="4"
+                        class="input w-full resize-none font-mono text-sm" placeholder="Navigate to /login&#10;Enter valid credentials&#10;Click submit button&#10;Verify redirect">\${task.steps.join('\\n')}</textarea>
+            </div>
+            <div class="flex justify-end gap-3 pt-4 border-t border-white/5">
+              <button type="button" onclick="state.showModal = null; state.editingTask = null; render();"
+                      class="btn btn-ghost px-4 py-2.5">Cancel</button>
+              \${!isEdit ? \`
+                <button type="submit" name="action" value="draft"
+                        class="btn btn-ghost px-4 py-2.5">Save as Draft</button>
+              \` : ''}
+              <button type="submit" name="action" value="\${isEdit ? 'save' : 'ready'}"
+                      class="btn btn-primary px-5 py-2.5">\${isEdit ? 'Save Changes' : 'Create Ready'}</button>
+            </div>
+          </form>
+        </div>
+      </div>
+    \`;
+  }
+
+  if (state.showModal === 'templates') {
+    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-2xl mx-4 max-h-[80vh] overflow-y-auto">
+          <div class="px-6 py-4 border-b border-white/5 flex justify-between items-center sticky top-0 bg-canvas-100/95 backdrop-blur rounded-t-xl z-10">
+            <h3 class="font-display font-semibold text-canvas-800 text-lg">\u{1F4CB} Task Templates</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 grid grid-cols-2 gap-4">
+            \${state.templates.map(t => \`
+              <button onclick="applyTemplate('\${t.id}')"
+                      class="card text-left p-4 hover:border-accent/30 transition-all group">
+                <div class="font-display font-medium text-canvas-800 group-hover:text-accent transition-colors">\${t.icon} \${t.name}</div>
+                <div class="text-sm text-canvas-500 mt-1">\${t.description}</div>
+              </button>
+            \`).join('')}
+          </div>
+        </div>
+      </div>
+    \`;
+  }
+
+  if (state.showModal === 'afk') {
+    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-md 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{1F504} AFK Mode</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-5">Run the agent in a loop, automatically picking up tasks from the "Ready" column until complete.</p>
+            <div class="space-y-4">
+              <div>
+                <label class="block text-sm font-medium text-canvas-700 mb-2">Maximum Iterations</label>
+                <input type="number" id="afk-iterations" value="10" min="1" max="100"
+                       class="input w-full">
+              </div>
+              <div>
+                <label class="block text-sm font-medium text-canvas-700 mb-2">Concurrent Tasks</label>
+                <select id="afk-concurrent" class="input w-full">
+                  <option value="1">1 (Sequential)</option>
+                  <option value="2">2</option>
+                  <option value="3">3 (Max)</option>
+                </select>
+              </div>
+              <div class="bg-status-running/10 border border-status-running/20 rounded-lg p-3">
+                <p class="text-xs text-status-running">\u26A0\uFE0F You can close this tab - the agent will continue running. Check back later or watch the terminal output.</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="handleStartAFK()"
+                      class="btn px-5 py-2.5 bg-status-success text-canvas font-medium">\u{1F680} Start AFK Mode</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    \`;
+  }
+
+  return '';
+}
+
+function renderSidePanel() {
+  if (!state.sidePanel) return '';
+
+  const task = state.tasks.find(t => t.id === state.sidePanel);
+  if (!task) return '';
+
+  const isRunning = state.running.includes(task.id);
+  const output = state.taskOutput[task.id] || [];
+  const startTime = state.taskStartTime[task.id];
+  const lastExec = task.executionHistory?.[task.executionHistory.length - 1];
+
+  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}">
+                <span class="w-1.5 h-1.5 rounded-full bg-current \${isRunning ? 'animate-pulse' : ''}"></span>
+                \${task.status.replace('_', ' ')}
+              </span>
+            </div>
+          </div>
+          <div class="flex items-center gap-1">
+            <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">
+              \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">
+              \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 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">
+        <div class="side-panel-tab \${state.sidePanelTab === 'logs' ? 'active' : ''}" onclick="state.sidePanelTab = 'logs'; render();">
+          \u{1F4CB} Logs
+        </div>
+        <div class="side-panel-tab \${state.sidePanelTab === 'details' ? 'active' : ''}" onclick="state.sidePanelTab = 'details'; render();">
+          \u{1F4C4} Details
+        </div>
+      </div>
+
+      <!-- Tab Content -->
+      <div class="side-panel-body">
+        \${state.sidePanelTab === 'logs' ? \`
+          <div class="log-container" id="side-panel-log">
+            \${output.length > 0
+              ? output.map((l, i) => {
+                  const text = l.text || l;
+                  return \`<div class="log-line">\${highlightLog(text)}</div>\`;
+                }).join('')
+              : \`<div class="text-canvas-400 text-sm">\${isRunning ? 'Waiting for output...' : 'No logs available. Run the task to see output.'}</div>\`
+            }
+          </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>
+              <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>
+              \${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>
+                    \`).join('')}
+                  </div>
+                </div>
+              \` : ''}
+            </div>
+          </div>
+        \`}
+      </div>
+    </div>
+  \`;
+}
+
+function renderAFKBar() {
+  if (!state.afk.running) return '';
+  const progress = (state.afk.currentIteration / state.afk.maxIterations) * 100;
+  return \`
+    <div class="bg-gradient-to-r from-status-success/10 to-status-success/5 border-b border-status-success/20 px-6 py-3">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-5">
+          <div class="flex items-center gap-2">
+            <span class="text-xl animate-pulse">\u{1F504}</span>
+            <span class="text-sm font-display font-semibold text-status-success">AFK Mode Active</span>
+          </div>
+          <div class="h-4 w-px bg-status-success/20"></div>
+          <div class="flex items-center gap-4">
+            <div class="stat-pill border-status-success/20">
+              <span class="text-xs text-canvas-500">Iteration</span>
+              <span class="text-sm font-mono text-status-success">\${state.afk.currentIteration}/\${state.afk.maxIterations}</span>
+            </div>
+            <div class="w-32 h-1.5 bg-canvas-200 rounded-full overflow-hidden">
+              <div class="h-full bg-gradient-to-r from-status-success to-status-success/70 rounded-full transition-all" style="width: \${progress}%"></div>
+            </div>
+          </div>
+          <div class="h-4 w-px bg-status-success/20"></div>
+          <div class="stat-pill border-status-success/20">
+            <span class="text-xs text-canvas-500">Completed</span>
+            <span class="text-sm font-mono text-status-success">\${state.afk.tasksCompleted}</span>
+          </div>
+        </div>
+        <button onclick="stopAFK()"
+                class="btn text-sm px-4 py-1.5 bg-status-failed/15 hover:bg-status-failed/25 text-status-failed border border-status-failed/20">
+          \u23F9 Stop AFK
+        </button>
+      </div>
+    </div>
+  \`;
+}
+
+function renderStats() {
+  const counts = {
+    draft: state.tasks.filter(t => t.status === 'draft').length,
+    ready: state.tasks.filter(t => t.status === 'ready').length,
+    in_progress: state.tasks.filter(t => t.status === 'in_progress').length,
+    completed: state.tasks.filter(t => t.status === 'completed').length,
+    failed: state.tasks.filter(t => t.status === 'failed').length,
+  };
+  const total = state.tasks.length;
+
+  return \`
+    <div class="flex items-center gap-3">
+      <div class="stat-pill">
+        <span class="text-xs text-canvas-500">Total</span>
+        <span class="text-sm font-semibold text-canvas-700">\${total}</span>
+      </div>
+      \${counts.in_progress > 0 ? \`
+        <div class="stat-pill border-status-running/20">
+          <span class="stat-dot bg-status-running animate-pulse"></span>
+          <span class="text-xs text-status-running font-medium">\${counts.in_progress} running</span>
+        </div>
+      \` : ''}
+      \${counts.completed > 0 ? \`
+        <div class="stat-pill border-status-success/20">
+          <span class="stat-dot bg-status-success"></span>
+          <span class="text-xs text-status-success">\${counts.completed} done</span>
+        </div>
+      \` : ''}
+    </div>
+  \`;
+}
+
+// Event handlers
+async function handleTaskSubmit(e, isEdit) {
+  e.preventDefault();
+  const form = e.target;
+  const data = new FormData(form);
+  const action = e.submitter?.value || 'ready';
+
+  const task = {
+    title: data.get('title'),
+    description: data.get('description'),
+    category: data.get('category'),
+    priority: data.get('priority'),
+    steps: data.get('steps').split('\\n').filter(s => s.trim()),
+    status: action === 'draft' ? 'draft' : 'ready'
+  };
+
+  if (isEdit && state.editingTask) {
+    await updateTask(state.editingTask.id, task);
+  } else {
+    await createTask(task);
+  }
+
+  state.showModal = null;
+  state.editingTask = null;
+  render();
+}
+
+async function handleAIGenerate() {
+  const prompt = document.getElementById('ai-prompt').value;
+  if (!prompt.trim()) return;
+
+  state.aiPrompt = prompt;
+  try {
+    const task = await generateTask(prompt);
+    state.editingTask = task;
+    state.showModal = 'edit';
+    state.aiPrompt = '';
+  } catch (e) {
+    alert('Failed to generate task: ' + e.message);
+  }
+  render();
+}
+
+function applyTemplate(templateId) {
+  const template = state.templates.find(t => t.id === templateId);
+  if (!template) return;
+
+  state.editingTask = {
+    title: template.titleTemplate,
+    description: template.descriptionTemplate,
+    category: template.category,
+    priority: template.priority,
+    steps: template.stepsTemplate,
+    status: 'draft'
+  };
+  state.showModal = 'edit';
+  render();
+}
+
+function handleStartAFK() {
+  const iterations = parseInt(document.getElementById('afk-iterations').value) || 10;
+  const concurrent = parseInt(document.getElementById('afk-concurrent').value) || 1;
+  startAFK(iterations, concurrent);
+  state.showModal = null;
+  render();
+}
+
+// Filter tasks based on search query
+function filterTasks(tasks) {
+  if (!state.searchQuery) return tasks;
+  const query = state.searchQuery.toLowerCase();
+  return tasks.filter(t =>
+    t.title.toLowerCase().includes(query) ||
+    t.description.toLowerCase().includes(query) ||
+    t.category.toLowerCase().includes(query)
+  );
+}
+
+// Utility
+function escapeHtml(str) {
+  if (!str) return '';
+  return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+// Main render
+function render() {
+  const app = document.getElementById('app');
+  const hasSidePanel = state.sidePanel !== null;
+
+  app.innerHTML = \`
+    <div class="min-h-screen flex flex-col bg-canvas-50">
+      <!-- Header -->
+      <header class="sticky top-0 z-40 bg-white border-b border-canvas-200">
+        <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>
+          </div>
+          <div class="flex items-center gap-2">
+            <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>
+          </div>
+        </div>
+      </header>
+
+      \${renderAFKBar()}
+
+      <!-- Main Content Area - Flex container for board + sidebar -->
+      <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() : ''}
+      </div>
+
+      \${renderModal()}
+    </div>
+  \`;
+
+  // Auto-scroll side panel logs
+  if (hasSidePanel && state.sidePanelTab === 'logs' && state.autoScroll) {
+    const logEl = document.getElementById('side-panel-log');
+    if (logEl) logEl.scrollTop = logEl.scrollHeight;
+  }
+
+  // Update running task elapsed times every second
+  if (state.running.length > 0 && !window.elapsedInterval) {
+    window.elapsedInterval = setInterval(() => {
+      if (state.running.length > 0) render();
+      else {
+        clearInterval(window.elapsedInterval);
+        window.elapsedInterval = null;
+      }
+    }, 1000);
+  }
+}
+
+// Expose to window for inline handlers
+window.state = state;
+window.render = render;
+window.createTask = createTask;
+window.updateTask = updateTask;
+window.deleteTask = deleteTask;
+window.runTask = runTask;
+window.cancelTask = cancelTask;
+window.retryTask = retryTask;
+window.generateTask = generateTask;
+window.startAFK = startAFK;
+window.stopAFK = stopAFK;
+window.handleDragStart = handleDragStart;
+window.handleDragEnd = handleDragEnd;
+window.handleDragOver = handleDragOver;
+window.handleDragLeave = handleDragLeave;
+window.handleDrop = handleDrop;
+window.handleTaskSubmit = handleTaskSubmit;
+window.handleAIGenerate = handleAIGenerate;
+window.applyTemplate = applyTemplate;
+window.handleStartAFK = handleStartAFK;
+window.showToast = showToast;
+window.scrollLogToBottom = scrollLogToBottom;
+window.copyLogToClipboard = copyLogToClipboard;
+window.clearLog = clearLog;
+window.closeLogTab = closeLogTab;
+window.toggleLogFullscreen = toggleLogFullscreen;
+window.escapeHtml = escapeHtml;
+window.openSidePanel = openSidePanel;
+window.closeSidePanel = closeSidePanel;
+window.showTaskMenu = showTaskMenu;
+window.filterTasks = filterTasks;
+window.scrollSidePanelLog = scrollSidePanelLog;
+
+// Keyboard shortcuts
+document.addEventListener('keydown', (e) => {
+  // Ignore if typing in input
+  if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+
+  // ? - Show help
+  if (e.key === '?') {
+    showToast('Shortcuts: N=New, T=Templates, F=AFK, Esc=Close modal', 'info');
+  }
+  // n - New task
+  if (e.key === 'n' && !e.metaKey && !e.ctrlKey) {
+    state.showModal = 'new';
+    render();
+  }
+  // t - Templates
+  if (e.key === 't' && !e.metaKey && !e.ctrlKey) {
+    state.showModal = 'templates';
+    render();
+  }
+  // f - AFK mode
+  if (e.key === 'f' && !e.metaKey && !e.ctrlKey && !state.afk.running) {
+    state.showModal = 'afk';
+    render();
+  }
+  // Escape - Close modal or side panel
+  if (e.key === 'Escape') {
+    if (state.showModal) {
+      state.showModal = null;
+      state.editingTask = null;
+      render();
+    } else if (state.sidePanel) {
+      closeSidePanel();
+    }
+  }
+  // / - Focus log search
+  if (e.key === '/' && !state.showModal) {
+    e.preventDefault();
+    const searchInput = document.querySelector('#log-content ~ input, input[placeholder="Search logs..."]');
+    if (searchInput) searchInput.focus();
+  }
+});
+
+// Initial render
+render();
+`;
+}
+
+// src/server/utils/port.ts
+import { createServer as createServer2 } from "net";
+function isPortAvailable(port) {
+  return new Promise((resolve) => {
+    const server = createServer2();
+    server.once("error", () => {
+      resolve(false);
+    });
+    server.once("listening", () => {
+      server.close();
+      resolve(true);
+    });
+    server.listen(port, "127.0.0.1");
+  });
+}
+async function findAvailablePort(startPort, maxAttempts = 10) {
+  for (let i = 0; i < maxAttempts; i++) {
+    const port = startPort + i;
+    if (await isPortAvailable(port)) {
+      return port;
+    }
+  }
+  throw new Error(`No available port found in range ${startPort}-${startPort + maxAttempts - 1}`);
+}
+
+// src/bin/cli.ts
+var VERSION = "0.1.0";
+var banner = `
+${chalk.cyan("\u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557")}
+${chalk.cyan("\u2551")}  ${chalk.bold.white("Claude Kanban")} ${chalk.gray(`v${VERSION}`)}              ${chalk.cyan("\u2551")}
+${chalk.cyan("\u2551")}  ${chalk.gray("Visual AI-powered development")}       ${chalk.cyan("\u2551")}
+${chalk.cyan("\u255A\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255D")}
+`;
+async function main() {
+  const program = new Command();
+  program.name("claude-kanban").description("Visual Kanban board for AI-powered development with Claude").version(VERSION).option("-p, --port <number>", "Port to run server on", "4242").option("-n, --no-open", "Do not auto-open browser").option("--init", "Re-initialize project files").option("--reset", "Reset all tasks (keeps config)").action(async (options) => {
+    console.log(banner);
+    const cwd = process.cwd();
+    const initialized = await isProjectInitialized(cwd);
+    if (!initialized || options.init) {
+      console.log(chalk.yellow("Initializing project..."));
+      try {
+        await initializeProject(cwd, options.reset);
+        console.log(chalk.green("\u2713 Project initialized successfully"));
+      } catch (error) {
+        console.error(chalk.red("Failed to initialize project:"), error);
+        process.exit(1);
+      }
+    } else {
+      console.log(chalk.gray("Found existing configuration"));
+    }
+    let port = parseInt(options.port, 10);
+    try {
+      port = await findAvailablePort(port);
+    } catch {
+      console.error(chalk.red(`Port ${port} is in use and no alternatives found`));
+      process.exit(1);
+    }
+    console.log(chalk.gray(`Starting server on port ${port}...`));
+    try {
+      const server = await createServer(cwd, port);
+      const url = `http://localhost:${port}`;
+      console.log(chalk.green(`
+\u2713 Server running at ${chalk.bold(url)}
+`));
+      if (options.open !== false) {
+        console.log(chalk.gray("Opening browser..."));
+        await open(url);
+      }
+      let isShuttingDown = false;
+      const shutdown = () => {
+        if (isShuttingDown) {
+          console.log(chalk.red("\nForce exiting..."));
+          process.exit(1);
+        }
+        isShuttingDown = true;
+        console.log(chalk.yellow("\nShutting down..."));
+        if (server.cleanup) {
+          server.cleanup();
+        }
+        const forceExitTimeout = setTimeout(() => {
+          console.log(chalk.red("Forcing exit after timeout"));
+          process.exit(0);
+        }, 3e3);
+        server.close(() => {
+          clearTimeout(forceExitTimeout);
+          console.log(chalk.green("\u2713 Server stopped"));
+          process.exit(0);
+        });
+      };
+      process.on("SIGINT", shutdown);
+      process.on("SIGTERM", shutdown);
+      console.log(chalk.gray("Press Ctrl+C to stop\n"));
+    } catch (error) {
+      console.error(chalk.red("Failed to start server:"), error);
+      process.exit(1);
+    }
+  });
+  await program.parseAsync();
+}
+main().catch((error) => {
+  console.error(chalk.red("Fatal error:"), error);
+  process.exit(1);
+});
+//# sourceMappingURL=cli.js.map