agkan 2.15.0 → 3.0.1

package/dist/board/client/board.js

@@ -30,6 +30,258 @@
     setTimeout(() => toast.classList.remove("show"), 3e3);
   }
 
+  // src/board/client/claudeButton.ts
+  var _claudeModalCallback = null;
+  var _runningTaskIds = /* @__PURE__ */ new Set();
+  var _planningTaskIds = /* @__PURE__ */ new Set();
+  var _inFlightTaskIds = /* @__PURE__ */ new Set();
+  function registerClaudeModalCallback(callback) {
+    _claudeModalCallback = callback;
+  }
+  function getRunningTaskIds() {
+    return _runningTaskIds;
+  }
+  function updateButtonStates(runningTaskIds, planningTaskIds = /* @__PURE__ */ new Set()) {
+    _runningTaskIds = runningTaskIds;
+    const onlyPlanningRunning = runningTaskIds.size > 0 && [...runningTaskIds].every((id) => planningTaskIds.has(id));
+    const anyRunning = runningTaskIds.size > 0 && !onlyPlanningRunning;
+    const indicator = document.getElementById("header-running-indicator");
+    if (indicator) {
+      indicator.style.display = runningTaskIds.size > 0 ? "" : "none";
+    }
+    document.querySelectorAll(".claude-run-split").forEach((split) => {
+      const taskId = Number(split.dataset.taskId);
+      if (runningTaskIds.has(taskId)) {
+        replaceWithDetailBtn(split, taskId);
+      } else {
+        split.querySelectorAll(".claude-run-btn, .claude-run-toggle, .claude-run-menu-item").forEach((btn) => {
+          btn.disabled = anyRunning;
+        });
+      }
+    });
+    document.querySelectorAll(".claude-plan-btn").forEach((btn) => {
+      const taskId = Number(btn.dataset.taskId);
+      if (runningTaskIds.has(taskId)) {
+        replaceWithDetailBtn(btn, taskId);
+      }
+    });
+    document.querySelectorAll(".claude-detail-btn").forEach((btn) => {
+      const taskId = Number(btn.dataset.taskId);
+      if (!runningTaskIds.has(taskId)) {
+        const card = btn.closest(".card");
+        const status = card?.dataset.status;
+        replaceWithRunOrPlanBtn(btn, taskId, status);
+      }
+    });
+  }
+  function replaceWithDetailBtn(btn, taskId) {
+    const detailBtn = document.createElement("button");
+    detailBtn.className = "claude-detail-btn";
+    detailBtn.dataset.taskId = String(taskId);
+    detailBtn.textContent = "\u25CF Details";
+    attachDetailBtnListener(detailBtn);
+    btn.replaceWith(detailBtn);
+  }
+  function replaceWithRunOrPlanBtn(btn, taskId, status) {
+    _planningTaskIds.delete(taskId);
+    if (["review", "done", "closed"].includes(status ?? "")) {
+      btn.remove();
+      return;
+    }
+    if (["ready", "in_progress"].includes(status ?? "")) {
+      const split = createRunSplitElement(taskId);
+      btn.replaceWith(split);
+    } else {
+      const newBtn = document.createElement("button");
+      newBtn.className = "claude-plan-btn";
+      newBtn.dataset.taskId = String(taskId);
+      newBtn.innerHTML = "📋 Planning";
+      attachPlanBtnListener(newBtn);
+      btn.replaceWith(newBtn);
+    }
+  }
+  function createRunSplitElement(taskId) {
+    const split = document.createElement("div");
+    split.className = "claude-run-split";
+    split.dataset.taskId = String(taskId);
+    const mainBtn = document.createElement("button");
+    mainBtn.className = "claude-run-btn";
+    mainBtn.dataset.taskId = String(taskId);
+    mainBtn.innerHTML = "▶ Run";
+    const toggleBtn = document.createElement("button");
+    toggleBtn.className = "claude-run-toggle";
+    toggleBtn.dataset.taskId = String(taskId);
+    toggleBtn.title = "More options";
+    toggleBtn.innerHTML = "▼";
+    const menu = document.createElement("div");
+    menu.className = "claude-run-menu";
+    const directItem = document.createElement("button");
+    directItem.className = "claude-run-menu-item";
+    directItem.dataset.taskId = String(taskId);
+    directItem.dataset.command = "direct";
+    directItem.innerHTML = "▶ Run (current branch)";
+    const prItem = document.createElement("button");
+    prItem.className = "claude-run-menu-item";
+    prItem.dataset.taskId = String(taskId);
+    prItem.dataset.command = "pr";
+    prItem.innerHTML = "▶ Run (create PR)";
+    menu.appendChild(directItem);
+    menu.appendChild(prItem);
+    split.appendChild(mainBtn);
+    split.appendChild(toggleBtn);
+    split.appendChild(menu);
+    attachRunSplitListeners(split, mainBtn, toggleBtn, directItem, prItem, taskId);
+    return split;
+  }
+  function attachRunSplitListeners(split, mainBtn, toggleBtn, directItem, prItem, taskId) {
+    split.dataset.listenersAttached = "true";
+    mainBtn.addEventListener("click", async (e) => {
+      e.stopPropagation();
+      await triggerRunTask(taskId, split, {});
+    });
+    toggleBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      split.classList.toggle("open");
+    });
+    directItem.addEventListener("click", async (e) => {
+      e.stopPropagation();
+      split.classList.remove("open");
+      await triggerRunTask(taskId, split, {});
+    });
+    prItem.addEventListener("click", async (e) => {
+      e.stopPropagation();
+      split.classList.remove("open");
+      await triggerRunTask(taskId, split, { command: "pr" });
+    });
+  }
+  function attachPlanBtnListener(btn) {
+    btn.dataset.listenersAttached = "true";
+    btn.addEventListener("click", async (e) => {
+      e.stopPropagation();
+      const taskId = Number(btn.dataset.taskId);
+      await triggerRunTask(taskId, btn, { command: "planning" });
+    });
+  }
+  function attachDetailBtnListener(btn) {
+    btn.dataset.listenersAttached = "true";
+    btn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      const taskId = Number(btn.dataset.taskId);
+      if (_claudeModalCallback) {
+        _claudeModalCallback(taskId);
+      }
+    });
+  }
+  async function triggerRunTask(taskId, btn, body) {
+    if (_inFlightTaskIds.has(taskId)) return;
+    _inFlightTaskIds.add(taskId);
+    btn.disabled = true;
+    btn.querySelectorAll("button").forEach((b) => b.disabled = true);
+    try {
+      const res = await fetch(`/api/claude/tasks/${taskId}/run`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(body)
+      });
+      if (res.ok) {
+        _runningTaskIds = new Set(_runningTaskIds).add(taskId);
+        if (body.command === "planning") {
+          _planningTaskIds = new Set(_planningTaskIds).add(taskId);
+        }
+        replaceWithDetailBtn(btn, taskId);
+      } else {
+        btn.disabled = false;
+        btn.querySelectorAll("button").forEach((b) => b.disabled = false);
+        let errorDetail = `HTTP ${res.status}`;
+        try {
+          const data = await res.json();
+          if (data.error) errorDetail += `: ${data.error}`;
+        } catch {
+        }
+        console.error(`[claude] Failed to start task ${taskId}: ${errorDetail}`);
+        if (res.status === 409) {
+          alert(`\u3053\u306E\u30BF\u30B9\u30AF\u306F\u3059\u3067\u306B\u5B9F\u884C\u4E2D\u3067\u3059 (task ${taskId})`);
+        } else {
+          alert(`Claude\u8D77\u52D5\u30A8\u30E9\u30FC (task ${taskId}): ${errorDetail}`);
+        }
+      }
+    } catch (err) {
+      btn.disabled = false;
+      btn.querySelectorAll("button").forEach((b) => b.disabled = false);
+      console.error(`[claude] Network error starting task ${taskId}:`, err);
+    } finally {
+      _inFlightTaskIds.delete(taskId);
+    }
+  }
+  async function pollRunningTasks() {
+    try {
+      const res = await fetch("/api/running-tasks");
+      if (!res.ok) return;
+      const data = await res.json();
+      const allIds = new Set(data.tasks.map((t) => t.taskId));
+      const planningIds = new Set(data.tasks.filter((t) => t.command === "planning").map((t) => t.taskId));
+      updateButtonStates(allIds, planningIds);
+    } catch {
+    }
+  }
+  function updateCardButton(card, newStatus) {
+    const taskId = Number(card.dataset.id);
+    if (_runningTaskIds.has(taskId)) return;
+    const existingEl = card.querySelector(".claude-run-split, .claude-plan-btn, .claude-detail-btn");
+    if (!existingEl) return;
+    if (["review", "done", "closed"].includes(newStatus)) {
+      existingEl.remove();
+    } else if (["ready", "in_progress"].includes(newStatus)) {
+      if (!existingEl.classList.contains("claude-run-split")) {
+        const split = createRunSplitElement(taskId);
+        existingEl.replaceWith(split);
+      }
+    } else {
+      if (!existingEl.classList.contains("claude-plan-btn")) {
+        const newBtn = document.createElement("button");
+        newBtn.className = "claude-plan-btn";
+        newBtn.dataset.taskId = String(taskId);
+        newBtn.innerHTML = "📋 Planning";
+        attachPlanBtnListener(newBtn);
+        existingEl.replaceWith(newBtn);
+      }
+    }
+  }
+  function attachClaudeButtonListeners(body) {
+    body.querySelectorAll(".claude-run-split").forEach((split) => {
+      if (split.dataset.listenersAttached) return;
+      const taskId = Number(split.dataset.taskId);
+      const mainBtn = split.querySelector(".claude-run-btn");
+      const toggleBtn = split.querySelector(".claude-run-toggle");
+      const directItem = split.querySelector('[data-command="direct"]');
+      const prItem = split.querySelector('[data-command="pr"]');
+      if (mainBtn && toggleBtn && directItem && prItem) {
+        attachRunSplitListeners(split, mainBtn, toggleBtn, directItem, prItem, taskId);
+      }
+    });
+    body.querySelectorAll(".claude-plan-btn").forEach((btn) => {
+      if (btn.dataset.listenersAttached) return;
+      attachPlanBtnListener(btn);
+    });
+    body.querySelectorAll(".claude-detail-btn").forEach((btn) => {
+      if (btn.dataset.listenersAttached) return;
+      attachDetailBtnListener(btn);
+    });
+    updateButtonStates(_runningTaskIds, _planningTaskIds);
+  }
+  function initClaudeButton() {
+    document.querySelectorAll(".column-body").forEach((body) => {
+      attachClaudeButtonListeners(body);
+    });
+    document.addEventListener("click", () => {
+      document.querySelectorAll(".claude-run-split.open").forEach((el) => {
+        el.classList.remove("open");
+      });
+    });
+    setInterval(pollRunningTasks, 2500);
+    pollRunningTasks();
+  }
+
   // src/board/client/dragDrop.ts
   var _redrawDependencies = null;
   function registerDependencyRedrawCallback(callback) {
@@ -37,6 +289,7 @@
   }
   var draggedCard = null;
   var sourceBody = null;
+  var isPendingStatusUpdate = false;
   var _dragMouseX = 0;
   var _dragMouseY = 0;
   var _dragOffsetX = 0;
@@ -70,6 +323,8 @@
     draggedCard.dataset.status = newStatus;
     updateCount(oldStatus);
     updateCount(newStatus);
+    updateCardButton(draggedCard, newStatus);
+    isPendingStatusUpdate = true;
     try {
       const res = await fetch("/api/tasks/" + taskId, {
         method: "PATCH",
@@ -88,6 +343,8 @@
         updateCount(newStatus);
       }
       showToast();
+    } finally {
+      isPendingStatusUpdate = false;
     }
   }
   var _documentDragOverListener = null;
@@ -423,6 +680,7 @@
   var _renderDetailPanel = null;
   var _showUpdateWarning = null;
   var _getDetailTaskId2 = null;
+  var _getDetailActiveTab = null;
   var _setActiveCard = null;
   var _redrawDependencies2 = null;
   function registerDetailPanelCallbacks(callbacks) {
@@ -430,6 +688,7 @@
     _renderDetailPanel = callbacks.renderDetailPanel;
     _showUpdateWarning = callbacks.showUpdateWarning;
     _getDetailTaskId2 = callbacks.getDetailTaskId;
+    _getDetailActiveTab = callbacks.getDetailActiveTab;
     _setActiveCard = callbacks.setActiveCard;
   }
   function registerDependencyRedrawCallback2(callback) {
@@ -497,6 +756,8 @@
     }
     attachCardListeners(body);
     attachAutoScrollToBody(body);
+    attachClaudeButtonListeners(body);
+    updateButtonStates(getRunningTaskIds());
   }
   function isEditingDetailPanel() {
     const editableFields = ["detail-edit-title", "detail-edit-body", "detail-edit-status", "detail-edit-priority"];
@@ -507,6 +768,9 @@
       if (_showUpdateWarning) _showUpdateWarning();
       return;
     }
+    if (_getDetailActiveTab && _getDetailActiveTab() === "run-logs") {
+      return;
+    }
     try {
       const taskRes = await fetch("/api/tasks/" + detailTaskId2);
       if (taskRes.ok) {
@@ -538,7 +802,7 @@
     }
   }
   async function pollBoardUpdates() {
-    if (draggedCard !== null) return;
+    if (draggedCard !== null || isPendingStatusUpdate) return;
     try {
       const res = await fetch("/api/board/updated-at");
       if (!res.ok) return;
@@ -911,8 +1175,8 @@
     });
     if (!res.ok) throw new Error("Server error");
   }
-  async function fetchTaskDetail(taskId) {
-    const res = await fetch("/api/tasks/" + taskId);
+  async function fetchTaskDetail(taskId, signal) {
+    const res = await fetch("/api/tasks/" + taskId, signal ? { signal } : void 0);
     if (!res.ok) throw new Error("Server error");
     return res.json();
   }
@@ -958,6 +1222,12 @@
     }).catch(function() {
     });
   }
+  async function fetchRunLogs(taskId) {
+    const res = await fetch("/api/claude/tasks/" + taskId + "/run-logs");
+    if (!res.ok) throw new Error("Server error");
+    const data = await res.json();
+    return data.logs || [];
+  }
 
   // src/board/client/detailPanelHtml.ts
   function renderCommentItemHtml(comment, taskId) {
@@ -1084,8 +1354,36 @@
     html += renderEditableTextFields(task);
     return html;
   }
+  function renderRunLogsHtml(logs) {
+    if (logs.length === 0) {
+      return '<div class="run-log-empty">No run logs yet.</div>';
+    }
+    let html = '<div class="run-log-list">';
+    logs.forEach((log, index) => {
+      const date = log.started_at ? log.started_at.replace("T", " ").replace(/\.\d+Z$/, "") : "";
+      const exitOk = log.exit_code === 0;
+      const exitLabel = log.exit_code !== null ? "exit: " + String(log.exit_code) : "running";
+      const exitClass = exitOk ? "success" : "failure";
+      const isFirst = index === 0;
+      html += '<div class="run-log-item' + (isFirst ? " open" : "") + '" data-log-id="' + log.id + '"><div class="run-log-header" data-action="toggle-run-log"><span class="run-log-toggle">&#9654;</span><span class="run-log-date">' + escapeHtmlClient(date) + '</span><span class="run-log-exit ' + exitClass + '">' + escapeHtmlClient(exitLabel) + '</span></div><div class="run-log-body">';
+      log.events.forEach((evt) => {
+        if (evt.kind === "text" && evt.text) {
+          html += escapeHtmlClient(evt.text);
+        } else if (evt.kind === "tool_use" && evt.name) {
+          const mainArg = evt.input && typeof evt.input === "object" ? String(
+            evt.input.path ?? evt.input.command ?? ""
+          ) : "";
+          const display = mainArg ? "\u{1F527} " + evt.name + ": " + mainArg : "\u{1F527} " + evt.name;
+          html += '<span class="run-log-tool-use">' + escapeHtmlClient(display) + "\n</span>";
+        }
+      });
+      html += "</div></div>";
+    });
+    html += "</div>";
+    return html;
+  }
   function buildDetailPanelHtml() {
-    return '<div class="detail-panel" id="detail-panel"><div class="detail-panel-resize-handle" id="detail-panel-resize-handle"></div><div class="detail-panel-header"><h2 id="detail-panel-title">Task Detail</h2><button class="detail-panel-copy-id" id="detail-panel-copy-id" title="Copy task ID">&#x2398;</button><button class="detail-panel-close" id="detail-panel-close" title="Close">&times;</button></div><div class="detail-tabs" id="detail-tabs"><button class="detail-tab active" data-tab="details">Details</button><button class="detail-tab" data-tab="comments" id="detail-tab-comments">Comments</button></div><div class="detail-panel-body" id="detail-panel-body"><div class="detail-tab-content active" id="detail-tab-content-details"></div><div class="detail-tab-content" id="detail-tab-content-comments"></div></div><div class="detail-panel-footer" id="detail-panel-footer"><button id="detail-save-btn">Save</button></div></div>';
+    return '<div class="detail-panel" id="detail-panel"><div class="detail-panel-resize-handle" id="detail-panel-resize-handle"></div><div class="detail-panel-header"><h2 id="detail-panel-title">Task Detail</h2><button class="detail-panel-copy-id" id="detail-panel-copy-id" title="Copy task ID">&#x2398;</button><button class="detail-panel-close" id="detail-panel-close" title="Close">&times;</button></div><div class="detail-tabs" id="detail-tabs"><button class="detail-tab active" data-tab="details">Details</button><button class="detail-tab" data-tab="comments" id="detail-tab-comments">Comments</button><button class="detail-tab" data-tab="run-logs" id="detail-tab-run-logs">Run Logs</button></div><div class="detail-panel-body" id="detail-panel-body"><div class="detail-tab-content active" id="detail-tab-content-details"></div><div class="detail-tab-content" id="detail-tab-content-comments"></div><div class="detail-tab-content" id="detail-tab-content-run-logs"></div></div><div class="detail-panel-footer" id="detail-panel-footer"><button id="detail-save-btn">Save</button></div></div>';
   }
   function autoResizeTextarea(el) {
     const scrollContainer = el.closest(".detail-tab-content");
@@ -1098,9 +1396,22 @@
   // src/board/client/detailPanel.ts
   var detailTaskId = null;
   var lastTab = "details";
+  var runLogPollingInterval = null;
+  var currentFetchController = null;
+  var runLogLoadSeq = 0;
+  var runLogsLoadedTaskId = null;
+  function stopRunLogPolling() {
+    if (runLogPollingInterval !== null) {
+      clearInterval(runLogPollingInterval);
+      runLogPollingInterval = null;
+    }
+  }
   function getDetailTaskId() {
     return detailTaskId;
   }
+  function getDetailActiveTab() {
+    return lastTab;
+  }
   function setActiveCard(taskId) {
     document.querySelectorAll(".card.active").forEach((card) => {
       card.classList.remove("active");
@@ -1111,6 +1422,13 @@
     }
   }
   function closeDetailPanel() {
+    stopRunLogPolling();
+    runLogsLoadedTaskId = null;
+    const runLogsPane = document.getElementById("detail-tab-content-run-logs");
+    if (runLogsPane) {
+      delete runLogsPane.dataset.runLogsTaskId;
+      delete runLogsPane.dataset.runLogsSignature;
+    }
     const detailPanel = document.getElementById("detail-panel");
     detailPanel.classList.remove("open");
     detailPanel.style.width = "";
@@ -1118,26 +1436,41 @@
     detailTaskId = null;
   }
   function switchTab(tabName) {
+    const activeTabBtn = document.querySelector(".detail-tab.active");
+    const currentTab = activeTabBtn?.dataset.tab ?? null;
+    const isSameTab = currentTab === tabName;
+    if (tabName !== "run-logs") {
+      stopRunLogPolling();
+    }
     lastTab = tabName;
-    document.querySelectorAll(".detail-tab").forEach((btn) => {
-      btn.classList.toggle("active", btn.dataset.tab === tabName);
-    });
-    document.querySelectorAll(".detail-tab-content").forEach((el) => {
-      el.classList.toggle("active", el.id === "detail-tab-content-" + tabName);
-    });
+    if (!isSameTab) {
+      document.querySelectorAll(".detail-tab").forEach((btn) => {
+        btn.classList.toggle("active", btn.dataset.tab === tabName);
+      });
+      document.querySelectorAll(".detail-tab-content").forEach((el) => {
+        el.classList.toggle("active", el.id === "detail-tab-content-" + tabName);
+      });
+    }
     const footer = document.getElementById("detail-panel-footer");
     if (footer) footer.style.display = tabName === "details" ? "" : "none";
+    if (tabName === "run-logs" && detailTaskId !== null && (!isSameTab || runLogsLoadedTaskId !== detailTaskId)) {
+      loadRunLogs(detailTaskId).catch((err) => {
+        console.error("[agkan] switchTab loadRunLogs failed", err);
+      });
+    }
   }
   async function loadComments(taskId) {
-    const tabBtn = document.getElementById("detail-tab-comments");
     const pane = document.getElementById("detail-tab-content-comments");
     if (!pane) return;
     try {
       const comments = await fetchComments(taskId);
+      if (detailTaskId !== taskId) return;
+      const tabBtn = document.getElementById("detail-tab-comments");
       if (tabBtn) tabBtn.textContent = "Comments (" + comments.length + ")";
       renderComments(taskId, comments);
     } catch (err) {
       console.error("[agkan] loadComments failed for task", taskId, err);
+      if (detailTaskId !== taskId) return;
       if (pane) pane.innerHTML = '<div style="padding:20px;font-size:12px;color:#94a3b8;">Failed to load comments</div>';
     }
   }
@@ -1262,6 +1595,99 @@
     const taskId = target.dataset.taskId ? Number(target.dataset.taskId) : NaN;
     dispatchCommentAction(action, commentId, taskId);
   }
+  function buildRunLogsSignature(logs) {
+    return JSON.stringify(logs);
+  }
+  function renderRunLogsInPane(pane, logs) {
+    const nextSignature = buildRunLogsSignature(logs);
+    if (pane.dataset.runLogsSignature === nextSignature) return;
+    pane.dataset.runLogsSignature = nextSignature;
+    const bodyScrollState = /* @__PURE__ */ new Map();
+    const openLogIds = /* @__PURE__ */ new Set();
+    const hadPreviousItems = pane.querySelector(".run-log-item") !== null;
+    const paneScrollTop = pane.scrollTop;
+    const paneIsNearBottom = pane.scrollHeight - pane.scrollTop - pane.clientHeight <= 50;
+    pane.querySelectorAll(".run-log-item.open").forEach((item) => {
+      const logId = Number(item.dataset.logId);
+      if (!logId) return;
+      openLogIds.add(logId);
+      const body = item.querySelector(".run-log-body");
+      if (body) {
+        const isNearBottom = body.scrollHeight - body.scrollTop - body.clientHeight <= 50;
+        bodyScrollState.set(logId, { scrollTop: body.scrollTop, isNearBottom });
+      }
+    });
+    pane.innerHTML = renderRunLogsHtml(logs);
+    requestAnimationFrame(() => {
+      if (hadPreviousItems) {
+        pane.scrollTop = paneIsNearBottom ? pane.scrollHeight : paneScrollTop;
+      }
+      pane.querySelectorAll(".run-log-item").forEach((item) => {
+        const logId = Number(item.dataset.logId);
+        if (!logId) return;
+        const body = item.querySelector(".run-log-body");
+        if (!body) return;
+        if (hadPreviousItems) {
+          if (openLogIds.has(logId)) {
+            item.classList.add("open");
+            const state = bodyScrollState.get(logId);
+            if (state) {
+              body.scrollTop = state.isNearBottom ? body.scrollHeight : state.scrollTop;
+            } else {
+              body.scrollTop = body.scrollHeight;
+            }
+          } else {
+            item.classList.remove("open");
+          }
+        } else {
+          if (item.classList.contains("open")) {
+            body.scrollTop = body.scrollHeight;
+          }
+        }
+      });
+    });
+  }
+  async function loadRunLogs(taskId) {
+    stopRunLogPolling();
+    const seq = ++runLogLoadSeq;
+    const pane = document.getElementById("detail-tab-content-run-logs");
+    if (!pane) return;
+    runLogsLoadedTaskId = taskId;
+    if (pane.dataset.runLogsTaskId !== String(taskId)) {
+      pane.dataset.runLogsTaskId = String(taskId);
+      delete pane.dataset.runLogsSignature;
+    }
+    pane.removeEventListener("click", handleRunLogToggle);
+    pane.addEventListener("click", handleRunLogToggle);
+    try {
+      const logs = await fetchRunLogs(taskId);
+      if (seq !== runLogLoadSeq) return;
+      renderRunLogsInPane(pane, logs);
+      runLogPollingInterval = setInterval(() => {
+        if (detailTaskId !== taskId) {
+          stopRunLogPolling();
+          return;
+        }
+        fetchRunLogs(taskId).then((updated) => {
+          if (seq !== runLogLoadSeq) return;
+          const p = document.getElementById("detail-tab-content-run-logs");
+          if (p) renderRunLogsInPane(p, updated);
+        }).catch(() => stopRunLogPolling());
+      }, 2e3);
+    } catch (err) {
+      console.error("[agkan] loadRunLogs failed for task", taskId, err);
+      if (seq !== runLogLoadSeq) return;
+      runLogsLoadedTaskId = null;
+      delete pane.dataset.runLogsSignature;
+      pane.innerHTML = '<div style="padding:20px;font-size:12px;color:#94a3b8;">Failed to load run logs</div>';
+    }
+  }
+  function handleRunLogToggle(e) {
+    const target = e.target.closest('[data-action="toggle-run-log"]');
+    if (!target) return;
+    const item = target.closest(".run-log-item");
+    if (item) item.classList.toggle("open");
+  }
   function renderDetailPanel(data) {
     document.getElementById("detail-panel-update-warning")?.remove();
     const detailPanelTitle = document.getElementById("detail-panel-title");
@@ -1288,9 +1714,36 @@
     }
     const textarea = document.getElementById("detail-edit-body");
     if (textarea) {
-      requestAnimationFrame(() => {
-        autoResizeTextarea(textarea);
-      });
+      const detailPanel = document.getElementById("detail-panel");
+      if (detailPanel && !detailPanel.classList.contains("open")) {
+        const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+        if (prefersReducedMotion) {
+          autoResizeTextarea(textarea);
+        } else {
+          let done = false;
+          const finish = () => {
+            if (done) return;
+            done = true;
+            detailPanel.removeEventListener("transitionend", onTransitionEnd);
+            requestAnimationFrame(() => {
+              requestAnimationFrame(() => {
+                autoResizeTextarea(textarea);
+              });
+            });
+          };
+          const onTransitionEnd = (e) => {
+            if (e.propertyName === "width") finish();
+          };
+          detailPanel.addEventListener("transitionend", onTransitionEnd);
+          setTimeout(finish, 260);
+        }
+      } else {
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            autoResizeTextarea(textarea);
+          });
+        });
+      }
       textarea.addEventListener("input", () => {
         autoResizeTextarea(textarea);
       });
@@ -1305,16 +1758,23 @@
   async function openTaskDetail(taskId) {
     const detailPanel = document.getElementById("detail-panel");
     const PANEL_DEFAULT_WIDTH2 = 400;
+    setActiveCard(Number(taskId));
+    if (currentFetchController) {
+      currentFetchController.abort();
+    }
+    currentFetchController = new AbortController();
+    const { signal } = currentFetchController;
     try {
-      const data = await fetchTaskDetail(taskId);
+      const data = await fetchTaskDetail(taskId, signal);
+      currentFetchController = null;
       renderDetailPanel(data);
-      setActiveCard(Number(taskId));
       if (!detailPanel.classList.contains("open")) {
         const preferredWidth = detailPanel.dataset.preferredWidth || String(PANEL_DEFAULT_WIDTH2);
         detailPanel.style.width = preferredWidth + "px";
         detailPanel.classList.add("open");
       }
     } catch (err) {
+      if (err instanceof DOMException && err.name === "AbortError") return;
       console.error("[agkan] openTaskDetail failed for task", taskId, err);
       showToast("Failed to load task details");
     }
@@ -1339,7 +1799,7 @@
     const reloadBtn = document.createElement("button");
     reloadBtn.title = "Reload latest data";
     reloadBtn.textContent = "\u21BA";
-    reloadBtn.style.cssText = "background: none; border: none; cursor: pointer; font-size: 1.1em; color: red; padding: 0 2px; line-height: 1; flex-shrink: 0;";
+    reloadBtn.style.cssText = "background: none; border: none; cursor: pointer; font-size: 1.5em; color: red; padding: 0 4px; line-height: 1; flex-shrink: 0;";
     reloadBtn.addEventListener("click", async () => {
       try {
         if (detailTaskId !== null) {
@@ -1454,6 +1914,7 @@
       renderDetailPanel,
       showUpdateWarning,
       getDetailTaskId,
+      getDetailActiveTab,
       setActiveCard
     });
     registerGetDetailTaskId(getDetailTaskId);
@@ -2069,6 +2530,161 @@
     });
   }
 
+  // src/board/client/claudeStreamModal.ts
+  var _currentEventSource = null;
+  var _currentTaskId = null;
+  var _claudeButtonUpdateCallback = null;
+  function registerClaudeButtonUpdateCallback(cb) {
+    _claudeButtonUpdateCallback = cb;
+  }
+  function stripAnsi(text) {
+    return text.replace(/\x1b\[[0-9;]*m/g, "");
+  }
+  function getModalElements() {
+    return {
+      overlay: document.getElementById("claude-stream-modal"),
+      title: document.getElementById("claude-stream-modal-title"),
+      log: document.getElementById("claude-stream-log"),
+      status: document.getElementById("claude-stream-status"),
+      stopBtn: document.getElementById("claude-stream-stop-btn"),
+      closeBtn: document.getElementById("claude-stream-close-btn"),
+      modalClose: document.getElementById("claude-stream-modal-close")
+    };
+  }
+  function isAutoScrollEnabled(log) {
+    const threshold = 50;
+    return log.scrollHeight - log.scrollTop - log.clientHeight <= threshold;
+  }
+  function appendToLog(log, text, className) {
+    const shouldScroll = isAutoScrollEnabled(log);
+    const line = document.createElement("div");
+    line.textContent = text;
+    if (className) {
+      line.className = className;
+    }
+    log.appendChild(line);
+    if (shouldScroll) {
+      log.scrollTop = log.scrollHeight;
+    }
+  }
+  function closeEventSource() {
+    if (_currentEventSource) {
+      _currentEventSource.close();
+      _currentEventSource = null;
+    }
+  }
+  function closeClaudeStreamModal() {
+    closeEventSource();
+    const { overlay } = getModalElements();
+    overlay?.classList.remove("show");
+  }
+  function openClaudeStreamModal(taskId) {
+    closeEventSource();
+    _currentTaskId = taskId;
+    const { overlay, title, log, status, stopBtn } = getModalElements();
+    if (!overlay || !title || !log || !status || !stopBtn) return;
+    title.textContent = `Claude Output #${taskId}`;
+    log.innerHTML = "";
+    status.textContent = "Connecting...";
+    stopBtn.disabled = false;
+    stopBtn.textContent = "Stop";
+    overlay.classList.add("show");
+    const es = new EventSource(`/api/claude/tasks/${taskId}/stream`);
+    _currentEventSource = es;
+    es.onopen = () => {
+      if (_currentEventSource === es) {
+        status.textContent = "Running";
+      }
+    };
+    es.addEventListener("text", (event) => {
+      const msgEvent = event;
+      try {
+        const data = JSON.parse(msgEvent.data);
+        appendToLog(log, stripAnsi(data.text));
+      } catch {
+      }
+    });
+    es.addEventListener("tool_use", (event) => {
+      const msgEvent = event;
+      try {
+        const data = JSON.parse(msgEvent.data);
+        const mainArg = data.input?.path ?? data.input?.command ?? "";
+        const displayText = mainArg ? `\u{1F527} ${data.name}: ${mainArg}` : `\u{1F527} ${data.name}`;
+        appendToLog(log, displayText, "claude-stream-tool-use");
+      } catch {
+      }
+    });
+    es.addEventListener("end", (event) => {
+      const msgEvent = event;
+      try {
+        const data = JSON.parse(msgEvent.data);
+        status.textContent = `Done (exit ${data.exitCode})`;
+      } catch {
+        status.textContent = "Done";
+      }
+      closeEventSource();
+      stopBtn.disabled = true;
+    });
+    es.addEventListener("error", (event) => {
+      const msgEvent = event;
+      try {
+        const data = JSON.parse(msgEvent.data);
+        status.textContent = `Error: ${data.message}`;
+      } catch {
+        status.textContent = "Error";
+      }
+      closeEventSource();
+      stopBtn.disabled = true;
+    });
+    es.onerror = () => {
+      if (_currentEventSource === es) {
+        closeEventSource();
+        status.textContent = "Disconnected";
+        stopBtn.disabled = true;
+      }
+    };
+  }
+  async function handleStop() {
+    if (_currentTaskId === null) return;
+    const { stopBtn, status } = getModalElements();
+    if (!stopBtn || !status) return;
+    const taskId = _currentTaskId;
+    closeEventSource();
+    stopBtn.disabled = true;
+    stopBtn.textContent = "Stopping...";
+    try {
+      await fetch(`/api/claude/tasks/${taskId}/run`, { method: "DELETE" });
+    } catch {
+    }
+    stopBtn.textContent = "Stopped";
+    status.textContent = "Stopped";
+    if (_claudeButtonUpdateCallback) {
+      _claudeButtonUpdateCallback();
+    }
+  }
+  function initClaudeStreamModal() {
+    const { overlay, stopBtn, closeBtn, modalClose } = getModalElements();
+    modalClose?.addEventListener("click", () => {
+      closeClaudeStreamModal();
+    });
+    closeBtn?.addEventListener("click", () => {
+      closeClaudeStreamModal();
+    });
+    stopBtn?.addEventListener("click", () => {
+      void handleStop();
+    });
+    overlay?.addEventListener("click", (e) => {
+      if (e.target === overlay) {
+        closeClaudeStreamModal();
+      }
+    });
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape" && overlay?.classList.contains("show")) {
+        closeClaudeStreamModal();
+      }
+    });
+  }
+
   // src/board/client/main.ts
   initDragDrop();
   initAutoScroll();
@@ -2079,4 +2695,10 @@
   initFilters();
   initBurgerMenu();
   initDependencyVisualization();
+  initClaudeButton();
+  initClaudeStreamModal();
+  registerClaudeModalCallback(openClaudeStreamModal);
+  registerClaudeButtonUpdateCallback(() => {
+    updateButtonStates(/* @__PURE__ */ new Set());
+  });
 })();