agkan 2.14.1 → 2.15.0

package/dist/board/client/board.js

@@ -31,8 +31,23 @@
   }
 
   // src/board/client/dragDrop.ts
+  var _redrawDependencies = null;
+  function registerDependencyRedrawCallback(callback) {
+    _redrawDependencies = callback;
+  }
   var draggedCard = null;
   var sourceBody = null;
+  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;
@@ -62,6 +77,9 @@
         body: JSON.stringify({ status: newStatus })
       });
       if (!res.ok) throw new Error("Server error");
+      if (_redrawDependencies) {
+        _redrawDependencies();
+      }
     } catch {
       if (prevBody && draggedCard) {
         prevBody.appendChild(draggedCard);
@@ -72,17 +90,33 @@
       showToast();
     }
   }
+  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 +253,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 +304,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 +371,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();
@@ -347,6 +424,7 @@
   var _showUpdateWarning = null;
   var _getDetailTaskId2 = null;
   var _setActiveCard = null;
+  var _redrawDependencies2 = null;
   function registerDetailPanelCallbacks(callbacks) {
     _openTaskDetail = callbacks.openTaskDetail;
     _renderDetailPanel = callbacks.renderDetailPanel;
@@ -354,6 +432,9 @@
     _getDetailTaskId2 = callbacks.getDetailTaskId;
     _setActiveCard = callbacks.setActiveCard;
   }
+  function registerDependencyRedrawCallback2(callback) {
+    _redrawDependencies2 = callback;
+  }
   function attachCardListeners(body) {
     body.querySelectorAll(".card").forEach((card) => {
       attachDragListeners(card);
@@ -447,6 +528,9 @@
       if (detailTaskId2 !== null && _setActiveCard) {
         _setActiveCard(detailTaskId2);
       }
+      if (_redrawDependencies2) {
+        _redrawDependencies2();
+      }
       if (detailTaskId2 !== null) {
         await refreshOpenDetailPanel(detailTaskId2);
       }
@@ -512,10 +596,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 +617,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 +647,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 +689,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 +702,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 +753,7 @@
   function resetAddModal(elements) {
     elements.addTitle.value = "";
     elements.addBody.value = "";
-    elements.addPriority.value = "";
+    elements.addPriority.value = "medium";
     selectedTags = [];
     tagInputValue = "";
     tagFocusedIndex = -1;
@@ -764,6 +881,220 @@
     });
   }
 
+  // src/board/client/detailPanelApi.ts
+  var PANEL_MIN_WIDTH = 280;
+  var PANEL_MAX_WIDTH = 800;
+  var PANEL_DEFAULT_WIDTH = 400;
+  async function fetchComments(taskId) {
+    const res = await fetch("/api/tasks/" + taskId + "/comments");
+    if (!res.ok) throw new Error("Server error");
+    const data = await res.json();
+    return data.comments || [];
+  }
+  async function patchComment(commentId, content) {
+    const res = await fetch("/api/comments/" + commentId, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ content })
+    });
+    if (!res.ok) throw new Error("Server error");
+  }
+  async function deleteCommentRequest(commentId) {
+    const res = await fetch("/api/comments/" + commentId, { method: "DELETE" });
+    if (!res.ok) throw new Error("Server error");
+  }
+  async function postComment(taskId, content) {
+    const res = await fetch("/api/tasks/" + taskId + "/comments", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ content })
+    });
+    if (!res.ok) throw new Error("Server error");
+  }
+  async function fetchTaskDetail(taskId) {
+    const res = await fetch("/api/tasks/" + taskId);
+    if (!res.ok) throw new Error("Server error");
+    return res.json();
+  }
+  async function patchTask(taskId, fields) {
+    const res = await fetch("/api/tasks/" + taskId, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(fields)
+    });
+    if (!res.ok) throw new Error("Server error");
+    return fetchTaskDetail(taskId);
+  }
+  async function syncTimestampAfterSave() {
+    try {
+      const tsRes = await fetch("/api/board/updated-at");
+      if (tsRes.ok) {
+        const tsData = await tsRes.json();
+        setLastUpdatedAt(tsData.updatedAt);
+      }
+    } catch {
+    }
+  }
+  async function fetchPanelWidthFromConfig() {
+    let targetWidth = PANEL_DEFAULT_WIDTH;
+    try {
+      const res = await fetch("/api/config");
+      if (res.ok) {
+        const data = await res.json();
+        const savedWidth = data && data.board && data.board.detailPaneWidth;
+        if (typeof savedWidth === "number" && savedWidth >= PANEL_MIN_WIDTH && savedWidth <= PANEL_MAX_WIDTH) {
+          targetWidth = savedWidth;
+        }
+      }
+    } catch {
+    }
+    return targetWidth;
+  }
+  function savePanelWidthToConfig(width) {
+    fetch("/api/config", {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ board: { detailPaneWidth: width } })
+    }).catch(function() {
+    });
+  }
+
+  // src/board/client/detailPanelHtml.ts
+  function renderCommentItemHtml(comment, taskId) {
+    const authorText = comment.author ? escapeHtmlClient(comment.author) : "Anonymous";
+    const dateRel = relativeTime(comment.created_at);
+    const dateAbs = escapeHtmlClient(comment.created_at);
+    const contentText = escapeHtmlClient(comment.content);
+    let html = '<div class="comment-item" data-comment-id="' + comment.id + '">';
+    html += '<div class="comment-meta">';
+    html += '<span class="comment-author">' + authorText + "</span>";
+    html += '<span class="comment-date" title="' + dateAbs + '">' + dateRel + "</span>";
+    html += '<span class="comment-actions">';
+    html += '<button class="comment-action-btn" title="Edit" data-action="start-comment-edit" data-comment-id="' + comment.id + '">&#9998;</button>';
+    html += '<button class="comment-action-btn danger" title="Delete" data-action="delete-comment" data-comment-id="' + comment.id + '" data-task-id="' + taskId + '">&#128465;</button>';
+    html += "</span></div>";
+    html += '<div class="comment-content" id="comment-content-' + comment.id + '">' + contentText + "</div>";
+    html += '<div id="comment-edit-' + comment.id + '" style="display:none;">';
+    html += '<textarea class="comment-edit-area" id="comment-edit-area-' + comment.id + '">' + contentText + "</textarea>";
+    html += '<div class="comment-edit-actions">';
+    html += '<button class="comment-btn" data-action="save-comment-edit" data-comment-id="' + comment.id + '" data-task-id="' + taskId + '">Save</button>';
+    html += '<button class="comment-btn" data-action="cancel-comment-edit" data-comment-id="' + comment.id + '">Cancel</button>';
+    html += "</div></div></div>";
+    return html;
+  }
+  function renderAddCommentFormHtml(taskId) {
+    let html = '<button class="add-comment-trigger" id="add-comment-trigger" data-action="open-add-comment">+ Add comment...</button>';
+    html += '<div class="add-comment-form" id="add-comment-form">';
+    html += '<textarea class="add-comment-textarea" id="add-comment-text" placeholder="Write a comment..."></textarea>';
+    html += "<div>";
+    html += '<button class="add-comment-submit" data-action="submit-comment" data-task-id="' + taskId + '">Add Comment</button>';
+    html += '<button class="add-comment-cancel" data-action="close-add-comment">Cancel</button>';
+    html += "</div></div>";
+    return html;
+  }
+  function renderStatusField(currentStatus, allStatuses, statusLabels) {
+    let html = '<div class="detail-field">';
+    html += '<div class="detail-field-label">Status</div>';
+    html += '<select id="detail-edit-status" class="detail-edit-select">';
+    allStatuses.forEach((s) => {
+      const selected = s === currentStatus ? " selected" : "";
+      html += '<option value="' + s + '"' + selected + ">" + statusLabels[s] + "</option>";
+    });
+    html += "</select></div>";
+    return html;
+  }
+  function renderPriorityField(currentPriority, allPriorities) {
+    let html = '<div class="detail-field">';
+    html += '<div class="detail-field-label">Priority</div>';
+    html += '<select id="detail-edit-priority" class="detail-edit-select">';
+    html += '<option value="">None</option>';
+    allPriorities.forEach((p) => {
+      const selected = currentPriority === p ? " selected" : "";
+      html += '<option value="' + p + '"' + selected + ">" + p.charAt(0).toUpperCase() + p.slice(1) + "</option>";
+    });
+    html += "</select></div>";
+    return html;
+  }
+  function renderRelationsHtml(parent, blockedBy, blocking) {
+    let html = '<div class="detail-relations">';
+    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 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 detail-relation-link" data-task-id="' + t.id + '">#' + t.id + "</span>";
+      });
+      html += "</div></div>";
+    }
+    if (blocking.length > 0) {
+      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 detail-relation-link" data-task-id="' + t.id + '">#' + t.id + "</span>";
+      });
+      html += "</div></div>";
+    }
+    html += "</div>";
+    return html;
+  }
+  function renderMetadataTable(metadata) {
+    if (metadata.length === 0) return "";
+    let html = '<div class="detail-field"><div class="detail-field-label">Metadata</div>';
+    html += '<table class="detail-meta-table">';
+    metadata.forEach((m) => {
+      html += "<tr><td>" + escapeHtmlClient(m.key) + "</td><td>" + escapeHtmlClient(m.value) + "</td></tr>";
+    });
+    html += "</table></div>";
+    return html;
+  }
+  function renderEditableTextFields(task) {
+    let html = '<div class="detail-field"><div class="detail-field-label">Title</div>';
+    html += '<input id="detail-edit-title" class="detail-edit-input" type="text" value="' + escapeHtmlClient(task.title) + '">';
+    html += "</div>";
+    html += '<div class="detail-field description-field-wrapper"><div class="detail-field-label">Description</div>';
+    html += '<textarea id="detail-edit-body" class="detail-edit-textarea">' + escapeHtmlClient(task.body || "") + "</textarea>";
+    html += "</div>";
+    return html;
+  }
+  function renderDetailPanelHtml(data) {
+    const task = data.task;
+    const metadata = data.metadata || [];
+    const blockedBy = data.blockedBy || [];
+    const blocking = data.blocking || [];
+    const parent = data.parent || null;
+    const win = window;
+    const allStatuses = win.allStatuses;
+    const statusLabels = win.statusLabels;
+    const allPriorities = win.allPriorities;
+    let html = "";
+    html += renderStatusField(task.status, allStatuses, statusLabels);
+    html += renderPriorityField(task.priority, allPriorities);
+    html += '<div class="detail-field"><div class="detail-field-label">Tags</div>';
+    html += '<div id="detail-tags-container"></div></div>';
+    const hasRelations = parent || blockedBy.length > 0 || blocking.length > 0;
+    if (hasRelations) {
+      html += renderRelationsHtml(parent, blockedBy, blocking);
+    }
+    html += renderMetadataTable(metadata);
+    html += renderEditableTextFields(task);
+    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>';
+  }
+  function autoResizeTextarea(el) {
+    const scrollContainer = el.closest(".detail-tab-content");
+    const scrollTop = scrollContainer?.scrollTop ?? 0;
+    el.style.height = "auto";
+    el.style.height = el.scrollHeight + "px";
+    if (scrollContainer) scrollContainer.scrollTop = scrollTop;
+  }
+
   // src/board/client/detailPanel.ts
   var detailTaskId = null;
   var lastTab = "details";
@@ -802,10 +1133,7 @@
     const pane = document.getElementById("detail-tab-content-comments");
     if (!pane) return;
     try {
-      const res = await fetch("/api/tasks/" + taskId + "/comments");
-      if (!res.ok) throw new Error("Server error");
-      const data = await res.json();
-      const comments = data.comments || [];
+      const comments = await fetchComments(taskId);
       if (tabBtn) tabBtn.textContent = "Comments (" + comments.length + ")";
       renderComments(taskId, comments);
     } catch (err) {
@@ -813,38 +1141,6 @@
       if (pane) pane.innerHTML = '<div style="padding:20px;font-size:12px;color:#94a3b8;">Failed to load comments</div>';
     }
   }
-  function renderCommentItemHtml(comment, taskId) {
-    const authorText = comment.author ? escapeHtmlClient(comment.author) : "Anonymous";
-    const dateRel = relativeTime(comment.created_at);
-    const dateAbs = escapeHtmlClient(comment.created_at);
-    const contentText = escapeHtmlClient(comment.content);
-    let html = '<div class="comment-item" data-comment-id="' + comment.id + '">';
-    html += '<div class="comment-meta">';
-    html += '<span class="comment-author">' + authorText + "</span>";
-    html += '<span class="comment-date" title="' + dateAbs + '">' + dateRel + "</span>";
-    html += '<span class="comment-actions">';
-    html += '<button class="comment-action-btn" title="Edit" data-action="start-comment-edit" data-comment-id="' + comment.id + '">&#9998;</button>';
-    html += '<button class="comment-action-btn danger" title="Delete" data-action="delete-comment" data-comment-id="' + comment.id + '" data-task-id="' + taskId + '">&#128465;</button>';
-    html += "</span></div>";
-    html += '<div class="comment-content" id="comment-content-' + comment.id + '">' + contentText + "</div>";
-    html += '<div id="comment-edit-' + comment.id + '" style="display:none;">';
-    html += '<textarea class="comment-edit-area" id="comment-edit-area-' + comment.id + '">' + contentText + "</textarea>";
-    html += '<div class="comment-edit-actions">';
-    html += '<button class="comment-btn" data-action="save-comment-edit" data-comment-id="' + comment.id + '" data-task-id="' + taskId + '">Save</button>';
-    html += '<button class="comment-btn" data-action="cancel-comment-edit" data-comment-id="' + comment.id + '">Cancel</button>';
-    html += "</div></div></div>";
-    return html;
-  }
-  function renderAddCommentFormHtml(taskId) {
-    let html = '<button class="add-comment-trigger" id="add-comment-trigger" data-action="open-add-comment">+ Add comment...</button>';
-    html += '<div class="add-comment-form" id="add-comment-form">';
-    html += '<textarea class="add-comment-textarea" id="add-comment-text" placeholder="Write a comment..."></textarea>';
-    html += "<div>";
-    html += '<button class="add-comment-submit" data-action="submit-comment" data-task-id="' + taskId + '">Add Comment</button>';
-    html += '<button class="add-comment-cancel" data-action="close-add-comment">Cancel</button>';
-    html += "</div></div>";
-    return html;
-  }
   function renderComments(taskId, comments) {
     const pane = document.getElementById("detail-tab-content-comments");
     if (!pane) return;
@@ -903,12 +1199,7 @@
       return;
     }
     try {
-      const res = await fetch("/api/comments/" + commentId, {
-        method: "PATCH",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ content })
-      });
-      if (!res.ok) throw new Error("Server error");
+      await patchComment(commentId, content);
       await loadComments(taskId);
     } catch {
       showToast("Failed to update comment");
@@ -917,8 +1208,7 @@
   async function deleteComment(commentId, taskId) {
     if (!confirm("Delete this comment?")) return;
     try {
-      const res = await fetch("/api/comments/" + commentId, { method: "DELETE" });
-      if (!res.ok) throw new Error("Server error");
+      await deleteCommentRequest(commentId);
       await loadComments(taskId);
     } catch {
       showToast("Failed to delete comment");
@@ -933,12 +1223,7 @@
       return;
     }
     try {
-      const res = await fetch("/api/tasks/" + taskId + "/comments", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ content })
-      });
-      if (!res.ok) throw new Error("Server error");
+      await postComment(taskId, content);
       await loadComments(taskId);
     } catch {
       showToast("Failed to add comment");
@@ -977,103 +1262,6 @@
     const taskId = target.dataset.taskId ? Number(target.dataset.taskId) : NaN;
     dispatchCommentAction(action, commentId, taskId);
   }
-  function renderStatusField(currentStatus, allStatuses, statusLabels) {
-    let html = '<div class="detail-field">';
-    html += '<div class="detail-field-label">Status</div>';
-    html += '<select id="detail-edit-status" class="detail-edit-select">';
-    allStatuses.forEach((s) => {
-      const selected = s === currentStatus ? " selected" : "";
-      html += '<option value="' + s + '"' + selected + ">" + statusLabels[s] + "</option>";
-    });
-    html += "</select></div>";
-    return html;
-  }
-  function renderPriorityField(currentPriority, allPriorities) {
-    let html = '<div class="detail-field">';
-    html += '<div class="detail-field-label">Priority</div>';
-    html += '<select id="detail-edit-priority" class="detail-edit-select">';
-    html += '<option value="">None</option>';
-    allPriorities.forEach((p) => {
-      const selected = currentPriority === p ? " selected" : "";
-      html += '<option value="' + p + '"' + selected + ">" + p.charAt(0).toUpperCase() + p.slice(1) + "</option>";
-    });
-    html += "</select></div>";
-    return html;
-  }
-  function renderRelationsHtml(parent, blockedBy, blocking) {
-    let html = '<div class="detail-relations">';
-    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>";
-    }
-    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 += "</div></div>";
-    }
-    if (blocking.length > 0) {
-      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 += "</div></div>";
-    }
-    html += "</div>";
-    return html;
-  }
-  function autoResizeTextarea(el) {
-    el.style.height = "auto";
-    el.style.height = el.scrollHeight + "px";
-  }
-  function renderMetadataTable(metadata) {
-    const otherMeta = metadata.filter((m) => m.key !== "priority");
-    if (otherMeta.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) => {
-      html += "<tr><td>" + escapeHtmlClient(m.key) + "</td><td>" + escapeHtmlClient(m.value) + "</td></tr>";
-    });
-    html += "</table></div>";
-    return html;
-  }
-  function renderEditableTextFields(task) {
-    let html = '<div class="detail-field"><div class="detail-field-label">Title</div>';
-    html += '<input id="detail-edit-title" class="detail-edit-input" type="text" value="' + escapeHtmlClient(task.title) + '">';
-    html += "</div>";
-    html += '<div class="detail-field description-field-wrapper"><div class="detail-field-label">Description</div>';
-    html += '<textarea id="detail-edit-body" class="detail-edit-textarea">' + escapeHtmlClient(task.body || "") + "</textarea>";
-    html += "</div>";
-    return html;
-  }
-  function renderDetailPanelHtml(data) {
-    const task = data.task;
-    const metadata = data.metadata || [];
-    const blockedBy = data.blockedBy || [];
-    const blocking = data.blocking || [];
-    const parent = data.parent || null;
-    const win = window;
-    const allStatuses = win.allStatuses;
-    const statusLabels = win.statusLabels;
-    const allPriorities = win.allPriorities;
-    let html = "";
-    html += renderStatusField(task.status, allStatuses, statusLabels);
-    html += renderPriorityField(task.priority, allPriorities);
-    html += '<div class="detail-field"><div class="detail-field-label">Tags</div>';
-    html += '<div id="detail-tags-container"></div></div>';
-    const hasRelations = parent || blockedBy.length > 0 || blocking.length > 0;
-    if (hasRelations) {
-      html += renderRelationsHtml(parent, blockedBy, blocking);
-    }
-    html += renderMetadataTable(metadata);
-    html += renderEditableTextFields(task);
-    return html;
-  }
   function renderDetailPanel(data) {
     document.getElementById("detail-panel-update-warning")?.remove();
     const detailPanelTitle = document.getElementById("detail-panel-title");
@@ -1085,6 +1273,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) {
@@ -1100,7 +1295,8 @@
         autoResizeTextarea(textarea);
       });
     }
-    loadAllTags().then(() => renderTagsSection([...tags])).catch((err) => {
+    renderTagsSection([...tags]);
+    loadAllTags().catch((err) => {
       console.error("[agkan] renderDetailPanel tags failed", err);
     });
     loadComments(task.id);
@@ -1110,9 +1306,7 @@
     const detailPanel = document.getElementById("detail-panel");
     const PANEL_DEFAULT_WIDTH2 = 400;
     try {
-      const res = await fetch("/api/tasks/" + taskId);
-      if (!res.ok) throw new Error("Server error");
-      const data = await res.json();
+      const data = await fetchTaskDetail(taskId);
       renderDetailPanel(data);
       setActiveCard(Number(taskId));
       if (!detailPanel.classList.contains("open")) {
@@ -1148,9 +1342,8 @@
     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.addEventListener("click", async () => {
       try {
-        const taskRes = await fetch("/api/tasks/" + detailTaskId);
-        if (taskRes.ok) {
-          const taskData = await taskRes.json();
+        if (detailTaskId !== null) {
+          const taskData = await fetchTaskDetail(detailTaskId);
           renderDetailPanel(taskData);
         }
       } catch {
@@ -1175,24 +1368,13 @@
       priority: priorityEl ? priorityEl.value || null : null
     };
   }
-  async function patchAndReloadDetail(taskId, fields) {
-    const res = await fetch("/api/tasks/" + taskId, {
-      method: "PATCH",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(fields)
-    });
-    if (!res.ok) throw new Error("Server error");
-    const getRes = await fetch("/api/tasks/" + taskId);
-    if (!getRes.ok) throw new Error("Failed to fetch updated task");
-    const data = await getRes.json();
-    renderDetailPanel(data);
-  }
   async function saveDetailTask() {
     if (detailTaskId === null) return;
     const fields = collectEditedTaskFields();
     if (!fields) return;
     try {
-      await patchAndReloadDetail(detailTaskId, fields);
+      const data = await patchTask(detailTaskId, fields);
+      renderDetailPanel(data);
       showToast("Task saved successfully");
       await syncTimestampAfterSave();
       refreshBoardCards();
@@ -1200,32 +1382,8 @@
       showToast("Failed to update task");
     }
   }
-  async function syncTimestampAfterSave() {
-    try {
-      const tsRes = await fetch("/api/board/updated-at");
-      if (tsRes.ok) {
-        const tsData = await tsRes.json();
-        setLastUpdatedAt(tsData.updatedAt);
-      }
-    } catch {
-    }
-  }
-  var PANEL_MIN_WIDTH = 280;
-  var PANEL_MAX_WIDTH = 800;
-  var PANEL_DEFAULT_WIDTH = 400;
   async function initPanelWidthFromConfig(detailPanel) {
-    let targetWidth = PANEL_DEFAULT_WIDTH;
-    try {
-      const res = await fetch("/api/config");
-      if (res.ok) {
-        const data = await res.json();
-        const savedWidth = data && data.board && data.board.detailPaneWidth;
-        if (typeof savedWidth === "number" && savedWidth >= PANEL_MIN_WIDTH && savedWidth <= PANEL_MAX_WIDTH) {
-          targetWidth = savedWidth;
-        }
-      }
-    } catch {
-    }
+    const targetWidth = await fetchPanelWidthFromConfig();
     detailPanel.dataset.preferredWidth = String(targetWidth);
   }
   function attachResizeMousedown(resizeHandle, detailPanel) {
@@ -1250,12 +1408,7 @@
         detailPanel.style.transition = "";
         const currentWidth = detailPanel.offsetWidth;
         detailPanel.dataset.preferredWidth = String(currentWidth);
-        fetch("/api/config", {
-          method: "PUT",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ board: { detailPaneWidth: currentWidth } })
-        }).catch(function() {
-        });
+        savePanelWidthToConfig(currentWidth);
         document.removeEventListener("mousemove", onMouseMove);
         document.removeEventListener("mouseup", onMouseUp);
       }
@@ -1268,14 +1421,17 @@
     initPanelWidthFromConfig(detailPanel);
     attachResizeMousedown(resizeHandle, detailPanel);
   }
-  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>';
-  }
   function initDetailPanel() {
     const boardContainer = document.querySelector(".board-container");
     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();
@@ -1687,6 +1843,232 @@
     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/main.ts
   initDragDrop();
   initAutoScroll();
@@ -1696,4 +2078,5 @@
   initBoardPolling();
   initFilters();
   initBurgerMenu();
+  initDependencyVisualization();
 })();