claude-code-kanban 4.13.0 → 4.14.1

package/lib/parsers.js

@@ -1291,33 +1291,31 @@ function findTerminatedTeammates(jsonlPath) {
 
 function extractPromptFromTranscript(jsonlPath) {
   const { openSync, readSync, closeSync } = fs;
-  const MAX_READ = 65536;
-  const CHUNK = 4096;
+  // statSync (outside try) throws on a missing path — callers rely on that.
+  const stat = statSync(jsonlPath);
+  // Workflow-spawned subagent prompts embed full task context and routinely
+  // exceed 64 KB, so read the whole first line up to a generous cap. One buffered
+  // read (vs. per-chunk decode) also avoids corrupting multi-byte chars at chunk
+  // boundaries for large prompts.
+  const readSize = Math.min(2097152, stat.size);
   const fd = openSync(jsonlPath, 'r');
   try {
-    let accumulated = '';
-    const buf = Buffer.alloc(CHUNK);
-    while (accumulated.length < MAX_READ) {
-      const bytesRead = readSync(fd, buf, 0, CHUNK, null);
-      if (bytesRead === 0) break;
-      accumulated += buf.toString('utf8', 0, bytesRead);
-      const nlIdx = accumulated.indexOf('\n');
-      if (nlIdx === -1) continue;
-      const firstLine = accumulated.slice(0, nlIdx);
-      try {
-        const obj = JSON.parse(firstLine);
-        if (obj.type === 'user') {
-          const content = obj.message?.content;
-          if (typeof content === 'string') return content;
-          if (Array.isArray(content)) {
-            for (const b of content) {
-              if (b.type === 'text' && b.text) return b.text;
-            }
-          }
+    const buf = Buffer.alloc(readSize);
+    readSync(fd, buf, 0, readSize, 0);
+    // Decode only the first line, not the whole (possibly large) read window.
+    const nlByte = buf.indexOf(0x0a);
+    const firstLine = (nlByte === -1 ? buf : buf.subarray(0, nlByte)).toString('utf8');
+    const obj = JSON.parse(firstLine);
+    if (obj.type === 'user') {
+      const content = obj.message?.content;
+      if (typeof content === 'string') return content;
+      if (Array.isArray(content)) {
+        for (const b of content) {
+          if (b.type === 'text' && b.text) return b.text;
         }
-      } catch (_) {}
-      break;
+      }
     }
+  } catch (_) {
   } finally {
     closeSync(fd);
   }
@@ -1354,6 +1352,82 @@ function extractModelFromTranscript(jsonlPath) {
   return null;
 }
 
+// Full-file scan of a subagent transcript for roster stats: model, summed
+// output tokens, and first/last timestamps (for duration). COLD PATH ONLY —
+// used by the workflow run view on demand, never from the session-scan hot
+// path (a full read per agent would blow the /api/sessions budget).
+function extractTranscriptStats(jsonlPath) {
+  let content;
+  try { content = readFileSync(jsonlPath, 'utf8'); } catch (_) { return null; }
+  let model = null;
+  let outputTokens = 0;
+  let firstTs = null;
+  let lastTs = null;
+  for (const line of content.split('\n')) {
+    if (!line.trim()) continue;
+    let obj;
+    try { obj = JSON.parse(line); } catch (_) { continue; }
+    if (obj.timestamp) {
+      if (!firstTs) firstTs = obj.timestamp;
+      lastTs = obj.timestamp;
+    }
+    const msg = obj.message;
+    if (msg && typeof msg === 'object') {
+      if (!model && msg.model) model = msg.model;
+      const out = msg.usage?.output_tokens;
+      if (typeof out === 'number') outputTokens += out;
+    }
+  }
+  return { model, outputTokens, firstTs, lastTs };
+}
+
+// Render a StructuredOutput tool input (arbitrary schema object) as markdown:
+// one section per field, prose kept verbatim, structured values as JSON blocks.
+function formatStructuredResult(input) {
+  const parts = [];
+  for (const [key, value] of Object.entries(input)) {
+    if (value == null || value === '') continue;
+    parts.push('### ' + key);
+    parts.push(typeof value === 'string' ? value : '```json\n' + JSON.stringify(value, null, 2) + '\n```');
+  }
+  return parts.length ? parts.join('\n\n') : null;
+}
+
+// Workflow-spawned subagents given a schema end their run on a forced
+// StructuredOutput tool call and never emit a text response — so their
+// lastMessage is empty. Tail-read the transcript, take the LAST StructuredOutput
+// tool_use, and format its input as the agent's result. Returns null when absent.
+function extractStructuredResultFromTranscript(jsonlPath) {
+  const { openSync, readSync, closeSync } = fs;
+  const stat = statSync(jsonlPath);
+  const readSize = Math.min(1048576, stat.size);
+  const start = stat.size - readSize;
+  const fd = openSync(jsonlPath, 'r');
+  try {
+    const buf = Buffer.alloc(readSize);
+    readSync(fd, buf, 0, readSize, start);
+    const text = buf.toString('utf8');
+    // Drop the leading partial line unless we read from the very start.
+    const clean = start > 0 ? text.slice(text.indexOf('\n') + 1) : text;
+    if (!clean.includes('"StructuredOutput"')) return null;
+    // Scan from the end for the last StructuredOutput tool call.
+    const lines = clean.split('\n');
+    for (let i = lines.length - 1; i >= 0; i--) {
+      if (!lines[i].includes('"StructuredOutput"')) continue;
+      let obj;
+      try { obj = JSON.parse(lines[i]); } catch (_) { continue; }
+      const content = obj?.message?.content;
+      if (!Array.isArray(content)) continue;
+      const block = content.find(b => b?.type === 'tool_use' && b.name === 'StructuredOutput' && b.input && typeof b.input === 'object');
+      if (block) return formatStructuredResult(block.input);
+    }
+  } catch (_) {
+  } finally {
+    closeSync(fd);
+  }
+  return null;
+}
+
 // Incremental loop-tool scanner. JSONL is append-only, so we keep per-path
 // state and on each call read ONLY the bytes appended since scannedOffset.
 // Avoids the only full-file read that ran inside the /api/sessions hot path.
@@ -1492,5 +1566,7 @@ module.exports = {
   readCompactSummaries,
   findTerminatedTeammates,
   extractPromptFromTranscript,
-  extractModelFromTranscript
+  extractModelFromTranscript,
+  extractStructuredResultFromTranscript,
+  extractTranscriptStats
 };

package/package.json

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

package/public/app.js

@@ -2634,7 +2634,7 @@ function showAgentModal(agentId) {
   const modalNameLabel = agent.agentName ? ` · ${escapeHtml(agent.agentName)}` : '';
   title.innerHTML = `${statusDot} ${escapeHtml(agent.type || 'unknown')}${modalNameLabel}`;
 
-  const shortModel = agent.model ? agent.model.replace(/^claude-/, '').replace(/-\d{8}$/, '') : null;
+  const shortModel = shortModelName(agent.model);
   const shortId = agent.agentId ? agent.agentId.slice(0, 8) : '';
   const chip = (label, value, opts = {}) => {
     const cls = opts.cls ? ` ${opts.cls}` : '';
@@ -2648,7 +2648,7 @@ function showAgentModal(agentId) {
   // toolUseResult), not on the agent-activity record — so read them from there.
   const agentMsg = currentMessages.find((m) => m.tool === 'Agent' && m.agentId === agentId);
   const usageStats = agentMsg?.agentUsageStats || null;
-  const fmtTok = (t) => (t >= 1000 ? `${(t / 1000).toFixed(1).replace(/\.0$/, '')}k` : `${t}`);
+  const fmtTok = fmtTokens;
 
   const chips = [];
   if (agent.agentId) chips.push(chip('id', escapeHtml(shortId), { cls: 'agent-chip-mono', title: agent.agentId }));
@@ -2796,7 +2796,7 @@ function renderSessions() {
         ((!s.sharedTaskList && (s.pending > 0 || s.inProgress > 0)) ||
           s.hasActiveAgents ||
           s.hasWaitingForUser ||
-          s.hasRecentLog);
+          s.hasRecentActivity);
       if (isActive) activeSessionIds.add(s.id);
       return isActive;
     });
@@ -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(),
@@ -5698,8 +5707,12 @@ function filterBySessions(value) {
   sessionFilter = value;
   if (value !== 'active') activityFilter.clear();
   updateUrl();
+  // Instant feedback from cached data, then refetch — the cached list was fetched
+  // with the previous filter's server params (e.g. filter=active), so "All Sessions"
+  // needs a server round-trip to actually include inactive sessions.
   renderSessions();
   renderActivityChip();
+  fetchSessions(false);
 }
 
 // biome-ignore lint/correctness/noUnusedVariables: used in HTML
@@ -6477,6 +6490,208 @@ 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;
+let _workflowList = [];
+
+// 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) => {
+      _workflowList = data.workflows || [];
+      if (!_workflowList.length) {
+        setWorkflowHeader('Workflows', null);
+        body.innerHTML =
+          '<div style="padding:24px;text-align:center;color:var(--text-secondary);">No workflow scripts for this session.</div>';
+      } else if (_workflowList.length === 1) {
+        showWorkflowRun(_workflowList[0].id);
+      } else {
+        renderWorkflowPicker(_workflowList);
+      }
+    });
+}
+
+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';
+}
+
+// Multiple workflows: pick one to drill into (we show a single run at a time).
+function renderWorkflowPicker(workflows) {
+  setWorkflowHeader('Workflows', null);
+  const body = document.getElementById('workflow-modal-body');
+  body.innerHTML = workflows
+    .map((w) => {
+      const when = w.modifiedAt ? formatDate(w.modifiedAt) : '';
+      return `<div class="workflow-row" onclick="showWorkflowRun('${escapeHtml(w.id)}')">
+        <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>
+        ${w.description ? `<div class="workflow-row-desc">${escapeHtml(w.description)}</div>` : ''}
+        ${when ? `<div class="workflow-row-meta">${escapeHtml(when)}</div>` : ''}
+      </div>`;
+    })
+    .join('');
+}
+
+function showWorkflowRun(wfId) {
+  const name = _workflowList.find((w) => w.id === wfId)?.name || wfId;
+  setWorkflowHeader(name, wfId);
+  const body = document.getElementById('workflow-modal-body');
+  body.innerHTML = '<div style="padding:16px;color:var(--text-secondary);">Loading…</div>';
+  fetch(`/api/sessions/${_workflowSessionId}/workflows/${encodeURIComponent(wfId)}/run`)
+    .then((r) => (r.ok ? r.json() : null))
+    .catch(() => null)
+    .then((run) => {
+      if (!run) {
+        body.innerHTML = '<div style="padding:16px;color:var(--text-secondary);">Failed to load run state.</div>';
+        return;
+      }
+      renderWorkflowRun(run);
+    });
+}
+
+function fmtTokens(t) {
+  return t >= 1000 ? `${(t / 1000).toFixed(1).replace(/\.0$/, '')}k` : `${t}`;
+}
+
+function shortModelName(model) {
+  return model ? model.replace(/^claude-/, '').replace(/-\d{8}$/, '') : '';
+}
+
+function renderWorkflowRun(run) {
+  const body = document.getElementById('workflow-modal-body');
+  const allDone = run.startedCount > 0 && run.doneCount >= run.startedCount;
+  const wall =
+    run.startedAt && run.stoppedAt ? formatDuration(new Date(run.stoppedAt) - new Date(run.startedAt)) : null;
+
+  const back =
+    _workflowList.length > 1
+      ? `<div class="wf-back" onclick="renderWorkflowPicker(_workflowList)">‹ All workflows</div>`
+      : '';
+
+  const stats = [`${run.doneCount}/${run.startedCount} agents`, wall ? escapeHtml(wall) : null]
+    .filter(Boolean)
+    .join(' · ');
+
+  const desc = run.description ? `<div class="wf-run-desc">${escapeHtml(run.description)}</div>` : '';
+
+  const phases = (run.phases || [])
+    .map(
+      (p) => `<div class="wf-phase">
+        <span class="wf-phase-mark${allDone ? ' done' : ''}">${allDone ? '✓' : ''}</span>
+        <span class="wf-phase-title">${escapeHtml(p.title)}</span>
+        ${p.detail ? `<span class="wf-phase-detail">${escapeHtml(p.detail)}</span>` : ''}
+      </div>`,
+    )
+    .join('');
+  const phasesBlock = phases ? `<div class="wf-section-title">Phases</div><div class="wf-phases">${phases}</div>` : '';
+
+  const agents = (run.agents || [])
+    .map((a) => {
+      const dur = a.durationMs != null ? formatDuration(a.durationMs) : '';
+      const running = a.status !== 'done';
+      return `<div class="wf-agent" onclick="showAgentModal('${escapeHtml(a.agentId)}')" title="${escapeHtml(a.agentId)}">
+        <span class="wf-agent-type">${escapeHtml(a.type || 'agent')}</span>
+        <span class="wf-agent-model">${escapeHtml(shortModelName(a.model))}</span>
+        <span class="wf-agent-tok">${a.outputTokens ? `${fmtTokens(a.outputTokens)} tok` : ''}</span>
+        <span class="wf-agent-dur">${escapeHtml(dur)}</span>
+        <span class="wf-agent-status ${running ? 'running' : 'done'}">${running ? '●' : '✓'}</span>
+      </div>`;
+    })
+    .join('');
+  const agentsBlock = run.agents?.length
+    ? `<div class="wf-section-title">Agents · ${run.agents.length}</div><div class="wf-agents">${agents}</div>`
+    : '<div class="wf-section-title">Agents</div><div class="wf-empty">No agent runs recorded yet.</div>';
+
+  body.innerHTML = `<div class="workflow-run">
+    ${back}
+    ${desc}
+    <div class="wf-run-stats">${stats} · <code>${escapeHtml(run.id)}</code></div>
+    ${phasesBlock}
+    ${agentsBlock}
+    <details class="wf-source">
+      <summary>Source</summary>
+      <div class="workflow-row-code"></div>
+    </details>
+  </div>`;
+
+  const details = body.querySelector('.wf-source');
+  details.addEventListener(
+    'toggle',
+    () => {
+      if (details.open) loadWorkflowCode(run.id, details.querySelector('.workflow-row-code'));
+    },
+    { once: true },
+  );
+}
+
+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>`;
+    });
+}
+
+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;
+  _workflowList = [];
+  setWorkflowHeader('Workflows', null);
+}
+
 function openPlanForSession(sid) {
   fetch(`/api/sessions/${sid}/plan`)
     .then((r) => (r.ok ? r.json() : null))
@@ -6974,6 +7189,9 @@ window.addEventListener('popstate', () => {
   ownerFilter = s.owner || '';
   searchQuery = s.search || '';
   loadPreferences();
+  // fetchSessions derives query params from the globals set above — refetch so
+  // back/forward across a filter change doesn't render a stale server-filtered list.
+  fetchSessions(false);
   if (s.projectView) {
     try {
       fetchProjectView(atob(s.projectView));

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">