agent-tasks 1.9.5 → 1.9.7

package/dist/ui/app.js

@@ -3,7 +3,7 @@
 //
 // WebSocket connection, state management, initialization, tab/filter management,
 // theme, keyboard navigation, cleanup dialog, theme sync.
-// Modules: ui-utils.js, board.js, panel.js, drag.js, inline-edit.js
+// Modules: ui-utils.js, board.js, panel.js, drag.js, inline-edit.js, template.js
 // =============================================================================
 
 window.TaskBoard = window.TaskBoard || {};
@@ -25,6 +25,12 @@ var state = {
 
 TaskBoard.state = state;
 
+TaskBoard._baseUrl = '';
+TaskBoard._fetch = function (url, opts) {
+  return fetch(TaskBoard._baseUrl + url, opts);
+};
+TaskBoard._wsUrl = null;
+
 var filters = {
   search: '',
   project: '',
@@ -73,22 +79,6 @@ function updateThemeIcon(theme) {
   if (icon) icon.textContent = theme === 'dark' ? 'light_mode' : 'dark_mode';
 }
 
-var savedTheme = localStorage.getItem('agent-tasks-theme');
-if (savedTheme === 'dark') document.documentElement.setAttribute('data-theme', 'dark');
-updateThemeIcon(savedTheme || 'light');
-
-document.getElementById('theme-toggle').addEventListener('click', () => {
-  var isDark = document.documentElement.getAttribute('data-theme') === 'dark';
-  var next = isDark ? 'light' : 'dark';
-  if (isDark) {
-    document.documentElement.removeAttribute('data-theme');
-  } else {
-    document.documentElement.setAttribute('data-theme', 'dark');
-  }
-  localStorage.setItem('agent-tasks-theme', next);
-  updateThemeIcon(next);
-});
-
 // ---- Blocked tasks ----
 
 function getBlockedTaskIds() {
@@ -146,37 +136,6 @@ function updateFilterDropdowns() {
   assigneeSelect.value = currentAssignee;
 }
 
-document.getElementById('filter-search').addEventListener('input', (e) => {
-  clearTimeout(searchDebounce);
-  searchDebounce = setTimeout(() => {
-    filters.search = e.target.value;
-    saveFilters();
-    TaskBoard.resetColumnVisibleCounts();
-    render();
-  }, 200);
-});
-
-document.getElementById('filter-project').addEventListener('change', (e) => {
-  filters.project = e.target.value;
-  saveFilters();
-  TaskBoard.resetColumnVisibleCounts();
-  render();
-});
-
-document.getElementById('filter-assignee').addEventListener('change', (e) => {
-  filters.assignee = e.target.value;
-  saveFilters();
-  TaskBoard.resetColumnVisibleCounts();
-  render();
-});
-
-document.getElementById('filter-priority').addEventListener('change', (e) => {
-  filters.minPriority = parseInt(e.target.value) || 0;
-  saveFilters();
-  TaskBoard.resetColumnVisibleCounts();
-  render();
-});
-
 function applyRestoredFilters() {
   var searchInput = document.getElementById('filter-search');
   if (filters.search && searchInput) searchInput.value = filters.search;
@@ -199,7 +158,7 @@ function render() {
 
 function connect() {
   var proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
-  ws = new WebSocket(`${proto}//${location.host}`);
+  ws = new WebSocket(`${proto}//${TaskBoard._wsUrl || location.host}`);
   setConnectionStatus('connecting');
 
   ws.onopen = () => setConnectionStatus('connected');
@@ -395,365 +354,451 @@ function handleEvent(event) {
   }
 }
 
-// ---- Event Delegation (board) ----
-
-document.getElementById('board').addEventListener('click', (e) => {
-  var action = e.target.closest('[data-action]');
+// ---- Legacy Modal (cleanup only) ----
 
-  if (action) {
-    var act = action.dataset.action;
+function closeModal() {
+  document.getElementById('task-modal').hidden = true;
+}
 
-    if (act === 'toggle-collapse') {
-      e.stopPropagation();
-      var stage = action.dataset.stage;
-      if (state.collapsedColumns.has(stage)) {
-        state.collapsedColumns.delete(stage);
-      } else {
-        state.collapsedColumns.add(stage);
-      }
-      saveCollapsed();
-      render();
-      return;
-    }
+// ---- Init ----
 
-    if (act === 'inline-create') {
-      e.stopPropagation();
-      TaskBoard.showInlineCreate(action.dataset.stage);
-      return;
-    }
+function _init() {
+  var savedTheme = localStorage.getItem('agent-tasks-theme');
+  if (savedTheme === 'dark') document.documentElement.setAttribute('data-theme', 'dark');
+  updateThemeIcon(savedTheme || 'light');
 
-    if (act === 'add-task') {
-      e.stopPropagation();
-      TaskBoard.showInlineCreate(action.dataset.stage);
-      return;
+  document.getElementById('theme-toggle')?.addEventListener('click', () => {
+    var isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+    var next = isDark ? 'light' : 'dark';
+    if (isDark) {
+      document.documentElement.removeAttribute('data-theme');
+    } else {
+      document.documentElement.setAttribute('data-theme', 'dark');
     }
+    localStorage.setItem('agent-tasks-theme', next);
+    updateThemeIcon(next);
+  });
 
-    if (act === 'cycle-priority') {
-      e.stopPropagation();
-      TaskBoard.cyclePriority(parseInt(action.dataset.taskId, 10));
-      return;
-    }
+  document.getElementById('filter-search')?.addEventListener('input', (e) => {
+    clearTimeout(searchDebounce);
+    searchDebounce = setTimeout(() => {
+      filters.search = e.target.value;
+      saveFilters();
+      TaskBoard.resetColumnVisibleCounts();
+      render();
+    }, 200);
+  });
 
-    if (act === 'change-assignee') {
-      e.stopPropagation();
-      TaskBoard.showAssigneeDropdown(parseInt(action.dataset.taskId, 10), action);
-      return;
-    }
+  document.getElementById('filter-project')?.addEventListener('change', (e) => {
+    filters.project = e.target.value;
+    saveFilters();
+    TaskBoard.resetColumnVisibleCounts();
+    render();
+  });
 
-    if (act === 'show-more') {
-      e.stopPropagation();
-      TaskBoard.showMoreCards(action.dataset.stage);
-      render();
-      return;
-    }
-  }
+  document.getElementById('filter-assignee')?.addEventListener('change', (e) => {
+    filters.assignee = e.target.value;
+    saveFilters();
+    TaskBoard.resetColumnVisibleCounts();
+    render();
+  });
 
-  var card = e.target.closest('.task-card[data-task-id]');
-  if (card) {
-    TaskBoard.openPanel(parseInt(card.dataset.taskId, 10));
-  }
-});
+  document.getElementById('filter-priority')?.addEventListener('change', (e) => {
+    filters.minPriority = parseInt(e.target.value) || 0;
+    saveFilters();
+    TaskBoard.resetColumnVisibleCounts();
+    render();
+  });
 
-document.getElementById('board').addEventListener('dblclick', (e) => {
-  var titleEl = e.target.closest('[data-action="edit-title"]');
-  if (titleEl) {
-    e.stopPropagation();
-    TaskBoard.startInlineEdit(titleEl);
-  }
-});
+  // ---- Event Delegation (board) ----
 
-document.getElementById('board').addEventListener('keydown', (e) => {
-  if (e.key === 'Enter') {
-    var card = e.target.closest('.task-card[data-task-id]');
-    if (card) TaskBoard.openPanel(parseInt(card.dataset.taskId, 10));
-  }
-});
+  document.getElementById('board')?.addEventListener('click', (e) => {
+    var action = e.target.closest('[data-action]');
 
-// ---- Collapsed column click (expand) ----
+    if (action) {
+      var act = action.dataset.action;
 
-document.getElementById('board').addEventListener('click', (e) => {
-  var col = e.target.closest('.kanban-column.collapsed');
-  if (col) {
-    var stage = col.dataset.stage;
-    state.collapsedColumns.delete(stage);
-    saveCollapsed();
-    render();
-  }
-});
+      if (act === 'toggle-collapse') {
+        e.stopPropagation();
+        var stage = action.dataset.stage;
+        if (state.collapsedColumns.has(stage)) {
+          state.collapsedColumns.delete(stage);
+        } else {
+          state.collapsedColumns.add(stage);
+        }
+        saveCollapsed();
+        render();
+        return;
+      }
 
-// ---- Legacy Modal (cleanup only) ----
+      if (act === 'inline-create') {
+        e.stopPropagation();
+        TaskBoard.showInlineCreate(action.dataset.stage);
+        return;
+      }
 
-function closeModal() {
-  document.getElementById('task-modal').hidden = true;
-}
+      if (act === 'add-task') {
+        e.stopPropagation();
+        TaskBoard.showInlineCreate(action.dataset.stage);
+        return;
+      }
 
-document.getElementById('modal-close-btn')?.addEventListener('click', closeModal);
-document.getElementById('task-modal').addEventListener('click', (e) => {
-  if (e.target === e.currentTarget) closeModal();
-});
+      if (act === 'cycle-priority') {
+        e.stopPropagation();
+        TaskBoard.cyclePriority(parseInt(action.dataset.taskId, 10));
+        return;
+      }
 
-// ---- Keyboard Navigation ----
+      if (act === 'change-assignee') {
+        e.stopPropagation();
+        TaskBoard.showAssigneeDropdown(parseInt(action.dataset.taskId, 10), action);
+        return;
+      }
 
-document.addEventListener('keydown', (e) => {
-  if (e.key === 'Escape') {
-    if (TaskBoard.getActiveDropdown()) {
-      TaskBoard.dismissDropdown();
-      return;
+      if (act === 'show-more') {
+        e.stopPropagation();
+        TaskBoard.showMoreCards(action.dataset.stage);
+        render();
+        return;
+      }
     }
-    if (TaskBoard.getActiveInlineCreate()) {
-      TaskBoard.dismissInlineCreate();
-      return;
+
+    var card = e.target.closest('.task-card[data-task-id]');
+    if (card) {
+      TaskBoard.openPanel(parseInt(card.dataset.taskId, 10));
     }
-    if (state.panelTaskId) {
-      TaskBoard.closePanel();
-      return;
+  });
+
+  document.getElementById('board')?.addEventListener('dblclick', (e) => {
+    var titleEl = e.target.closest('[data-action="edit-title"]');
+    if (titleEl) {
+      e.stopPropagation();
+      TaskBoard.startInlineEdit(titleEl);
     }
-    var modal = document.getElementById('task-modal');
-    if (!modal.hidden) {
-      closeModal();
-      return;
+  });
+
+  document.getElementById('board')?.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') {
+      var card = e.target.closest('.task-card[data-task-id]');
+      if (card) TaskBoard.openPanel(parseInt(card.dataset.taskId, 10));
     }
-    var cleanupModal = document.getElementById('cleanup-modal');
-    if (!cleanupModal.classList.contains('hidden')) {
-      cleanupModal.classList.add('hidden');
-      return;
+  });
+
+  // ---- Collapsed column click (expand) ----
+
+  document.getElementById('board')?.addEventListener('click', (e) => {
+    var col = e.target.closest('.kanban-column.collapsed');
+    if (col) {
+      var stage = col.dataset.stage;
+      state.collapsedColumns.delete(stage);
+      saveCollapsed();
+      render();
     }
-  }
+  });
 
-  var isInput =
-    document.activeElement?.tagName === 'INPUT' ||
-    document.activeElement?.tagName === 'TEXTAREA' ||
-    document.activeElement?.getAttribute('contenteditable') === 'true';
-
-  if (
-    (e.key === '/' && !e.ctrlKey && !e.metaKey && !isInput) ||
-    ((e.ctrlKey || e.metaKey) && e.key === 'k')
-  ) {
-    e.preventDefault();
-    document.getElementById('filter-search').focus();
-  }
-});
+  document.getElementById('modal-close-btn')?.addEventListener('click', closeModal);
+  document.getElementById('task-modal')?.addEventListener('click', (e) => {
+    if (e.target === e.currentTarget) closeModal();
+  });
 
-// ---- Cleanup Dialog ----
+  // ---- Keyboard Navigation ----
 
-document.getElementById('cleanup-btn')?.addEventListener('click', () => {
-  document.getElementById('cleanup-modal').classList.remove('hidden');
-});
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+      if (TaskBoard.getActiveDropdown()) {
+        TaskBoard.dismissDropdown();
+        return;
+      }
+      if (TaskBoard.getActiveInlineCreate()) {
+        TaskBoard.dismissInlineCreate();
+        return;
+      }
+      if (state.panelTaskId) {
+        TaskBoard.closePanel();
+        return;
+      }
+      var modal = document.getElementById('task-modal');
+      if (modal && !modal.hidden) {
+        closeModal();
+        return;
+      }
+      var cleanupModal = document.getElementById('cleanup-modal');
+      if (cleanupModal && !cleanupModal.classList.contains('hidden')) {
+        cleanupModal.classList.add('hidden');
+        return;
+      }
+    }
+
+    var isInput =
+      document.activeElement?.tagName === 'INPUT' ||
+      document.activeElement?.tagName === 'TEXTAREA' ||
+      document.activeElement?.getAttribute('contenteditable') === 'true';
+
+    if (
+      (e.key === '/' && !e.ctrlKey && !e.metaKey && !isInput) ||
+      ((e.ctrlKey || e.metaKey) && e.key === 'k')
+    ) {
+      e.preventDefault();
+      document.getElementById('filter-search')?.focus();
+    }
+  });
+
+  // ---- Cleanup Dialog ----
 
-document.getElementById('cleanup-close-btn')?.addEventListener('click', () => {
-  document.getElementById('cleanup-modal').classList.add('hidden');
-});
+  document.getElementById('cleanup-btn')?.addEventListener('click', () => {
+    document.getElementById('cleanup-modal').classList.remove('hidden');
+  });
 
-document.getElementById('cleanup-modal')?.addEventListener('click', (e) => {
-  if (e.target === e.currentTarget) {
+  document.getElementById('cleanup-close-btn')?.addEventListener('click', () => {
     document.getElementById('cleanup-modal').classList.add('hidden');
-  }
-});
+  });
 
-document.getElementById('cleanup-completed')?.addEventListener('click', () => {
-  var showToast = TaskBoard.showToast;
-  document.getElementById('cleanup-modal').classList.add('hidden');
-  fetch('/api/cleanup', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ force: true }),
-  })
-    .then((r) => r.json())
-    .then((result) => {
-      showToast(
-        'Cleanup complete',
-        `Purged ${result.purgedTasks} tasks, ${result.purgedComments} comments, ${result.purgedApprovals} approvals`,
-        'success',
-      );
+  document.getElementById('cleanup-modal')?.addEventListener('click', (e) => {
+    if (e.target === e.currentTarget) {
+      document.getElementById('cleanup-modal').classList.add('hidden');
+    }
+  });
+
+  document.getElementById('cleanup-completed')?.addEventListener('click', () => {
+    var showToast = TaskBoard.showToast;
+    document.getElementById('cleanup-modal').classList.add('hidden');
+    TaskBoard._fetch('/api/cleanup', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ force: true }),
     })
-    .catch(() => showToast('Cleanup failed', 'Network error', 'error'));
-});
+      .then((r) => r.json())
+      .then((result) => {
+        showToast(
+          'Cleanup complete',
+          `Purged ${result.purgedTasks} tasks, ${result.purgedComments} comments, ${result.purgedApprovals} approvals`,
+          'success',
+        );
+      })
+      .catch(() => showToast('Cleanup failed', 'Network error', 'error'));
+  });
 
-document.getElementById('cleanup-everything')?.addEventListener('click', () => {
-  var showToast = TaskBoard.showToast;
-  if (
-    !confirm(
-      'This will remove ALL tasks — completed, in-progress, everything. This cannot be undone. Continue?',
+  document.getElementById('cleanup-everything')?.addEventListener('click', () => {
+    var showToast = TaskBoard.showToast;
+    if (
+      !confirm(
+        'This will remove ALL tasks — completed, in-progress, everything. This cannot be undone. Continue?',
+      )
     )
-  )
-    return;
-  document.getElementById('cleanup-modal').classList.add('hidden');
-  fetch('/api/cleanup', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ all: true }),
-  })
-    .then((r) => r.json())
-    .then((result) => {
-      showToast(
-        'Everything purged',
-        `Purged ${result.purgedTasks} tasks, ${result.purgedComments} comments, ${result.purgedApprovals} approvals`,
-        'success',
-      );
+      return;
+    document.getElementById('cleanup-modal').classList.add('hidden');
+    TaskBoard._fetch('/api/cleanup', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ all: true }),
     })
-    .catch(() => showToast('Cleanup failed', 'Network error', 'error'));
-});
-
-// ---- Theme sync from parent (agent-desk) via executeJavaScript ----
-
-window.addEventListener('message', function (event) {
-  if (!event.data || event.data.type !== 'theme-sync') return;
-  var colors = event.data.colors;
-  if (!colors) return;
-
-  function ensureContrast(bg, fg) {
-    var lum = function (hex) {
-      if (!hex || hex.charAt(0) !== '#' || hex.length < 7) return 0.5;
-      var r = parseInt(hex.slice(1, 3), 16) / 255;
-      var g = parseInt(hex.slice(3, 5), 16) / 255;
-      var b = parseInt(hex.slice(5, 7), 16) / 255;
-      return 0.2126 * r + 0.7152 * g + 0.0722 * b;
-    };
-    var bgLum = lum(bg);
-    return bgLum < 0.5 ? (lum(fg) < 0.4 ? '#e0e0e0' : fg) : lum(fg) > 0.6 ? '#333333' : fg;
-  }
+      .then((r) => r.json())
+      .then((result) => {
+        showToast(
+          'Everything purged',
+          `Purged ${result.purgedTasks} tasks, ${result.purgedComments} comments, ${result.purgedApprovals} approvals`,
+          'success',
+        );
+      })
+      .catch(() => showToast('Cleanup failed', 'Network error', 'error'));
+  });
 
-  var root = document.documentElement;
-  var bgColor = colors.bg || null;
+  // ---- Theme sync from parent (agent-desk) via executeJavaScript ----
+
+  window.addEventListener('message', function (event) {
+    if (!event.data || event.data.type !== 'theme-sync') return;
+    var colors = event.data.colors;
+    if (!colors) return;
+
+    function ensureContrast(bg, fg) {
+      var lum = function (hex) {
+        if (!hex || hex.charAt(0) !== '#' || hex.length < 7) return 0.5;
+        var r = parseInt(hex.slice(1, 3), 16) / 255;
+        var g = parseInt(hex.slice(3, 5), 16) / 255;
+        var b = parseInt(hex.slice(5, 7), 16) / 255;
+        return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+      };
+      var bgLum = lum(bg);
+      return bgLum < 0.5 ? (lum(fg) < 0.4 ? '#e0e0e0' : fg) : lum(fg) > 0.6 ? '#333333' : fg;
+    }
 
-  if (colors.bg) root.style.setProperty('--bg', colors.bg);
-  if (colors.bgSurface) root.style.setProperty('--bg-surface', colors.bgSurface);
-  if (colors.bgElevated) root.style.setProperty('--bg-elevated', colors.bgElevated);
-  if (colors.bgHover) root.style.setProperty('--bg-hover', colors.bgHover);
-  if (colors.bgInset) root.style.setProperty('--bg-inset', colors.bgInset);
+    var root = document.documentElement;
+    var bgColor = colors.bg || null;
 
-  if (colors.border) root.style.setProperty('--border', colors.border);
-  if (colors.borderLight) root.style.setProperty('--border-light', colors.borderLight);
+    if (colors.bg) root.style.setProperty('--bg', colors.bg);
+    if (colors.bgSurface) root.style.setProperty('--bg-surface', colors.bgSurface);
+    if (colors.bgElevated) root.style.setProperty('--bg-elevated', colors.bgElevated);
+    if (colors.bgHover) root.style.setProperty('--bg-hover', colors.bgHover);
+    if (colors.bgInset) root.style.setProperty('--bg-inset', colors.bgInset);
 
-  if (colors.text)
-    root.style.setProperty('--text', bgColor ? ensureContrast(bgColor, colors.text) : colors.text);
-  if (colors.textSecondary)
-    root.style.setProperty(
-      '--text-secondary',
-      bgColor ? ensureContrast(bgColor, colors.textSecondary) : colors.textSecondary,
-    );
-  if (colors.textMuted)
-    root.style.setProperty(
-      '--text-muted',
-      bgColor ? ensureContrast(bgColor, colors.textMuted) : colors.textMuted,
-    );
-  if (colors.textDim)
-    root.style.setProperty(
-      '--text-dim',
-      bgColor ? ensureContrast(bgColor, colors.textDim) : colors.textDim,
-    );
+    if (colors.border) root.style.setProperty('--border', colors.border);
+    if (colors.borderLight) root.style.setProperty('--border-light', colors.borderLight);
 
-  if (colors.accent) root.style.setProperty('--accent', colors.accent);
-  if (colors.accentHover) root.style.setProperty('--accent-hover', colors.accentHover);
-  if (colors.accentDim) root.style.setProperty('--accent-dim', colors.accentDim);
-  if (colors.accentSolid) root.style.setProperty('--accent-solid', colors.accentSolid);
-  if (colors.accentGlow) root.style.setProperty('--accent-glow', colors.accentGlow);
-
-  if (colors.green) root.style.setProperty('--green', colors.green);
-  if (colors.greenDim) root.style.setProperty('--green-dim', colors.greenDim);
-  if (colors.yellow) root.style.setProperty('--yellow', colors.yellow);
-  if (colors.yellowDim) root.style.setProperty('--yellow-dim', colors.yellowDim);
-  if (colors.orange) root.style.setProperty('--orange', colors.orange);
-  if (colors.orangeDim) root.style.setProperty('--orange-dim', colors.orangeDim);
-  if (colors.red) root.style.setProperty('--red', colors.red);
-  if (colors.redDim) root.style.setProperty('--red-dim', colors.redDim);
-  if (colors.purple) root.style.setProperty('--purple', colors.purple);
-  if (colors.purpleDim) root.style.setProperty('--purple-dim', colors.purpleDim);
-  if (colors.blue) root.style.setProperty('--blue', colors.blue);
-  if (colors.blueDim) root.style.setProperty('--blue-dim', colors.blueDim);
-  if (colors.indigo) root.style.setProperty('--indigo', colors.indigo);
-  if (colors.indigoDim) root.style.setProperty('--indigo-dim', colors.indigoDim);
-  if (colors.amber) root.style.setProperty('--amber', colors.amber);
-  if (colors.amberDim) root.style.setProperty('--amber-dim', colors.amberDim);
-  if (colors.gray) root.style.setProperty('--gray', colors.gray);
-  if (colors.grayDim) root.style.setProperty('--gray-dim', colors.grayDim);
-
-  if (colors.stageBacklog) root.style.setProperty('--stage-backlog', colors.stageBacklog);
-  if (colors.stageSpec) root.style.setProperty('--stage-spec', colors.stageSpec);
-  if (colors.stagePlan) root.style.setProperty('--stage-plan', colors.stagePlan);
-  if (colors.stageImplement) root.style.setProperty('--stage-implement', colors.stageImplement);
-  if (colors.stageTest) root.style.setProperty('--stage-test', colors.stageTest);
-  if (colors.stageReview) root.style.setProperty('--stage-review', colors.stageReview);
-  if (colors.stageDone) root.style.setProperty('--stage-done', colors.stageDone);
-  if (colors.stageCancelled) root.style.setProperty('--stage-cancelled', colors.stageCancelled);
-
-  if (colors.focusRing) root.style.setProperty('--focus-ring', colors.focusRing);
-
-  if (colors.isDark !== undefined) {
-    if (colors.isDark) {
-      root.style.setProperty(
-        '--shadow-1',
-        '0px 1px 2px 0px rgba(0,0,0,0.6), 0px 1px 3px 1px rgba(0,0,0,0.3)',
-      );
-      root.style.setProperty(
-        '--shadow-2',
-        '0px 1px 2px 0px rgba(0,0,0,0.6), 0px 2px 6px 2px rgba(0,0,0,0.3)',
-      );
-      root.style.setProperty(
-        '--shadow-3',
-        '0px 1px 3px 0px rgba(0,0,0,0.6), 0px 4px 8px 3px rgba(0,0,0,0.3)',
-      );
+    if (colors.text)
       root.style.setProperty(
-        '--shadow-hover',
-        '0px 2px 4px 0px rgba(0,0,0,0.5), 0px 6px 16px 4px rgba(0,0,0,0.4)',
+        '--text',
+        bgColor ? ensureContrast(bgColor, colors.text) : colors.text,
       );
+    if (colors.textSecondary)
       root.style.setProperty(
-        '--shadow-drag',
-        '0px 4px 8px 0px rgba(0,0,0,0.5), 0px 12px 32px 6px rgba(0,0,0,0.4)',
+        '--text-secondary',
+        bgColor ? ensureContrast(bgColor, colors.textSecondary) : colors.textSecondary,
       );
+    if (colors.textMuted)
       root.style.setProperty(
-        '--shadow-panel',
-        '-2px 0px 8px 0px rgba(0,0,0,0.5), -4px 0px 16px 2px rgba(0,0,0,0.3)',
-      );
-    } else {
-      root.style.setProperty(
-        '--shadow-1',
-        '0px 1px 2px 0px rgba(0,0,0,0.3), 0px 1px 3px 1px rgba(0,0,0,0.15)',
-      );
-      root.style.setProperty(
-        '--shadow-2',
-        '0px 1px 2px 0px rgba(0,0,0,0.3), 0px 2px 6px 2px rgba(0,0,0,0.15)',
-      );
-      root.style.setProperty(
-        '--shadow-3',
-        '0px 1px 3px 0px rgba(0,0,0,0.3), 0px 4px 8px 3px rgba(0,0,0,0.15)',
-      );
-      root.style.setProperty(
-        '--shadow-hover',
-        '0px 2px 4px 0px rgba(0,0,0,0.25), 0px 4px 12px 4px rgba(0,0,0,0.15)',
+        '--text-muted',
+        bgColor ? ensureContrast(bgColor, colors.textMuted) : colors.textMuted,
       );
+    if (colors.textDim)
       root.style.setProperty(
-        '--shadow-drag',
-        '0px 4px 8px 0px rgba(0,0,0,0.3), 0px 12px 32px 6px rgba(0,0,0,0.25)',
-      );
-      root.style.setProperty(
-        '--shadow-panel',
-        '-2px 0px 8px 0px rgba(0,0,0,0.3), -4px 0px 16px 2px rgba(0,0,0,0.15)',
+        '--text-dim',
+        bgColor ? ensureContrast(bgColor, colors.textDim) : colors.textDim,
       );
+
+    if (colors.accent) root.style.setProperty('--accent', colors.accent);
+    if (colors.accentHover) root.style.setProperty('--accent-hover', colors.accentHover);
+    if (colors.accentDim) root.style.setProperty('--accent-dim', colors.accentDim);
+    if (colors.accentSolid) root.style.setProperty('--accent-solid', colors.accentSolid);
+    if (colors.accentGlow) root.style.setProperty('--accent-glow', colors.accentGlow);
+
+    if (colors.green) root.style.setProperty('--green', colors.green);
+    if (colors.greenDim) root.style.setProperty('--green-dim', colors.greenDim);
+    if (colors.yellow) root.style.setProperty('--yellow', colors.yellow);
+    if (colors.yellowDim) root.style.setProperty('--yellow-dim', colors.yellowDim);
+    if (colors.orange) root.style.setProperty('--orange', colors.orange);
+    if (colors.orangeDim) root.style.setProperty('--orange-dim', colors.orangeDim);
+    if (colors.red) root.style.setProperty('--red', colors.red);
+    if (colors.redDim) root.style.setProperty('--red-dim', colors.redDim);
+    if (colors.purple) root.style.setProperty('--purple', colors.purple);
+    if (colors.purpleDim) root.style.setProperty('--purple-dim', colors.purpleDim);
+    if (colors.blue) root.style.setProperty('--blue', colors.blue);
+    if (colors.blueDim) root.style.setProperty('--blue-dim', colors.blueDim);
+    if (colors.indigo) root.style.setProperty('--indigo', colors.indigo);
+    if (colors.indigoDim) root.style.setProperty('--indigo-dim', colors.indigoDim);
+    if (colors.amber) root.style.setProperty('--amber', colors.amber);
+    if (colors.amberDim) root.style.setProperty('--amber-dim', colors.amberDim);
+    if (colors.gray) root.style.setProperty('--gray', colors.gray);
+    if (colors.grayDim) root.style.setProperty('--gray-dim', colors.grayDim);
+
+    if (colors.stageBacklog) root.style.setProperty('--stage-backlog', colors.stageBacklog);
+    if (colors.stageSpec) root.style.setProperty('--stage-spec', colors.stageSpec);
+    if (colors.stagePlan) root.style.setProperty('--stage-plan', colors.stagePlan);
+    if (colors.stageImplement) root.style.setProperty('--stage-implement', colors.stageImplement);
+    if (colors.stageTest) root.style.setProperty('--stage-test', colors.stageTest);
+    if (colors.stageReview) root.style.setProperty('--stage-review', colors.stageReview);
+    if (colors.stageDone) root.style.setProperty('--stage-done', colors.stageDone);
+    if (colors.stageCancelled) root.style.setProperty('--stage-cancelled', colors.stageCancelled);
+
+    if (colors.focusRing) root.style.setProperty('--focus-ring', colors.focusRing);
+
+    if (colors.isDark !== undefined) {
+      if (colors.isDark) {
+        root.style.setProperty(
+          '--shadow-1',
+          '0px 1px 2px 0px rgba(0,0,0,0.6), 0px 1px 3px 1px rgba(0,0,0,0.3)',
+        );
+        root.style.setProperty(
+          '--shadow-2',
+          '0px 1px 2px 0px rgba(0,0,0,0.6), 0px 2px 6px 2px rgba(0,0,0,0.3)',
+        );
+        root.style.setProperty(
+          '--shadow-3',
+          '0px 1px 3px 0px rgba(0,0,0,0.6), 0px 4px 8px 3px rgba(0,0,0,0.3)',
+        );
+        root.style.setProperty(
+          '--shadow-hover',
+          '0px 2px 4px 0px rgba(0,0,0,0.5), 0px 6px 16px 4px rgba(0,0,0,0.4)',
+        );
+        root.style.setProperty(
+          '--shadow-drag',
+          '0px 4px 8px 0px rgba(0,0,0,0.5), 0px 12px 32px 6px rgba(0,0,0,0.4)',
+        );
+        root.style.setProperty(
+          '--shadow-panel',
+          '-2px 0px 8px 0px rgba(0,0,0,0.5), -4px 0px 16px 2px rgba(0,0,0,0.3)',
+        );
+      } else {
+        root.style.setProperty(
+          '--shadow-1',
+          '0px 1px 2px 0px rgba(0,0,0,0.3), 0px 1px 3px 1px rgba(0,0,0,0.15)',
+        );
+        root.style.setProperty(
+          '--shadow-2',
+          '0px 1px 2px 0px rgba(0,0,0,0.3), 0px 2px 6px 2px rgba(0,0,0,0.15)',
+        );
+        root.style.setProperty(
+          '--shadow-3',
+          '0px 1px 3px 0px rgba(0,0,0,0.3), 0px 4px 8px 3px rgba(0,0,0,0.15)',
+        );
+        root.style.setProperty(
+          '--shadow-hover',
+          '0px 2px 4px 0px rgba(0,0,0,0.25), 0px 4px 12px 4px rgba(0,0,0,0.15)',
+        );
+        root.style.setProperty(
+          '--shadow-drag',
+          '0px 4px 8px 0px rgba(0,0,0,0.3), 0px 12px 32px 6px rgba(0,0,0,0.25)',
+        );
+        root.style.setProperty(
+          '--shadow-panel',
+          '-2px 0px 8px 0px rgba(0,0,0,0.3), -4px 0px 16px 2px rgba(0,0,0,0.15)',
+        );
+      }
     }
-  }
 
-  if (colors.isDark !== undefined) {
-    var theme = colors.isDark ? 'dark' : 'light';
-    if (colors.isDark) {
-      document.documentElement.setAttribute('data-theme', 'dark');
-    } else {
-      document.documentElement.removeAttribute('data-theme');
+    if (colors.isDark !== undefined) {
+      var theme = colors.isDark ? 'dark' : 'light';
+      if (colors.isDark) {
+        document.documentElement.setAttribute('data-theme', 'dark');
+      } else {
+        document.documentElement.removeAttribute('data-theme');
+      }
+      localStorage.setItem('agent-tasks-theme', theme);
+      updateThemeIcon(theme);
     }
-    localStorage.setItem('agent-tasks-theme', theme);
-    updateThemeIcon(theme);
-  }
 
-  var themeToggle = document.getElementById('theme-toggle');
-  if (themeToggle) themeToggle.style.display = 'none';
-});
+    var themeToggle = document.getElementById('theme-toggle');
+    if (themeToggle) themeToggle.style.display = 'none';
+  });
+
+  // ---- Initialize modules ----
+
+  TaskBoard.initDragEvents();
+  TaskBoard.initPanelEvents();
+  TaskBoard.initPanelResize();
+
+  // ---- Boot ----
 
-// ---- Initialize modules ----
+  connect();
+}
 
-TaskBoard.initDragEvents();
-TaskBoard.initPanelEvents();
-TaskBoard.initPanelResize();
+// ---- Plugin mount/unmount ----
+
+TaskBoard.mount = function (container, options) {
+  options = options || {};
+  TaskBoard._baseUrl = options.baseUrl || '';
+  TaskBoard._wsUrl = options.wsUrl || null;
+  if (options.cssUrl && !document.getElementById('tb-plugin-css')) {
+    var link = document.createElement('link');
+    link.id = 'tb-plugin-css';
+    link.rel = 'stylesheet';
+    link.href = options.cssUrl;
+    document.head.appendChild(link);
+  }
+  if (typeof TaskBoard._template === 'function') {
+    container.innerHTML = TaskBoard._template();
+  }
+  _init();
+};
+
+TaskBoard.unmount = function () {
+  if (ws) {
+    ws.onclose = null;
+    ws.close();
+    ws = null;
+  }
+  clearTimeout(reconnectTimer);
+};
 
-// ---- Boot ----
+// ---- Auto-init for standalone mode ----
 
-connect();
+_init();

package/dist/ui/drag.js

@@ -59,7 +59,7 @@ function onDrop(e, col) {
   const task = state.tasks.find((t) => t.id === draggedTaskId);
   if (!task || task.stage === targetStage) return;
 
-  fetch(`/api/tasks/${draggedTaskId}/stage`, {
+  TaskBoard._fetch(`/api/tasks/${draggedTaskId}/stage`, {
     method: 'PUT',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ stage: targetStage }),

package/dist/ui/index.html

@@ -165,6 +165,7 @@
     <script src="panel.js"></script>
     <script src="drag.js"></script>
     <script src="inline-edit.js"></script>
+    <script src="template.js"></script>
     <script src="app.js"></script>
   </body>
 </html>

package/dist/ui/inline-edit.js

@@ -64,7 +64,7 @@ function dismissInlineCreate() {
 
 function createTaskInline(title, stage) {
   var showToast = TaskBoard.showToast;
-  fetch('/api/tasks', {
+  TaskBoard._fetch('/api/tasks', {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ title, stage, created_by: 'dashboard' }),
@@ -205,7 +205,7 @@ function dismissDropdownOnOutsideClick(e) {
 
 function updateTask(taskId, updates) {
   var showToast = TaskBoard.showToast;
-  fetch(`/api/tasks/${taskId}`, {
+  TaskBoard._fetch(`/api/tasks/${taskId}`, {
     method: 'PUT',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify(updates),

package/dist/ui/panel.js

@@ -294,13 +294,13 @@ function renderPanelContent(task) {
   panelBody.innerHTML = html + skeletonHTML;
 
   Promise.all([
-    fetch(`/api/tasks/${task.id}/artifacts`)
+    TaskBoard._fetch(`/api/tasks/${task.id}/artifacts`)
       .then((r) => r.json())
       .catch(() => []),
-    fetch(`/api/tasks/${task.id}/comments`)
+    TaskBoard._fetch(`/api/tasks/${task.id}/comments`)
       .then((r) => r.json())
       .catch(() => []),
-    fetch(`/api/tasks/${task.id}/subtasks`)
+    TaskBoard._fetch(`/api/tasks/${task.id}/subtasks`)
       .then((r) => r.json())
       .catch(() => []),
   ]).then(([artifacts, comments, subtasks]) => {
@@ -379,7 +379,7 @@ function submitComment(taskId) {
   const content = input?.value?.trim();
   if (!content) return;
 
-  fetch(`/api/tasks/${taskId}/comments`, {
+  TaskBoard._fetch(`/api/tasks/${taskId}/comments`, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ content, agent_id: 'dashboard' }),

package/dist/ui/template.js

@@ -0,0 +1,91 @@
+// =============================================================================
+// agent-tasks — Template Module
+//
+// HTML template for plugin mount mode. Extracted from index.html body content.
+// =============================================================================
+
+window.TaskBoard = window.TaskBoard || {};
+
+TaskBoard._template = function () {
+  return (
+    '<header role="banner">' +
+    '<div class="header-left">' +
+    '<span class="material-symbols-outlined brand-icon">view_kanban</span>' +
+    '<h1>agent-tasks</h1>' +
+    '<span class="version" id="version"></span>' +
+    '<span id="connection-status" class="status-badge disconnected" role="status" aria-live="polite">Connecting</span>' +
+    '</div>' +
+    '<div class="header-right">' +
+    '<div class="stats" id="stats" aria-live="polite" aria-atomic="true"></div>' +
+    '<button id="cleanup-btn" class="icon-btn" title="Clean up" aria-label="Clean up old tasks">' +
+    '<span class="material-symbols-outlined">mop</span>' +
+    '</button>' +
+    '<button id="theme-toggle" class="icon-btn" title="Toggle theme" aria-label="Toggle theme">' +
+    '<span class="material-symbols-outlined theme-icon">dark_mode</span>' +
+    '</button>' +
+    '</div>' +
+    '</header>' +
+    '<div class="filter-bar" id="filter-bar" role="search" aria-label="Task filters">' +
+    '<div class="filter-group">' +
+    '<span class="material-symbols-outlined filter-icon" aria-hidden="true">filter_list</span>' +
+    '<input type="text" id="filter-search" class="filter-input" placeholder="Search tasks... (/ or Ctrl+K)" autocomplete="off" aria-label="Search tasks" />' +
+    '<select id="filter-project" class="filter-select" aria-label="Filter by project">' +
+    '<option value="">All projects</option>' +
+    '</select>' +
+    '<select id="filter-assignee" class="filter-select" aria-label="Filter by assignee">' +
+    '<option value="">All assignees</option>' +
+    '</select>' +
+    '<select id="filter-priority" class="filter-select" aria-label="Filter by minimum priority">' +
+    '<option value="">Any priority</option>' +
+    '<option value="1">P1+</option>' +
+    '<option value="3">P3+</option>' +
+    '<option value="5">P5+</option>' +
+    '<option value="10">P10+</option>' +
+    '</select>' +
+    '</div>' +
+    '<div class="filter-chips" id="filter-chips"></div>' +
+    '</div>' +
+    '<div class="board-wrapper" id="board-wrapper">' +
+    '<main id="board" class="kanban-board" role="region" aria-label="Task board"></main>' +
+    '<aside id="side-panel" class="side-panel" role="complementary" aria-label="Task details">' +
+    '<div class="panel-header" id="panel-header-content"></div>' +
+    '<div class="panel-body" id="panel-body"></div>' +
+    '</aside>' +
+    '</div>' +
+    '<div id="loading-overlay" class="loading-overlay" aria-label="Loading">' +
+    '<div class="loading-spinner"></div>' +
+    '<div class="loading-text">Connecting to agent-tasks...</div>' +
+    '</div>' +
+    '<div id="task-modal" class="modal-overlay" hidden role="dialog" aria-modal="true" aria-labelledby="modal-title">' +
+    '<div class="modal">' +
+    '<div class="modal-header">' +
+    '<h2 id="modal-title"></h2>' +
+    '<button class="icon-btn modal-close" id="modal-close-btn" aria-label="Close dialog">&times;</button>' +
+    '</div>' +
+    '<div id="modal-body" class="modal-body"></div>' +
+    '</div>' +
+    '</div>' +
+    '<div id="cleanup-modal" class="modal-overlay hidden" role="dialog" aria-modal="true">' +
+    '<div class="modal" style="max-width: 420px">' +
+    '<div class="modal-header">' +
+    '<h2><span class="material-symbols-outlined" style="font-size: 20px; vertical-align: middle; margin-right: 6px">mop</span>Clean Up</h2>' +
+    '<button class="icon-btn modal-close" id="cleanup-close-btn" aria-label="Close">&times;</button>' +
+    '</div>' +
+    '<div class="modal-body">' +
+    '<p style="color: var(--text-muted); margin-bottom: 12px">Remove old tasks and stale data:</p>' +
+    '<div class="cleanup-options">' +
+    '<button id="cleanup-completed" class="cleanup-option">' +
+    '<span class="material-symbols-outlined">auto_delete</span>' +
+    '<div><strong>Purge completed</strong><span>Remove all completed and cancelled tasks</span></div>' +
+    '</button>' +
+    '<button id="cleanup-everything" class="cleanup-option cleanup-option-danger">' +
+    '<span class="material-symbols-outlined">delete_forever</span>' +
+    '<div><strong>Purge everything</strong><span>Remove ALL tasks regardless of status</span></div>' +
+    '</button>' +
+    '</div>' +
+    '</div>' +
+    '</div>' +
+    '</div>' +
+    '<div id="toast-container" class="toast-container" aria-live="polite"></div>'
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agent-tasks",
-  "version": "1.9.5",
+  "version": "1.9.7",
   "description": "Pipeline-driven task management for AI coding agents — stages, dependencies, artifacts, and multi-agent claiming",
   "type": "module",
   "main": "dist/index.js",