claude-code-kanban 1.14.0 → 1.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-code-kanban",
-  "version": "1.14.0",
+  "version": "1.16.0",
   "description": "A web-based Kanban board for viewing Claude Code tasks with agent teams support",
   "main": "server.js",
   "bin": {

package/public/index.html

@@ -36,6 +36,8 @@
       --warning-dim: rgba(240, 180, 41, 0.18);
       --team: #60a5fa;
       --team-dim: rgba(96, 165, 250, 0.18);
+      --plan: #86a886;
+      --plan-dim: rgba(134, 168, 134, 0.18);
       --mono: 'IBM Plex Mono', monospace;
       --serif: 'Playfair Display', serif;
     }
@@ -426,6 +428,15 @@
       opacity: 0.7;
     }
 
+    .session-plan {
+      font-size: 10px;
+      color: var(--plan);
+      margin-top: 2px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
     .session-progress {
       display: flex;
       align-items: center;
@@ -1274,6 +1285,26 @@
       border-color: var(--team);
     }
 
+    .plan-indicator {
+      width: 24px;
+      height: 24px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--plan-dim);
+      border: 1px solid transparent;
+      border-radius: 4px;
+      color: var(--plan);
+      cursor: pointer;
+      flex-shrink: 0;
+      transition: all 0.15s ease;
+    }
+
+    .plan-indicator:hover {
+      background: var(--plan-dim);
+      border-color: var(--plan);
+    }
+
     /* Task owner badge */
     .task-owner-badge {
       display: inline-flex;
@@ -1375,6 +1406,8 @@
       --success-dim: rgba(26, 138, 90, 0.15);
       --warning: #b07d0a;
       --warning-dim: rgba(176, 125, 10, 0.15);
+      --plan: #5a7a5a;
+      --plan-dim: rgba(90, 122, 90, 0.15);
     }
 
     body.light::before {
@@ -1711,6 +1744,8 @@
         --success-dim: rgba(26, 138, 90, 0.15);
         --warning: #b07d0a;
         --warning-dim: rgba(176, 125, 10, 0.15);
+        --plan: #5a7a5a;
+        --plan-dim: rgba(90, 122, 90, 0.15);
       }
 
       body:not(.dark-forced)::before {
@@ -2444,7 +2479,7 @@
 
       let filteredSessions = sessions;
       if (sessionFilter === 'active') {
-        filteredSessions = filteredSessions.filter(s => s.pending > 0 || s.inProgress > 0);
+        filteredSessions = filteredSessions.filter(s => s.pending > 0 || s.inProgress > 0 || s.hasPlan);
       }
       if (filterProject) {
         filteredSessions = filteredSessions.filter(s => matchesProjectFilter(s.project));
@@ -2530,10 +2565,12 @@
             <div class="session-name">${escapeHtml(primaryName)}</div>
             ${secondaryName ? `<div class="session-secondary">${escapeHtml(secondaryName)}</div>` : ''}
             ${gitBranch ? `<div class="session-branch">${gitBranch}</div>` : ''}
+            ${session.planTitle ? `<div class="session-plan">${escapeHtml(session.planTitle)}</div>` : ''}
             <div class="session-progress">
               <span class="session-indicators">
                 ${isTeam ? `<span class="team-badge" title="${memberCount} team members"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>${memberCount}</span>` : ''}
                 ${(isTeam || session.project) ? `<span class="team-info-btn" onclick="event.stopPropagation(); showSessionInfoModal('${session.id}')" title="View session info">ℹ</span>` : ''}
+                ${session.hasPlan ? `<span class="plan-indicator" onclick="event.stopPropagation(); openPlanForSession('${session.id}')" title="View plan"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg></span>` : ''}
                 ${hasInProgress ? '<span class="pulse"></span>' : ''}
               </span>
               <div class="progress-bar"><div class="progress-fill" style="width: ${percent}%"></div></div>

package/server.js

@@ -206,7 +206,7 @@ function loadSessionMetadata() {
     console.error('Error loading session metadata:', e);
   }
 
-  // For team sessions with no JSONL match, try team config for project path
+  // For team sessions with no JSONL match, resolve from team config + parent session
   if (existsSync(TASKS_DIR)) {
     const taskDirs = readdirSync(TASKS_DIR, { withFileTypes: true })
       .filter(d => d.isDirectory());
@@ -214,11 +214,18 @@ function loadSessionMetadata() {
       if (!metadata[dir.name]) {
         const teamConfig = loadTeamConfig(dir.name);
         if (teamConfig) {
+          const parentMeta = teamConfig.leadSessionId ? metadata[teamConfig.leadSessionId] : null;
+          const leadMember = teamConfig.members?.find(m => m.agentId === teamConfig.leadAgentId) || teamConfig.members?.[0];
+          const project = parentMeta?.project || leadMember?.cwd || teamConfig.working_dir || null;
+
           metadata[dir.name] = {
-            customTitle: null,
-            slug: null,
-            project: teamConfig.working_dir || null,
-            jsonlPath: null
+            customTitle: parentMeta?.customTitle || null,
+            slug: parentMeta?.slug || null,
+            project,
+            jsonlPath: parentMeta?.jsonlPath || null,
+            description: parentMeta?.description || teamConfig.description || null,
+            gitBranch: parentMeta?.gitBranch || null,
+            created: parentMeta?.created || null
           };
         }
       }
@@ -233,6 +240,19 @@ function loadSessionMetadata() {
 /**
  * Get display name for a session: customTitle > slug > null (frontend shows UUID)
  */
+function getPlanInfo(slug) {
+  if (!slug) return { hasPlan: false, planTitle: null };
+  const planPath = path.join(PLANS_DIR, `${slug}.md`);
+  if (!existsSync(planPath)) return { hasPlan: false, planTitle: null };
+  try {
+    const head = readFileSync(planPath, 'utf8').slice(0, 512);
+    const match = head.match(/^#\s+(.+)$/m);
+    return { hasPlan: true, planTitle: match ? match[1].trim() : null };
+  } catch (e) {
+    return { hasPlan: true, planTitle: null };
+  }
+}
+
 function getSessionDisplayName(sessionId, meta) {
   if (meta?.customTitle) return meta.customTitle;
   if (meta?.slug) return meta.slug;
@@ -296,6 +316,7 @@ app.get('/api/sessions', async (req, res) => {
 
           const isTeam = isTeamSession(entry.name);
           const memberCount = isTeam ? (loadTeamConfig(entry.name)?.members?.length || 0) : 0;
+          const planInfo = getPlanInfo(meta.slug);
 
           sessionsMap.set(entry.name, {
             id: entry.name,
@@ -311,7 +332,8 @@ app.get('/api/sessions', async (req, res) => {
             createdAt: meta.created || null,
             modifiedAt: modifiedAt,
             isTeam,
-            memberCount
+            memberCount,
+            ...planInfo
           });
         }
       }
@@ -324,6 +346,7 @@ app.get('/api/sessions', async (req, res) => {
         if (!modifiedAt && meta.jsonlPath) {
           try { modifiedAt = statSync(meta.jsonlPath).mtime.toISOString(); } catch (e) {}
         }
+        const planInfo = getPlanInfo(meta.slug);
         sessionsMap.set(sessionId, {
           id: sessionId,
           name: getSessionDisplayName(sessionId, meta),
@@ -338,7 +361,8 @@ app.get('/api/sessions', async (req, res) => {
           createdAt: meta.created || null,
           modifiedAt: modifiedAt || new Date(0).toISOString(),
           isTeam: false,
-          memberCount: 0
+          memberCount: 0,
+          ...planInfo
         });
       }
     }
@@ -672,6 +696,19 @@ projectsWatcher.on('all', (event, filePath) => {
   }
 });
 
+const plansWatcher = chokidar.watch(PLANS_DIR, {
+  persistent: true,
+  ignoreInitial: true,
+  depth: 0
+});
+
+plansWatcher.on('all', (event, filePath) => {
+  if ((event === 'add' || event === 'change' || event === 'unlink') && filePath.endsWith('.md')) {
+    lastMetadataRefresh = 0;
+    broadcast({ type: 'metadata-update' });
+  }
+});
+
 app.use('/api', (req, res) => {
   res.status(404).json({ error: 'Not found' });
 });