agkan 2.12.0 → 2.13.0

package/dist/board/client/board.js

@@ -150,63 +150,83 @@
   }
 
   // src/board/client/addTaskModal.ts
+  function openAddModal(elements, status) {
+    elements.addStatus.value = status;
+    elements.addTitle.value = "";
+    elements.addBody.value = "";
+    elements.addPriority.value = "";
+    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");
+    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
+        })
+      });
+      if (!res.ok) throw new Error("Server error");
+      location.reload();
+    } catch {
+      showToast("Failed to add task");
+    }
+  }
   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");
+    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")
+    };
     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();
+        openAddModal(elements, btn.dataset.status);
       });
     });
     document.getElementById("add-cancel")?.addEventListener("click", () => {
-      addModal.classList.remove("show");
+      elements.addModal.classList.remove("show");
     });
-    addModal.addEventListener("click", (e) => {
-      if (e.target === addModal) addModal.classList.remove("show");
+    elements.addModal.addEventListener("click", (e) => {
+      if (e.target === elements.addModal) elements.addModal.classList.remove("show");
     });
-    addTitle.addEventListener("keydown", (e) => {
+    elements.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");
-      }
-    });
+    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;
@@ -234,18 +254,7 @@
       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");
-      }
+      await deleteCard(card);
     });
   }
 
@@ -270,6 +279,7 @@
     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");
+    if (!control || !dropdown) return;
     let focusedOptionIndex = -1;
     let inputValue = "";
     function getFilteredTags() {
@@ -424,7 +434,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) {
@@ -436,6 +446,9 @@
     if (activeFilters.assignee) {
       params.set("assignee", activeFilters.assignee);
     }
+    if (activeFilters.searchText) {
+      params.set("search", activeFilters.searchText);
+    }
     return params;
   }
   var _openTaskDetail = null;
@@ -448,6 +461,45 @@
     _showUpdateWarning = callbacks.showUpdateWarning;
     _getDetailTaskId2 = callbacks.getDetailTaskId;
   }
+  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 updateColumnHtml(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);
+    }
+    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();
     const url = "/api/board/cards" + (filterParams.toString() ? "?" + filterParams.toString() : "");
@@ -455,41 +507,10 @@
       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) {
-        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 {
     }
@@ -554,48 +575,61 @@
       const comments = data.comments || [];
       if (tabBtn) tabBtn.textContent = "Comments (" + comments.length + ")";
       renderComments(taskId, comments);
-    } catch {
+    } catch (err) {
+      console.error("[agkan] loadComments failed for task", taskId, err);
       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";
@@ -603,8 +637,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 = "";
@@ -612,22 +646,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();
@@ -646,8 +680,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" });
@@ -656,8 +690,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();
@@ -676,117 +710,167 @@
     } 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 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 += renderEditableTextFields(task);
+    html += renderMetadataTable(metadata);
     html += '<div class="detail-timestamp">created ' + relativeTime(task.created_at) + " &middot; updated " + relativeTime(task.updated_at) + "</div>";
+    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";
     }
-    loadAllTags().then(() => renderTagsSection([...tags]));
+    loadAllTags().then(() => renderTagsSection([...tags])).catch((err) => {
+      console.error("[agkan] renderDetailPanel tags failed", err);
+    });
     loadComments(task.id);
     switchTab(lastTab);
   }
   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);
       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");
       }
-    } catch {
+    } catch (err) {
+      console.error("[agkan] openTaskDetail failed for task", taskId, err);
       showToast("Failed to load task details");
     }
   }
@@ -800,55 +884,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;
@@ -858,8 +987,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";
       }
@@ -882,47 +1011,32 @@
       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.getElementById("detail-save-btn")?.addEventListener("click", saveDetailTask);
     document.querySelectorAll(".card").forEach((card) => {
       card.addEventListener("click", async (e) => {
         if (e.defaultPrevented) return;
@@ -940,7 +1054,7 @@
 
   // 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");
@@ -993,6 +1107,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) {
@@ -1010,7 +1135,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();
@@ -1077,10 +1204,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");
@@ -1090,6 +1278,34 @@
         burgerDropdown.classList.remove("open");
       }
     });
+  }
+  async function executePurge(purgeConfirmBtn, purgeModal, purgeResultEl) {
+    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";
+    }
+  }
+  function initPurgeModal(burgerDropdown) {
     const purgeModal = document.getElementById("purge-confirm-modal");
     const purgeConfirmBtn = document.getElementById("purge-confirm-btn");
     const purgeCancelBtn = document.getElementById("purge-cancel-btn");
@@ -1102,32 +1318,9 @@
     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", () => executePurge(purgeConfirmBtn, purgeModal, purgeResultEl));
+  }
+  function initVersionModal(burgerDropdown) {
     const versionModal = document.getElementById("version-info-modal");
     const versionCloseBtn = document.getElementById("version-info-close");
     const versionTextEl = document.getElementById("version-info-text");
@@ -1147,6 +1340,14 @@
       versionModal.classList.remove("show");
     });
   }
+  function initBurgerMenu() {
+    const burgerBtn = document.getElementById("burger-menu-btn");
+    const burgerDropdown = document.getElementById("burger-menu-dropdown");
+    initBurgerToggle(burgerBtn, burgerDropdown);
+    initPurgeModal(burgerDropdown);
+    initVersionModal(burgerDropdown);
+    initDarkMode();
+  }
 
   // src/board/client/main.ts
   initDragDrop();