agkan 2.14.3 → 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;
@@ -903,14 +1020,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 +1035,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 +1043,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>";
@@ -969,7 +1085,7 @@
     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></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");
@@ -1157,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) {
@@ -1303,6 +1426,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();
@@ -1714,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();
@@ -1723,4 +2078,5 @@
   initBoardPolling();
   initFilters();
   initBurgerMenu();
+  initDependencyVisualization();
 })();

package/dist/board/server.d.ts

@@ -5,7 +5,7 @@ import { TagService } from '../services/TagService';
 import { MetadataService } from '../services/MetadataService';
 import { CommentService } from '../services/CommentService';
 import { TaskBlockService } from '../services/TaskBlockService';
-import { StorageProvider } from '../db/types/storage';
-export declare function createBoardApp(taskService?: TaskService, taskTagService?: TaskTagService, metadataService?: MetadataService, db?: StorageProvider, boardTitle?: string, tagService?: TagService, configDir?: string, commentService?: CommentService, taskBlockService?: TaskBlockService): Hono;
+import { StorageBackend } from '../db/types/repository';
+export declare function createBoardApp(taskService?: TaskService, taskTagService?: TaskTagService, metadataService?: MetadataService, db?: StorageBackend, boardTitle?: string, tagService?: TagService, configDir?: string, commentService?: CommentService, taskBlockService?: TaskBlockService): Hono;
 export declare function startBoardServer(port: number, boardTitle?: string): void;
 //# sourceMappingURL=server.d.ts.map

package/dist/board/server.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../../src/board/server.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAG5B,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAEhE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAItD,wBAAgB,cAAc,CAC5B,WAAW,CAAC,EAAE,WAAW,EACzB,cAAc,CAAC,EAAE,cAAc,EAC/B,eAAe,CAAC,EAAE,eAAe,EACjC,EAAE,CAAC,EAAE,eAAe,EACpB,UAAU,CAAC,EAAE,MAAM,EACnB,UAAU,CAAC,EAAE,UAAU,EACvB,SAAS,CAAC,EAAE,MAAM,EAClB,cAAc,CAAC,EAAE,cAAc,EAC/B,gBAAgB,CAAC,EAAE,gBAAgB,GAClC,IAAI,CAiBN;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAWxE"}
+{"version":3,"file":"server.d.ts","sourceRoot":"","sources":["../../src/board/server.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAG5B,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAEhE,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAIxD,wBAAgB,cAAc,CAC5B,WAAW,CAAC,EAAE,WAAW,EACzB,cAAc,CAAC,EAAE,cAAc,EAC/B,eAAe,CAAC,EAAE,eAAe,EACjC,EAAE,CAAC,EAAE,cAAc,EACnB,UAAU,CAAC,EAAE,MAAM,EACnB,UAAU,CAAC,EAAE,UAAU,EACvB,SAAS,CAAC,EAAE,MAAM,EAClB,cAAc,CAAC,EAAE,cAAc,EAC/B,gBAAgB,CAAC,EAAE,gBAAgB,GAClC,IAAI,CAiBN;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAWxE"}

package/dist/board/server.js

@@ -20,12 +20,12 @@ const boardRoutes_1 = require("./boardRoutes");
 function createBoardApp(taskService, taskTagService, metadataService, db, boardTitle, tagService, configDir, commentService, taskBlockService) {
     const app = new hono_1.Hono();
     const resolvedConfigDir = configDir ?? path_1.default.join(process.cwd(), (0, config_1.getDefaultDirName)());
-    const resolvedDb = db ?? (0, connection_1.getDatabase)();
+    const resolvedDb = db ?? (0, connection_1.getStorageBackend)();
     const services = {
-        ts: taskService ?? new TaskService_1.TaskService(),
-        tts: taskTagService ?? new TaskTagService_1.TaskTagService(),
-        tags: tagService ?? new TagService_1.TagService(),
-        ms: metadataService ?? new MetadataService_1.MetadataService(),
+        ts: taskService ?? new TaskService_1.TaskService(resolvedDb),
+        tts: taskTagService ?? new TaskTagService_1.TaskTagService(resolvedDb),
+        tags: tagService ?? new TagService_1.TagService(resolvedDb),
+        ms: metadataService ?? new MetadataService_1.MetadataService(resolvedDb),
         cs: commentService ?? new CommentService_1.CommentService(resolvedDb),
         tbs: taskBlockService ?? new TaskBlockService_1.TaskBlockService(resolvedDb),
         database: resolvedDb,

package/dist/board/server.js.map

@@ -1 +1 @@
-{"version":3,"file":"server.js","sourceRoot":"","sources":["../../src/board/server.ts"],"names":[],"mappings":";;;;;AAcA,wCA2BC;AAED,4CAWC;AAtDD,+BAA4B;AAC5B,mDAA0C;AAC1C,gDAAwB;AACxB,yDAAsD;AACtD,+DAA4D;AAC5D,uDAAoD;AACpD,iEAA8D;AAC9D,+DAA4D;AAC5D,mEAAgE;AAChE,iDAA+C;AAE/C,yCAAiD;AACjD,+CAAmE;AAEnE,SAAgB,cAAc,CAC5B,WAAyB,EACzB,cAA+B,EAC/B,eAAiC,EACjC,EAAoB,EACpB,UAAmB,EACnB,UAAuB,EACvB,SAAkB,EAClB,cAA+B,EAC/B,gBAAmC;IAEnC,MAAM,GAAG,GAAG,IAAI,WAAI,EAAE,CAAC;IACvB,MAAM,iBAAiB,GAAG,SAAS,IAAI,cAAI,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,IAAA,0BAAiB,GAAE,CAAC,CAAC;IACrF,MAAM,UAAU,GAAG,EAAE,IAAI,IAAA,wBAAW,GAAE,CAAC;IACvC,MAAM,QAAQ,GAAkB;QAC9B,EAAE,EAAE,WAAW,IAAI,IAAI,yBAAW,EAAE;QACpC,GAAG,EAAE,cAAc,IAAI,IAAI,+BAAc,EAAE;QAC3C,IAAI,EAAE,UAAU,IAAI,IAAI,uBAAU,EAAE;QACpC,EAAE,EAAE,eAAe,IAAI,IAAI,iCAAe,EAAE;QAC5C,EAAE,EAAE,cAAc,IAAI,IAAI,+BAAc,CAAC,UAAU,CAAC;QACpD,GAAG,EAAE,gBAAgB,IAAI,IAAI,mCAAgB,CAAC,UAAU,CAAC;QACzD,QAAQ,EAAE,UAAU;QACpB,UAAU;QACV,SAAS,EAAE,iBAAiB;KAC7B,CAAC;IACF,IAAA,iCAAmB,EAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;IACnC,OAAO,GAAG,CAAC;AACb,CAAC;AAED,SAAgB,gBAAgB,CAAC,IAAY,EAAE,UAAmB;IAChE,MAAM,GAAG,GAAG,cAAc,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC;IACnF,IAAA,mBAAK,EACH;QACE,KAAK,EAAE,GAAG,CAAC,KAAK;QAChB,IAAI;KACL,EACD,CAAC,IAAI,EAAE,EAAE;QACP,OAAO,CAAC,GAAG,CAAC,yCAAyC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;IACpE,CAAC,CACF,CAAC;AACJ,CAAC"}
+{"version":3,"file":"server.js","sourceRoot":"","sources":["../../src/board/server.ts"],"names":[],"mappings":";;;;;AAcA,wCA2BC;AAED,4CAWC;AAtDD,+BAA4B;AAC5B,mDAA0C;AAC1C,gDAAwB;AACxB,yDAAsD;AACtD,+DAA4D;AAC5D,uDAAoD;AACpD,iEAA8D;AAC9D,+DAA4D;AAC5D,mEAAgE;AAChE,iDAAqD;AAErD,yCAAiD;AACjD,+CAAmE;AAEnE,SAAgB,cAAc,CAC5B,WAAyB,EACzB,cAA+B,EAC/B,eAAiC,EACjC,EAAmB,EACnB,UAAmB,EACnB,UAAuB,EACvB,SAAkB,EAClB,cAA+B,EAC/B,gBAAmC;IAEnC,MAAM,GAAG,GAAG,IAAI,WAAI,EAAE,CAAC;IACvB,MAAM,iBAAiB,GAAG,SAAS,IAAI,cAAI,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,IAAA,0BAAiB,GAAE,CAAC,CAAC;IACrF,MAAM,UAAU,GAAG,EAAE,IAAI,IAAA,8BAAiB,GAAE,CAAC;IAC7C,MAAM,QAAQ,GAAkB;QAC9B,EAAE,EAAE,WAAW,IAAI,IAAI,yBAAW,CAAC,UAAU,CAAC;QAC9C,GAAG,EAAE,cAAc,IAAI,IAAI,+BAAc,CAAC,UAAU,CAAC;QACrD,IAAI,EAAE,UAAU,IAAI,IAAI,uBAAU,CAAC,UAAU,CAAC;QAC9C,EAAE,EAAE,eAAe,IAAI,IAAI,iCAAe,CAAC,UAAU,CAAC;QACtD,EAAE,EAAE,cAAc,IAAI,IAAI,+BAAc,CAAC,UAAU,CAAC;QACpD,GAAG,EAAE,gBAAgB,IAAI,IAAI,mCAAgB,CAAC,UAAU,CAAC;QACzD,QAAQ,EAAE,UAAU;QACpB,UAAU;QACV,SAAS,EAAE,iBAAiB;KAC7B,CAAC;IACF,IAAA,iCAAmB,EAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;IACnC,OAAO,GAAG,CAAC;AACb,CAAC;AAED,SAAgB,gBAAgB,CAAC,IAAY,EAAE,UAAmB;IAChE,MAAM,GAAG,GAAG,cAAc,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC;IACnF,IAAA,mBAAK,EACH;QACE,KAAK,EAAE,GAAG,CAAC,KAAK;QAChB,IAAI;KACL,EACD,CAAC,IAAI,EAAE,EAAE;QACP,OAAO,CAAC,GAAG,CAAC,yCAAyC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;IACpE,CAAC,CACF,CAAC;AACJ,CAAC"}

package/dist/cli/commands/agent-guide.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"agent-guide.d.ts","sourceRoot":"","sources":["../../../src/cli/commands/agent-guide.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAmTpC,wBAAgB,sBAAsB,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAO7D"}
+{"version":3,"file":"agent-guide.d.ts","sourceRoot":"","sources":["../../../src/cli/commands/agent-guide.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAyTpC,wBAAgB,sBAAsB,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAO7D"}

package/dist/cli/commands/agent-guide.js

@@ -49,6 +49,12 @@ agkan task count --status ready --quiet  # Output number only
 # Update parent-child relationship
 agkan task update-parent <id> <parent_id>
 agkan task update-parent <id> null  # Remove parent
+
+# Copy a task
+agkan task copy <id>
+agkan task copy <id> --status ready    # Specify destination status (default: backlog)
+agkan task copy <id> --no-tags         # Do not copy tags
+agkan task copy <id> --json            # Output in JSON format
 \`\`\`
 
 ### Blocking Relationships

package/dist/cli/commands/agent-guide.js.map

@@ -1 +1 @@
-{"version":3,"file":"agent-guide.js","sourceRoot":"","sources":["../../../src/cli/commands/agent-guide.ts"],"names":[],"mappings":";AAAA;;GAEG;;AAqTH,wDAOC;AAxTD,MAAM,mBAAmB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+S3B,CAAC;AAEF,SAAgB,sBAAsB,CAAC,OAAgB;IACrD,OAAO;SACJ,OAAO,CAAC,aAAa,CAAC;SACtB,WAAW,CAAC,kCAAkC,CAAC;SAC/C,MAAM,CAAC,GAAG,EAAE;QACX,OAAO,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;IACnC,CAAC,CAAC,CAAC;AACP,CAAC"}
+{"version":3,"file":"agent-guide.js","sourceRoot":"","sources":["../../../src/cli/commands/agent-guide.ts"],"names":[],"mappings":";AAAA;;GAEG;;AA2TH,wDAOC;AA9TD,MAAM,mBAAmB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqT3B,CAAC;AAEF,SAAgB,sBAAsB,CAAC,OAAgB;IACrD,OAAO;SACJ,OAAO,CAAC,aAAa,CAAC;SACtB,WAAW,CAAC,kCAAkC,CAAC;SAC/C,MAAM,CAAC,GAAG,EAAE;QACX,OAAO,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;IACnC,CAAC,CAAC,CAAC;AACP,CAAC"}

package/dist/cli/commands/board.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"board.d.ts","sourceRoot":"","sources":["../../../src/cli/commands/board.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAKpC,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAyBxD"}
+{"version":3,"file":"board.d.ts","sourceRoot":"","sources":["../../../src/cli/commands/board.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AA6MpC,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAsBxD"}