claude-task-viewer 1.4.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-task-viewer",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "A web-based Kanban board for viewing Claude Code tasks",
   "main": "server.js",
   "bin": {

package/public/index.html

@@ -469,6 +469,26 @@
       color: var(--accent);
     }
 
+    .search-input {
+      background: var(--bg-elevated);
+      border: 1px solid var(--border);
+      border-radius: 6px;
+      padding: 8px 12px;
+      font-family: var(--mono);
+      font-size: 12px;
+      color: var(--text-primary);
+      width: 200px;
+    }
+
+    .search-input:focus {
+      outline: none;
+      border-color: var(--accent);
+    }
+
+    .search-input::placeholder {
+      color: var(--text-muted);
+    }
+
     .icon-btn {
       width: 32px;
       height: 32px;
@@ -1019,6 +1039,8 @@
             <p id="session-meta" class="view-meta"></p>
           </div>
           <div class="view-actions">
+            <input type="text" id="task-search" class="search-input"
+                   placeholder="Search tasks..." oninput="searchTasks(this.value)">
             <div class="view-progress">
               <div class="progress-bar">
                 <div id="progress-bar" class="progress-fill" style="width: 0%"></div>
@@ -1090,6 +1112,7 @@
     let viewMode = 'session';
     let sessionFilter = localStorage.getItem('sessionFilter') || 'all'; // 'all' or 'active'
     let filterProject = null; // null = all projects, or project path to filter
+    let searchQuery = '';
 
     // DOM
     const sessionsList = document.getElementById('sessions-list');
@@ -1161,6 +1184,7 @@
     async function fetchTasks(sessionId) {
       try {
         viewMode = 'session';
+        clearSearch();
         const res = await fetch(`/api/sessions/${sessionId}`);
         currentTasks = await res.json();
         currentSessionId = sessionId;
@@ -1174,6 +1198,7 @@
       try {
         viewMode = 'all';
         currentSessionId = null;
+        clearSearch();
         const res = await fetch('/api/tasks/all');
         let tasks = await res.json();
         if (filterProject) {
@@ -1311,9 +1336,17 @@
     }
 
     function renderKanban() {
-      const pending = currentTasks.filter(t => t.status === 'pending');
-      const inProgress = currentTasks.filter(t => t.status === 'in_progress');
-      const completed = currentTasks.filter(t => t.status === 'completed');
+      let filteredTasks = currentTasks;
+      if (searchQuery) {
+        filteredTasks = currentTasks.filter(t =>
+          t.subject.toLowerCase().includes(searchQuery) ||
+          (t.description && t.description.toLowerCase().includes(searchQuery))
+        );
+      }
+
+      const pending = filteredTasks.filter(t => t.status === 'pending');
+      const inProgress = filteredTasks.filter(t => t.status === 'in_progress');
+      const completed = filteredTasks.filter(t => t.status === 'completed');
 
       pendingCount.textContent = pending.length;
       inProgressCount.textContent = inProgress.length;
@@ -1505,6 +1538,17 @@
       showAllTasks();
     }
 
+    function searchTasks(query) {
+      searchQuery = query.toLowerCase();
+      renderKanban();
+    }
+
+    function clearSearch() {
+      searchQuery = '';
+      const searchInput = document.getElementById('task-search');
+      if (searchInput) searchInput.value = '';
+    }
+
     function updateProjectDropdown() {
       const dropdown = document.getElementById('project-filter');
       const projects = [...new Set(sessions.map(s => s.project).filter(Boolean))].sort();