agkan 2.14.3 → 3.0.1

package/dist/board/client/board.js

@@ -30,9 +30,277 @@
     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) {
+    _redrawDependencies = callback;
+  }
   var draggedCard = null;
   var sourceBody = null;
+  var isPendingStatusUpdate = false;
+  var _dragMouseX = 0;
+  var _dragMouseY = 0;
+  var _dragOffsetX = 0;
+  var _dragOffsetY = 0;
+  function getDraggedCardVirtualRect() {
+    if (!draggedCard) return null;
+    const rect = draggedCard.getBoundingClientRect();
+    const left = _dragMouseX - _dragOffsetX;
+    const top = _dragMouseY - _dragOffsetY;
+    return new DOMRect(left, top, rect.width, rect.height);
+  }
   function updateCount(status) {
     const col = document.querySelector(`.column[data-status="${status}"]`);
     if (!col) return;
@@ -55,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",
@@ -62,6 +332,9 @@
         body: JSON.stringify({ status: newStatus })
       });
       if (!res.ok) throw new Error("Server error");
+      if (_redrawDependencies) {
+        _redrawDependencies();
+      }
     } catch {
       if (prevBody && draggedCard) {
         prevBody.appendChild(draggedCard);
@@ -70,19 +343,37 @@
         updateCount(newStatus);
       }
       showToast();
+    } finally {
+      isPendingStatusUpdate = false;
     }
   }
+  var _documentDragOverListener = null;
   function attachDragListeners(card) {
     card.addEventListener("dragstart", (e) => {
       draggedCard = card;
       sourceBody = card.parentElement;
       card.classList.add("dragging");
       if (e.dataTransfer) e.dataTransfer.effectAllowed = "move";
+      const rect = card.getBoundingClientRect();
+      _dragOffsetX = e.clientX - rect.left;
+      _dragOffsetY = e.clientY - rect.top;
+      _dragMouseX = e.clientX;
+      _dragMouseY = e.clientY;
+      _documentDragOverListener = (ev) => {
+        _dragMouseX = ev.clientX;
+        _dragMouseY = ev.clientY;
+        if (_redrawDependencies) _redrawDependencies();
+      };
+      document.addEventListener("dragover", _documentDragOverListener);
     });
     card.addEventListener("dragend", () => {
       card.classList.remove("dragging");
       draggedCard = null;
       sourceBody = null;
+      if (_documentDragOverListener) {
+        document.removeEventListener("dragover", _documentDragOverListener);
+        _documentDragOverListener = null;
+      }
     });
   }
   function initDragDrop() {
@@ -219,14 +510,43 @@
       });
       input.placeholder = currentTags.length === 0 ? "Add tags..." : "";
     }
+    async function createAndAddTag(name) {
+      const detailTaskId2 = _getDetailTaskId ? _getDetailTaskId() : null;
+      try {
+        const createRes = await fetch("/api/tags", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ name })
+        });
+        if (!createRes.ok) throw new Error("Server error");
+        const newTag = await createRes.json();
+        allAvailableTags.push(newTag);
+        const taskRes = await fetch("/api/tasks/" + detailTaskId2 + "/tags", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ tagId: newTag.id })
+        });
+        if (!taskRes.ok) throw new Error("Server error");
+        currentTags.push(newTag);
+        input.value = "";
+        inputValue = "";
+        renderPills();
+        renderDropdown();
+      } catch {
+        showToast("Failed to create tag");
+      }
+    }
     function renderDropdown() {
       const filtered = getFilteredTags();
       dropdown.innerHTML = "";
       focusedOptionIndex = -1;
-      if (filtered.length === 0) {
+      const hasInput = inputValue.trim() !== "";
+      const exactMatch = hasInput && allAvailableTags.some((t) => t.name.toLowerCase() === inputValue.trim().toLowerCase());
+      const showCreate = hasInput && !exactMatch;
+      if (filtered.length === 0 && !showCreate) {
         const noOpt = document.createElement("div");
         noOpt.className = "tag-select-no-options";
-        noOpt.textContent = inputValue ? "No matching tags" : "No tags available";
+        noOpt.textContent = hasInput ? "No matching tags" : "No tags available";
         dropdown.appendChild(noOpt);
       } else {
         filtered.forEach((t, i) => {
@@ -241,6 +561,18 @@
           });
           dropdown.appendChild(opt);
         });
+        if (showCreate) {
+          const createOpt = document.createElement("div");
+          createOpt.className = "tag-select-option tag-select-create-option";
+          createOpt.dataset.create = "true";
+          createOpt.textContent = `Create "${inputValue.trim()}"`;
+          createOpt.addEventListener("mouseover", () => setFocusedOption(filtered.length));
+          createOpt.addEventListener("mousedown", async (e) => {
+            e.preventDefault();
+            await createAndAddTag(inputValue.trim());
+          });
+          dropdown.appendChild(createOpt);
+        }
       }
     }
     function setFocusedOption(index) {
@@ -296,6 +628,8 @@
         e.preventDefault();
         if (focusedOptionIndex >= 0 && filtered[focusedOptionIndex]) {
           await addTag(String(filtered[focusedOptionIndex].id));
+        } else if (focusedOptionIndex >= 0 && inputValue.trim()) {
+          await createAndAddTag(inputValue.trim());
         }
       } else if (e.key === "Escape") {
         closeDropdown();
@@ -346,14 +680,20 @@
   var _renderDetailPanel = null;
   var _showUpdateWarning = null;
   var _getDetailTaskId2 = null;
+  var _getDetailActiveTab = null;
   var _setActiveCard = null;
+  var _redrawDependencies2 = null;
   function registerDetailPanelCallbacks(callbacks) {
     _openTaskDetail = callbacks.openTaskDetail;
     _renderDetailPanel = callbacks.renderDetailPanel;
     _showUpdateWarning = callbacks.showUpdateWarning;
     _getDetailTaskId2 = callbacks.getDetailTaskId;
+    _getDetailActiveTab = callbacks.getDetailActiveTab;
     _setActiveCard = callbacks.setActiveCard;
   }
+  function registerDependencyRedrawCallback2(callback) {
+    _redrawDependencies2 = callback;
+  }
   function attachCardListeners(body) {
     body.querySelectorAll(".card").forEach((card) => {
       attachDragListeners(card);
@@ -416,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"];
@@ -426,6 +768,9 @@
       if (_showUpdateWarning) _showUpdateWarning();
       return;
     }
+    if (_getDetailActiveTab && _getDetailActiveTab() === "run-logs") {
+      return;
+    }
     try {
       const taskRes = await fetch("/api/tasks/" + detailTaskId2);
       if (taskRes.ok) {
@@ -447,6 +792,9 @@
       if (detailTaskId2 !== null && _setActiveCard) {
         _setActiveCard(detailTaskId2);
       }
+      if (_redrawDependencies2) {
+        _redrawDependencies2();
+      }
       if (detailTaskId2 !== null) {
         await refreshOpenDetailPanel(detailTaskId2);
       }
@@ -454,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;
@@ -512,10 +860,13 @@
     const filtered = getFilteredAddTags();
     dropdown.innerHTML = "";
     tagFocusedIndex = -1;
-    if (filtered.length === 0) {
+    const hasInput = tagInputValue.trim() !== "";
+    const exactMatch = hasInput && allAvailableTags.some((t) => t.name.toLowerCase() === tagInputValue.trim().toLowerCase());
+    const showCreate = hasInput && !exactMatch;
+    if (filtered.length === 0 && !showCreate) {
       const noOpt = document.createElement("div");
       noOpt.className = "tag-select-no-options";
-      noOpt.textContent = tagInputValue ? "No matching tags" : "No tags available";
+      noOpt.textContent = hasInput ? "No matching tags" : "No tags available";
       dropdown.appendChild(noOpt);
     } else {
       filtered.forEach((t, i) => {
@@ -530,6 +881,19 @@
         });
         dropdown.appendChild(opt);
       });
+      if (showCreate) {
+        const createOpt = document.createElement("div");
+        createOpt.className = "tag-select-option tag-select-create-option";
+        createOpt.dataset.create = "true";
+        createOpt.textContent = `Create "${tagInputValue.trim()}"`;
+        createOpt.addEventListener("mouseover", () => setAddTagFocused(dropdown, filtered.length));
+        createOpt.addEventListener("mousedown", async (e) => {
+          e.preventDefault();
+          const input = document.getElementById("add-tag-input");
+          await createAndSelectAddTag(tagInputValue.trim(), dropdown, input);
+        });
+        dropdown.appendChild(createOpt);
+      }
     }
   }
   function setAddTagFocused(dropdown, index) {
@@ -547,6 +911,21 @@
     renderAddTagPills(control, input);
     renderAddTagDropdown(dropdown);
   }
+  async function createAndSelectAddTag(name, dropdown, input) {
+    try {
+      const res = await fetch("/api/tags", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name })
+      });
+      if (!res.ok) throw new Error("Server error");
+      const newTag = await res.json();
+      allAvailableTags.push(newTag);
+      selectAddTag(newTag.id, dropdown, input);
+    } catch {
+      showToast("Failed to create tag");
+    }
+  }
   function initAddTagSelector() {
     const control = document.getElementById("add-tag-select-control");
     const dropdown = document.getElementById("add-tag-select-dropdown");
@@ -574,7 +953,7 @@
       renderAddTagDropdown(dropdown);
       if (!dropdown.classList.contains("open")) dropdown.classList.add("open");
     });
-    input.addEventListener("keydown", (e) => {
+    input.addEventListener("keydown", async (e) => {
       const filtered = getFilteredAddTags();
       const opts = dropdown.querySelectorAll(".tag-select-option");
       if (e.key === "ArrowDown") {
@@ -587,6 +966,8 @@
         e.preventDefault();
         if (tagFocusedIndex >= 0 && filtered[tagFocusedIndex]) {
           selectAddTag(filtered[tagFocusedIndex].id, dropdown, input);
+        } else if (tagFocusedIndex >= 0 && tagInputValue.trim()) {
+          await createAndSelectAddTag(tagInputValue.trim(), dropdown, input);
         }
       } else if (e.key === "Escape") {
         dropdown.classList.remove("open");
@@ -636,7 +1017,7 @@
   function resetAddModal(elements) {
     elements.addTitle.value = "";
     elements.addBody.value = "";
-    elements.addPriority.value = "";
+    elements.addPriority.value = "medium";
     selectedTags = [];
     tagInputValue = "";
     tagFocusedIndex = -1;
@@ -794,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();
   }
@@ -841,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) {
@@ -903,14 +1290,14 @@
     if (parent) {
       html += '<div class="detail-relation-row">';
       html += '<span class="detail-relation-label">Parent</span>';
-      html += '<div class="detail-relation-ids"><span class="detail-relation-id">#' + parent.id + " " + escapeHtmlClient(parent.title) + "</span></div>";
+      html += '<div class="detail-relation-ids"><span class="detail-relation-id detail-relation-link" data-task-id="' + parent.id + '">#' + parent.id + " " + escapeHtmlClient(parent.title) + "</span></div>";
       html += "</div>";
     }
     if (blockedBy.length > 0) {
       html += '<div class="detail-relation-row"><span class="detail-relation-label">Blocked by</span>';
       html += '<div class="detail-relation-ids">';
       blockedBy.forEach((t) => {
-        html += '<span class="detail-relation-id">#' + t.id + "</span>";
+        html += '<span class="detail-relation-id detail-relation-link" data-task-id="' + t.id + '">#' + t.id + "</span>";
       });
       html += "</div></div>";
     }
@@ -918,7 +1305,7 @@
       html += '<div class="detail-relation-row"><span class="detail-relation-label">Blocking</span>';
       html += '<div class="detail-relation-ids">';
       blocking.forEach((t) => {
-        html += '<span class="detail-relation-id">#' + t.id + "</span>";
+        html += '<span class="detail-relation-id detail-relation-link" data-task-id="' + t.id + '">#' + t.id + "</span>";
       });
       html += "</div></div>";
     }
@@ -926,11 +1313,10 @@
     return html;
   }
   function renderMetadataTable(metadata) {
-    const otherMeta = metadata.filter((m) => m.key !== "priority");
-    if (otherMeta.length === 0) return "";
+    if (metadata.length === 0) return "";
     let html = '<div class="detail-field"><div class="detail-field-label">Metadata</div>';
     html += '<table class="detail-meta-table">';
-    otherMeta.forEach((m) => {
+    metadata.forEach((m) => {
       html += "<tr><td>" + escapeHtmlClient(m.key) + "</td><td>" + escapeHtmlClient(m.value) + "</td></tr>";
     });
     html += "</table></div>";
@@ -968,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-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");
@@ -982,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");
@@ -995,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 = "";
@@ -1002,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>';
     }
   }
@@ -1146,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");
@@ -1157,6 +1699,13 @@
     if (detailsPane) {
       detailsPane.innerHTML = renderDetailPanelHtml(data);
       detailsPane.style.padding = "20px";
+      detailsPane.querySelectorAll(".detail-relation-link[data-task-id]").forEach((el) => {
+        el.style.cursor = "pointer";
+        el.addEventListener("click", () => {
+          const tid = el.dataset.taskId;
+          if (tid) void openTaskDetail(tid);
+        });
+      });
     }
     const footer = document.getElementById("detail-panel-footer");
     if (footer) {
@@ -1165,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);
       });
@@ -1182,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");
     }
@@ -1216,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) {
@@ -1303,6 +1886,12 @@
     boardContainer.insertAdjacentHTML("beforeend", buildDetailPanelHtml());
     const detailPanel = document.getElementById("detail-panel");
     document.getElementById("detail-panel-close")?.addEventListener("click", closeDetailPanel);
+    document.getElementById("detail-panel-copy-id")?.addEventListener("click", () => {
+      if (detailTaskId === null) return;
+      navigator.clipboard.writeText(String(detailTaskId)).then(() => {
+        showToast("Copied task ID: " + detailTaskId);
+      });
+    });
     document.addEventListener("keydown", (e) => {
       if (e.key === "Escape" && detailPanel.classList.contains("open")) {
         closeDetailPanel();
@@ -1325,6 +1914,7 @@
       renderDetailPanel,
       showUpdateWarning,
       getDetailTaskId,
+      getDetailActiveTab,
       setActiveCard
     });
     registerGetDetailTaskId(getDetailTaskId);
@@ -1714,6 +2304,387 @@
     initDarkMode();
   }
 
+  // src/board/client/dependencyVisualization.ts
+  var isDependencyVisible = false;
+  var arrowMarkers = /* @__PURE__ */ new Map();
+  var scrollListener = null;
+  var columnScrollListener = null;
+  var resizeListener = null;
+  function getOrCreateArrowMarker(svg, color) {
+    const markerId = `arrow-${color.substring(1)}`;
+    if (!arrowMarkers.has(markerId)) {
+      const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+      const marker = document.createElementNS("http://www.w3.org/2000/svg", "marker");
+      marker.setAttribute("id", markerId);
+      marker.setAttribute("markerWidth", "10");
+      marker.setAttribute("markerHeight", "10");
+      marker.setAttribute("refX", "8");
+      marker.setAttribute("refY", "3");
+      marker.setAttribute("orient", "auto");
+      marker.setAttribute("markerUnits", "strokeWidth");
+      const polygon = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
+      polygon.setAttribute("points", "0 0, 10 3, 0 6");
+      polygon.setAttribute("fill", color);
+      marker.appendChild(polygon);
+      defs.appendChild(marker);
+      svg.appendChild(defs);
+      arrowMarkers.set(markerId, { svg });
+    }
+    return markerId;
+  }
+  function drawBezierLine(svg, x1, y1, x2, y2, color, isHovered) {
+    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    const dx = Math.abs(x2 - x1);
+    const isSameSide = dx < 10;
+    let cp1x;
+    let cp2x;
+    if (isSameSide) {
+      const cpOffset = 80;
+      cp1x = x1 + cpOffset;
+      cp2x = x2 + cpOffset;
+    } else {
+      const cpOffset = Math.max(dx * 0.5, 60);
+      cp1x = x1 < x2 ? x1 + cpOffset : x1 - cpOffset;
+      cp2x = x1 < x2 ? x2 - cpOffset : x2 + cpOffset;
+    }
+    const pathData = `M ${x1} ${y1} C ${cp1x} ${y1}, ${cp2x} ${y2}, ${x2} ${y2}`;
+    path.setAttribute("d", pathData);
+    path.setAttribute("stroke", color);
+    path.setAttribute("stroke-width", isHovered ? "2.5" : "1.5");
+    path.setAttribute("fill", "none");
+    path.setAttribute("stroke-linecap", "round");
+    path.setAttribute("marker-end", `url(#${getOrCreateArrowMarker(svg, color)})`);
+    path.setAttribute("class", "dependency-line");
+    return path;
+  }
+  function getCardRect(card) {
+    if (card === draggedCard) {
+      return getDraggedCardVirtualRect() ?? card.getBoundingClientRect();
+    }
+    return card.getBoundingClientRect();
+  }
+  function getCardEdgePoints(fromCard, toCard, boardRect) {
+    const fromRect = getCardRect(fromCard);
+    const toRect = getCardRect(toCard);
+    const fromCenterX = fromRect.left + fromRect.width / 2;
+    const toCenterX = toRect.left + toRect.width / 2;
+    const columnThreshold = 50;
+    let fromX;
+    let toX;
+    if (Math.abs(fromCenterX - toCenterX) < columnThreshold) {
+      fromX = fromRect.right - boardRect.left;
+      toX = toRect.right - boardRect.left;
+    } else if (fromCenterX <= toCenterX) {
+      fromX = fromRect.right - boardRect.left;
+      toX = toRect.left - boardRect.left;
+    } else {
+      fromX = fromRect.left - boardRect.left;
+      toX = toRect.right - boardRect.left;
+    }
+    return {
+      x1: fromX,
+      y1: fromRect.top - boardRect.top + fromRect.height / 2,
+      x2: toX,
+      y2: toRect.top - boardRect.top + toRect.height / 2
+    };
+  }
+  function createSVGOverlay() {
+    const boardContainer = document.querySelector(".board-container");
+    const existing = boardContainer.querySelector("#dependency-svg");
+    if (existing) {
+      existing.remove();
+    }
+    arrowMarkers.clear();
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg.setAttribute("id", "dependency-svg");
+    svg.setAttribute("width", "100%");
+    svg.setAttribute("height", "100%");
+    svg.setAttribute("viewBox", `0 0 ${boardContainer.offsetWidth} ${boardContainer.offsetHeight}`);
+    svg.style.position = "absolute";
+    svg.style.top = "0";
+    svg.style.left = "0";
+    svg.style.pointerEvents = "none";
+    svg.style.zIndex = "5";
+    boardContainer.style.position = "relative";
+    boardContainer.appendChild(svg);
+    return svg;
+  }
+  function redrawDependencies() {
+    if (!isDependencyVisible) return;
+    const svg = createSVGOverlay();
+    const boardContainer = document.querySelector(".board-container");
+    svg.querySelectorAll(".dependency-line").forEach((line) => line.remove());
+    const cards = Array.from(document.querySelectorAll(".card"));
+    const cardMap = /* @__PURE__ */ new Map();
+    cards.forEach((card) => {
+      const id = Number(card.getAttribute("data-id"));
+      cardMap.set(id, card);
+    });
+    const hoveredCard = document.querySelector(".card:hover");
+    const hoveredCardId = hoveredCard ? Number(hoveredCard.getAttribute("data-id")) : null;
+    const hoveredBlockedBySet = /* @__PURE__ */ new Set();
+    const hoveredBlockingSet = /* @__PURE__ */ new Set();
+    if (hoveredCardId) {
+      const hoveredElement = cardMap.get(hoveredCardId);
+      if (hoveredElement) {
+        const blockedBy = hoveredElement.getAttribute("data-blocked-by");
+        const blocking = hoveredElement.getAttribute("data-blocking");
+        if (blockedBy) {
+          blockedBy.split(",").forEach((id) => {
+            const numId = Number(id.trim());
+            if (!isNaN(numId)) hoveredBlockedBySet.add(numId);
+          });
+        }
+        if (blocking) {
+          blocking.split(",").forEach((id) => {
+            const numId = Number(id.trim());
+            if (!isNaN(numId)) hoveredBlockingSet.add(numId);
+          });
+        }
+      }
+    }
+    const boardRect = boardContainer.getBoundingClientRect();
+    cards.forEach((card) => {
+      const cardId = Number(card.getAttribute("data-id"));
+      const blockedByStr = card.getAttribute("data-blocked-by");
+      const blockingStr = card.getAttribute("data-blocking");
+      if (!blockedByStr && !blockingStr) return;
+      const isHovered = cardId === hoveredCardId || hoveredBlockedBySet.has(cardId) || hoveredBlockingSet.has(cardId);
+      if (blockingStr) {
+        const blockingIds = blockingStr.split(",").map((s) => Number(s.trim()));
+        blockingIds.forEach((blockedId) => {
+          const blockedCard = cardMap.get(blockedId);
+          if (blockedCard) {
+            const { x1, y1, x2, y2 } = getCardEdgePoints(card, blockedCard, boardRect);
+            const color = isHovered || hoveredBlockedBySet.has(blockedId) ? "#ef4444" : "#cbd5e1";
+            const line = drawBezierLine(svg, x1, y1, x2, y2, color, isHovered);
+            svg.appendChild(line);
+          }
+        });
+      }
+    });
+    svg.setAttribute("viewBox", `0 0 ${boardContainer.offsetWidth} ${boardContainer.offsetHeight}`);
+  }
+  function handleCardHoverEvents() {
+    const cards = document.querySelectorAll(".card");
+    cards.forEach((card) => {
+      card.addEventListener("mouseenter", () => {
+        redrawDependencies();
+      });
+      card.addEventListener("mouseleave", () => {
+        redrawDependencies();
+      });
+    });
+  }
+  function initDependencyVisualization() {
+    const toggleBtn = document.getElementById("dependency-toggle");
+    if (!toggleBtn) return;
+    const redrawIfVisible = () => {
+      if (isDependencyVisible) {
+        handleCardHoverEvents();
+        redrawDependencies();
+      }
+    };
+    registerDependencyRedrawCallback2(redrawIfVisible);
+    registerDependencyRedrawCallback(redrawIfVisible);
+    toggleBtn.addEventListener("click", () => {
+      isDependencyVisible = !isDependencyVisible;
+      if (isDependencyVisible) {
+        toggleBtn.classList.add("active");
+        redrawDependencies();
+        handleCardHoverEvents();
+        const board = document.querySelector(".board");
+        const boardContainer = document.querySelector(".board-container");
+        if (board) {
+          scrollListener = () => redrawDependencies();
+          board.addEventListener("scroll", scrollListener, { passive: true });
+        }
+        columnScrollListener = () => redrawDependencies();
+        document.querySelectorAll(".column-body").forEach((col) => {
+          col.addEventListener("scroll", columnScrollListener, { passive: true });
+        });
+        if (boardContainer) {
+          resizeListener = () => redrawDependencies();
+          window.addEventListener("resize", resizeListener, { passive: true });
+        }
+      } else {
+        toggleBtn.classList.remove("active");
+        const svg = document.querySelector("#dependency-svg");
+        if (svg) svg.remove();
+        const board = document.querySelector(".board");
+        if (board && scrollListener) {
+          board.removeEventListener("scroll", scrollListener);
+          scrollListener = null;
+        }
+        if (columnScrollListener) {
+          document.querySelectorAll(".column-body").forEach((col) => {
+            col.removeEventListener("scroll", columnScrollListener);
+          });
+          columnScrollListener = null;
+        }
+        if (resizeListener) {
+          window.removeEventListener("resize", resizeListener);
+          resizeListener = null;
+        }
+      }
+    });
+  }
+
+  // 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();
@@ -1723,4 +2694,11 @@
   initBoardPolling();
   initFilters();
   initBurgerMenu();
+  initDependencyVisualization();
+  initClaudeButton();
+  initClaudeStreamModal();
+  registerClaudeModalCallback(openClaudeStreamModal);
+  registerClaudeButtonUpdateCallback(() => {
+    updateButtonStates(/* @__PURE__ */ new Set());
+  });
 })();