claude-kanban 0.5.0 → 0.5.1

package/dist/bin/cli.js

@@ -533,6 +533,7 @@ var LOGS_DIR = "logs";
 var TaskExecutor = class extends EventEmitter {
   projectPath;
   runningTask = null;
+  planningSession = null;
   afkMode = false;
   afkIteration = 0;
   afkMaxIterations = 0;
@@ -658,6 +659,30 @@ ${summary}
     }
     return void 0;
   }
+  /**
+   * Check if a planning session is running
+   */
+  isPlanning() {
+    return this.planningSession !== null;
+  }
+  /**
+   * Check if executor is busy (task or planning running)
+   */
+  isBusy() {
+    return this.runningTask !== null || this.planningSession !== null;
+  }
+  /**
+   * Get planning session output
+   */
+  getPlanningOutput() {
+    return this.planningSession?.output;
+  }
+  /**
+   * Get planning session goal
+   */
+  getPlanningGoal() {
+    return this.planningSession?.goal;
+  }
   /**
    * Build the prompt for a task - simplified Ralph-style
    */
@@ -709,12 +734,225 @@ ${verifyCommands.length > 0 ? "6" : "5"}. Commit your changes with a descriptive
 
 Focus only on this task. When done, output: <promise>COMPLETE</promise>`;
   }
+  /**
+   * Build the prompt for a planning session
+   */
+  buildPlanningPrompt(goal) {
+    const kanbanDir = join4(this.projectPath, KANBAN_DIR4);
+    const prdPath = join4(kanbanDir, "prd.json");
+    return `You are an AI coding planner. Your job is to analyze a codebase and break down a user's goal into concrete, actionable tasks.
+
+## GOAL
+${goal}
+
+## INSTRUCTIONS
+
+1. Explore the codebase to understand:
+   - Project structure and architecture
+   - Existing patterns and conventions
+   - Related existing code that you'll build upon
+   - What technologies and frameworks are being used
+
+2. Break down the goal into 3-8 specific, actionable tasks that can each be completed in a single coding session.
+
+3. For each task, determine:
+   - Clear, action-oriented title (start with a verb: Add, Create, Implement, Fix, etc.)
+   - Detailed description with implementation guidance
+   - Category: functional, ui, bug, enhancement, testing, or refactor
+   - Priority: low, medium, high, or critical
+   - 3-7 verification steps to confirm the task is complete
+
+4. Read the current PRD file at ${prdPath}, then update it:
+   - Add your new tasks to the "tasks" array
+   - Each task must have this structure:
+     {
+       "id": "task_" + 8 random alphanumeric characters,
+       "title": "...",
+       "description": "...",
+       "category": "functional|ui|bug|enhancement|testing|refactor",
+       "priority": "low|medium|high|critical",
+       "status": "draft",
+       "steps": ["Step 1", "Step 2", ...],
+       "passes": false,
+       "createdAt": ISO timestamp,
+       "updatedAt": ISO timestamp,
+       "executionHistory": []
+     }
+
+5. Commit your changes with message: "Plan: ${goal}"
+
+IMPORTANT:
+- Tasks should be ordered logically (dependencies first)
+- Each task should be completable independently
+- Be specific about implementation details
+- Consider edge cases and error handling
+
+When done, output: <promise>PLANNING_COMPLETE</promise>`;
+  }
+  /**
+   * Run a planning session to break down a goal into tasks
+   */
+  async runPlanningSession(goal) {
+    if (this.isBusy()) {
+      throw new Error("Another operation is in progress. Wait for it to complete or cancel it first.");
+    }
+    const config = getConfig(this.projectPath);
+    const startedAt = /* @__PURE__ */ new Date();
+    const prompt = this.buildPlanningPrompt(goal);
+    const kanbanDir = join4(this.projectPath, KANBAN_DIR4);
+    const promptFile = join4(kanbanDir, "prompt-planning.txt");
+    writeFileSync4(promptFile, prompt);
+    const args = [];
+    if (config.agent.model) {
+      args.push("--model", config.agent.model);
+    }
+    args.push("--permission-mode", config.agent.permissionMode);
+    args.push("-p");
+    args.push("--verbose");
+    args.push("--output-format", "stream-json");
+    args.push(`@${promptFile}`);
+    const commandDisplay = `${config.agent.command} ${args.join(" ")}`;
+    const fullCommand = `${config.agent.command} ${args.join(" ")}`;
+    console.log("[executor] Planning command:", fullCommand);
+    console.log("[executor] CWD:", this.projectPath);
+    const childProcess = spawn("bash", ["-c", fullCommand], {
+      cwd: this.projectPath,
+      env: {
+        ...process.env,
+        TERM: "xterm-256color",
+        FORCE_COLOR: "0",
+        NO_COLOR: "1"
+      },
+      stdio: ["ignore", "pipe", "pipe"]
+    });
+    this.planningSession = {
+      goal,
+      process: childProcess,
+      startedAt,
+      output: []
+    };
+    const logOutput = (line) => {
+      this.planningSession?.output.push(line);
+      this.emit("planning:output", { line, lineType: "stdout" });
+    };
+    this.emit("planning:started", { goal, timestamp: startedAt.toISOString() });
+    logOutput(`[claude-kanban] Starting planning session
+`);
+    logOutput(`[claude-kanban] Goal: ${goal}
+`);
+    logOutput(`[claude-kanban] Command: ${commandDisplay}
+`);
+    let stdoutBuffer = "";
+    childProcess.stdout?.on("data", (data) => {
+      stdoutBuffer += data.toString();
+      const lines = stdoutBuffer.split("\n");
+      stdoutBuffer = lines.pop() || "";
+      for (const line of lines) {
+        if (!line.trim()) continue;
+        try {
+          const json = JSON.parse(line);
+          let text = "";
+          if (json.type === "assistant" && json.message?.content) {
+            for (const block of json.message.content) {
+              if (block.type === "text") {
+                text += block.text;
+              } else if (block.type === "tool_use") {
+                text += this.formatToolUse(block.name, block.input);
+              }
+            }
+          } else if (json.type === "content_block_delta" && json.delta?.text) {
+            text = json.delta.text;
+          } else if (json.type === "result" && json.result) {
+            text = `
+[Result: ${json.result}]
+`;
+          }
+          if (text) {
+            logOutput(text);
+          }
+        } catch {
+          const cleanText = line.replace(/\x1B\[[0-9;]*[A-Za-z]/g, "");
+          if (cleanText.trim()) {
+            logOutput(cleanText + "\n");
+          }
+        }
+      }
+    });
+    childProcess.stderr?.on("data", (data) => {
+      const text = data.toString();
+      logOutput(`[stderr] ${text}`);
+    });
+    childProcess.on("error", (error) => {
+      console.log("[executor] Planning spawn error:", error.message);
+      this.emit("planning:output", { line: `[claude-kanban] Error: ${error.message}
+`, lineType: "stderr" });
+      try {
+        unlinkSync(promptFile);
+      } catch {
+      }
+      this.emit("planning:failed", { error: error.message });
+      this.planningSession = null;
+    });
+    childProcess.on("close", (code, signal) => {
+      console.log("[executor] Planning process closed with code:", code, "signal:", signal);
+      try {
+        unlinkSync(promptFile);
+      } catch {
+      }
+      logOutput(`[claude-kanban] Planning process exited with code ${code}
+`);
+      this.handlePlanningComplete(code);
+    });
+    const timeoutMs = 15 * 60 * 1e3;
+    setTimeout(() => {
+      if (this.planningSession) {
+        this.cancelPlanning("Planning timeout exceeded");
+      }
+    }, timeoutMs);
+  }
+  /**
+   * Handle planning session completion
+   */
+  handlePlanningComplete(exitCode) {
+    if (!this.planningSession) return;
+    const output = this.planningSession.output.join("");
+    const isComplete = output.includes("<promise>PLANNING_COMPLETE</promise>");
+    if (isComplete || exitCode === 0) {
+      this.emit("planning:completed", { success: true });
+    } else {
+      const error = `Planning process exited with code ${exitCode}`;
+      this.emit("planning:failed", { error });
+    }
+    this.planningSession = null;
+  }
+  /**
+   * Cancel the planning session
+   */
+  cancelPlanning(reason = "Cancelled by user") {
+    if (!this.planningSession) return false;
+    const { process: childProcess } = this.planningSession;
+    try {
+      childProcess.kill("SIGTERM");
+      setTimeout(() => {
+        try {
+          if (!childProcess.killed) {
+            childProcess.kill("SIGKILL");
+          }
+        } catch {
+        }
+      }, 2e3);
+    } catch {
+    }
+    this.emit("planning:cancelled", { reason });
+    this.planningSession = null;
+    return true;
+  }
   /**
    * Run a task
    */
   async runTask(taskId) {
-    if (this.isRunning()) {
-      throw new Error("A task is already running. Wait for it to complete or cancel it first.");
+    if (this.isBusy()) {
+      throw new Error("Another operation is in progress. Wait for it to complete or cancel it first.");
     }
     const config = getConfig(this.projectPath);
     const task = getTaskById(this.projectPath, taskId);
@@ -949,8 +1187,8 @@ Focus only on this task. When done, output: <promise>COMPLETE</promise>`;
     if (this.afkMode) {
       throw new Error("AFK mode already running");
     }
-    if (this.isRunning()) {
-      throw new Error("Cannot start AFK mode while a task is running");
+    if (this.isBusy()) {
+      throw new Error("Cannot start AFK mode while another operation is in progress");
     }
     this.afkMode = true;
     this.afkIteration = 0;
@@ -968,7 +1206,7 @@ Focus only on this task. When done, output: <promise>COMPLETE</promise>`;
       this.stopAFKMode();
       return;
     }
-    if (this.isRunning()) return;
+    if (this.isBusy()) return;
     const nextTask = getNextReadyTask(this.projectPath);
     if (!nextTask) {
       this.stopAFKMode();
@@ -1010,7 +1248,7 @@ Focus only on this task. When done, output: <promise>COMPLETE</promise>`;
     };
   }
   /**
-   * Cancel running task and stop AFK mode
+   * Cancel running task/planning and stop AFK mode
    */
   cancelAll() {
     if (this.runningTask) {
@@ -1020,6 +1258,13 @@ Focus only on this task. When done, output: <promise>COMPLETE</promise>`;
       }
       this.runningTask = null;
     }
+    if (this.planningSession) {
+      try {
+        this.planningSession.process.kill("SIGKILL");
+      } catch {
+      }
+      this.planningSession = null;
+    }
     this.stopAFKMode();
   }
 };
@@ -1444,6 +1689,11 @@ async function createServer(projectPath, port) {
   executor.on("task:failed", (data) => io.emit("task:failed", data));
   executor.on("task:cancelled", (data) => io.emit("task:cancelled", data));
   executor.on("afk:status", (data) => io.emit("afk:status", data));
+  executor.on("planning:started", (data) => io.emit("planning:started", data));
+  executor.on("planning:output", (data) => io.emit("planning:output", data));
+  executor.on("planning:completed", (data) => io.emit("planning:completed", data));
+  executor.on("planning:failed", (data) => io.emit("planning:failed", data));
+  executor.on("planning:cancelled", (data) => io.emit("planning:cancelled", data));
   app.get("/api/tasks", (_req, res) => {
     try {
       const tasks = getAllTasks(projectPath);
@@ -1658,6 +1908,40 @@ async function createServer(projectPath, port) {
       res.status(500).json({ error: String(error) });
     }
   });
+  app.post("/api/plan", async (req, res) => {
+    try {
+      const { goal } = req.body;
+      if (!goal) {
+        res.status(400).json({ error: "Goal is required" });
+        return;
+      }
+      await executor.runPlanningSession(goal);
+      res.json({ success: true });
+    } catch (error) {
+      res.status(400).json({ error: String(error) });
+    }
+  });
+  app.post("/api/plan/cancel", (_req, res) => {
+    try {
+      const cancelled = executor.cancelPlanning();
+      if (!cancelled) {
+        res.status(404).json({ error: "No planning session running" });
+        return;
+      }
+      res.json({ success: true });
+    } catch (error) {
+      res.status(500).json({ error: String(error) });
+    }
+  });
+  app.get("/api/plan/status", (_req, res) => {
+    try {
+      const planning = executor.isPlanning();
+      const goal = executor.getPlanningGoal();
+      res.json({ planning, goal: goal || null });
+    } catch (error) {
+      res.status(500).json({ error: String(error) });
+    }
+  });
   app.get("/api/running", (_req, res) => {
     try {
       const taskId = executor.getRunningTaskId();
@@ -1671,7 +1955,8 @@ async function createServer(projectPath, port) {
       const counts = getTaskCounts(projectPath);
       const running = executor.isRunning() ? 1 : 0;
       const afk = executor.getAFKStatus();
-      res.json({ counts, running, afk });
+      const planning = executor.isPlanning();
+      res.json({ counts, running, afk, planning });
     } catch (error) {
       res.status(500).json({ error: String(error) });
     }
@@ -1698,8 +1983,11 @@ async function createServer(projectPath, port) {
       tasks: getAllTasks(projectPath),
       running: runningIds,
       afk: executor.getAFKStatus(),
-      taskLogs
+      taskLogs,
       // Include logs for running task
+      planning: executor.isPlanning(),
+      planningGoal: executor.getPlanningGoal() || null,
+      planningOutput: executor.getPlanningOutput() || []
     });
     socket.on("get-logs", (taskId) => {
       const logs = executor.getTaskLog(taskId);
@@ -1929,7 +2217,7 @@ function getClientHTML() {
       transition: all 0.2s var(--ease-out-expo);
     }
     .side-panel-header {
-      padding: 16px 20px;
+      padding: 12px 16px;
       border-bottom: 1px solid #e5e5e5;
       flex-shrink: 0;
     }
@@ -1947,7 +2235,8 @@ function getClientHTML() {
       flex-shrink: 0;
     }
     .side-panel-tab {
-      padding: 12px 16px;
+      padding: 10px 14px;
+      font-size: 13px;
       color: #737373;
       cursor: pointer;
       border-bottom: 2px solid transparent;
@@ -2240,6 +2529,10 @@ let state = {
   logFullscreen: false,
   closedTabs: new Set(),
   sidePanel: null, // task id for side panel
+  // Planning state
+  planning: false,
+  planningGoal: '',
+  planningOutput: [],
   sidePanelTab: 'logs', // 'logs' or 'details'
   darkMode: localStorage.getItem('darkMode') === 'true', // Add dark mode state
 };
@@ -2334,6 +2627,14 @@ socket.on('init', (data) => {
   state.running = data.running;
   state.afk = data.afk;
 
+  // Planning state
+  state.planning = data.planning || false;
+  state.planningGoal = data.planningGoal || '';
+  state.planningOutput = (data.planningOutput || []).map(text => ({
+    text: text,
+    timestamp: new Date().toISOString()
+  }));
+
   // Load persisted logs for running tasks
   if (data.taskLogs) {
     for (const [taskId, logs] of Object.entries(data.taskLogs)) {
@@ -2438,6 +2739,48 @@ socket.on('afk:status', (status) => {
   render();
 });
 
+// Planning socket handlers
+socket.on('planning:started', ({ goal, timestamp }) => {
+  state.planning = true;
+  state.planningGoal = goal;
+  state.planningOutput = [];
+  state.showModal = 'planning';
+  showToast('Planning started: ' + goal.substring(0, 50) + (goal.length > 50 ? '...' : ''), 'info');
+  render();
+});
+
+socket.on('planning:output', ({ line }) => {
+  state.planningOutput.push({
+    text: line,
+    timestamp: new Date().toISOString()
+  });
+  render();
+});
+
+socket.on('planning:completed', () => {
+  state.planning = false;
+  showToast('Planning complete! New tasks added to board.', 'success');
+  // Refresh tasks from server
+  fetch('/api/tasks').then(r => r.json()).then(data => {
+    state.tasks = data.tasks;
+    state.showModal = null;
+    render();
+  });
+});
+
+socket.on('planning:failed', ({ error }) => {
+  state.planning = false;
+  showToast('Planning failed: ' + error, 'error');
+  render();
+});
+
+socket.on('planning:cancelled', () => {
+  state.planning = false;
+  state.showModal = null;
+  showToast('Planning cancelled', 'warning');
+  render();
+});
+
 // Load templates
 fetch('/api/templates').then(r => r.json()).then(data => {
   state.templates = data.templates;
@@ -2517,6 +2860,18 @@ async function stopAFK() {
   await fetch('/api/afk/stop', { method: 'POST' });
 }
 
+async function startPlanning(goal) {
+  await fetch('/api/plan', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ goal })
+  });
+}
+
+async function cancelPlanning() {
+  await fetch('/api/plan/cancel', { method: 'POST' });
+}
+
 // Enhanced Drag and drop
 let draggedTask = null;
 let draggedElement = null;
@@ -2661,6 +3016,11 @@ function openSidePanel(taskId) {
   state.activeTab = taskId;
   state.closedTabs.delete(taskId);
 
+  // Auto-switch to logs tab if task is running
+  if (state.running.includes(taskId)) {
+    state.sidePanelTab = 'logs';
+  }
+
   // Request logs from server if not already loaded
   if (!state.taskOutput[taskId] || state.taskOutput[taskId].length === 0) {
     socket.emit('get-logs', taskId);
@@ -2965,6 +3325,71 @@ function renderModal() {
     \`;
   }
 
+  // Planning input modal
+  if (state.showModal === 'plan-input') {
+    return \`
+      <div class="modal-backdrop fixed inset-0 flex items-center justify-center z-50" onclick="if(event.target === event.currentTarget) { state.showModal = null; render(); }">
+        <div class="modal-content card rounded-xl w-full max-w-lg mx-4">
+          <div class="px-6 py-4 border-b border-white/5 flex justify-between items-center">
+            <h3 class="font-display font-semibold text-canvas-800 text-lg">\u{1F3AF} AI Task Planner</h3>
+            <button onclick="state.showModal = null; render();" class="btn btn-ghost p-1.5 text-canvas-500 hover:text-canvas-700">\u2715</button>
+          </div>
+          <div class="p-6">
+            <p class="text-sm text-canvas-600 mb-4">Describe your goal and the AI will analyze the codebase and break it down into concrete tasks.</p>
+            <div class="space-y-4">
+              <div>
+                <label class="block text-sm font-medium text-canvas-700 mb-2">What do you want to build?</label>
+                <textarea id="planning-goal" rows="4" placeholder="e.g., Add user authentication with JWT tokens, login/logout functionality, and protected routes..."
+                          class="input w-full resize-none"></textarea>
+              </div>
+              <div class="bg-blue-50 border border-blue-200 rounded-lg p-3">
+                <p class="text-xs text-blue-700">\u{1F4A1} Be specific about what you want. The AI will explore your codebase and create 3-8 tasks with implementation guidance.</p>
+              </div>
+            </div>
+            <div class="flex justify-end gap-3 mt-6">
+              <button onclick="state.showModal = null; render();"
+                      class="btn btn-ghost px-4 py-2.5">Cancel</button>
+              <button onclick="handleStartPlanning()"
+                      class="btn px-5 py-2.5 bg-blue-500 hover:bg-blue-600 text-white font-medium">\u{1F680} Start Planning</button>
+            </div>
+          </div>
+        </div>
+      </div>
+    \`;
+  }
+
+  // Planning progress modal
+  if (state.showModal === 'planning') {
+    const outputHtml = state.planningOutput.length > 0
+      ? state.planningOutput.map(l => \`<div class="log-line">\${highlightLog(l.text || l)}</div>\`).join('')
+      : '<div class="text-canvas-400 text-sm">Analyzing codebase and generating tasks...</div>';
+
+    return \`
+      <div class="modal-backdrop fixed inset-0 flex items-center justify-center z-50">
+        <div class="modal-content card rounded-xl w-full max-w-3xl mx-4 max-h-[80vh] flex flex-col">
+          <div class="px-6 py-4 border-b border-white/5 flex justify-between items-center flex-shrink-0">
+            <div class="flex items-center gap-3">
+              <span class="text-xl animate-pulse">\u{1F3AF}</span>
+              <div>
+                <h3 class="font-display font-semibold text-canvas-800 text-lg">Planning in Progress</h3>
+                <p class="text-xs text-canvas-500 truncate max-w-[400px]">\${escapeHtml(state.planningGoal)}</p>
+              </div>
+            </div>
+            <button onclick="if(confirm('Cancel planning?')) cancelPlanning();"
+                    class="btn btn-ghost px-3 py-1.5 text-sm text-status-failed hover:bg-status-failed/10">
+              \u23F9 Cancel
+            </button>
+          </div>
+          <div class="flex-1 overflow-hidden p-4">
+            <div class="log-container h-full overflow-y-auto" id="planning-log">
+              \${outputHtml}
+            </div>
+          </div>
+        </div>
+      </div>
+    \`;
+  }
+
   return '';
 }
 
@@ -2978,100 +3403,55 @@ function renderSidePanel() {
   const output = state.taskOutput[task.id] || [];
   const startTime = state.taskStartTime[task.id];
   const lastExec = task.executionHistory?.[task.executionHistory.length - 1];
+  const elapsed = isRunning && startTime ? formatElapsed(startTime) : null;
 
   return \`
     <div class="side-panel">
-      <!-- Header -->
-      <div class="side-panel-header">
-        <div class="flex justify-between items-start">
-          <div class="flex-1 pr-4">
-            <h2 class="font-semibold text-canvas-900 text-lg leading-tight">\${escapeHtml(task.title)}</h2>
-            <div class="flex items-center gap-2 mt-2">
-              <span class="status-badge status-badge-\${task.status}">
+      <!-- Compact Header -->
+      <div class="side-panel-header" style="padding: 12px 16px;">
+        <div class="flex justify-between items-start gap-2">
+          <div class="flex-1 min-w-0">
+            <h2 class="font-semibold text-canvas-900 text-base leading-tight truncate" title="\${escapeHtml(task.title)}">\${escapeHtml(task.title)}</h2>
+            <div class="flex items-center gap-2 mt-1.5 flex-wrap">
+              <span class="status-badge status-badge-\${task.status}" style="font-size: 11px; padding: 2px 8px;">
                 <span class="w-1.5 h-1.5 rounded-full bg-current \${isRunning ? 'animate-pulse' : ''}"></span>
                 \${task.status.replace('_', ' ')}
               </span>
+              \${elapsed ? \`<span class="text-xs text-canvas-500">\u23F1 \${elapsed}</span>\` : ''}
+              <span class="text-xs text-canvas-400">\${task.priority} \xB7 \${task.category}</span>
             </div>
           </div>
-          <div class="flex items-center gap-1">
+          <div class="flex items-center gap-0.5 flex-shrink-0">
+            \${task.status === 'in_progress' ? \`
+              <button onclick="cancelTask('\${task.id}')" class="btn btn-ghost p-1.5 text-status-failed hover:bg-status-failed/10" title="Stop">
+                \u23F9
+              </button>
+            \` : task.status === 'ready' ? \`
+              <button onclick="runTask('\${task.id}')" class="btn btn-ghost p-1.5 text-status-success hover:bg-status-success/10" title="Run">
+                \u25B6
+              </button>
+            \` : task.status === 'draft' ? \`
+              <button onclick="updateTask('\${task.id}', { status: 'ready' })" class="btn btn-ghost p-1.5 text-blue-500 hover:bg-blue-50" title="Move to Ready">
+                \u2192
+              </button>
+            \` : task.status === 'failed' ? \`
+              <button onclick="retryTask('\${task.id}')" class="btn btn-ghost p-1.5 text-canvas-500 hover:bg-canvas-100" title="Retry">
+                \u21BB
+              </button>
+            \` : ''}
             <button onclick="state.editingTask = state.tasks.find(t => t.id === '\${task.id}'); state.showModal = 'edit'; render();"
-                    class="btn btn-ghost p-2 text-canvas-500 hover:text-canvas-700" title="Edit">
+                    class="btn btn-ghost p-1.5 text-canvas-400 hover:text-canvas-600" title="Edit">
               \u270F\uFE0F
             </button>
-            <button onclick="if(confirm('Delete this task?')) { deleteTask('\${task.id}'); closeSidePanel(); }"
-                    class="btn btn-ghost p-2 text-canvas-500 hover:text-status-failed" title="Delete">
-              \u{1F5D1}\uFE0F
-            </button>
-            <button onclick="closeSidePanel()" class="btn btn-ghost p-2 text-canvas-500 hover:text-canvas-700" title="Close">
+            <button onclick="closeSidePanel()" class="btn btn-ghost p-1.5 text-canvas-400 hover:text-canvas-600" title="Close">
               \u2715
             </button>
           </div>
         </div>
       </div>
 
-      <!-- Description -->
-      <div class="px-5 py-4 border-b border-canvas-200 flex-shrink-0">
-        <p class="text-sm text-canvas-600 leading-relaxed">\${escapeHtml(task.description)}</p>
-        \${task.steps && task.steps.length > 0 ? \`
-          <div class="mt-3">
-            <div class="text-xs font-medium text-canvas-500 mb-2">Steps:</div>
-            <ul class="text-sm text-canvas-600 space-y-1">
-              \${task.steps.map(s => \`<li class="flex gap-2"><span class="text-canvas-400">\u2022</span>\${escapeHtml(s)}</li>\`).join('')}
-            </ul>
-          </div>
-        \` : ''}
-      </div>
-
-      <!-- Task Details Grid -->
-      <div class="details-grid">
-        <div class="details-item">
-          <span class="details-label">Priority</span>
-          <span class="details-value capitalize">\${task.priority}</span>
-        </div>
-        <div class="details-item">
-          <span class="details-label">Category</span>
-          <span class="details-value">\${categoryIcons[task.category] || ''} \${task.category}</span>
-        </div>
-        \${startTime || lastExec ? \`
-          <div class="details-item">
-            <span class="details-label">Started</span>
-            <span class="details-value">\${new Date(startTime || lastExec?.startedAt).toLocaleString()}</span>
-          </div>
-        \` : ''}
-        \${lastExec?.duration ? \`
-          <div class="details-item">
-            <span class="details-label">Duration</span>
-            <span class="details-value">\${Math.round(lastExec.duration / 1000)}s</span>
-          </div>
-        \` : ''}
-      </div>
-
-      <!-- Action Buttons -->
-      <div class="px-5 py-4 border-b border-canvas-200 flex flex-wrap gap-2 flex-shrink-0">
-        \${task.status === 'draft' ? \`
-          <button onclick="updateTask('\${task.id}', { status: 'ready' })" class="btn btn-primary px-4 py-2 text-sm">
-            \u2192 Move to Ready
-          </button>
-        \` : ''}
-        \${task.status === 'ready' ? \`
-          <button onclick="runTask('\${task.id}')" class="btn btn-primary px-4 py-2 text-sm">
-            \u25B6 Run Task
-          </button>
-        \` : ''}
-        \${task.status === 'in_progress' ? \`
-          <button onclick="cancelTask('\${task.id}')" class="btn btn-danger px-4 py-2 text-sm">
-            \u23F9 Stop Attempt
-          </button>
-        \` : ''}
-        \${task.status === 'failed' ? \`
-          <button onclick="retryTask('\${task.id}')" class="btn btn-primary px-4 py-2 text-sm">
-            \u21BB Retry
-          </button>
-        \` : ''}
-      </div>
-
-      <!-- Tabs -->
-      <div class="side-panel-tabs">
+      <!-- Tabs (moved up, right after header) -->
+      <div class="side-panel-tabs" style="padding: 0 12px;">
         <div class="side-panel-tab \${state.sidePanelTab === 'logs' ? 'active' : ''}" onclick="state.sidePanelTab = 'logs'; render();">
           \u{1F4CB} Logs
         </div>
@@ -3081,9 +3461,9 @@ function renderSidePanel() {
       </div>
 
       <!-- Tab Content -->
-      <div class="side-panel-body">
+      <div class="side-panel-body" style="flex: 1; overflow: hidden; display: flex; flex-direction: column;">
         \${state.sidePanelTab === 'logs' ? \`
-          <div class="log-container" id="side-panel-log">
+          <div class="log-container" id="side-panel-log" style="flex: 1; overflow-y: auto;">
             \${output.length > 0
               ? output.map((l, i) => {
                   const text = l.text || l;
@@ -3093,34 +3473,62 @@ function renderSidePanel() {
             }
           </div>
         \` : \`
-          <div class="p-5">
-            <div class="text-sm text-canvas-600">
-              <div class="mb-4">
-                <div class="text-xs font-medium text-canvas-500 mb-1">Created</div>
-                <div>\${new Date(task.createdAt).toLocaleString()}</div>
+          <div style="flex: 1; overflow-y: auto; padding: 16px;">
+            <!-- Description -->
+            <div class="mb-5">
+              <div class="text-xs font-semibold text-canvas-500 uppercase tracking-wide mb-2">Description</div>
+              <div class="text-sm text-canvas-700 leading-relaxed bg-canvas-50 rounded-lg p-3 border border-canvas-200">
+                \${escapeHtml(task.description || 'No description provided.')}
+              </div>
+            </div>
+
+            <!-- Steps -->
+            \${task.steps && task.steps.length > 0 ? \`
+              <div class="mb-5">
+                <div class="text-xs font-semibold text-canvas-500 uppercase tracking-wide mb-2">Steps (\${task.steps.length})</div>
+                <div class="bg-canvas-50 rounded-lg border border-canvas-200 divide-y divide-canvas-200">
+                  \${task.steps.map((step, i) => \`
+                    <div class="flex gap-3 p-3 text-sm">
+                      <span class="flex-shrink-0 w-5 h-5 rounded-full bg-canvas-200 text-canvas-500 flex items-center justify-center text-xs font-medium">\${i + 1}</span>
+                      <span class="text-canvas-700">\${escapeHtml(step)}</span>
+                    </div>
+                  \`).join('')}
+                </div>
+              </div>
+            \` : ''}
+
+            <!-- Metadata -->
+            <div class="mb-5 grid grid-cols-2 gap-3">
+              <div class="bg-canvas-50 rounded-lg p-3 border border-canvas-200">
+                <div class="text-xs text-canvas-500 mb-1">Created</div>
+                <div class="text-sm text-canvas-700">\${new Date(task.createdAt).toLocaleDateString()}</div>
               </div>
-              <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 class="bg-canvas-50 rounded-lg p-3 border border-canvas-200">
+                <div class="text-xs text-canvas-500 mb-1">Updated</div>
+                <div class="text-sm text-canvas-700">\${new Date(task.updatedAt).toLocaleDateString()}</div>
               </div>
-              \${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>
+
+            <!-- Execution History -->
+            \${task.executionHistory && task.executionHistory.length > 0 ? \`
+              <div>
+                <div class="text-xs font-semibold text-canvas-500 uppercase tracking-wide mb-2">Execution History</div>
+                <div class="space-y-2">
+                  \${task.executionHistory.slice(-5).reverse().map(exec => \`
+                    <div class="bg-canvas-50 rounded-lg p-3 border border-canvas-200">
+                      <div class="flex justify-between items-center">
+                        <span class="text-sm font-medium \${exec.status === 'completed' ? 'text-status-success' : 'text-status-failed'}">
+                          \${exec.status === 'completed' ? '\u2713' : '\u2717'} \${exec.status}
+                        </span>
+                        <span class="text-xs text-canvas-500">\${Math.round(exec.duration / 1000)}s</span>
                       </div>
-                    \`).join('')}
-                  </div>
+                      <div class="text-xs text-canvas-500 mt-1">\${new Date(exec.startedAt).toLocaleString()}</div>
+                      \${exec.error ? \`<div class="text-xs text-status-failed mt-2 bg-status-failed/5 rounded p-2">\${escapeHtml(exec.error)}</div>\` : ''}
+                    </div>
+                  \`).join('')}
                 </div>
-              \` : ''}
-            </div>
+              </div>
+            \` : ''}
           </div>
         \`}
       </div>
@@ -3262,6 +3670,25 @@ function handleStartAFK() {
   render();
 }
 
+async function handleStartPlanning() {
+  const goal = document.getElementById('planning-goal').value;
+  if (!goal.trim()) {
+    showToast('Please enter a goal', 'warning');
+    return;
+  }
+  try {
+    await startPlanning(goal);
+    // Modal will be shown when planning:started event is received
+  } catch (e) {
+    showToast('Failed to start planning: ' + e.message, 'error');
+  }
+}
+
+function openPlanningModal() {
+  state.showModal = 'plan-input';
+  render();
+}
+
 // Filter tasks based on search query
 function filterTasks(tasks) {
   if (!state.searchQuery) return tasks;
@@ -3300,6 +3727,12 @@ function render() {
             </div>
           </div>
           <div class="flex items-center gap-2">
+            <button onclick="openPlanningModal();"
+                    class="btn px-4 py-2 text-sm bg-blue-500 hover:bg-blue-600 text-white \${state.planning ? 'opacity-50 cursor-not-allowed' : ''}"
+                    \${state.planning ? 'disabled' : ''}
+                    title="AI Task Planner">
+              \u{1F3AF} \${state.planning ? 'Planning...' : 'Plan'}
+            </button>
             <button onclick="state.showModal = 'new'; render();"
                     class="btn btn-primary px-4 py-2 text-sm">
               + Add Task
@@ -3366,6 +3799,10 @@ window.retryTask = retryTask;
 window.generateTask = generateTask;
 window.startAFK = startAFK;
 window.stopAFK = stopAFK;
+window.startPlanning = startPlanning;
+window.cancelPlanning = cancelPlanning;
+window.handleStartPlanning = handleStartPlanning;
+window.openPlanningModal = openPlanningModal;
 window.handleDragStart = handleDragStart;
 window.handleDragEnd = handleDragEnd;
 window.handleDragOver = handleDragOver;