agkan 2.10.0 → 2.12.0

package/dist/board/client/board.js

@@ -0,0 +1,1160 @@
+"use strict";
+(() => {
+  // src/board/client/utils.ts
+  function escapeHtmlClient(str) {
+    if (!str) return "";
+    const div = document.createElement("div");
+    div.textContent = String(str);
+    return div.innerHTML;
+  }
+  function relativeTime(isoStr) {
+    if (!isoStr) return "";
+    const diff = Date.now() - new Date(isoStr).getTime();
+    const sec = Math.floor(diff / 1e3);
+    if (sec < 60) return "just now";
+    const min = Math.floor(sec / 60);
+    if (min < 60) return min + "m ago";
+    const hr = Math.floor(min / 60);
+    if (hr < 24) return hr + "h ago";
+    const day = Math.floor(hr / 24);
+    if (day < 30) return day + "d ago";
+    const mo = Math.floor(day / 30);
+    if (mo < 12) return mo + "mo ago";
+    return Math.floor(mo / 12) + "y ago";
+  }
+  function showToast(msg) {
+    const toast = document.getElementById("toast");
+    if (!toast) return;
+    if (msg) toast.textContent = msg;
+    toast.classList.add("show");
+    setTimeout(() => toast.classList.remove("show"), 3e3);
+  }
+
+  // src/board/client/dragDrop.ts
+  var draggedCard = null;
+  var sourceBody = null;
+  function updateCount(status) {
+    const col = document.querySelector(`.column[data-status="${status}"]`);
+    if (!col) return;
+    const countEl = col.querySelector(".column-count");
+    const bodyEl = col.querySelector(".column-body");
+    if (countEl && bodyEl) {
+      countEl.textContent = String(bodyEl.children.length);
+    }
+  }
+  async function handleDrop(e, newStatus, colEl) {
+    e.preventDefault();
+    colEl.classList.remove("drag-over");
+    if (!draggedCard) return;
+    const taskId = draggedCard.dataset.id;
+    const oldStatus = draggedCard.dataset.status;
+    if (oldStatus === newStatus) return;
+    const targetBody = document.getElementById("col-" + newStatus);
+    const prevBody = sourceBody;
+    targetBody.appendChild(draggedCard);
+    draggedCard.dataset.status = newStatus;
+    updateCount(oldStatus);
+    updateCount(newStatus);
+    try {
+      const res = await fetch("/api/tasks/" + taskId, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ status: newStatus })
+      });
+      if (!res.ok) throw new Error("Server error");
+    } catch {
+      if (prevBody && draggedCard) {
+        prevBody.appendChild(draggedCard);
+        draggedCard.dataset.status = oldStatus;
+        updateCount(oldStatus);
+        updateCount(newStatus);
+      }
+      showToast();
+    }
+  }
+  function attachDragListeners(card) {
+    card.addEventListener("dragstart", (e) => {
+      draggedCard = card;
+      sourceBody = card.parentElement;
+      card.classList.add("dragging");
+      if (e.dataTransfer) e.dataTransfer.effectAllowed = "move";
+    });
+    card.addEventListener("dragend", () => {
+      card.classList.remove("dragging");
+      draggedCard = null;
+      sourceBody = null;
+    });
+  }
+  function initDragDrop() {
+    document.querySelectorAll(".card").forEach((card) => {
+      attachDragListeners(card);
+    });
+    document.querySelectorAll(".column").forEach((col) => {
+      col.addEventListener("dragover", (e) => {
+        e.preventDefault();
+        col.classList.add("drag-over");
+      });
+      col.addEventListener("dragleave", () => col.classList.remove("drag-over"));
+      col.addEventListener("drop", (e) => handleDrop(e, col.dataset.status, col));
+    });
+  }
+
+  // src/board/client/autoScroll.ts
+  var autoScrollRAF = null;
+  var autoScrollBody = null;
+  var autoScrollDir = 0;
+  var AUTO_SCROLL_ZONE = 60;
+  var AUTO_SCROLL_SPEED = 8;
+  function stopAutoScroll() {
+    if (autoScrollRAF !== null) {
+      cancelAnimationFrame(autoScrollRAF);
+      autoScrollRAF = null;
+    }
+    autoScrollBody = null;
+    autoScrollDir = 0;
+  }
+  function startAutoScroll() {
+    if (autoScrollRAF !== null) return;
+    function step() {
+      if (autoScrollBody && autoScrollDir !== 0) {
+        autoScrollBody.scrollTop += autoScrollDir * AUTO_SCROLL_SPEED;
+        autoScrollRAF = requestAnimationFrame(step);
+      } else {
+        autoScrollRAF = null;
+      }
+    }
+    autoScrollRAF = requestAnimationFrame(step);
+  }
+  function attachAutoScrollToBody(body) {
+    body.addEventListener("dragover", (e) => {
+      const rect = body.getBoundingClientRect();
+      const y = e.clientY - rect.top;
+      if (y < AUTO_SCROLL_ZONE) {
+        autoScrollBody = body;
+        autoScrollDir = -1;
+        startAutoScroll();
+      } else if (y > rect.height - AUTO_SCROLL_ZONE) {
+        autoScrollBody = body;
+        autoScrollDir = 1;
+        startAutoScroll();
+      } else {
+        stopAutoScroll();
+      }
+    });
+    body.addEventListener("dragleave", stopAutoScroll);
+    body.addEventListener("drop", stopAutoScroll);
+  }
+  function initAutoScroll() {
+    document.querySelectorAll(".column-body").forEach(attachAutoScrollToBody);
+    document.addEventListener("dragend", stopAutoScroll);
+  }
+
+  // src/board/client/addTaskModal.ts
+  function initAddTaskModal() {
+    const addModal = document.getElementById("add-modal");
+    const addTitle = document.getElementById("add-title");
+    const addBody = document.getElementById("add-body");
+    const addPriority = document.getElementById("add-priority");
+    const addStatus = document.getElementById("add-status");
+    document.querySelectorAll(".add-btn").forEach((btn) => {
+      btn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        addStatus.value = btn.dataset.status;
+        addTitle.value = "";
+        addBody.value = "";
+        addPriority.value = "";
+        addModal.classList.add("show");
+        addTitle.focus();
+      });
+    });
+    document.getElementById("add-cancel")?.addEventListener("click", () => {
+      addModal.classList.remove("show");
+    });
+    addModal.addEventListener("click", (e) => {
+      if (e.target === addModal) addModal.classList.remove("show");
+    });
+    addTitle.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" && !e.isComposing) {
+        e.preventDefault();
+        document.getElementById("add-submit").click();
+      }
+    });
+    document.getElementById("add-submit")?.addEventListener("click", async () => {
+      const title = addTitle.value.trim();
+      if (!title) {
+        addTitle.focus();
+        return;
+      }
+      const status = addStatus.value;
+      addModal.classList.remove("show");
+      try {
+        const res = await fetch("/api/tasks", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            title,
+            body: addBody.value.trim() || null,
+            status,
+            priority: addPriority.value || null
+          })
+        });
+        if (!res.ok) throw new Error("Server error");
+        location.reload();
+      } catch {
+        showToast("Failed to add task");
+      }
+    });
+  }
+
+  // src/board/client/contextMenu.ts
+  function initContextMenu() {
+    const ctxMenu = document.getElementById("context-menu");
+    let ctxTargetCard = null;
+    document.addEventListener("contextmenu", (e) => {
+      const card = e.target.closest(".card");
+      if (!card) {
+        ctxMenu.style.display = "none";
+        return;
+      }
+      e.preventDefault();
+      ctxTargetCard = card;
+      ctxMenu.style.left = e.clientX + "px";
+      ctxMenu.style.top = e.clientY + "px";
+      ctxMenu.style.display = "block";
+    });
+    document.addEventListener("click", (e) => {
+      if (!e.target.closest("#context-menu")) {
+        ctxMenu.style.display = "none";
+        ctxTargetCard = null;
+      }
+    });
+    document.getElementById("ctx-delete")?.addEventListener("click", async (e) => {
+      e.stopPropagation();
+      ctxMenu.style.display = "none";
+      if (!ctxTargetCard) return;
+      const card = ctxTargetCard;
+      ctxTargetCard = null;
+      const taskId = card.dataset.id;
+      const status = card.dataset.status;
+      if (!confirm("Delete task #" + taskId + "?")) return;
+      card.remove();
+      updateCount(status);
+      try {
+        const res = await fetch("/api/tasks/" + taskId, { method: "DELETE" });
+        if (!res.ok) throw new Error("Server error");
+      } catch {
+        location.reload();
+        showToast("Failed to delete task");
+      }
+    });
+  }
+
+  // src/board/client/tags.ts
+  var allAvailableTags = [];
+  var _getDetailTaskId = null;
+  function registerGetDetailTaskId(fn) {
+    _getDetailTaskId = fn;
+  }
+  async function loadAllTags() {
+    try {
+      const res = await fetch("/api/tags");
+      if (!res.ok) return;
+      const data = await res.json();
+      allAvailableTags = data.tags || [];
+    } catch {
+    }
+  }
+  function renderTagsSection(currentTags) {
+    const container = document.getElementById("detail-tags-container");
+    if (!container) return;
+    container.innerHTML = '<div class="tag-select-wrapper"><div class="tag-select-control" id="tag-select-control"></div><div class="tag-select-dropdown" id="tag-select-dropdown"></div></div>';
+    const control = document.getElementById("tag-select-control");
+    const dropdown = document.getElementById("tag-select-dropdown");
+    let focusedOptionIndex = -1;
+    let inputValue = "";
+    function getFilteredTags() {
+      const currentTagIds = new Set(currentTags.map((t) => t.id));
+      const available = allAvailableTags.filter((t) => !currentTagIds.has(t.id));
+      if (!inputValue.trim()) return available;
+      const q = inputValue.toLowerCase();
+      return available.filter((t) => t.name.toLowerCase().includes(q));
+    }
+    const input = document.createElement("input");
+    input.className = "tag-select-input";
+    input.type = "text";
+    input.autocomplete = "off";
+    control.appendChild(input);
+    function renderPills() {
+      control.querySelectorAll(".tag-pill").forEach((p) => p.remove());
+      currentTags.forEach((t) => {
+        const pill = document.createElement("span");
+        pill.className = "tag-pill";
+        pill.dataset.tagId = String(t.id);
+        const label = document.createTextNode(t.name);
+        const removeBtn = document.createElement("button");
+        removeBtn.className = "tag-pill-remove";
+        removeBtn.title = "Remove tag";
+        removeBtn.setAttribute("data-tag-id", String(t.id));
+        removeBtn.innerHTML = "&times;";
+        removeBtn.addEventListener("click", async (e) => {
+          e.stopPropagation();
+          const detailTaskId2 = _getDetailTaskId ? _getDetailTaskId() : null;
+          try {
+            const res = await fetch("/api/tasks/" + detailTaskId2 + "/tags/" + t.id, {
+              method: "DELETE"
+            });
+            if (!res.ok) throw new Error("Server error");
+            const idx = currentTags.findIndex((x) => String(x.id) === String(t.id));
+            if (idx !== -1) currentTags.splice(idx, 1);
+            renderPills();
+            renderDropdown();
+          } catch {
+            showToast("Failed to remove tag");
+          }
+        });
+        pill.appendChild(label);
+        pill.appendChild(removeBtn);
+        control.insertBefore(pill, input);
+      });
+      input.placeholder = currentTags.length === 0 ? "Add tags..." : "";
+    }
+    function renderDropdown() {
+      const filtered = getFilteredTags();
+      dropdown.innerHTML = "";
+      focusedOptionIndex = -1;
+      if (filtered.length === 0) {
+        const noOpt = document.createElement("div");
+        noOpt.className = "tag-select-no-options";
+        noOpt.textContent = inputValue ? "No matching tags" : "No tags available";
+        dropdown.appendChild(noOpt);
+      } else {
+        filtered.forEach((t, i) => {
+          const opt = document.createElement("div");
+          opt.className = "tag-select-option";
+          opt.dataset.tagId = String(t.id);
+          opt.textContent = t.name;
+          opt.addEventListener("mouseover", () => setFocusedOption(i));
+          opt.addEventListener("mousedown", async (e) => {
+            e.preventDefault();
+            await addTag(String(t.id));
+          });
+          dropdown.appendChild(opt);
+        });
+      }
+    }
+    function setFocusedOption(index) {
+      const opts = dropdown.querySelectorAll(".tag-select-option");
+      opts.forEach((o, i) => o.classList.toggle("focused", i === index));
+      focusedOptionIndex = index;
+    }
+    function openDropdown() {
+      renderDropdown();
+      dropdown.classList.add("open");
+    }
+    function closeDropdown() {
+      dropdown.classList.remove("open");
+      focusedOptionIndex = -1;
+    }
+    async function addTag(tagId) {
+      const detailTaskId2 = _getDetailTaskId ? _getDetailTaskId() : null;
+      try {
+        const res = await fetch("/api/tasks/" + detailTaskId2 + "/tags", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ tagId: Number(tagId) })
+        });
+        if (!res.ok) throw new Error("Server error");
+        const tag = allAvailableTags.find((t) => String(t.id) === String(tagId));
+        if (tag) currentTags.push(tag);
+        input.value = "";
+        inputValue = "";
+        renderPills();
+        renderDropdown();
+      } catch {
+        showToast("Failed to add tag");
+      }
+    }
+    control.addEventListener("click", () => input.focus());
+    input.addEventListener("focus", () => openDropdown());
+    input.addEventListener("blur", () => setTimeout(() => closeDropdown(), 150));
+    input.addEventListener("input", () => {
+      inputValue = input.value;
+      renderDropdown();
+      if (!dropdown.classList.contains("open")) openDropdown();
+    });
+    input.addEventListener("keydown", async (e) => {
+      const filtered = getFilteredTags();
+      const opts = dropdown.querySelectorAll(".tag-select-option");
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setFocusedOption(Math.min(focusedOptionIndex + 1, opts.length - 1));
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setFocusedOption(Math.max(focusedOptionIndex - 1, 0));
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        if (focusedOptionIndex >= 0 && filtered[focusedOptionIndex]) {
+          await addTag(String(filtered[focusedOptionIndex].id));
+        }
+      } else if (e.key === "Escape") {
+        closeDropdown();
+        input.blur();
+      } else if (e.key === "Backspace" && input.value === "" && currentTags.length > 0) {
+        e.preventDefault();
+        const last = currentTags[currentTags.length - 1];
+        const detailTaskId2 = _getDetailTaskId ? _getDetailTaskId() : null;
+        try {
+          const res = await fetch("/api/tasks/" + detailTaskId2 + "/tags/" + last.id, {
+            method: "DELETE"
+          });
+          if (!res.ok) throw new Error("Server error");
+          currentTags.splice(currentTags.length - 1, 1);
+          renderPills();
+          renderDropdown();
+        } catch {
+          showToast("Failed to remove tag");
+        }
+      }
+    });
+    renderPills();
+  }
+
+  // src/board/client/boardPolling.ts
+  var lastUpdatedAt = null;
+  function setLastUpdatedAt(val) {
+    lastUpdatedAt = val;
+  }
+  var activeFilters = { tagIds: [], priorities: [], assignee: "" };
+  function buildFilterParams() {
+    const params = new URLSearchParams();
+    if (activeFilters.priorities.length > 0) {
+      params.set("priority", activeFilters.priorities.join(","));
+    }
+    if (activeFilters.tagIds.length > 0) {
+      params.set("tags", activeFilters.tagIds.join(","));
+    }
+    if (activeFilters.assignee) {
+      params.set("assignee", activeFilters.assignee);
+    }
+    return params;
+  }
+  var _openTaskDetail = null;
+  var _renderDetailPanel = null;
+  var _showUpdateWarning = null;
+  var _getDetailTaskId2 = null;
+  function registerDetailPanelCallbacks(callbacks) {
+    _openTaskDetail = callbacks.openTaskDetail;
+    _renderDetailPanel = callbacks.renderDetailPanel;
+    _showUpdateWarning = callbacks.showUpdateWarning;
+    _getDetailTaskId2 = callbacks.getDetailTaskId;
+  }
+  async function refreshBoardCards() {
+    const filterParams = buildFilterParams();
+    const url = "/api/board/cards" + (filterParams.toString() ? "?" + filterParams.toString() : "");
+    try {
+      const res = await fetch(url);
+      if (!res.ok) return;
+      const data = await res.json();
+      const columns = data.columns;
+      columns.forEach((col) => {
+        const body = document.getElementById("col-" + col.status);
+        if (!body) return;
+        body.innerHTML = col.html;
+        const colEl = body.closest(".column");
+        if (colEl) {
+          const countEl = colEl.querySelector(".column-count");
+          if (countEl) countEl.textContent = String(col.count);
+        }
+        body.querySelectorAll(".card").forEach((card) => {
+          attachDragListeners(card);
+          card.addEventListener("click", async (e) => {
+            if (e.defaultPrevented) return;
+            if (_openTaskDetail) await _openTaskDetail(card.dataset.id);
+          });
+        });
+        attachAutoScrollToBody(body);
+      });
+      const detailTaskId2 = _getDetailTaskId2 ? _getDetailTaskId2() : null;
+      if (detailTaskId2 !== null) {
+        const editableFields = ["detail-edit-title", "detail-edit-body", "detail-edit-status", "detail-edit-priority"];
+        const isEditing = editableFields.some((id) => document.activeElement && document.activeElement.id === id);
+        if (isEditing) {
+          if (_showUpdateWarning) _showUpdateWarning();
+        } else {
+          try {
+            const taskRes = await fetch("/api/tasks/" + detailTaskId2);
+            if (taskRes.ok) {
+              const taskData = await taskRes.json();
+              if (_renderDetailPanel) _renderDetailPanel(taskData);
+            }
+          } catch {
+          }
+        }
+      }
+    } catch {
+    }
+  }
+  async function pollBoardUpdates() {
+    if (draggedCard !== null) return;
+    try {
+      const res = await fetch("/api/board/updated-at");
+      if (!res.ok) return;
+      const data = await res.json();
+      const ts = data.updatedAt;
+      const detailPanel = document.getElementById("detail-panel");
+      if (lastUpdatedAt === null) {
+        lastUpdatedAt = ts;
+      } else if (ts !== lastUpdatedAt) {
+        lastUpdatedAt = ts;
+        if (detailPanel.classList.contains("open")) {
+          await refreshBoardCards();
+        } else {
+          location.reload();
+        }
+      }
+    } catch {
+    }
+  }
+  function initBoardPolling() {
+    setInterval(pollBoardUpdates, 5e3);
+    pollBoardUpdates();
+  }
+
+  // src/board/client/detailPanel.ts
+  var detailTaskId = null;
+  var lastTab = "details";
+  function getDetailTaskId() {
+    return detailTaskId;
+  }
+  function closeDetailPanel() {
+    const detailPanel = document.getElementById("detail-panel");
+    detailPanel.classList.remove("open");
+    detailPanel.style.width = "";
+    detailTaskId = null;
+  }
+  function switchTab(tabName) {
+    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);
+    });
+    const footer = document.getElementById("detail-panel-footer");
+    if (footer) footer.style.display = tabName === "details" ? "" : "none";
+  }
+  async function loadComments(taskId) {
+    const tabBtn = document.getElementById("detail-tab-comments");
+    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 || [];
+      if (tabBtn) tabBtn.textContent = "Comments (" + comments.length + ")";
+      renderComments(taskId, comments);
+    } catch {
+      if (pane) pane.innerHTML = '<div style="padding:20px;font-size:12px;color:#94a3b8;">Failed to load comments</div>';
+    }
+  }
+  function renderComments(taskId, comments) {
+    const pane = document.getElementById("detail-tab-content-comments");
+    if (!pane) return;
+    pane.style.padding = "16px 20px";
+    let html = "";
+    comments.forEach(function(comment) {
+      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);
+      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" onclick="startCommentEdit(' + comment.id + ')">&#9998;</button>';
+      html += '<button class="comment-action-btn danger" title="Delete" onclick="deleteComment(' + comment.id + "," + taskId + ')">&#128465;</button>';
+      html += "</span>";
+      html += "</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" onclick="saveCommentEdit(' + comment.id + "," + taskId + ')">Save</button>';
+      html += '<button class="comment-btn" onclick="cancelCommentEdit(' + comment.id + ')">Cancel</button>';
+      html += "</div></div>";
+      html += "</div>";
+    });
+    html += '<button class="add-comment-trigger" id="add-comment-trigger" onclick="openAddCommentForm()">+ 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" onclick="submitComment(' + taskId + ')">Add Comment</button>';
+    html += '<button class="add-comment-cancel" onclick="closeAddCommentForm()">Cancel</button>';
+    html += "</div></div>";
+    pane.innerHTML = html;
+  }
+  window.openAddCommentForm = function() {
+    const trigger = document.getElementById("add-comment-trigger");
+    const form = document.getElementById("add-comment-form");
+    if (trigger) trigger.style.display = "none";
+    if (form) {
+      form.classList.add("open");
+      form.querySelector("textarea").focus();
+    }
+  };
+  window.closeAddCommentForm = function() {
+    const trigger = document.getElementById("add-comment-trigger");
+    const form = document.getElementById("add-comment-form");
+    if (trigger) trigger.style.display = "";
+    if (form) {
+      form.classList.remove("open");
+      form.querySelector("textarea").value = "";
+    }
+  };
+  window.startCommentEdit = function(commentId) {
+    const contentEl = document.getElementById("comment-content-" + commentId);
+    const editWrapper = document.getElementById("comment-edit-" + commentId);
+    if (contentEl) contentEl.style.display = "none";
+    if (editWrapper) editWrapper.style.display = "block";
+    const area = document.getElementById("comment-edit-area-" + commentId);
+    if (area) area.focus();
+  };
+  window.cancelCommentEdit = function(commentId) {
+    const contentEl = document.getElementById("comment-content-" + commentId);
+    const editWrapper = document.getElementById("comment-edit-" + commentId);
+    if (contentEl) contentEl.style.display = "";
+    if (editWrapper) editWrapper.style.display = "none";
+  };
+  window.saveCommentEdit = async function(commentId, taskId) {
+    const area = document.getElementById("comment-edit-area-" + commentId);
+    if (!area) return;
+    const content = area.value.trim();
+    if (!content) {
+      area.focus();
+      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 loadComments(taskId);
+    } catch {
+      showToast("Failed to update comment");
+    }
+  };
+  window.deleteComment = async function(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 loadComments(taskId);
+    } catch {
+      showToast("Failed to delete comment");
+    }
+  };
+  window.submitComment = async function(taskId) {
+    const textarea = document.getElementById("add-comment-text");
+    if (!textarea) return;
+    const content = textarea.value.trim();
+    if (!content) {
+      textarea.focus();
+      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 loadComments(taskId);
+    } catch {
+      showToast("Failed to add comment");
+    }
+  };
+  function renderDetailPanel(data) {
+    document.getElementById("detail-panel-update-warning")?.remove();
+    const detailPanelTitle = document.getElementById("detail-panel-title");
+    const task = data.task;
+    const tags = data.tags || [];
+    const metadata = data.metadata || [];
+    const blockedBy = data.blockedBy || [];
+    const blocking = data.blocking || [];
+    const parent = data.parent || null;
+    detailTaskId = task.id;
+    detailPanelTitle.textContent = "#" + task.id;
+    const win = window;
+    const _allStatuses = win.allStatuses;
+    const _statusLabels = win.statusLabels;
+    const _allPriorities = win.allPriorities;
+    let html = "";
+    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 === task.status ? " selected" : "";
+      html += '<option value="' + s + '"' + selected + ">" + _statusLabels[s] + "</option>";
+    });
+    html += "</select>";
+    html += "</div>";
+    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 = task.priority === p ? " selected" : "";
+      html += '<option value="' + p + '"' + selected + ">" + p.charAt(0).toUpperCase() + p.slice(1) + "</option>";
+    });
+    html += "</select>";
+    html += "</div>";
+    html += '<div class="detail-field">';
+    html += '<div class="detail-field-label">Tags</div>';
+    html += '<div id="detail-tags-container"></div>';
+    html += "</div>";
+    const hasRelations = parent || blockedBy.length > 0 || blocking.length > 0;
+    if (hasRelations) {
+      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">';
+        html += '<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">';
+        html += '<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>";
+    }
+    html += '<div class="detail-field">';
+    html += '<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">';
+    html += '<div class="detail-field-label">Description</div>';
+    html += '<textarea id="detail-edit-body" class="detail-edit-textarea">' + escapeHtmlClient(task.body || "") + "</textarea>";
+    html += "</div>";
+    const otherMeta = metadata.filter((m) => m.key !== "priority");
+    if (otherMeta.length > 0) {
+      html += '<div class="detail-field">';
+      html += '<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>";
+    }
+    html += '<div class="detail-timestamp">created ' + relativeTime(task.created_at) + " &middot; updated " + relativeTime(task.updated_at) + "</div>";
+    const detailsPane = document.getElementById("detail-tab-content-details");
+    if (detailsPane) {
+      detailsPane.innerHTML = html;
+      detailsPane.style.padding = "20px";
+    }
+    loadAllTags().then(() => renderTagsSection([...tags]));
+    loadComments(task.id);
+    switchTab(lastTab);
+  }
+  async function openTaskDetail(taskId) {
+    const detailPanel = document.getElementById("detail-panel");
+    const PANEL_DEFAULT_WIDTH = 400;
+    try {
+      const res = await fetch("/api/tasks/" + taskId);
+      if (!res.ok) throw new Error("Server error");
+      const data = await res.json();
+      renderDetailPanel(data);
+      if (!detailPanel.classList.contains("open")) {
+        const preferredWidth = detailPanel.dataset.preferredWidth || String(PANEL_DEFAULT_WIDTH);
+        detailPanel.style.width = preferredWidth + "px";
+        detailPanel.classList.add("open");
+      }
+    } catch {
+      showToast("Failed to load task details");
+    }
+  }
+  function showUpdateWarning() {
+    const detailPanelBody = document.getElementById("detail-panel-body");
+    const warning = document.getElementById("detail-panel-update-warning");
+    if (!warning) {
+      const warningEl = document.createElement("div");
+      warningEl.id = "detail-panel-update-warning";
+      warningEl.style.cssText = "display: flex; align-items: center; gap: 8px; color: red; font-size: 0.85em; padding: 4px 8px; background: #fff0f0; border: 1px solid #ffcccc; border-radius: 4px; margin-bottom: 8px;";
+      const msgSpan = document.createElement("span");
+      msgSpan.style.cssText = "flex: 1;";
+      msgSpan.textContent = "This task has been updated in the database. Save or discard your changes to see the latest version.";
+      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.addEventListener("click", async () => {
+        try {
+          const taskRes = await fetch("/api/tasks/" + detailTaskId);
+          if (taskRes.ok) {
+            const taskData = await taskRes.json();
+            renderDetailPanel(taskData);
+          }
+        } catch {
+        }
+      });
+      warningEl.appendChild(msgSpan);
+      warningEl.appendChild(reloadBtn);
+      detailPanelBody.insertBefore(warningEl, detailPanelBody.firstChild);
+    }
+  }
+  function initDetailPanel() {
+    const boardContainer = document.querySelector(".board-container");
+    const detailPanelHtml = '<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>';
+    boardContainer.insertAdjacentHTML("beforeend", detailPanelHtml);
+    const detailPanel = document.getElementById("detail-panel");
+    document.getElementById("detail-panel-close")?.addEventListener("click", closeDetailPanel);
+    document.getElementById("detail-tabs")?.addEventListener("click", (e) => {
+      const btn = e.target.closest(".detail-tab");
+      if (!btn) return;
+      switchTab(btn.dataset.tab);
+    });
+    const resizeHandle = document.getElementById("detail-panel-resize-handle");
+    const PANEL_MIN_WIDTH = 280;
+    const PANEL_MAX_WIDTH = 800;
+    const PANEL_DEFAULT_WIDTH = 400;
+    (async function initPanelWidth() {
+      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 {
+      }
+      detailPanel.dataset.preferredWidth = String(targetWidth);
+    })();
+    resizeHandle.addEventListener("mousedown", function(e) {
+      e.preventDefault();
+      if (!detailPanel.classList.contains("open")) return;
+      const startX = e.clientX;
+      const startWidth = detailPanel.offsetWidth;
+      resizeHandle.classList.add("dragging");
+      document.body.style.userSelect = "none";
+      document.body.style.cursor = "col-resize";
+      detailPanel.style.transition = "none";
+      function onMouseMove(e2) {
+        const delta = startX - e2.clientX;
+        const newWidth = Math.min(PANEL_MAX_WIDTH, Math.max(PANEL_MIN_WIDTH, startWidth + delta));
+        detailPanel.style.width = newWidth + "px";
+      }
+      function onMouseUp() {
+        resizeHandle.classList.remove("dragging");
+        document.body.style.userSelect = "";
+        document.body.style.cursor = "";
+        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() {
+        });
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+      }
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+    });
+    document.getElementById("detail-save-btn")?.addEventListener("click", async () => {
+      if (detailTaskId === null) return;
+      const titleInput = document.getElementById("detail-edit-title");
+      const title = titleInput ? titleInput.value.trim() : "";
+      if (!title) {
+        if (titleInput) titleInput.focus();
+        return;
+      }
+      const bodyEl = document.getElementById("detail-edit-body");
+      const statusEl = document.getElementById("detail-edit-status");
+      const priorityEl = document.getElementById("detail-edit-priority");
+      try {
+        const res = await fetch("/api/tasks/" + detailTaskId, {
+          method: "PATCH",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            title,
+            body: bodyEl ? bodyEl.value.trim() || null : null,
+            status: statusEl ? statusEl.value : void 0,
+            priority: priorityEl ? priorityEl.value || null : null
+          })
+        });
+        if (!res.ok) throw new Error("Server error");
+        const getRes = await fetch("/api/tasks/" + detailTaskId);
+        if (!getRes.ok) throw new Error("Failed to fetch updated task");
+        const data = await getRes.json();
+        renderDetailPanel(data);
+        showToast("Task saved successfully");
+        try {
+          const tsRes = await fetch("/api/board/updated-at");
+          if (tsRes.ok) {
+            const tsData = await tsRes.json();
+            setLastUpdatedAt(tsData.updatedAt);
+          }
+        } catch {
+        }
+        refreshBoardCards();
+      } catch {
+        showToast("Failed to update task");
+      }
+    });
+    document.querySelectorAll(".card").forEach((card) => {
+      card.addEventListener("click", async (e) => {
+        if (e.defaultPrevented) return;
+        await openTaskDetail(card.dataset.id);
+      });
+    });
+    registerDetailPanelCallbacks({
+      openTaskDetail,
+      renderDetailPanel,
+      showUpdateWarning,
+      getDetailTaskId
+    });
+    registerGetDetailTaskId(getDetailTaskId);
+  }
+
+  // src/board/client/filters.ts
+  function isFiltersActive() {
+    return activeFilters.priorities.length > 0 || activeFilters.tagIds.length > 0 || activeFilters.assignee !== "";
+  }
+  function applyFilters() {
+    const clearBtn = document.getElementById("filter-clear");
+    if (clearBtn) {
+      if (isFiltersActive()) {
+        clearBtn.classList.add("visible");
+      } else {
+        clearBtn.classList.remove("visible");
+      }
+    }
+    refreshBoardCards();
+  }
+  function renderFilterTagPills() {
+    const container = document.getElementById("filter-tags-control");
+    if (!container) return;
+    container.querySelectorAll(".filter-tag-pill").forEach((p) => p.remove());
+    activeFilters.tagIds.forEach((tagId) => {
+      const tag = allAvailableTags.find((t) => t.id === tagId);
+      if (!tag) return;
+      const pill = document.createElement("span");
+      pill.className = "filter-tag-pill";
+      const label = document.createTextNode(tag.name);
+      const removeBtn = document.createElement("button");
+      removeBtn.className = "filter-tag-pill-remove";
+      removeBtn.title = "Remove tag filter";
+      removeBtn.innerHTML = "&times;";
+      removeBtn.addEventListener("click", () => {
+        const idx = activeFilters.tagIds.indexOf(tagId);
+        if (idx !== -1) activeFilters.tagIds.splice(idx, 1);
+        renderFilterTagPills();
+        applyFilters();
+      });
+      pill.appendChild(label);
+      pill.appendChild(removeBtn);
+      container.insertBefore(pill, container.querySelector(".filter-tag-dropdown-wrapper"));
+    });
+  }
+  function initFilterBar() {
+    document.querySelectorAll(".filter-priority-btn").forEach((btn) => {
+      btn.addEventListener("click", () => {
+        const priority = btn.dataset.priority;
+        const idx = activeFilters.priorities.indexOf(priority);
+        if (idx === -1) {
+          activeFilters.priorities.push(priority);
+          btn.classList.add("active");
+        } else {
+          activeFilters.priorities.splice(idx, 1);
+          btn.classList.remove("active");
+        }
+        applyFilters();
+      });
+    });
+    const assigneeInput = document.getElementById("filter-assignee");
+    let assigneeTimer = null;
+    if (assigneeInput) {
+      assigneeInput.addEventListener("input", () => {
+        if (assigneeTimer) clearTimeout(assigneeTimer);
+        assigneeTimer = setTimeout(() => {
+          activeFilters.assignee = assigneeInput.value.trim();
+          applyFilters();
+        }, 300);
+      });
+    }
+    const clearBtn = document.getElementById("filter-clear");
+    if (clearBtn) {
+      clearBtn.addEventListener("click", () => {
+        activeFilters.tagIds = [];
+        activeFilters.priorities = [];
+        activeFilters.assignee = "";
+        document.querySelectorAll(".filter-priority-btn").forEach((btn) => btn.classList.remove("active"));
+        if (assigneeInput) assigneeInput.value = "";
+        renderFilterTagPills();
+        applyFilters();
+      });
+    }
+    const tagsControl = document.getElementById("filter-tags-control");
+    if (tagsControl) {
+      let renderTagDropdown2 = function() {
+        dropdown.innerHTML = "";
+        const available = allAvailableTags.filter((t) => !activeFilters.tagIds.includes(t.id));
+        if (available.length === 0) {
+          const empty = document.createElement("div");
+          empty.className = "filter-tag-dropdown-empty";
+          empty.textContent = "No tags available";
+          dropdown.appendChild(empty);
+        } else {
+          available.forEach((tag) => {
+            const opt = document.createElement("div");
+            opt.className = "filter-tag-dropdown-option";
+            opt.textContent = tag.name;
+            opt.addEventListener("mousedown", (e) => {
+              e.preventDefault();
+              activeFilters.tagIds.push(tag.id);
+              dropdown.classList.remove("open");
+              renderFilterTagPills();
+              applyFilters();
+            });
+            dropdown.appendChild(opt);
+          });
+        }
+      };
+      var renderTagDropdown = renderTagDropdown2;
+      const dropdownWrapper = document.createElement("div");
+      dropdownWrapper.className = "filter-tag-dropdown-wrapper";
+      const addBtn = document.createElement("button");
+      addBtn.className = "filter-tag-add-btn";
+      addBtn.textContent = "+ Tag";
+      const dropdown = document.createElement("div");
+      dropdown.className = "filter-tag-dropdown";
+      dropdownWrapper.appendChild(addBtn);
+      dropdownWrapper.appendChild(dropdown);
+      tagsControl.appendChild(dropdownWrapper);
+      addBtn.addEventListener("click", () => {
+        if (dropdown.classList.contains("open")) {
+          dropdown.classList.remove("open");
+        } else {
+          renderTagDropdown2();
+          const rect = addBtn.getBoundingClientRect();
+          dropdown.style.top = rect.bottom + 2 + "px";
+          dropdown.style.left = rect.left + "px";
+          dropdown.classList.add("open");
+        }
+      });
+      document.addEventListener("click", (e) => {
+        if (!dropdownWrapper.contains(e.target)) {
+          dropdown.classList.remove("open");
+        }
+      });
+    }
+  }
+  function initFilters() {
+    loadAllTags().then(() => {
+      initFilterBar();
+    });
+  }
+
+  // src/board/client/burgerMenu.ts
+  function initBurgerMenu() {
+    const burgerBtn = document.getElementById("burger-menu-btn");
+    const burgerDropdown = document.getElementById("burger-menu-dropdown");
+    burgerBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      burgerDropdown.classList.toggle("open");
+    });
+    document.addEventListener("click", (e) => {
+      if (!burgerDropdown.contains(e.target) && e.target !== burgerBtn) {
+        burgerDropdown.classList.remove("open");
+      }
+    });
+    const purgeModal = document.getElementById("purge-confirm-modal");
+    const purgeConfirmBtn = document.getElementById("purge-confirm-btn");
+    const purgeCancelBtn = document.getElementById("purge-cancel-btn");
+    const purgeResultEl = document.getElementById("purge-result");
+    document.getElementById("burger-purge-tasks")?.addEventListener("click", () => {
+      burgerDropdown.classList.remove("open");
+      purgeResultEl.textContent = "";
+      purgeModal.classList.add("show");
+    });
+    purgeCancelBtn.addEventListener("click", () => {
+      purgeModal.classList.remove("show");
+    });
+    purgeConfirmBtn.addEventListener("click", async () => {
+      purgeConfirmBtn.disabled = true;
+      purgeConfirmBtn.textContent = "Purging...";
+      try {
+        const res = await fetch("/api/tasks/purge", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({})
+        });
+        const data = await res.json();
+        if (res.ok) {
+          purgeResultEl.textContent = "Purged " + data.count + " task(s).";
+          setTimeout(() => {
+            purgeModal.classList.remove("show");
+          }, 1500);
+          location.reload();
+        } else {
+          purgeResultEl.textContent = "Error: " + (data.error || "Unknown error");
+        }
+      } catch {
+        purgeResultEl.textContent = "Failed to purge tasks.";
+      } finally {
+        purgeConfirmBtn.disabled = false;
+        purgeConfirmBtn.textContent = "Purge";
+      }
+    });
+    const versionModal = document.getElementById("version-info-modal");
+    const versionCloseBtn = document.getElementById("version-info-close");
+    const versionTextEl = document.getElementById("version-info-text");
+    document.getElementById("burger-version-info")?.addEventListener("click", async () => {
+      burgerDropdown.classList.remove("open");
+      versionTextEl.textContent = "Loading...";
+      versionModal.classList.add("show");
+      try {
+        const res = await fetch("/api/version");
+        const data = await res.json();
+        versionTextEl.textContent = "agkan v" + data.version;
+      } catch {
+        versionTextEl.textContent = "Failed to load version.";
+      }
+    });
+    versionCloseBtn.addEventListener("click", () => {
+      versionModal.classList.remove("show");
+    });
+  }
+
+  // src/board/client/main.ts
+  initDragDrop();
+  initAutoScroll();
+  initAddTaskModal();
+  initContextMenu();
+  initDetailPanel();
+  initBoardPolling();
+  initFilters();
+  initBurgerMenu();
+})();