claude-code-kanban 4.12.0 → 4.14.0

package/README.md

@@ -8,9 +8,7 @@
 
 > Watch Claude Code work, in real time.
 
-![Dark mode](assets/screenshot-dark-v2.png)
-
-![Light mode](assets/screenshot-light-v2.png)
+![Kanban board with session log](assets/shot-session-log.png)
 
 ## Getting Started
 
@@ -22,11 +20,7 @@ Hooks enable subagent tracking, waiting-for-user detection, and session activity
 npx claude-code-kanban --install
 ```
 
-This will:
-- Copy `agent-spy.sh` to `~/.claude/hooks/` (requires `jq`)
-- Add `SubagentStart`, `SubagentStop`, `TeammateIdle`, and `PostToolUse` hooks to `~/.claude/settings.json`
-
-All changes are non-destructive — existing settings are preserved.
+Non-destructive — existing settings in `~/.claude/settings.json` are preserved. Uninstall anytime with `npx claude-code-kanban --uninstall`.
 
 ### 2. Start the dashboard
 
@@ -34,72 +28,34 @@ All changes are non-destructive — existing settings are preserved.
 npx claude-code-kanban --open
 ```
 
-Open http://localhost:3541 (or use `--open` to auto-launch the browser).
-
 ### 3. Use Claude Code as usual
 
-Tasks, agents, and messages appear on the board automatically. No changes to your Claude Code workflow needed.
-
-> To uninstall hooks: `npx claude-code-kanban --uninstall`
+Tasks, agents, and messages appear on the board automatically — Claude Code writes task files and conversation logs to `~/.claude`, the dashboard watches them and streams updates to the browser via SSE. It never directs Claude's work.
 
 ## Features
 
 - **Real-time Kanban board** — Tasks move through Pending → In Progress → Completed as Claude works
-- **Agent log** — Live subagent tracking (start/stop/idle) with prompts, duration, and status
-- **Session message log** — Browse recent messages, tool calls, and model info (`Shift+L`)
+- **Session log** — The full conversation timeline: prompts, replies, tool calls and results (`Shift+L`)
+- **Agent log** — Live subagent tracking with prompts, duration, status, and idle detection
+- **Task detail panel** — Full description, notes, blockedBy/blocks dependencies, inline editing
+- **Follow & pin** — Follow the latest message live (`Shift+M`), pin the messages that matter
+- **Tool stats & impact** — Per-session tool usage breakdown and file impact
 - **Waiting-for-user indicators** — Amber highlight on sessions needing permission or input
-- **Plan correlation** — Plan sessions linked to their implementation sessions
 - **Agent teams** — Color-coded team members, owner filtering, member count badges
-- **Task dependencies** — See blockedBy/blocks relationships and the critical path
-- **Live activity feed** — Stream of all in-progress tasks across every session
-- **Session management** — Fuzzy search, project/branch display, active/stale session styling
-- **Cleanup** — Delete tasks (with dependency checks) or bulk-delete entire sessions
-- **Keyboard shortcuts** — Press `?` for help; `Shift+M` for live message follow
-
-## Configuration
-
-```bash
-PORT=8080 npx claude-code-kanban        # Custom port
-npx claude-code-kanban --open            # Auto-open browser
-npx claude-code-kanban --dir=~/.claude-work  # Custom Claude config dir
-```
-
-If port 3541 is in use, the server falls back to a random available port.
-
-### Global install
-
-```bash
-npm install -g claude-code-kanban
-claude-code-kanban --open
-```
-
-## How It Works
+- **17 color themes** — Dracula, Nord, Catppuccin, Gruvbox, Tokyo Night, and more — each in light and dark
+- **Storage manager** — Inspect disk usage and clean up stale sessions and tasks
+- **Keyboard-first** — Press `?` for the full shortcut reference
 
-Claude Code writes task files to `~/.claude/tasks/` and conversation logs to `~/.claude/projects/`. The dashboard watches these directories with [chokidar](https://github.com/paulmillr/chokidar) and pushes updates to the browser via Server-Sent Events (SSE). Nothing is modified — the dashboard is read-only.
+![Session info](assets/shot-session-info.png)
 
-**Tasks** are picked up automatically from Claude Code's native task system (TodoWrite). No hooks needed.
+![Subagent preview](assets/shot-subagent-preview.png)
 
-**Hooks** extend observability beyond tasks. When installed, lightweight shell scripts fire on Claude Code lifecycle events and write JSON markers that the dashboard picks up:
+![Theme picker](assets/shot-theme-picker.png)
 
-| Hook event | What it enables |
-|------------|----------------|
-| `SubagentStart` / `SubagentStop` | Agent log — see subagent spawns, durations, prompts |
-| `TeammateIdle` | Idle detection for team member agents |
-| `PostToolUse` | Waiting-for-user detection (permission prompts, AskUserQuestion) |
 
 ## Context Window Monitoring
 
-Track real-time context window usage for each Claude Code session directly in the dashboard sidebar and detail panel.
-
-### Setup
-
-The installer copies `context-status.sh` alongside the agent hooks:
-
-```bash
-npx claude-code-kanban --install
-```
-
-Then add it to your statusline in `~/.claude/settings.json`:
+Per-session context usage bars, token/cost breakdowns, and model info in the sidebar and detail panel. The installer copies `context-status.sh` — wire it into your statusline in `~/.claude/settings.json`:
 
 ```json
 {
@@ -111,27 +67,17 @@ Then add it to your statusline in `~/.claude/settings.json`:
 }
 ```
 
-The script pipes through — your existing statusline still works. It just writes a snapshot to `~/.claude/context-status/{sessionId}.json` on each update.
-
-### What you get
+The script pipes through, so your existing statusline keeps working.
 
-- **Sidebar bar** — compact context usage bar per session with color thresholds (green → yellow → orange → red) and a 200K token marker
-- **Detail panel** — input/output token breakdown, cache read tokens, cost, duration, API time, lines added/removed, and model name
-- Only shown for active or pinned sessions
-
-## FAQ
-
-**Does this control Claude?**
-No. The viewer only observes — it never writes to task files or directs Claude's work.
-
-**Does it work with agent teams?**
-Yes. Team sessions are auto-detected with color-coded members and owner filtering.
+## Configuration
 
-**Does it require Claude Code to be running?**
-No. You can browse past sessions anytime. Live updates resume when Claude starts working again.
+```bash
+PORT=8080 npx claude-code-kanban             # Custom port (falls back if busy)
+npx claude-code-kanban --open                # Auto-open browser
+npx claude-code-kanban --dir=~/.claude-work  # Custom Claude config dir
+```
 
-**What happens without hooks?**
-The Kanban board still shows tasks, but you won't see the agent log, waiting-for-user indicators, or live session activity. Run `npx claude-code-kanban --install` for the full experience.
+Global install: `npm install -g claude-code-kanban`, then `claude-code-kanban --open`.
 
 ## License
 

package/lib/parsers.js

@@ -1029,14 +1029,15 @@ const CACHED_IMAGE_MIME = {
   png: 'image/png', jpg: 'image/jpeg', jpeg: 'image/jpeg', gif: 'image/gif', webp: 'image/webp',
 };
 
-// Serve pasted image N from ~/.claude/image-cache/<sessionId>/. The cached file may
+// Serve pasted image N from <claudeDir>/image-cache/<sessionId>/. The cached file may
 // be any image format, so resolve it by index rather than assuming .png. sessionId
 // is validated to a bare id to prevent path traversal.
-function readCachedImage(sessionId, n) {
+function readCachedImage(sessionId, n, claudeDir) {
   const idx = Number(n);
   if (!sessionId || !/^[A-Za-z0-9._-]+$/.test(sessionId)) return null;
   if (!Number.isInteger(idx) || idx < 0) return null;
-  const dir = path.join(require('os').homedir(), '.claude', 'image-cache', sessionId);
+  const baseDir = claudeDir || path.join(require('os').homedir(), '.claude');
+  const dir = path.join(baseDir, 'image-cache', sessionId);
   try {
     const match = readdirSync(dir).find((f) => {
       const dot = f.lastIndexOf('.');

package/package.json

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

package/public/app.js

@@ -2944,6 +2944,7 @@ function renderSessions() {
                 ${isTeam || session.project || showCtx ? `<span class="team-info-btn" onclick="event.stopPropagation(); showSessionInfoModal('${session.id}')" title="View session info"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg></span>` : ''}
                 ${session.hasPlan && !session.planSourceSessionId ? `<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>` : ''}
                 ${renderLoopBadge(session)}
+                ${renderWorkflowBadge(session)}
                 ${linkedDocsCount > 0 ? `<span class="linked-docs-badge" onclick="event.stopPropagation(); showSessionInfoModal('${session.id}')" title="${linkedDocsCount} linked document${linkedDocsCount > 1 ? 's' : ''}">${linkSvg(10)}${linkedDocsCount}</span>` : ''}
                 ${bookmarksCount > 0 ? `<span class="bookmarks-badge" onclick="event.stopPropagation(); openSessionWithBookmarks('${session.id}')" title="${bookmarksCount} bookmarked message${bookmarksCount > 1 ? 's' : ''}"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></svg>${bookmarksCount}</span>` : ''}
                 ${hasScratchpad ? `<span class="scratchpad-badge" onclick="event.stopPropagation(); openSessionScratchpad('${session.id}')" title="Open scratchpad"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></span>` : ''}
@@ -4589,7 +4590,14 @@ function matchKey(e, ...keys) {
   return keys.some((k) => e.key === k || e.code === k);
 }
 
-const MODAL_ESC_PRIORITY = ['preview-modal', 'msg-detail-modal', 'tool-stats-modal', 'plan-modal', 'loop-modal'];
+const MODAL_ESC_PRIORITY = [
+  'preview-modal',
+  'msg-detail-modal',
+  'tool-stats-modal',
+  'plan-modal',
+  'loop-modal',
+  'workflow-modal',
+];
 const MODAL_CLOSERS = {
   'preview-modal': () => closePreviewModal(),
   'msg-detail-modal': () => {
@@ -4599,6 +4607,7 @@ const MODAL_CLOSERS = {
   'tool-stats-modal': () => closeToolStatsModal(),
   'plan-modal': () => closePlanModal(),
   'loop-modal': () => closeLoopModal(),
+  'workflow-modal': () => closeWorkflowModal(),
   'team-modal': () => closeTeamModal(),
   'agent-modal': () => closeAgentModal(),
   'help-modal': () => closeHelpModal(),
@@ -6477,6 +6486,134 @@ function closeLoopModal() {
   document.getElementById('loop-modal').classList.remove('visible');
 }
 
+const WORKFLOW_GEAR_SVG =
+  '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>';
+
+// Standard "open in editor" glyph — matches the message-detail / plan modals.
+const ICON_OPEN_EDITOR =
+  '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>';
+
+function renderWorkflowBadge(session) {
+  if (!session.hasWorkflow) return '';
+  const n = session.workflowCount || 0;
+  const tip = `${n} workflow${n === 1 ? '' : 's'}`;
+  return `<span class="workflow-badge" onclick="event.stopPropagation(); showWorkflowModal('${session.id}')" title="${escapeHtml(tip)}">${WORKFLOW_GEAR_SVG}</span>`;
+}
+
+let _workflowSessionId = null;
+let _workflowHeaderId = null;
+
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML
+function showWorkflowModal(sessionId) {
+  _workflowSessionId = sessionId;
+  setWorkflowHeader('Workflows', null);
+  const body = document.getElementById('workflow-modal-body');
+  body.innerHTML = '<div style="padding:16px;color:var(--text-secondary);">Loading…</div>';
+  document.getElementById('workflow-modal').classList.add('visible');
+  fetch(`/api/sessions/${sessionId}/workflows`)
+    .then((r) => (r.ok ? r.json() : { workflows: [] }))
+    .catch(() => ({ workflows: [] }))
+    .then((data) => renderWorkflowList(data.workflows || []));
+}
+
+function setWorkflowHeader(name, wfId) {
+  const titleText = document.getElementById('workflow-modal-title-text');
+  const headerBtn = document.getElementById('workflow-modal-open-btn');
+  _workflowHeaderId = wfId || null;
+  if (titleText) {
+    titleText.textContent = name;
+    titleText.title = wfId ? name : '';
+  }
+  if (headerBtn) headerBtn.style.display = wfId ? '' : 'none';
+}
+
+function renderWorkflowList(workflows) {
+  const body = document.getElementById('workflow-modal-body');
+  if (!workflows.length) {
+    setWorkflowHeader('Workflows', null);
+    body.innerHTML =
+      '<div style="padding:24px;text-align:center;color:var(--text-secondary);">No workflow scripts for this session.</div>';
+    return;
+  }
+  // Single workflow: promote its name to the header and open-button next to the close (X).
+  if (workflows.length === 1) {
+    const w = workflows[0];
+    setWorkflowHeader(w.name || w.id, w.id);
+    const when = w.modifiedAt ? formatDate(w.modifiedAt) : '';
+    body.innerHTML = `<div class="workflow-single">
+      <div class="workflow-row-meta"><code>${escapeHtml(w.id)}</code>${when ? ` · ${escapeHtml(when)}` : ''}</div>
+      <div class="workflow-row-code"></div>
+    </div>`;
+    loadWorkflowCode(w.id, body.querySelector('.workflow-row-code'));
+    return;
+  }
+  // Multiple workflows: generic header, collapsible list with per-row open icons.
+  setWorkflowHeader('Workflows', null);
+  body.innerHTML = workflows
+    .map((w) => {
+      const when = w.modifiedAt ? formatDate(w.modifiedAt) : '';
+      return `<div class="workflow-row" onclick="viewWorkflowScript('${escapeHtml(w.id)}', this)">
+        <div class="workflow-row-head">
+          <span class="workflow-row-name">${escapeHtml(w.name || w.id)}</span>
+          <span class="workflow-row-id"><code>${escapeHtml(w.id)}</code></span>
+          <button class="icon-btn workflow-open-icon" aria-label="Open in editor" title="Open in editor" onclick="event.stopPropagation(); openWorkflowInEditor('${escapeHtml(w.id)}')">${ICON_OPEN_EDITOR}</button>
+        </div>
+        ${when ? `<div class="workflow-row-meta">${escapeHtml(when)}</div>` : ''}
+        <div class="workflow-row-code"></div>
+      </div>`;
+    })
+    .join('');
+}
+
+function loadWorkflowCode(wfId, codeEl) {
+  if (!codeEl) return;
+  codeEl.innerHTML = '<div style="padding:8px 0;color:var(--text-secondary);">Loading…</div>';
+  fetch(`/api/sessions/${_workflowSessionId}/workflows/${encodeURIComponent(wfId)}`)
+    .then((r) => (r.ok ? r.json() : null))
+    .catch(() => null)
+    .then((data) => {
+      if (!data?.content) {
+        codeEl.innerHTML = '<div style="padding:8px 0;color:var(--text-secondary);">Failed to load script.</div>';
+        return;
+      }
+      let highlighted;
+      if (typeof hljs !== 'undefined' && hljs.getLanguage('javascript')) {
+        highlighted = hljs.highlight(data.content, { language: 'javascript' }).value;
+      } else {
+        highlighted = escapeHtml(data.content);
+      }
+      codeEl.innerHTML = `<pre><code class="hljs language-javascript">${highlighted}</code></pre>`;
+    });
+}
+
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML
+function viewWorkflowScript(wfId, rowEl) {
+  const codeEl = rowEl.querySelector('.workflow-row-code');
+  if (!codeEl) return;
+  if (rowEl.classList.contains('expanded')) {
+    rowEl.classList.remove('expanded');
+    codeEl.innerHTML = '';
+    return;
+  }
+  rowEl.classList.add('expanded');
+  loadWorkflowCode(wfId, codeEl);
+}
+
+function openWorkflowInEditor(wfId) {
+  postAndToast(`/api/sessions/${_workflowSessionId}/workflows/${encodeURIComponent(wfId)}/open`, {}, 'in editor');
+}
+
+// biome-ignore lint/correctness/noUnusedVariables: used in HTML
+function openWorkflowHeaderScript() {
+  if (_workflowHeaderId) openWorkflowInEditor(_workflowHeaderId);
+}
+
+function closeWorkflowModal() {
+  document.getElementById('workflow-modal').classList.remove('visible');
+  _workflowSessionId = null;
+  setWorkflowHeader('Workflows', null);
+}
+
 function openPlanForSession(sid) {
   fetch(`/api/sessions/${sid}/plan`)
     .then((r) => (r.ok ? r.json() : null))

package/public/index.html

@@ -604,6 +604,30 @@
     </div>
   </div>
 
+  <!-- Workflow Scripts Modal -->
+  <div id="workflow-modal" class="modal-overlay" onclick="closeWorkflowModal()">
+    <div class="modal plan-modal" onclick="event.stopPropagation()">
+      <div class="modal-header">
+        <h3 id="workflow-modal-title" class="modal-title" style="display:flex;align-items:center;gap:8px;min-width:0;">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:18px;height:18px;flex-shrink:0;"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
+          <span id="workflow-modal-title-text" style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">Workflows</span>
+        </h3>
+        <div style="display:flex;align-items:center;gap:4px;">
+          <button id="workflow-modal-open-btn" class="icon-btn" aria-label="Open in editor" title="Open in editor" style="display:none;" onclick="openWorkflowHeaderScript()">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
+          </button>
+          <button class="modal-close" aria-label="Close dialog" onclick="closeWorkflowModal()">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
+          </button>
+        </div>
+      </div>
+      <div id="workflow-modal-body" class="modal-body" style="overflow-y:auto;flex:1 1 auto;min-height:0;"></div>
+      <div class="modal-footer">
+        <button class="btn btn-secondary" onclick="closeWorkflowModal()">Close</button>
+      </div>
+    </div>
+  </div>
+
   <div id="agent-modal" class="modal-overlay plan-modal-overlay" onclick="closeAgentModal()">
     <div class="modal plan-modal" onclick="event.stopPropagation()">
       <div class="modal-header">

package/public/style.css

@@ -1573,7 +1573,7 @@ body::before {
 .session-indicators {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 2px;
   flex-shrink: 0;
 }
 
@@ -1640,26 +1640,116 @@ body::before {
   border-color: var(--plan);
 }
 
+/* Match .team-info-btn so the wakeups clock blends with the other session-card icons. */
 .loop-badge {
   width: 24px;
   height: 24px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  background: var(--bg-deep);
+  background: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
-  color: var(--text-secondary);
+  color: var(--text-muted);
   cursor: pointer;
   flex-shrink: 0;
   transition: all 0.15s ease;
 }
 
 .loop-badge:hover {
+  background: var(--bg-hover);
+  border-color: var(--border);
+  color: var(--text-secondary);
+}
+
+/* #region WORKFLOW */
+/* Match .team-info-btn so the gear blends with the other session-card icons. */
+.workflow-badge {
+  width: 24px;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  color: var(--text-muted);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: all 0.15s ease;
+}
+
+.workflow-badge:hover {
+  background: var(--bg-hover);
+  border-color: var(--border);
+  color: var(--text-secondary);
+}
+
+.workflow-row {
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 10px 12px;
+  margin-bottom: 8px;
+  cursor: pointer;
+  transition: border-color 0.15s ease;
+}
+
+.workflow-row:hover {
   border-color: var(--accent, var(--plan));
-  color: var(--accent, var(--plan));
 }
 
+.workflow-row.expanded {
+  cursor: default;
+}
+
+.workflow-row-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.workflow-open-icon {
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+.workflow-row-name {
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.workflow-row-id code {
+  font-size: 11px;
+  color: var(--text-secondary);
+}
+
+.workflow-row-meta {
+  margin-top: 2px;
+  font-size: 11px;
+  color: var(--text-secondary);
+}
+
+.workflow-single .workflow-row-meta {
+  margin: 0 0 10px;
+}
+
+.workflow-row-code:not(:empty) {
+  margin-top: 10px;
+}
+
+.workflow-single .workflow-row-code:not(:empty) {
+  margin-top: 0;
+}
+
+.workflow-row-code pre {
+  margin: 0;
+  max-height: 60vh;
+  overflow: auto;
+  border-radius: 6px;
+}
+
+/* #endregion */
+
 .loop-section-title {
   margin: 14px 0 8px;
   font-size: 12px;

package/server.js

@@ -54,7 +54,7 @@ function getClaudeDir() {
       return dir.startsWith('~') ? dir.replace('~', os.homedir()) : dir;
     }
   }
-  return process.env.CLAUDE_DIR || path.join(os.homedir(), '.claude');
+  return process.env.CLAUDE_CONFIG_DIR || process.env.CLAUDE_DIR || path.join(os.homedir(), '.claude');
 }
 
 function getArgUrl(argName, envName) {
@@ -743,6 +743,72 @@ function loadSessionMetadata() {
   return metadata;
 }
 
+// Workflow (Workflow tool) scripts are persisted at
+//   projects/<projEnc>/<sessionId>/workflows/scripts/<name>-<wf_id>.js
+// The script's projEnc can differ from the session's own JSONL dir (the workflow
+// may run from a different cwd), so we scan every project dir into a TTL-cached
+// index rather than deriving the path from meta.jsonlPath. Isolated from the
+// session-scan hot path: a single Map lookup per buildSessionObject call.
+const WORKFLOW_INDEX_TTL_MS = 5000;
+let workflowIndexCache = null; // Map<sessionId, Array<{id,name,path,mtimeMs}>>
+let workflowIndexBuiltAt = 0;
+
+function buildWorkflowIndex() {
+  const index = new Map();
+  if (!existsSync(PROJECTS_DIR)) return index;
+  let projs;
+  try { projs = readdirSync(PROJECTS_DIR, { withFileTypes: true }); } catch { return index; }
+  for (const proj of projs) {
+    if (!proj.isDirectory()) continue;
+    const projPath = path.join(PROJECTS_DIR, proj.name);
+    let sessDirs;
+    try { sessDirs = readdirSync(projPath, { withFileTypes: true }); } catch { continue; }
+    for (const sess of sessDirs) {
+      if (!sess.isDirectory() || !isUUID(sess.name)) continue;
+      const scriptsDir = path.join(projPath, sess.name, 'workflows', 'scripts');
+      let scripts;
+      try { scripts = readdirSync(scriptsDir); } catch { continue; } // ENOENT for most — skip fast
+      for (const f of scripts) {
+        if (!f.endsWith('.js')) continue;
+        const full = path.join(scriptsDir, f);
+        let mtimeMs = 0;
+        try { mtimeMs = statSync(full).mtimeMs; } catch {}
+        const base = f.slice(0, -3);
+        const m = base.match(/^(.*)-(wf_[a-z0-9-]+)$/i);
+        const entry = { id: m ? m[2] : base, name: m ? m[1] : base, path: full, mtimeMs };
+        if (!index.has(sess.name)) index.set(sess.name, []);
+        index.get(sess.name).push(entry);
+      }
+    }
+  }
+  return index;
+}
+
+function getWorkflowIndex() {
+  const now = Date.now();
+  if (workflowIndexCache && now - workflowIndexBuiltAt < WORKFLOW_INDEX_TTL_MS) return workflowIndexCache;
+  workflowIndexCache = buildWorkflowIndex();
+  workflowIndexBuiltAt = now;
+  return workflowIndexCache;
+}
+
+// Resolve a session's workflow scripts, newest first. Tries the raw id then the
+// team-lead resolution (a team session's scripts live under the lead's dir).
+function getWorkflowScripts(sessionId) {
+  const idx = getWorkflowIndex();
+  let list = idx.get(sessionId);
+  if (!list || !list.length) {
+    const alt = resolveSessionId(sessionId);
+    if (alt && alt !== sessionId) list = idx.get(alt);
+  }
+  return list ? [...list].sort((a, b) => b.mtimeMs - a.mtimeMs) : [];
+}
+
+function getWorkflowInfoSummary(sessionId) {
+  const list = getWorkflowIndex().get(sessionId);
+  return { hasWorkflow: !!(list && list.length), workflowCount: list ? list.length : 0 };
+}
+
 function getPlanInfo(slug) {
   if (!slug) return { hasPlan: false, planTitle: null, planPath: null };
   const planPath = path.join(PLANS_DIR, `${slug}.md`);
@@ -839,6 +905,7 @@ function buildSessionObject(id, meta, overrides = {}) {
     projectDir: meta.jsonlPath ? path.dirname(meta.jsonlPath) : null,
     contextStatus: getContextStatus(id, meta),
     ...getPlanInfo(meta.slug),
+    ...getWorkflowInfoSummary(id),
     loopInfo: getLoopInfoSummary(meta),
     ...overrides,
     // Remove internal-only field
@@ -1344,11 +1411,53 @@ app.get('/api/sessions/:sessionId/loop', (req, res) => {
   }
 });
 
+// API: List workflow scripts for a session
+app.get('/api/sessions/:sessionId/workflows', (req, res) => {
+  try {
+    const workflows = getWorkflowScripts(req.params.sessionId).map((w) => ({
+      id: w.id,
+      name: w.name,
+      modifiedAt: w.mtimeMs ? new Date(w.mtimeMs).toISOString() : null,
+    }));
+    res.json({ workflows });
+  } catch (error) {
+    console.error('Error listing workflows:', error);
+    res.status(500).json({ error: 'Failed to list workflows' });
+  }
+});
+
+// API: Get a single workflow script's source. Looked up by id from the session's
+// own script list (never built from the param), so the id can't traverse paths.
+app.get('/api/sessions/:sessionId/workflows/:wfId', async (req, res) => {
+  try {
+    const wf = getWorkflowScripts(req.params.sessionId).find((w) => w.id === req.params.wfId);
+    if (!wf) return res.status(404).json({ error: 'Workflow script not found' });
+    const content = await fs.readFile(wf.path, 'utf8');
+    res.json({ id: wf.id, name: wf.name, content });
+  } catch (error) {
+    console.error('Error reading workflow script:', error);
+    res.status(500).json({ error: 'Failed to read workflow script' });
+  }
+});
+
 function openInEditor(...targets) {
   const editor = process.env.EDITOR || 'code';
   spawn(editor, ['-n', ...targets], { shell: true, stdio: 'ignore', detached: true }).unref();
 }
 
+// API: Open a workflow script in VS Code
+app.post('/api/sessions/:sessionId/workflows/:wfId/open', (req, res) => {
+  try {
+    const wf = getWorkflowScripts(req.params.sessionId).find((w) => w.id === req.params.wfId);
+    if (!wf) return res.status(404).json({ error: 'Workflow script not found' });
+    openInEditor(wf.path);
+    res.json({ success: true });
+  } catch (error) {
+    console.error('Error opening workflow script in editor:', error);
+    res.status(500).json({ error: 'Failed to open workflow script' });
+  }
+});
+
 // API: Open session plan in VS Code
 app.post('/api/sessions/:sessionId/plan/open', (req, res) => {
   try {
@@ -1526,7 +1635,7 @@ app.get('/api/sessions/:sessionId/agents', (req, res) => {
         flag: 'promptUnavailable',
         lookup: (a) => {
           if (byAgentId[a.agentId]) return byAgentId[a.agentId];
-          try { return extractPromptFromTranscript(subagentJsonlPath(meta, a.agentId)); } catch (_) { return null; }
+          try { return extractPromptFromTranscript(subagentJsonlForExtraction(meta, a.agentId)); } catch (_) { return null; }
         },
       },
       { field: 'agentName',   flag: 'agentNameUnavailable',   lookup: (a) => nameByAgentId[a.agentId] || null },
@@ -1536,7 +1645,10 @@ app.get('/api/sessions/:sessionId/agents', (req, res) => {
       for (const { field, flag, lookup } of reconcileFields) {
         for (const agent of agents) {
           if (agent[field]) continue;
-          if (agent[flag] && !isAgentLive(agent)) continue;
+          // Workflow subagents nest their transcript under subagents/workflows/;
+          // pre-fix builds latched *Unavailable using the flat path, so always
+          // re-attempt for them (the extractor resolves the nested path now).
+          if (agent[flag] && !isAgentLive(agent) && agent.type !== 'workflow-subagent') continue;
           const value = lookup(agent);
           if (value) {
             agent[field] = value;
@@ -1556,7 +1668,7 @@ app.get('/api/sessions/:sessionId/agents', (req, res) => {
     if (agentsNeedingModel.length && meta.jsonlPath) {
       for (const agent of agentsNeedingModel) {
         let model = null;
-        try { model = extractModelFromTranscript(subagentJsonlPath(meta, agent.agentId)); } catch (_) {}
+        try { model = extractModelFromTranscript(subagentJsonlForExtraction(meta, agent.agentId)); } catch (_) {}
         if (model) {
           agent.model = model;
           delete agent.modelUnavailable;
@@ -1651,13 +1763,38 @@ function sanitizeAgentId(raw) {
   return path.basename(raw).replace(/[^a-zA-Z0-9_-]/g, '');
 }
 
+function sessionDirFromMeta(meta) {
+  return path.join(path.dirname(meta.jsonlPath), path.basename(meta.jsonlPath, '.jsonl'));
+}
+
 function subagentJsonlPath(meta, agentId) {
-  return path.join(
-    path.dirname(meta.jsonlPath),
-    path.basename(meta.jsonlPath, '.jsonl'),
-    'subagents',
-    'agent-' + agentId + '.jsonl'
-  );
+  return path.join(sessionDirFromMeta(meta), 'subagents', 'agent-' + agentId + '.jsonl');
+}
+
+// A subagent transcript is normally at <sessionDir>/subagents/agent-<id>.jsonl.
+// Workflow-tool subagents nest one level deeper, under
+// <sessionDir>/subagents/workflows/<wf_id>/agent-<id>.jsonl. Return whichever
+// exists (flat first), else null.
+function subagentJsonlInDir(sessionDir, agentId) {
+  const flat = path.join(sessionDir, 'subagents', 'agent-' + agentId + '.jsonl');
+  if (existsSync(flat)) return flat;
+  const wfRoot = path.join(sessionDir, 'subagents', 'workflows');
+  let wfDirs;
+  try { wfDirs = readdirSync(wfRoot, { withFileTypes: true }); } catch { return null; }
+  for (const wf of wfDirs) {
+    if (!wf.isDirectory()) continue;
+    const nested = path.join(wfRoot, wf.name, 'agent-' + agentId + '.jsonl');
+    if (existsSync(nested)) return nested;
+  }
+  return null;
+}
+
+// Path for prompt/model extraction in agent enrichment: prefer the nested
+// workflow-subagent transcript when the flat path is absent. Falls back to the
+// flat path (which extract* handle gracefully when missing).
+function subagentJsonlForExtraction(meta, agentId) {
+  const resolved = meta.jsonlPath ? subagentJsonlInDir(sessionDirFromMeta(meta), agentId) : null;
+  return resolved || subagentJsonlPath(meta, agentId);
 }
 
 // Claude Code can scatter a session's records across multiple project dirs
@@ -1666,20 +1803,21 @@ function subagentJsonlPath(meta, agentId) {
 // parent sessionId. Fall back to scanning when the derived path is missing.
 const subagentPathCache = new Map();
 function findSubagentJsonlInProject(projPath, sessionId, agentId) {
-  const sameSid = path.join(projPath, sessionId, 'subagents', 'agent-' + agentId + '.jsonl');
-  if (existsSync(sameSid)) return sameSid;
+  const sameSid = subagentJsonlInDir(path.join(projPath, sessionId), agentId);
+  if (sameSid) return sameSid;
   let sessions;
   try { sessions = readdirSync(projPath, { withFileTypes: true }); } catch { return null; }
   for (const sess of sessions) {
     if (!sess.isDirectory() || sess.name === sessionId) continue;
-    const candidate = path.join(projPath, sess.name, 'subagents', 'agent-' + agentId + '.jsonl');
-    if (existsSync(candidate)) return candidate;
+    const candidate = subagentJsonlInDir(path.join(projPath, sess.name), agentId);
+    if (candidate) return candidate;
   }
   return null;
 }
 function resolveSubagentJsonl(meta, sessionId, agentId) {
-  const primary = subagentJsonlPath(meta, agentId);
-  if (existsSync(primary)) return primary;
+  // Same session dir: flat path or nested under subagents/workflows/ (both checked here).
+  const local = meta.jsonlPath ? subagentJsonlInDir(sessionDirFromMeta(meta), agentId) : null;
+  if (local) return local;
   const key = sessionId + '/' + agentId;
   const cached = subagentPathCache.get(key);
   if (cached) return cached;
@@ -1687,8 +1825,8 @@ function resolveSubagentJsonl(meta, sessionId, agentId) {
   const parent = lookupParentSession(sessionId);
   if (parent.parentSessionId && parent.parentJsonlPath) {
     const projDir = path.dirname(parent.parentJsonlPath);
-    const candidate = path.join(projDir, parent.parentSessionId, 'subagents', 'agent-' + agentId + '.jsonl');
-    if (existsSync(candidate)) found = candidate;
+    const candidate = subagentJsonlInDir(path.join(projDir, parent.parentSessionId), agentId);
+    if (candidate) found = candidate;
   }
   if (!found) {
     try {
@@ -1700,7 +1838,7 @@ function resolveSubagentJsonl(meta, sessionId, agentId) {
     } catch (_) { /* projects dir missing */ }
   }
   if (found) subagentPathCache.set(key, found);
-  return found || primary;
+  return found || subagentJsonlPath(meta, agentId);
 }
 
 // Claude Code creates child sessions in two ways:
@@ -2110,7 +2248,7 @@ app.get('/api/sessions/:sessionId/tool-result-image/:toolUseId/:n', (req, res) =
 });
 
 app.get('/api/sessions/:sessionId/cached-image/:n', (req, res) => {
-  const img = readCachedImage(req.params.sessionId, req.params.n);
+  const img = readCachedImage(req.params.sessionId, req.params.n, CLAUDE_DIR);
   if (!img) return res.status(404).end();
   res.setHeader('Content-Type', img.mediaType);
   res.setHeader('Cache-Control', 'no-store');