agkan 2.4.0 → 2.6.0

package/dist/board/server.js

@@ -6,6 +6,7 @@ const hono_1 = require("hono");
 const node_server_1 = require("@hono/node-server");
 const TaskService_1 = require("../services/TaskService");
 const TaskTagService_1 = require("../services/TaskTagService");
+const TagService_1 = require("../services/TagService");
 const MetadataService_1 = require("../services/MetadataService");
 const models_1 = require("../models");
 const connection_1 = require("../db/connection");
@@ -58,7 +59,7 @@ const BOARD_STYLES = `
     header { background: #1e293b; color: white; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; }
     header h1 { font-size: 18px; font-weight: 700; }
     .board-title { font-size: 14px; font-weight: 400; opacity: 0.75; }
-    .board-container { display: flex; width: 100%; height: calc(100vh - 48px); gap: 0; }
+    .board-container { display: flex; width: 100%; height: calc(100vh - 92px); gap: 0; }
     .board { display: flex; gap: 12px; padding: 16px; overflow-x: auto; flex: 1; align-items: flex-start; min-width: 0; }
     .board.with-panel { padding-right: 0; }
     .column { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; width: 240px; flex-shrink: 0; display: flex; flex-direction: column; border-top: 3px solid transparent; }
@@ -103,7 +104,7 @@ const BOARD_STYLES = `
     .modal-actions button.primary:hover { background: #2563eb; }
     .toast { position: fixed; bottom: 20px; right: 20px; background: #ef4444; color: white; padding: 10px 16px; border-radius: 6px; font-size: 13px; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
     .toast.show { opacity: 1; }
-    .detail-panel { position: relative; width: 0; height: calc(100vh - 48px); background: white; box-shadow: none; border-left: 0 solid #e2e8f0; display: flex; flex-direction: column; max-width: 800px; overflow: hidden; transition: width 0.25s ease; }
+    .detail-panel { position: relative; width: 0; height: calc(100vh - 92px); background: white; box-shadow: none; border-left: 0 solid #e2e8f0; display: flex; flex-direction: column; max-width: 800px; overflow: hidden; transition: width 0.25s ease; }
     .detail-panel-resize-handle { position: absolute; top: 0; left: 0; width: 6px; height: 100%; cursor: col-resize; z-index: 10; background: transparent; }
     .detail-panel-resize-handle:hover, .detail-panel-resize-handle.dragging { background: rgba(59,130,246,0.3); }
     .detail-panel.open { width: 400px; min-width: 280px; border-left-width: 1px; }
@@ -111,8 +112,9 @@ const BOARD_STYLES = `
     .detail-panel-header h2 { font-size: 16px; font-weight: 700; color: #1e293b; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     .detail-panel-close { background: none; border: none; font-size: 20px; color: #64748b; cursor: pointer; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 4px; flex-shrink: 0; }
     .detail-panel-close:hover { background: #f1f5f9; color: #1e293b; }
-    .detail-panel-body { flex: 1; overflow-y: auto; padding: 20px; min-width: 0; }
+    .detail-panel-body { flex: 1; overflow-y: auto; padding: 20px; min-width: 0; display: flex; flex-direction: column; }
     .detail-field { margin-bottom: 16px; word-wrap: break-word; }
+    .description-field-wrapper { flex: 1; display: flex; flex-direction: column; min-height: 0; margin-bottom: 0; }
     .detail-field-label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: #94a3b8; margin-bottom: 4px; letter-spacing: 0.05em; }
     .detail-field-value { font-size: 13px; color: #1e293b; line-height: 1.5; }
     .detail-field-value.empty { color: #94a3b8; font-style: italic; }
@@ -129,8 +131,47 @@ const BOARD_STYLES = `
     .detail-edit-input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.2); }
     .detail-edit-textarea { width: 100%; border: 1px solid #e2e8f0; border-radius: 6px; padding: 7px 10px; font-size: 13px; font-family: inherit; resize: vertical; min-height: 240px; background: white; color: #1e293b; }
     .detail-edit-textarea:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.2); }
+    .description-field-wrapper .detail-edit-textarea { flex: 1; resize: none; min-height: 0; }
     .detail-edit-select { width: 100%; border: 1px solid #e2e8f0; border-radius: 6px; padding: 7px 10px; font-size: 13px; font-family: inherit; background: white; color: #1e293b; }
-    .detail-edit-select:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.2); }`;
+    .detail-edit-select:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.2); }
+    .tag-select-wrapper { position: relative; }
+    .tag-select-control { border: 1px solid #e2e8f0; border-radius: 6px; padding: 4px 8px; min-height: 36px; cursor: text; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; background: white; }
+    .tag-select-control:focus-within { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.2); }
+    .tag-pill { background: #e0f2fe; color: #0369a1; font-size: 11px; font-weight: 600; padding: 2px 4px 2px 8px; border-radius: 10px; display: inline-flex; align-items: center; gap: 3px; }
+    .tag-pill-remove { background: none; border: none; color: #0369a1; cursor: pointer; font-size: 13px; line-height: 1; padding: 0 2px; display: inline-flex; align-items: center; border-radius: 50%; }
+    .tag-pill-remove:hover { color: #dc2626; background: rgba(220,38,38,0.1); }
+    .tag-select-input { border: none; outline: none; font-size: 12px; font-family: inherit; min-width: 80px; flex: 1; background: transparent; padding: 2px 0; color: #1e293b; }
+    .tag-select-input::placeholder { color: #94a3b8; }
+    .tag-select-dropdown { position: absolute; top: calc(100% + 2px); left: 0; right: 0; background: white; border: 1px solid #e2e8f0; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 100; max-height: 180px; overflow-y: auto; display: none; }
+    .tag-select-dropdown.open { display: block; }
+    .tag-select-option { padding: 6px 10px; font-size: 12px; cursor: pointer; color: #1e293b; }
+    .tag-select-option:hover, .tag-select-option.focused { background: #eff6ff; color: #0369a1; }
+    .tag-select-no-options { padding: 6px 10px; font-size: 12px; color: #94a3b8; font-style: italic; }
+    .filter-bar { display: flex; align-items: center; gap: 16px; height: 44px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; padding: 0 16px; flex-shrink: 0; overflow-x: auto; }
+    .filter-group { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
+    .filter-label { font-size: 10px; font-weight: 700; text-transform: uppercase; color: #94a3b8; letter-spacing: 0.05em; white-space: nowrap; }
+    .filter-priority-btn { border: 1px solid #e2e8f0; background: white; border-radius: 4px; padding: 2px 8px; font-size: 11px; font-weight: 600; cursor: pointer; text-transform: uppercase; color: #64748b; }
+    .filter-priority-btn:hover { background: #f1f5f9; }
+    .filter-priority-btn.active[data-priority="critical"] { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }
+    .filter-priority-btn.active[data-priority="high"] { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }
+    .filter-priority-btn.active[data-priority="medium"] { background: #fef9c3; color: #ca8a04; border-color: #fde047; }
+    .filter-priority-btn.active[data-priority="low"] { background: #dcfce7; color: #16a34a; border-color: #86efac; }
+    .filter-assignee-input { border: 1px solid #e2e8f0; border-radius: 4px; padding: 3px 8px; font-size: 12px; font-family: inherit; background: white; color: #1e293b; width: 120px; }
+    .filter-assignee-input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.2); }
+    .filter-tag-pill { background: #e0f2fe; color: #0369a1; font-size: 11px; font-weight: 600; padding: 2px 4px 2px 8px; border-radius: 10px; display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; }
+    .filter-tag-pill-remove { background: none; border: none; color: #0369a1; cursor: pointer; font-size: 13px; line-height: 1; padding: 0 2px; display: inline-flex; align-items: center; border-radius: 50%; }
+    .filter-tag-pill-remove:hover { color: #dc2626; background: rgba(220,38,38,0.1); }
+    .filter-tag-dropdown-wrapper { flex-shrink: 0; }
+    .filter-tag-add-btn { border: 1px dashed #cbd5e1; background: white; border-radius: 4px; padding: 2px 8px; font-size: 11px; color: #64748b; cursor: pointer; white-space: nowrap; }
+    .filter-tag-add-btn:hover { background: #f1f5f9; border-color: #94a3b8; }
+    .filter-tag-dropdown { position: fixed; background: white; border: 1px solid #e2e8f0; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 200; max-height: 180px; overflow-y: auto; display: none; min-width: 140px; }
+    .filter-tag-dropdown.open { display: block; }
+    .filter-tag-dropdown-option { padding: 6px 10px; font-size: 12px; cursor: pointer; color: #1e293b; white-space: nowrap; }
+    .filter-tag-dropdown-option:hover { background: #eff6ff; color: #0369a1; }
+    .filter-tag-dropdown-empty { padding: 6px 10px; font-size: 12px; color: #94a3b8; font-style: italic; }
+    .filter-clear-btn { border: 1px solid #e2e8f0; background: white; border-radius: 4px; padding: 2px 10px; font-size: 11px; font-weight: 600; cursor: pointer; color: #64748b; display: none; flex-shrink: 0; margin-left: auto; }
+    .filter-clear-btn:hover { background: #fee2e2; border-color: #fca5a5; color: #dc2626; }
+    .filter-clear-btn.visible { display: block; }`;
 const BOARD_SCRIPT = `
     let draggedCard = null;
     let sourceBody = null;
@@ -364,6 +405,183 @@ const BOARD_SCRIPT = `
     const statusLabels = ${JSON.stringify(STATUS_LABELS)};
     const allPriorities = ${JSON.stringify(models_1.PRIORITIES)};
 
+    let allAvailableTags = [];
+
+    async function loadAllTags() {
+      try {
+        const res = await fetch('/api/tags');
+        if (!res.ok) return;
+        const data = await res.json();
+        allAvailableTags = data.tags || [];
+      } catch {
+        // Ignore errors loading tags
+      }
+    }
+
+    function renderTagsSection(currentTags) {
+      const container = document.getElementById('detail-tags-container');
+      if (!container) return;
+
+      container.innerHTML = '<div class="tag-select-wrapper"><div class="tag-select-control" id="tag-select-control"></div><div class="tag-select-dropdown" id="tag-select-dropdown"></div></div>';
+
+      const control = document.getElementById('tag-select-control');
+      const dropdown = document.getElementById('tag-select-dropdown');
+      let focusedOptionIndex = -1;
+      let inputValue = '';
+
+      function getFilteredTags() {
+        const currentTagIds = new Set(currentTags.map(t => t.id));
+        const available = allAvailableTags.filter(t => !currentTagIds.has(t.id));
+        if (!inputValue.trim()) return available;
+        const q = inputValue.toLowerCase();
+        return available.filter(t => t.name.toLowerCase().includes(q));
+      }
+
+      const input = document.createElement('input');
+      input.className = 'tag-select-input';
+      input.type = 'text';
+      input.autocomplete = 'off';
+      control.appendChild(input);
+
+      function renderPills() {
+        control.querySelectorAll('.tag-pill').forEach(p => p.remove());
+        currentTags.forEach(t => {
+          const pill = document.createElement('span');
+          pill.className = 'tag-pill';
+          pill.dataset.tagId = t.id;
+          const label = document.createTextNode(t.name);
+          const removeBtn = document.createElement('button');
+          removeBtn.className = 'tag-pill-remove';
+          removeBtn.title = 'Remove tag';
+          removeBtn.setAttribute('data-tag-id', t.id);
+          removeBtn.innerHTML = '&times;';
+          removeBtn.addEventListener('click', async e => {
+            e.stopPropagation();
+            try {
+              const res = await fetch('/api/tasks/' + detailTaskId + '/tags/' + t.id, { method: 'DELETE' });
+              if (!res.ok) throw new Error('Server error');
+              const idx = currentTags.findIndex(x => String(x.id) === String(t.id));
+              if (idx !== -1) currentTags.splice(idx, 1);
+              renderPills();
+              renderDropdown();
+            } catch {
+              showToast('Failed to remove tag');
+            }
+          });
+          pill.appendChild(label);
+          pill.appendChild(removeBtn);
+          control.insertBefore(pill, input);
+        });
+        input.placeholder = currentTags.length === 0 ? 'Add tags...' : '';
+      }
+
+      function renderDropdown() {
+        const filtered = getFilteredTags();
+        dropdown.innerHTML = '';
+        focusedOptionIndex = -1;
+        if (filtered.length === 0) {
+          const noOpt = document.createElement('div');
+          noOpt.className = 'tag-select-no-options';
+          noOpt.textContent = inputValue ? 'No matching tags' : 'No tags available';
+          dropdown.appendChild(noOpt);
+        } else {
+          filtered.forEach((t, i) => {
+            const opt = document.createElement('div');
+            opt.className = 'tag-select-option';
+            opt.dataset.tagId = t.id;
+            opt.textContent = t.name;
+            opt.addEventListener('mouseover', () => setFocusedOption(i));
+            opt.addEventListener('mousedown', async e => {
+              e.preventDefault();
+              await addTag(t.id);
+            });
+            dropdown.appendChild(opt);
+          });
+        }
+      }
+
+      function setFocusedOption(index) {
+        const opts = dropdown.querySelectorAll('.tag-select-option');
+        opts.forEach((o, i) => o.classList.toggle('focused', i === index));
+        focusedOptionIndex = index;
+      }
+
+      function openDropdown() {
+        renderDropdown();
+        dropdown.classList.add('open');
+      }
+
+      function closeDropdown() {
+        dropdown.classList.remove('open');
+        focusedOptionIndex = -1;
+      }
+
+      async function addTag(tagId) {
+        try {
+          const res = await fetch('/api/tasks/' + detailTaskId + '/tags', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ tagId: Number(tagId) })
+          });
+          if (!res.ok) throw new Error('Server error');
+          const tag = allAvailableTags.find(t => String(t.id) === String(tagId));
+          if (tag) currentTags.push(tag);
+          input.value = '';
+          inputValue = '';
+          renderPills();
+          renderDropdown();
+        } catch {
+          showToast('Failed to add tag');
+        }
+      }
+
+      control.addEventListener('click', () => input.focus());
+
+      input.addEventListener('focus', () => openDropdown());
+
+      input.addEventListener('blur', () => setTimeout(() => closeDropdown(), 150));
+
+      input.addEventListener('input', () => {
+        inputValue = input.value;
+        renderDropdown();
+        if (!dropdown.classList.contains('open')) openDropdown();
+      });
+
+      input.addEventListener('keydown', async e => {
+        const filtered = getFilteredTags();
+        const opts = dropdown.querySelectorAll('.tag-select-option');
+        if (e.key === 'ArrowDown') {
+          e.preventDefault();
+          setFocusedOption(Math.min(focusedOptionIndex + 1, opts.length - 1));
+        } else if (e.key === 'ArrowUp') {
+          e.preventDefault();
+          setFocusedOption(Math.max(focusedOptionIndex - 1, 0));
+        } else if (e.key === 'Enter') {
+          e.preventDefault();
+          if (focusedOptionIndex >= 0 && filtered[focusedOptionIndex]) {
+            await addTag(filtered[focusedOptionIndex].id);
+          }
+        } else if (e.key === 'Escape') {
+          closeDropdown();
+          input.blur();
+        } else if (e.key === 'Backspace' && input.value === '' && currentTags.length > 0) {
+          e.preventDefault();
+          const last = currentTags[currentTags.length - 1];
+          try {
+            const res = await fetch('/api/tasks/' + detailTaskId + '/tags/' + last.id, { method: 'DELETE' });
+            if (!res.ok) throw new Error('Server error');
+            currentTags.splice(currentTags.length - 1, 1);
+            renderPills();
+            renderDropdown();
+          } catch {
+            showToast('Failed to remove tag');
+          }
+        }
+      });
+
+      renderPills();
+    }
+
     function renderDetailPanel(data) {
       const task = data.task;
       const tags = data.tags || [];
@@ -403,21 +621,12 @@ const BOARD_SCRIPT = `
       html += '</select>';
       html += '</div>';
 
-      // Body (editable)
+      // Tags (editable)
       html += '<div class="detail-field">';
-      html += '<div class="detail-field-label">Description</div>';
-      html += '<textarea id="detail-edit-body" class="detail-edit-textarea">' + escapeHtmlClient(task.body || '') + '</textarea>';
+      html += '<div class="detail-field-label">Tags</div>';
+      html += '<div id="detail-tags-container"></div>';
       html += '</div>';
 
-      // Tags (read-only)
-      if (tags.length > 0) {
-        html += '<div class="detail-field">';
-        html += '<div class="detail-field-label">Tags</div>';
-        html += '<div class="detail-field-value detail-tags">';
-        tags.forEach(t => { html += '<span class="tag">' + escapeHtmlClient(t.name) + '</span>'; });
-        html += '</div></div>';
-      }
-
       // Metadata table (read-only, non-priority)
       const otherMeta = metadata.filter(m => m.key !== 'priority');
       if (otherMeta.length > 0) {
@@ -440,7 +649,16 @@ const BOARD_SCRIPT = `
       html += '<div class="detail-field-value">' + escapeHtmlClient(task.updated_at) + '</div>';
       html += '</div>';
 
+      // Body (editable)
+      html += '<div class="detail-field description-field-wrapper">';
+      html += '<div class="detail-field-label">Description</div>';
+      html += '<textarea id="detail-edit-body" class="detail-edit-textarea">' + escapeHtmlClient(task.body || '') + '</textarea>';
+      html += '</div>';
+
       detailPanelBody.innerHTML = html;
+
+      // Render tags section after DOM update
+      loadAllTags().then(() => renderTagsSection([...tags]));
     }
 
     function escapeHtmlClient(str) {
@@ -497,11 +715,30 @@ const BOARD_SCRIPT = `
       });
     });
 
+    // Filter state (defined before refreshBoardCards so it can use them)
+    let activeFilters = { tagIds: [], priorities: [], assignee: '' };
+
+    function buildFilterParams() {
+      const params = new URLSearchParams();
+      if (activeFilters.priorities.length > 0) {
+        params.set('priority', activeFilters.priorities.join(','));
+      }
+      if (activeFilters.tagIds.length > 0) {
+        params.set('tags', activeFilters.tagIds.join(','));
+      }
+      if (activeFilters.assignee) {
+        params.set('assignee', activeFilters.assignee);
+      }
+      return params;
+    }
+
     // Board polling: reload when updated_at changes (skip during drag)
     let lastUpdatedAt = null;
     async function refreshBoardCards() {
+      const filterParams = buildFilterParams();
+      const url = '/api/board/cards' + (filterParams.toString() ? '?' + filterParams.toString() : '');
       try {
-        const res = await fetch('/api/board/cards');
+        const res = await fetch(url);
         if (!res.ok) return;
         const data = await res.json();
         const columns = data.columns;
@@ -543,6 +780,31 @@ const BOARD_SCRIPT = `
             });
           });
         });
+        // If detail panel is open, refresh its content if the task was updated
+        if (detailTaskId !== 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) {
+            const warning = document.getElementById('detail-panel-update-warning');
+            if (!warning) {
+              const warningEl = document.createElement('div');
+              warningEl.id = 'detail-panel-update-warning';
+              warningEl.style.cssText = 'color: red; font-size: 0.85em; padding: 4px 8px; background: #fff0f0; border: 1px solid #ffcccc; border-radius: 4px; margin-bottom: 8px;';
+              warningEl.textContent = 'This task has been updated in the database. Save or discard your changes to see the latest version.';
+              detailPanelBody.insertBefore(warningEl, detailPanelBody.firstChild);
+            }
+          } else {
+            try {
+              const taskRes = await fetch('/api/tasks/' + detailTaskId);
+              if (taskRes.ok) {
+                const taskData = await taskRes.json();
+                renderDetailPanel(taskData);
+              }
+            } catch {
+              // Ignore network errors during detail panel refresh
+            }
+          }
+        }
       } catch {
         // Ignore network errors during card refresh
       }
@@ -568,8 +830,163 @@ const BOARD_SCRIPT = `
         // Ignore network errors during polling
       }
     }
-    setInterval(pollBoardUpdates, 10000);
-    pollBoardUpdates();`;
+    setInterval(pollBoardUpdates, 5000);
+    pollBoardUpdates();
+
+    function isFiltersActive() {
+      return activeFilters.priorities.length > 0 || activeFilters.tagIds.length > 0 || activeFilters.assignee !== '';
+    }
+
+    function applyFilters() {
+      const clearBtn = document.getElementById('filter-clear');
+      if (clearBtn) {
+        if (isFiltersActive()) {
+          clearBtn.classList.add('visible');
+        } else {
+          clearBtn.classList.remove('visible');
+        }
+      }
+      refreshBoardCards();
+    }
+
+    function renderFilterTagPills() {
+      const container = document.getElementById('filter-tags-control');
+      if (!container) return;
+      // Remove existing pills
+      container.querySelectorAll('.filter-tag-pill').forEach(p => p.remove());
+      // Add pills for active tag filters
+      activeFilters.tagIds.forEach(tagId => {
+        const tag = allAvailableTags.find(t => t.id === tagId);
+        if (!tag) return;
+        const pill = document.createElement('span');
+        pill.className = 'filter-tag-pill';
+        const label = document.createTextNode(tag.name);
+        const removeBtn = document.createElement('button');
+        removeBtn.className = 'filter-tag-pill-remove';
+        removeBtn.title = 'Remove tag filter';
+        removeBtn.innerHTML = '&times;';
+        removeBtn.addEventListener('click', () => {
+          const idx = activeFilters.tagIds.indexOf(tagId);
+          if (idx !== -1) activeFilters.tagIds.splice(idx, 1);
+          renderFilterTagPills();
+          applyFilters();
+        });
+        pill.appendChild(label);
+        pill.appendChild(removeBtn);
+        container.insertBefore(pill, container.querySelector('.filter-tag-dropdown-wrapper'));
+      });
+    }
+
+    function initFilterBar() {
+      // Priority toggle buttons
+      document.querySelectorAll('.filter-priority-btn').forEach(btn => {
+        btn.addEventListener('click', () => {
+          const priority = btn.dataset.priority;
+          const idx = activeFilters.priorities.indexOf(priority);
+          if (idx === -1) {
+            activeFilters.priorities.push(priority);
+            btn.classList.add('active');
+          } else {
+            activeFilters.priorities.splice(idx, 1);
+            btn.classList.remove('active');
+          }
+          applyFilters();
+        });
+      });
+
+      // Assignee input with debounce
+      const assigneeInput = document.getElementById('filter-assignee');
+      let assigneeTimer = null;
+      if (assigneeInput) {
+        assigneeInput.addEventListener('input', () => {
+          clearTimeout(assigneeTimer);
+          assigneeTimer = setTimeout(() => {
+            activeFilters.assignee = assigneeInput.value.trim();
+            applyFilters();
+          }, 300);
+        });
+      }
+
+      // Clear button
+      const clearBtn = document.getElementById('filter-clear');
+      if (clearBtn) {
+        clearBtn.addEventListener('click', () => {
+          activeFilters.tagIds = [];
+          activeFilters.priorities = [];
+          activeFilters.assignee = '';
+          document.querySelectorAll('.filter-priority-btn').forEach(btn => btn.classList.remove('active'));
+          if (assigneeInput) assigneeInput.value = '';
+          renderFilterTagPills();
+          applyFilters();
+        });
+      }
+
+      // Tag filter dropdown
+      const tagsControl = document.getElementById('filter-tags-control');
+      if (tagsControl) {
+        const dropdownWrapper = document.createElement('div');
+        dropdownWrapper.className = 'filter-tag-dropdown-wrapper';
+
+        const addBtn = document.createElement('button');
+        addBtn.className = 'filter-tag-add-btn';
+        addBtn.textContent = '+ Tag';
+
+        const dropdown = document.createElement('div');
+        dropdown.className = 'filter-tag-dropdown';
+
+        dropdownWrapper.appendChild(addBtn);
+        dropdownWrapper.appendChild(dropdown);
+        tagsControl.appendChild(dropdownWrapper);
+
+        function renderTagDropdown() {
+          dropdown.innerHTML = '';
+          const available = allAvailableTags.filter(t => !activeFilters.tagIds.includes(t.id));
+          if (available.length === 0) {
+            const empty = document.createElement('div');
+            empty.className = 'filter-tag-dropdown-empty';
+            empty.textContent = 'No tags available';
+            dropdown.appendChild(empty);
+          } else {
+            available.forEach(tag => {
+              const opt = document.createElement('div');
+              opt.className = 'filter-tag-dropdown-option';
+              opt.textContent = tag.name;
+              opt.addEventListener('mousedown', (e) => {
+                e.preventDefault();
+                activeFilters.tagIds.push(tag.id);
+                dropdown.classList.remove('open');
+                renderFilterTagPills();
+                applyFilters();
+              });
+              dropdown.appendChild(opt);
+            });
+          }
+        }
+
+        addBtn.addEventListener('click', () => {
+          if (dropdown.classList.contains('open')) {
+            dropdown.classList.remove('open');
+          } else {
+            renderTagDropdown();
+            const rect = addBtn.getBoundingClientRect();
+            dropdown.style.top = (rect.bottom + 2) + 'px';
+            dropdown.style.left = rect.left + 'px';
+            dropdown.classList.add('open');
+          }
+        });
+
+        document.addEventListener('click', (e) => {
+          if (!dropdownWrapper.contains(e.target)) {
+            dropdown.classList.remove('open');
+          }
+        });
+      }
+    }
+
+    // Initialize filter bar after tags are loaded
+    loadAllTags().then(() => {
+      initFilterBar();
+    });`;
 function renderColumn(status, tasks, tagMap) {
     const color = STATUS_COLORS[status];
     const label = STATUS_LABELS[status];
@@ -629,6 +1046,24 @@ function renderBoard(tasksByStatus, tagMap, boardTitle) {
 </head>
 <body>
   <header><h1>agkan board</h1>${titleHtml}</header>
+  <div class="filter-bar" id="filter-bar">
+    <div class="filter-group">
+      <span class="filter-label">Priority</span>
+      <button class="filter-priority-btn" data-priority="critical">critical</button>
+      <button class="filter-priority-btn" data-priority="high">high</button>
+      <button class="filter-priority-btn" data-priority="medium">medium</button>
+      <button class="filter-priority-btn" data-priority="low">low</button>
+    </div>
+    <div class="filter-group">
+      <span class="filter-label">Tags</span>
+      <div id="filter-tags-control" style="display:flex;align-items:center;gap:4px;flex-wrap:nowrap;"></div>
+    </div>
+    <div class="filter-group">
+      <span class="filter-label">Assignee</span>
+      <input type="text" id="filter-assignee" class="filter-assignee-input" placeholder="Filter by assignee">
+    </div>
+    <button class="filter-clear-btn" id="filter-clear">Clear filters</button>
+  </div>
   <div class="board-container">
     <div class="board">${columns}</div>${BOARD_BODY_STATIC}
   </div>
@@ -694,7 +1129,7 @@ function getBoardUpdatedAt(database) {
         return null;
     return `${baseRow.max_updated_at}|${tagsRow.max_created_at}|${tagsRow.count}`;
 }
-function registerTaskApiRoutes(app, { ts, tts, ms }) {
+function registerTaskApiRoutes(app, { ts, tts, tags, ms }) {
     app.get('/api/tasks', (c) => c.json({ tasks: ts.listTasks({}, 'id', 'asc') }));
     app.post('/api/tasks', async (c) => {
         const body = await c.req.json();
@@ -735,6 +1170,34 @@ function registerTaskApiRoutes(app, { ts, tts, ms }) {
         ts.deleteTask(id);
         return c.json({ success: true });
     });
+    app.get('/api/tags', (c) => c.json({ tags: tags.listTags() }));
+    app.post('/api/tasks/:id/tags', async (c) => {
+        const id = Number(c.req.param('id'));
+        if (isNaN(id))
+            return c.json({ error: 'Invalid task id' }, 400);
+        const body = await c.req.json();
+        if (body.tagId === undefined || body.tagId === null)
+            return c.json({ error: 'tagId is required' }, 400);
+        const tagId = Number(body.tagId);
+        if (!ts.getTask(id))
+            return c.json({ error: 'Task not found' }, 404);
+        if (!tags.getTag(tagId))
+            return c.json({ error: 'Tag not found' }, 404);
+        tts.addTagToTask({ task_id: id, tag_id: tagId });
+        return c.json({ success: true }, 201);
+    });
+    app.delete('/api/tasks/:id/tags/:tagId', (c) => {
+        const id = Number(c.req.param('id'));
+        if (isNaN(id))
+            return c.json({ error: 'Invalid task id' }, 400);
+        const tagId = Number(c.req.param('tagId'));
+        if (isNaN(tagId))
+            return c.json({ error: 'Invalid tag id' }, 400);
+        const removed = tts.removeTagFromTask(id, tagId);
+        if (!removed)
+            return c.json({ error: 'Tag not attached to task' }, 404);
+        return c.json({ success: true });
+    });
 }
 function buildBoardCardsPayload(tasksByStatus, tagMap) {
     return STATUSES.map((status) => {
@@ -743,6 +1206,29 @@ function buildBoardCardsPayload(tasksByStatus, tagMap) {
         return { status, html, count: tasks.length };
     });
 }
+function parseBoardCardFilters(query) {
+    const filters = {};
+    if (query.tags) {
+        const tagIds = query.tags
+            .split(',')
+            .map((s) => Number(s.trim()))
+            .filter((n) => !isNaN(n) && n > 0);
+        if (tagIds.length > 0)
+            filters.tagIds = tagIds;
+    }
+    if (query.priority) {
+        const priorities = query.priority
+            .split(',')
+            .map((s) => s.trim())
+            .filter((s) => s.length > 0);
+        if (priorities.length > 0)
+            filters.priority = priorities;
+    }
+    if (query.assignee && query.assignee.trim()) {
+        filters.assignees = query.assignee.trim();
+    }
+    return filters;
+}
 function registerBoardRoutes(app, services) {
     const { ts, tts, database, boardTitle } = services;
     app.get('/', (c) => {
@@ -751,17 +1237,23 @@ function registerBoardRoutes(app, services) {
     });
     app.get('/api/board/updated-at', (c) => c.json({ updatedAt: getBoardUpdatedAt(database) }));
     app.get('/api/board/cards', (c) => {
-        const tasksByStatus = buildTasksByStatus(ts.listTasks({}, 'id', 'asc'));
+        const filters = parseBoardCardFilters({
+            tags: c.req.query('tags'),
+            priority: c.req.query('priority'),
+            assignee: c.req.query('assignee'),
+        });
+        const tasksByStatus = buildTasksByStatus(ts.listTasks(filters, 'id', 'asc'));
         const columns = buildBoardCardsPayload(tasksByStatus, tts.getAllTaskTags());
         return c.json({ columns });
     });
     registerTaskApiRoutes(app, services);
 }
-function createBoardApp(taskService, taskTagService, metadataService, db, boardTitle) {
+function createBoardApp(taskService, taskTagService, metadataService, db, boardTitle, tagService) {
     const app = new hono_1.Hono();
     const services = {
         ts: taskService ?? new TaskService_1.TaskService(),
         tts: taskTagService ?? new TaskTagService_1.TaskTagService(),
+        tags: tagService ?? new TagService_1.TagService(),
         ms: metadataService ?? new MetadataService_1.MetadataService(),
         database: db ?? (0, connection_1.getDatabase)(),
         boardTitle,