claude-task-viewer 1.5.0 → 1.7.1

package/README.md

@@ -26,6 +26,9 @@ Tasks can block other tasks. The viewer shows these relationships clearly — bl
 ### Notes
 Add context to any task. Your notes are appended to the task description, so Claude sees them when it reads the task. Use this to clarify requirements, add constraints, or redirect work — all without interrupting Claude's flow.
 
+### Search
+Find tasks instantly. Type in the search box to filter across all columns by subject or description. Case-insensitive, real-time results.
+
 ### Project Filtering
 Filter tasks by project using the dropdown. Working on multiple codebases? See only what's relevant. Combine with the session filter to show just active sessions for a specific project.
 
@@ -90,6 +93,9 @@ PORT=8080 npx claude-task-viewer
 
 # Open browser automatically
 npx claude-task-viewer --open
+
+# Use a different Claude config directory (for multiple accounts)
+npx claude-task-viewer --dir=~/.claude-work
 ```
 
 ## API

package/package.json

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

package/public/index.html

@@ -327,6 +327,19 @@
       margin-top: 2px;
       white-space: nowrap;
       overflow: hidden;
+    }
+
+    .session-branch {
+      font-size: 10px;
+      color: var(--accent);
+      margin-top: 3px;
+      padding: 2px 6px;
+      background: var(--border);
+      border-radius: 3px;
+      display: inline-block;
+      font-family: var(--mono);
+      white-space: nowrap;
+      overflow: hidden;
       text-overflow: ellipsis;
     }
 
@@ -469,26 +482,6 @@
       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;
@@ -1039,8 +1032,6 @@
             <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>
@@ -1112,7 +1103,6 @@
     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');
@@ -1184,7 +1174,6 @@
     async function fetchTasks(sessionId) {
       try {
         viewMode = 'session';
-        clearSearch();
         const res = await fetch(`/api/sessions/${sessionId}`);
         currentTasks = await res.json();
         currentSessionId = sessionId;
@@ -1198,7 +1187,6 @@
       try {
         viewMode = 'all';
         currentSessionId = null;
-        clearSearch();
         const res = await fetch('/api/tasks/all');
         let tasks = await res.json();
         if (filterProject) {
@@ -1282,6 +1270,7 @@
               ${hasInProgress ? '<span class="pulse"></span>' : ''}
             </div>
             ${secondaryName ? `<div class="session-secondary">${escapeHtml(secondaryName)}</div>` : ''}
+            ${session.gitBranch ? `<div class="session-branch">${escapeHtml(session.gitBranch)}</div>` : ''}
             <div class="session-progress">
               <div class="progress-bar"><div class="progress-fill" style="width: ${percent}%"></div></div>
               <span class="progress-text">${session.completed}/${total}</span>
@@ -1302,7 +1291,8 @@
       const displayName = session.name || currentSessionId;
       sessionTitle.textContent = displayName;
       const projectName = session.project ? session.project.split('/').pop() : null;
-      sessionMeta.textContent = `${currentTasks.length} tasks${projectName ? ' · ' + projectName : ''} · ${formatDate(session.modifiedAt)}`;
+      const branchInfo = session.gitBranch ? ` · ${session.gitBranch}` : '';
+      sessionMeta.textContent = `${currentTasks.length} tasks${projectName ? ' · ' + projectName : ''}${branchInfo} · ${formatDate(session.modifiedAt)}`;
 
       const completed = currentTasks.filter(t => t.status === 'completed').length;
       const percent = currentTasks.length > 0 ? Math.round((completed / currentTasks.length) * 100) : 0;
@@ -1336,17 +1326,9 @@
     }
 
     function renderKanban() {
-      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');
+      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');
 
       pendingCount.textContent = pending.length;
       inProgressCount.textContent = inProgress.length;
@@ -1538,17 +1520,6 @@
       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();

package/server.js

@@ -10,7 +10,24 @@ const os = require('os');
 
 const app = express();
 const PORT = process.env.PORT || 3456;
-const CLAUDE_DIR = process.env.CLAUDE_DIR || path.join(os.homedir(), '.claude');
+
+// Parse --dir flag for custom Claude directory
+function getClaudeDir() {
+  const dirIndex = process.argv.findIndex(arg => arg.startsWith('--dir'));
+  if (dirIndex !== -1) {
+    const arg = process.argv[dirIndex];
+    if (arg.includes('=')) {
+      const dir = arg.split('=')[1];
+      return dir.startsWith('~') ? dir.replace('~', os.homedir()) : dir;
+    } else if (process.argv[dirIndex + 1]) {
+      const dir = process.argv[dirIndex + 1];
+      return dir.startsWith('~') ? dir.replace('~', os.homedir()) : dir;
+    }
+  }
+  return process.env.CLAUDE_DIR || path.join(os.homedir(), '.claude');
+}
+
+const CLAUDE_DIR = getClaudeDir();
 const TASKS_DIR = path.join(CLAUDE_DIR, 'tasks');
 const PROJECTS_DIR = path.join(CLAUDE_DIR, 'projects');
 
@@ -352,45 +369,43 @@ function broadcast(data) {
   }
 }
 
-// Watch for file changes
-if (existsSync(TASKS_DIR)) {
-  const watcher = chokidar.watch(TASKS_DIR, {
-    persistent: true,
-    ignoreInitial: true,
-    depth: 2
-  });
+// Watch for file changes (chokidar handles non-existent paths)
+const watcher = chokidar.watch(TASKS_DIR, {
+  persistent: true,
+  ignoreInitial: true,
+  depth: 2
+});
 
-  watcher.on('all', (event, filePath) => {
-    if (filePath.endsWith('.json')) {
-      const relativePath = path.relative(TASKS_DIR, filePath);
-      const sessionId = relativePath.split(path.sep)[0];
-
-      broadcast({
-        type: 'update',
-        event,
-        sessionId,
-        file: path.basename(filePath)
-      });
-    }
-  });
+watcher.on('all', (event, filePath) => {
+  if (filePath.endsWith('.json')) {
+    const relativePath = path.relative(TASKS_DIR, filePath);
+    const sessionId = relativePath.split(path.sep)[0];
+
+    broadcast({
+      type: 'update',
+      event,
+      sessionId,
+      file: path.basename(filePath)
+    });
+  }
+});
 
-  console.log(`Watching for changes in: ${TASKS_DIR}`);
-}
+console.log(`Watching for changes in: ${TASKS_DIR}`);
 
 // Also watch projects dir for metadata changes
-if (existsSync(PROJECTS_DIR)) {
-  const projectsWatcher = chokidar.watch(path.join(PROJECTS_DIR, '*/*.jsonl'), {
-    persistent: true,
-    ignoreInitial: true,
-    depth: 1
-  });
+const projectsWatcher = chokidar.watch(PROJECTS_DIR, {
+  persistent: true,
+  ignoreInitial: true,
+  depth: 2
+});
 
-  projectsWatcher.on('all', (event) => {
+projectsWatcher.on('all', (event, filePath) => {
+  if (filePath.endsWith('.jsonl')) {
     // Invalidate cache on any change
     lastMetadataRefresh = 0;
     broadcast({ type: 'metadata-update' });
-  });
-}
+  }
+});
 
 // Start server
 app.listen(PORT, () => {