agkan 2.12.2 → 2.14.0

package/dist/board/client/board.js

@@ -149,106 +149,6 @@
     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;
@@ -425,7 +325,7 @@
   function setLastUpdatedAt(val) {
     lastUpdatedAt = val;
   }
-  var activeFilters = { tagIds: [], priorities: [], assignee: "" };
+  var activeFilters = { tagIds: [], priorities: [], assignee: "", searchText: "" };
   function buildFilterParams() {
     const params = new URLSearchParams();
     if (activeFilters.priorities.length > 0) {
@@ -437,17 +337,103 @@
     if (activeFilters.assignee) {
       params.set("assignee", activeFilters.assignee);
     }
+    if (activeFilters.searchText) {
+      params.set("search", activeFilters.searchText);
+    }
     return params;
   }
   var _openTaskDetail = null;
   var _renderDetailPanel = null;
   var _showUpdateWarning = null;
   var _getDetailTaskId2 = null;
+  var _setActiveCard = null;
   function registerDetailPanelCallbacks(callbacks) {
     _openTaskDetail = callbacks.openTaskDetail;
     _renderDetailPanel = callbacks.renderDetailPanel;
     _showUpdateWarning = callbacks.showUpdateWarning;
     _getDetailTaskId2 = callbacks.getDetailTaskId;
+    _setActiveCard = callbacks.setActiveCard;
+  }
+  function attachCardListeners(body) {
+    body.querySelectorAll(".card").forEach((card) => {
+      attachDragListeners(card);
+      card.addEventListener("click", async (e) => {
+        if (e.defaultPrevented) return;
+        if (_openTaskDetail) await _openTaskDetail(card.dataset.id);
+      });
+    });
+  }
+  function applyIncrementalCardUpdate(body, newHtml) {
+    const template = document.createElement("div");
+    template.innerHTML = newHtml;
+    const newCards = Array.from(template.querySelectorAll(".card"));
+    const existingCards = /* @__PURE__ */ new Map();
+    body.querySelectorAll(".card").forEach((card) => {
+      const id = card.dataset.id;
+      if (id) existingCards.set(id, card);
+    });
+    const newCardIds = /* @__PURE__ */ new Set();
+    newCards.forEach((card) => {
+      const id = card.dataset.id;
+      if (id) newCardIds.add(id);
+    });
+    existingCards.forEach((card, id) => {
+      if (!newCardIds.has(id)) {
+        card.remove();
+      }
+    });
+    newCards.forEach((newCard, index) => {
+      const id = newCard.dataset.id;
+      const newUpdatedAt = newCard.dataset.updatedAt;
+      const existing = id ? existingCards.get(id) : void 0;
+      if (existing) {
+        const existingUpdatedAt = existing.dataset.updatedAt;
+        let activeCard;
+        if (newUpdatedAt !== existingUpdatedAt) {
+          existing.replaceWith(newCard);
+          activeCard = newCard;
+        } else {
+          activeCard = existing;
+        }
+        const currentChild = body.children[index];
+        if (currentChild !== activeCard) {
+          body.insertBefore(activeCard, currentChild || null);
+        }
+      } else {
+        const currentChild = body.children[index];
+        body.insertBefore(newCard, currentChild || null);
+      }
+    });
+  }
+  function updateColumnHtml(col) {
+    const body = document.getElementById("col-" + col.status);
+    if (!body) return;
+    applyIncrementalCardUpdate(body, col.html);
+    const colEl = body.closest(".column");
+    if (colEl) {
+      const countEl = colEl.querySelector(".column-count");
+      if (countEl) countEl.textContent = String(col.count);
+    }
+    attachCardListeners(body);
+    attachAutoScrollToBody(body);
+  }
+  function isEditingDetailPanel() {
+    const editableFields = ["detail-edit-title", "detail-edit-body", "detail-edit-status", "detail-edit-priority"];
+    return editableFields.some((id) => document.activeElement && document.activeElement.id === id);
+  }
+  async function refreshOpenDetailPanel(detailTaskId2) {
+    if (isEditingDetailPanel()) {
+      if (_showUpdateWarning) _showUpdateWarning();
+      return;
+    }
+    try {
+      const taskRes = await fetch("/api/tasks/" + detailTaskId2);
+      if (taskRes.ok) {
+        const taskData = await taskRes.json();
+        if (_renderDetailPanel) _renderDetailPanel(taskData);
+      }
+    } catch {
+    }
   }
   async function refreshBoardCards() {
     const filterParams = buildFilterParams();
@@ -456,41 +442,13 @@
       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);
-      });
+      data.columns.forEach(updateColumnHtml);
       const detailTaskId2 = _getDetailTaskId2 ? _getDetailTaskId2() : null;
+      if (detailTaskId2 !== null && _setActiveCard) {
+        _setActiveCard(detailTaskId2);
+      }
       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 {
-          }
-        }
+        await refreshOpenDetailPanel(detailTaskId2);
       }
     } catch {
     }
@@ -502,16 +460,11 @@
       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();
-        }
+        await refreshBoardCards();
       }
     } catch {
     }
@@ -521,16 +474,316 @@
     pollBoardUpdates();
   }
 
+  // src/board/client/addTaskModal.ts
+  var selectedTags = [];
+  var tagInputValue = "";
+  var tagFocusedIndex = -1;
+  function getFilteredAddTags() {
+    const selectedIds = new Set(selectedTags.map((t) => t.id));
+    const available = allAvailableTags.filter((t) => !selectedIds.has(t.id));
+    if (!tagInputValue.trim()) return available;
+    const q = tagInputValue.toLowerCase();
+    return available.filter((t) => t.name.toLowerCase().includes(q));
+  }
+  function renderAddTagPills(control, input) {
+    control.querySelectorAll(".tag-pill").forEach((p) => p.remove());
+    selectedTags.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.innerHTML = "×";
+      removeBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        const idx = selectedTags.findIndex((x) => x.id === t.id);
+        if (idx !== -1) selectedTags.splice(idx, 1);
+        renderAddTagPills(control, input);
+      });
+      pill.appendChild(label);
+      pill.appendChild(removeBtn);
+      control.insertBefore(pill, input);
+    });
+    input.placeholder = selectedTags.length === 0 ? "Add tags..." : "";
+  }
+  function renderAddTagDropdown(dropdown) {
+    const filtered = getFilteredAddTags();
+    dropdown.innerHTML = "";
+    tagFocusedIndex = -1;
+    if (filtered.length === 0) {
+      const noOpt = document.createElement("div");
+      noOpt.className = "tag-select-no-options";
+      noOpt.textContent = tagInputValue ? "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", () => setAddTagFocused(dropdown, i));
+        opt.addEventListener("mousedown", (e) => {
+          e.preventDefault();
+          selectAddTag(t.id, dropdown, document.getElementById("add-tag-input"));
+        });
+        dropdown.appendChild(opt);
+      });
+    }
+  }
+  function setAddTagFocused(dropdown, index) {
+    const opts = dropdown.querySelectorAll(".tag-select-option");
+    opts.forEach((o, i) => o.classList.toggle("focused", i === index));
+    tagFocusedIndex = index;
+  }
+  function selectAddTag(tagId, dropdown, input) {
+    const tag = allAvailableTags.find((t) => t.id === tagId);
+    if (!tag) return;
+    selectedTags.push(tag);
+    input.value = "";
+    tagInputValue = "";
+    const control = document.getElementById("add-tag-select-control");
+    renderAddTagPills(control, input);
+    renderAddTagDropdown(dropdown);
+  }
+  function initAddTagSelector() {
+    const control = document.getElementById("add-tag-select-control");
+    const dropdown = document.getElementById("add-tag-select-dropdown");
+    if (!control || !dropdown) return;
+    const input = document.createElement("input");
+    input.className = "tag-select-input";
+    input.id = "add-tag-input";
+    input.type = "text";
+    input.autocomplete = "off";
+    control.appendChild(input);
+    control.addEventListener("click", () => input.focus());
+    input.addEventListener("focus", () => {
+      renderAddTagDropdown(dropdown);
+      dropdown.classList.add("open");
+    });
+    input.addEventListener(
+      "blur",
+      () => setTimeout(() => {
+        dropdown.classList.remove("open");
+        tagFocusedIndex = -1;
+      }, 150)
+    );
+    input.addEventListener("input", () => {
+      tagInputValue = input.value;
+      renderAddTagDropdown(dropdown);
+      if (!dropdown.classList.contains("open")) dropdown.classList.add("open");
+    });
+    input.addEventListener("keydown", (e) => {
+      const filtered = getFilteredAddTags();
+      const opts = dropdown.querySelectorAll(".tag-select-option");
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setAddTagFocused(dropdown, Math.min(tagFocusedIndex + 1, opts.length - 1));
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setAddTagFocused(dropdown, Math.max(tagFocusedIndex - 1, 0));
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        if (tagFocusedIndex >= 0 && filtered[tagFocusedIndex]) {
+          selectAddTag(filtered[tagFocusedIndex].id, dropdown, input);
+        }
+      } else if (e.key === "Escape") {
+        dropdown.classList.remove("open");
+        input.blur();
+      } else if (e.key === "Backspace" && input.value === "" && selectedTags.length > 0) {
+        e.preventDefault();
+        selectedTags.splice(selectedTags.length - 1, 1);
+        renderAddTagPills(control, input);
+        renderAddTagDropdown(dropdown);
+      }
+    });
+  }
+  function addMetadataRow(container) {
+    const row = document.createElement("div");
+    row.className = "metadata-row";
+    const keyInput = document.createElement("input");
+    keyInput.type = "text";
+    keyInput.className = "metadata-row-key";
+    keyInput.placeholder = "Key";
+    const valueInput = document.createElement("input");
+    valueInput.type = "text";
+    valueInput.className = "metadata-row-value";
+    valueInput.placeholder = "Value";
+    const removeBtn = document.createElement("button");
+    removeBtn.type = "button";
+    removeBtn.className = "metadata-row-remove";
+    removeBtn.title = "Remove";
+    removeBtn.innerHTML = "×";
+    removeBtn.addEventListener("click", () => {
+      row.remove();
+    });
+    row.appendChild(keyInput);
+    row.appendChild(valueInput);
+    row.appendChild(removeBtn);
+    container.appendChild(row);
+  }
+  function collectMetadata(container) {
+    const rows = container.querySelectorAll(".metadata-row");
+    const result = [];
+    rows.forEach((row) => {
+      const key = (row.querySelector(".metadata-row-key")?.value ?? "").trim();
+      const value = (row.querySelector(".metadata-row-value")?.value ?? "").trim();
+      if (key) result.push({ key, value });
+    });
+    return result;
+  }
+  function resetAddModal(elements) {
+    elements.addTitle.value = "";
+    elements.addBody.value = "";
+    elements.addPriority.value = "";
+    selectedTags = [];
+    tagInputValue = "";
+    tagFocusedIndex = -1;
+    const control = document.getElementById("add-tag-select-control");
+    const input = document.getElementById("add-tag-input");
+    if (control && input) {
+      renderAddTagPills(control, input);
+    }
+    elements.addMetadataRows.innerHTML = "";
+  }
+  function openAddModal(elements, status) {
+    elements.addStatus.value = status;
+    resetAddModal(elements);
+    elements.addModal.classList.add("show");
+    elements.addTitle.focus();
+  }
+  async function submitAddTask(elements) {
+    const title = elements.addTitle.value.trim();
+    if (!title) {
+      elements.addTitle.focus();
+      return;
+    }
+    const status = elements.addStatus.value;
+    elements.addModal.classList.remove("show");
+    const tags = selectedTags.map((t) => t.id);
+    const metadata = collectMetadata(elements.addMetadataRows);
+    try {
+      const res = await fetch("/api/tasks", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          title,
+          body: elements.addBody.value.trim() || null,
+          status,
+          priority: elements.addPriority.value || null,
+          tags: tags.length > 0 ? tags : void 0,
+          metadata: metadata.length > 0 ? metadata : void 0
+        })
+      });
+      if (!res.ok) throw new Error("Server error");
+      await refreshBoardCards();
+    } catch {
+      showToast("Failed to add task");
+    }
+  }
+  function initAddTaskModal() {
+    const elements = {
+      addModal: document.getElementById("add-modal"),
+      addTitle: document.getElementById("add-title"),
+      addBody: document.getElementById("add-body"),
+      addPriority: document.getElementById("add-priority"),
+      addStatus: document.getElementById("add-status"),
+      addTagControl: document.getElementById("add-tag-select-control"),
+      addTagDropdown: document.getElementById("add-tag-select-dropdown"),
+      addMetadataRows: document.getElementById("add-metadata-rows")
+    };
+    initAddTagSelector();
+    document.querySelectorAll(".add-btn").forEach((btn) => {
+      btn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        openAddModal(elements, btn.dataset.status);
+      });
+    });
+    document.getElementById("add-cancel")?.addEventListener("click", () => {
+      elements.addModal.classList.remove("show");
+    });
+    elements.addModal.addEventListener("click", (e) => {
+      if (e.target === elements.addModal) elements.addModal.classList.remove("show");
+    });
+    elements.addTitle.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" && !e.isComposing) {
+        e.preventDefault();
+        document.getElementById("add-submit").click();
+      }
+    });
+    document.getElementById("add-metadata-add-row")?.addEventListener("click", () => {
+      addMetadataRow(elements.addMetadataRows);
+    });
+    document.getElementById("add-submit")?.addEventListener("click", () => submitAddTask(elements));
+  }
+
+  // src/board/client/contextMenu.ts
+  async function deleteCard(card) {
+    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");
+    }
+  }
+  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;
+      await deleteCard(card);
+    });
+  }
+
   // src/board/client/detailPanel.ts
   var detailTaskId = null;
   var lastTab = "details";
   function getDetailTaskId() {
     return detailTaskId;
   }
+  function setActiveCard(taskId) {
+    document.querySelectorAll(".card.active").forEach((card) => {
+      card.classList.remove("active");
+    });
+    if (taskId !== null) {
+      const card = document.querySelector('.card[data-id="' + taskId + '"]');
+      if (card) card.classList.add("active");
+    }
+  }
   function closeDetailPanel() {
     const detailPanel = document.getElementById("detail-panel");
     detailPanel.classList.remove("open");
     detailPanel.style.width = "";
+    setActiveCard(null);
     detailTaskId = null;
   }
   function switchTab(tabName) {
@@ -560,44 +813,56 @@
       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;
     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>";
+    comments.forEach((comment) => {
+      html += renderCommentItemHtml(comment, taskId);
     });
-    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>";
+    html += renderAddCommentFormHtml(taskId);
     pane.innerHTML = html;
+    const paneEl = pane;
+    if (paneEl._commentActionHandler) {
+      paneEl.removeEventListener("click", paneEl._commentActionHandler);
+    }
+    paneEl._commentActionHandler = handleCommentAction;
+    paneEl.addEventListener("click", paneEl._commentActionHandler);
   }
-  window.openAddCommentForm = function() {
+  function openAddCommentForm() {
     const trigger = document.getElementById("add-comment-trigger");
     const form = document.getElementById("add-comment-form");
     if (trigger) trigger.style.display = "none";
@@ -605,8 +870,8 @@
       form.classList.add("open");
       form.querySelector("textarea").focus();
     }
-  };
-  window.closeAddCommentForm = function() {
+  }
+  function closeAddCommentForm() {
     const trigger = document.getElementById("add-comment-trigger");
     const form = document.getElementById("add-comment-form");
     if (trigger) trigger.style.display = "";
@@ -614,22 +879,22 @@
       form.classList.remove("open");
       form.querySelector("textarea").value = "";
     }
-  };
-  window.startCommentEdit = function(commentId) {
+  }
+  function startCommentEdit(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) {
+  }
+  function cancelCommentEdit(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) {
+  }
+  async function saveCommentEdit(commentId, taskId) {
     const area = document.getElementById("comment-edit-area-" + commentId);
     if (!area) return;
     const content = area.value.trim();
@@ -648,8 +913,8 @@
     } catch {
       showToast("Failed to update comment");
     }
-  };
-  window.deleteComment = async function(commentId, taskId) {
+  }
+  async function deleteComment(commentId, taskId) {
     if (!confirm("Delete this comment?")) return;
     try {
       const res = await fetch("/api/comments/" + commentId, { method: "DELETE" });
@@ -658,8 +923,8 @@
     } catch {
       showToast("Failed to delete comment");
     }
-  };
-  window.submitComment = async function(taskId) {
+  }
+  async function submitComment(taskId) {
     const textarea = document.getElementById("add-comment-text");
     if (!textarea) return;
     const content = textarea.value.trim();
@@ -678,99 +943,161 @@
     } 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">';
+  }
+  function dispatchCommentAction(action, commentId, taskId) {
+    switch (action) {
+      case "open-add-comment":
+        openAddCommentForm();
+        break;
+      case "close-add-comment":
+        closeAddCommentForm();
+        break;
+      case "start-comment-edit":
+        startCommentEdit(commentId);
+        break;
+      case "cancel-comment-edit":
+        cancelCommentEdit(commentId);
+        break;
+      case "save-comment-edit":
+        void saveCommentEdit(commentId, taskId);
+        break;
+      case "delete-comment":
+        void deleteComment(commentId, taskId);
+        break;
+      case "submit-comment":
+        void submitComment(taskId);
+        break;
+    }
+  }
+  function handleCommentAction(e) {
+    const target = e.target.closest("[data-action]");
+    if (!target) return;
+    const action = target.dataset.action ?? "";
+    const commentId = target.dataset.commentId ? Number(target.dataset.commentId) : NaN;
+    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 === task.status ? " selected" : "";
-      html += '<option value="' + s + '"' + selected + ">" + _statusLabels[s] + "</option>";
+    allStatuses.forEach((s) => {
+      const selected = s === currentStatus ? " selected" : "";
+      html += '<option value="' + s + '"' + selected + ">" + statusLabels[s] + "</option>";
     });
-    html += "</select>";
-    html += "</div>";
-    html += '<div class="detail-field">';
+    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 = task.priority === p ? " selected" : "";
+    allPriorities.forEach((p) => {
+      const selected = currentPriority === 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 += "</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>";
     }
-    html += '<div class="detail-field">';
-    html += '<div class="detail-field-label">Title</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">';
-    html += '<div class="detail-field-label">Description</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>";
-    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>";
+    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 += '<div class="detail-timestamp">created ' + relativeTime(task.created_at) + " &middot; updated " + relativeTime(task.updated_at) + "</div>";
+    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");
+    const task = data.task;
+    const tags = data.tags || [];
+    detailTaskId = task.id;
+    detailPanelTitle.textContent = "#" + task.id;
     const detailsPane = document.getElementById("detail-tab-content-details");
     if (detailsPane) {
-      detailsPane.innerHTML = html;
+      detailsPane.innerHTML = renderDetailPanelHtml(data);
       detailsPane.style.padding = "20px";
     }
+    const footer = document.getElementById("detail-panel-footer");
+    if (footer) {
+      footer.innerHTML = '<span class="detail-footer-timestamp">created ' + relativeTime(task.created_at) + " &middot; updated " + relativeTime(task.updated_at) + '</span><button id="detail-save-btn">Save</button>';
+      document.getElementById("detail-save-btn")?.addEventListener("click", saveDetailTask);
+    }
+    const textarea = document.getElementById("detail-edit-body");
+    if (textarea) {
+      autoResizeTextarea(textarea);
+      textarea.addEventListener("input", () => {
+        autoResizeTextarea(textarea);
+      });
+    }
     loadAllTags().then(() => renderTagsSection([...tags])).catch((err) => {
       console.error("[agkan] renderDetailPanel tags failed", err);
     });
@@ -779,14 +1106,15 @@
   }
   async function openTaskDetail(taskId) {
     const detailPanel = document.getElementById("detail-panel");
-    const PANEL_DEFAULT_WIDTH = 400;
+    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();
       renderDetailPanel(data);
+      setActiveCard(Number(taskId));
       if (!detailPanel.classList.contains("open")) {
-        const preferredWidth = detailPanel.dataset.preferredWidth || String(PANEL_DEFAULT_WIDTH);
+        const preferredWidth = detailPanel.dataset.preferredWidth || String(PANEL_DEFAULT_WIDTH2);
         detailPanel.style.width = preferredWidth + "px";
         detailPanel.classList.add("open");
       }
@@ -805,55 +1133,100 @@
       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 {
-        }
-      });
+      const reloadBtn = buildUpdateWarningReloadBtn();
       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;
+  function buildUpdateWarningReloadBtn() {
+    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 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;
-          }
+        const taskRes = await fetch("/api/tasks/" + detailTaskId);
+        if (taskRes.ok) {
+          const taskData = await taskRes.json();
+          renderDetailPanel(taskData);
         }
       } catch {
       }
-      detailPanel.dataset.preferredWidth = String(targetWidth);
-    })();
+    });
+    return reloadBtn;
+  }
+  function collectEditedTaskFields() {
+    const titleInput = document.getElementById("detail-edit-title");
+    const title = titleInput ? titleInput.value.trim() : "";
+    if (!title) {
+      if (titleInput) titleInput.focus();
+      return null;
+    }
+    const bodyEl = document.getElementById("detail-edit-body");
+    const statusEl = document.getElementById("detail-edit-status");
+    const priorityEl = document.getElementById("detail-edit-priority");
+    return {
+      title,
+      body: bodyEl ? bodyEl.value.trim() || null : null,
+      status: statusEl ? statusEl.value : void 0,
+      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);
+      showToast("Task saved successfully");
+      await syncTimestampAfterSave();
+      refreshBoardCards();
+    } catch {
+      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 {
+    }
+    detailPanel.dataset.preferredWidth = String(targetWidth);
+  }
+  function attachResizeMousedown(resizeHandle, detailPanel) {
     resizeHandle.addEventListener("mousedown", function(e) {
       e.preventDefault();
       if (!detailPanel.classList.contains("open")) return;
@@ -863,8 +1236,8 @@
       document.body.style.userSelect = "none";
       document.body.style.cursor = "col-resize";
       detailPanel.style.transition = "none";
-      function onMouseMove(e2) {
-        const delta = startX - e2.clientX;
+      function onMouseMove(ev) {
+        const delta = startX - ev.clientX;
         const newWidth = Math.min(PANEL_MAX_WIDTH, Math.max(PANEL_MIN_WIDTH, startWidth + delta));
         detailPanel.style.width = newWidth + "px";
       }
@@ -887,47 +1260,31 @@
       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");
+  }
+  function initPanelResize(detailPanel) {
+    const resizeHandle = document.getElementById("detail-panel-resize-handle");
+    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.addEventListener("keydown", (e) => {
+      if (e.key === "Escape" && detailPanel.classList.contains("open")) {
+        closeDetailPanel();
       }
     });
+    document.getElementById("detail-tabs")?.addEventListener("click", (e) => {
+      const btn = e.target.closest(".detail-tab");
+      if (!btn) return;
+      switchTab(btn.dataset.tab);
+    });
+    initPanelResize(detailPanel);
     document.querySelectorAll(".card").forEach((card) => {
       card.addEventListener("click", async (e) => {
         if (e.defaultPrevented) return;
@@ -938,14 +1295,15 @@
       openTaskDetail,
       renderDetailPanel,
       showUpdateWarning,
-      getDetailTaskId
+      getDetailTaskId,
+      setActiveCard
     });
     registerGetDetailTaskId(getDetailTaskId);
   }
 
   // src/board/client/filters.ts
   function isFiltersActive() {
-    return activeFilters.priorities.length > 0 || activeFilters.tagIds.length > 0 || activeFilters.assignee !== "";
+    return activeFilters.priorities.length > 0 || activeFilters.tagIds.length > 0 || activeFilters.assignee !== "" || activeFilters.searchText !== "";
   }
   function applyFilters() {
     const clearBtn = document.getElementById("filter-clear");
@@ -998,6 +1356,17 @@
         applyFilters();
       });
     });
+    const searchInput = document.getElementById("filter-search");
+    let searchTimer = null;
+    if (searchInput) {
+      searchInput.addEventListener("input", () => {
+        if (searchTimer) clearTimeout(searchTimer);
+        searchTimer = setTimeout(() => {
+          activeFilters.searchText = searchInput.value.trim();
+          applyFilters();
+        }, 300);
+      });
+    }
     const assigneeInput = document.getElementById("filter-assignee");
     let assigneeTimer = null;
     if (assigneeInput) {
@@ -1015,7 +1384,9 @@
         activeFilters.tagIds = [];
         activeFilters.priorities = [];
         activeFilters.assignee = "";
+        activeFilters.searchText = "";
         document.querySelectorAll(".filter-priority-btn").forEach((btn) => btn.classList.remove("active"));
+        if (searchInput) searchInput.value = "";
         if (assigneeInput) assigneeInput.value = "";
         renderFilterTagPills();
         applyFilters();
@@ -1082,10 +1453,71 @@
     });
   }
 
+  // src/board/client/darkMode.ts
+  function applyTheme(preference) {
+    if (preference === "dark") {
+      document.documentElement.setAttribute("data-theme", "dark");
+    } else if (preference === "light") {
+      document.documentElement.setAttribute("data-theme", "light");
+    } else {
+      document.documentElement.removeAttribute("data-theme");
+    }
+  }
+  async function persistThemeToServer(theme) {
+    try {
+      await fetch("/api/config", {
+        method: "PUT",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ board: { theme } })
+      });
+    } catch {
+    }
+  }
+  function getActivePreference() {
+    const ssrTheme = document.documentElement.getAttribute("data-theme");
+    if (ssrTheme === "dark" || ssrTheme === "light") return ssrTheme;
+    return "system";
+  }
+  function updateCheckmarks(active) {
+    const items = {
+      dark: "burger-theme-dark",
+      light: "burger-theme-light",
+      system: "burger-theme-system"
+    };
+    for (const [pref, id] of Object.entries(items)) {
+      const el = document.getElementById(id);
+      if (!el) continue;
+      if (pref === active) {
+        if (!el.textContent?.startsWith("\u2713 ")) {
+          el.textContent = "\u2713 " + el.textContent?.replace(/^\u2713 /, "");
+        }
+      } else {
+        el.textContent = el.textContent?.replace(/^\u2713 /, "") ?? el.textContent;
+      }
+    }
+  }
+  function initDarkMode() {
+    const activePreference = getActivePreference();
+    updateCheckmarks(activePreference);
+    document.getElementById("burger-theme-dark")?.addEventListener("click", () => {
+      applyTheme("dark");
+      updateCheckmarks("dark");
+      void persistThemeToServer("dark");
+    });
+    document.getElementById("burger-theme-light")?.addEventListener("click", () => {
+      applyTheme("light");
+      updateCheckmarks("light");
+      void persistThemeToServer("light");
+    });
+    document.getElementById("burger-theme-system")?.addEventListener("click", () => {
+      applyTheme("system");
+      updateCheckmarks("system");
+      void persistThemeToServer("system");
+    });
+  }
+
   // src/board/client/burgerMenu.ts
-  function initBurgerMenu() {
-    const burgerBtn = document.getElementById("burger-menu-btn");
-    const burgerDropdown = document.getElementById("burger-menu-dropdown");
+  function initBurgerToggle(burgerBtn, burgerDropdown) {
     burgerBtn.addEventListener("click", (e) => {
       e.stopPropagation();
       burgerDropdown.classList.toggle("open");
@@ -1095,6 +1527,21 @@
         burgerDropdown.classList.remove("open");
       }
     });
+  }
+  async function executePurge() {
+    try {
+      const res = await fetch("/api/tasks/purge", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({})
+      });
+      if (res.ok) {
+        await refreshBoardCards();
+      }
+    } catch {
+    }
+  }
+  function initPurgeModal(burgerDropdown) {
     const purgeModal = document.getElementById("purge-confirm-modal");
     const purgeConfirmBtn = document.getElementById("purge-confirm-btn");
     const purgeCancelBtn = document.getElementById("purge-cancel-btn");
@@ -1107,32 +1554,12 @@
     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";
-      }
+    purgeConfirmBtn.addEventListener("click", () => {
+      purgeModal.classList.remove("show");
+      void executePurge();
     });
+  }
+  function initVersionModal(burgerDropdown) {
     const versionModal = document.getElementById("version-info-modal");
     const versionCloseBtn = document.getElementById("version-info-close");
     const versionTextEl = document.getElementById("version-info-text");
@@ -1152,6 +1579,111 @@
       versionModal.classList.remove("show");
     });
   }
+  function initExportModal(burgerDropdown) {
+    document.getElementById("burger-export-tasks")?.addEventListener("click", () => {
+      burgerDropdown.classList.remove("open");
+      const a = document.createElement("a");
+      a.href = "/api/export";
+      a.download = "";
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+    });
+  }
+  function initImportModal(burgerDropdown) {
+    const importModal = document.getElementById("import-modal");
+    const importCancelBtn = document.getElementById("import-cancel-btn");
+    const importConfirmBtn = document.getElementById("import-confirm-btn");
+    const importResultEl = document.getElementById("import-result");
+    const importDropZone = document.getElementById("import-drop-zone");
+    const importFileInput = document.getElementById("import-file-input");
+    if (!importModal || !importCancelBtn || !importConfirmBtn || !importResultEl || !importDropZone || !importFileInput) {
+      return;
+    }
+    const safeImportModal = importModal;
+    const safeImportCancelBtn = importCancelBtn;
+    const safeImportConfirmBtn = importConfirmBtn;
+    const safeImportResultEl = importResultEl;
+    const safeImportDropZone = importDropZone;
+    const safeImportFileInput = importFileInput;
+    let selectedFile = null;
+    function setFile(file) {
+      selectedFile = file;
+      safeImportResultEl.textContent = `Selected: ${file.name}`;
+      safeImportResultEl.style.color = "#64748b";
+      safeImportConfirmBtn.disabled = false;
+    }
+    document.getElementById("burger-import-tasks")?.addEventListener("click", () => {
+      burgerDropdown.classList.remove("open");
+      selectedFile = null;
+      safeImportResultEl.textContent = "";
+      safeImportConfirmBtn.disabled = true;
+      safeImportFileInput.value = "";
+      safeImportModal.classList.add("show");
+    });
+    safeImportCancelBtn.addEventListener("click", () => {
+      safeImportModal.classList.remove("show");
+    });
+    safeImportFileInput.addEventListener("change", () => {
+      const file = safeImportFileInput.files?.[0];
+      if (file) setFile(file);
+    });
+    safeImportDropZone.addEventListener("dragover", (e) => {
+      e.preventDefault();
+      safeImportDropZone.style.borderColor = "#3b82f6";
+    });
+    safeImportDropZone.addEventListener("dragleave", () => {
+      safeImportDropZone.style.borderColor = "#94a3b8";
+    });
+    safeImportDropZone.addEventListener("drop", (e) => {
+      e.preventDefault();
+      safeImportDropZone.style.borderColor = "#94a3b8";
+      const file = e.dataTransfer?.files?.[0];
+      if (file) setFile(file);
+    });
+    safeImportConfirmBtn.addEventListener("click", async () => {
+      if (!selectedFile) return;
+      safeImportConfirmBtn.disabled = true;
+      safeImportConfirmBtn.textContent = "Importing...";
+      try {
+        const text = await selectedFile.text();
+        const data = JSON.parse(text);
+        const res = await fetch("/api/import", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(data)
+        });
+        const result = await res.json();
+        if (res.ok) {
+          safeImportResultEl.textContent = `Imported ${result.importedCount} task(s) successfully.`;
+          safeImportResultEl.style.color = "#16a34a";
+          setTimeout(() => {
+            safeImportModal.classList.remove("show");
+            location.reload();
+          }, 1500);
+        } else {
+          safeImportResultEl.textContent = "Error: " + (result.error || "Unknown error");
+          safeImportResultEl.style.color = "#dc2626";
+        }
+      } catch {
+        safeImportResultEl.textContent = "Failed to import tasks. Invalid JSON file.";
+        safeImportResultEl.style.color = "#dc2626";
+      } finally {
+        safeImportConfirmBtn.disabled = false;
+        safeImportConfirmBtn.textContent = "Import";
+      }
+    });
+  }
+  function initBurgerMenu() {
+    const burgerBtn = document.getElementById("burger-menu-btn");
+    const burgerDropdown = document.getElementById("burger-menu-dropdown");
+    initBurgerToggle(burgerBtn, burgerDropdown);
+    initPurgeModal(burgerDropdown);
+    initExportModal(burgerDropdown);
+    initImportModal(burgerDropdown);
+    initVersionModal(burgerDropdown);
+    initDarkMode();
+  }
 
   // src/board/client/main.ts
   initDragDrop();