@axiomatic-labs/claudeflow 2.13.34 → 2.13.36

package/lib/panel.js

@@ -286,6 +286,30 @@ function getEnforcementInfo(cwd) {
   };
 }
 
+function getActivePlanInfo(cwd) {
+  const p = path.join(cwd, '.claudeflow', 'state', 'active-plan.json');
+  let raw;
+  try { raw = fs.readFileSync(p, 'utf8'); }
+  catch { return { available: false }; }
+  let record;
+  try { record = JSON.parse(raw); }
+  catch (err) { return { available: false, error: err.message }; }
+  const captured = record.captured_at ? Date.parse(record.captured_at) : null;
+  const ageSeconds = captured ? Math.floor((Date.now() - captured) / 1000) : null;
+  const content = typeof record.content === 'string' ? record.content : '';
+  return {
+    available: true,
+    path: record.path || null,
+    source: record.source || null,
+    sessionId: record.session_id || null,
+    capturedAt: record.captured_at || null,
+    ageSeconds,
+    sha256: record.sha256 || null,
+    contentBytes: record.contentBytes || content.length,
+    summaryPreview: content.slice(0, 240).replace(/\s+/g, ' ').trim(),
+  };
+}
+
 function getRemindersInfo(cwd) {
   const helpers = loadReminderHelpers(cwd);
   if (!helpers || typeof helpers.listReminderCatalog !== 'function') {
@@ -385,6 +409,7 @@ function listLogEvents(cwd, { limit = 200, before = null, type = 'all' } = {}) {
     if (type !== 'all') {
       if (type === 'enforcement' && !r.type.startsWith('enforcement')) continue;
       if (type === 'reminder' && !r.type.startsWith('reminder')) continue;
+      if (type === 'blocked' && r.type !== 'enforcement-blocked') continue;
     }
     // Strip large `content` from list view; clients fetch it via /api/logs/:id
     // Old sidecars (pre-token-estimate) lack `contentTokens`. Backfill on
@@ -408,6 +433,8 @@ function listLogEvents(cwd, { limit = 200, before = null, type = 'all' } = {}) {
       capturedFromStdout: r.capturedFromStdout === true,
       stdoutTruncated: r.stdoutTruncated === true,
       parseError: r.parseError || null,
+      decision: r.decision || null,
+      reason: r.reason || null,
     });
   }
   return { entries, total, thresholds };
@@ -452,11 +479,16 @@ function getLogsInfo(cwd) {
   let mostRecent = null;
   let latestReminderTokens = null;
   let latestReminderStatus = null;
+  let recentBlockedCount = 0;
   try {
     const files = fs.readdirSync(dir).filter((f) => f.endsWith('.json')).sort();
     total = files.length;
-    // Walk from newest to find both latest event timestamp and latest reminder.
-    for (let i = files.length - 1; i >= 0 && (mostRecent === null || latestReminderTokens === null); i--) {
+    // Walk from newest. Count blocks within the last 50 events for the
+    // sidebar severity. Latest-reminder lookup short-circuits when both
+    // mostRecent + latestReminderTokens are populated AND we've scanned
+    // enough for the block tally.
+    const scanCap = Math.min(50, files.length);
+    for (let i = files.length - 1; i >= files.length - scanCap; i--) {
       try {
         const r = JSON.parse(fs.readFileSync(path.join(dir, files[i]), 'utf8'));
         if (mostRecent === null) mostRecent = r.timestamp;
@@ -467,6 +499,7 @@ function getLogsInfo(cwd) {
           latestReminderTokens = tokens;
           latestReminderStatus = classifyTokens(tokens, thresholds);
         }
+        if (r.type === 'enforcement-blocked') recentBlockedCount++;
       } catch {}
     }
   } catch {}
@@ -477,6 +510,7 @@ function getLogsInfo(cwd) {
     thresholds,
     latestReminderTokens,
     latestReminderStatus,
+    recentBlockedCount,
   };
 }
 
@@ -502,6 +536,7 @@ function collectStatus(cwd) {
     activeRun: getActiveRunInfo(cwd),
     reminders: getRemindersInfo(cwd),
     enforcement: getEnforcementInfo(cwd),
+    activePlan: getActivePlanInfo(cwd),
     logs: getLogsInfo(cwd),
     doctor: getDoctorInfo(cwd),
   };
@@ -638,6 +673,10 @@ details[open] summary { padding-bottom: 8px; border-bottom: 1px solid var(--bord
 .logs-status { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
 .logs-status.injected { color: #58a6ff; }
 .logs-status.silenced { color: var(--err); font-weight: 600; }
+.logs-status.blocked  { color: var(--err); font-weight: 700; }
+.logs-table tr.blocked .logs-handler { color: var(--err); }
+.logs-table tr.blocked td:first-child { border-left: 3px solid var(--err) !important; }
+.logs-reason-preview { font-size: 11px; color: var(--err); margin-top: 2px; max-width: 480px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .token-badge { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-family: var(--mono); margin-left: 6px; vertical-align: middle; }
 .token-badge.heavy { background: rgba(210,153,34,0.18); color: var(--warn); }
 .token-badge.high  { background: rgba(248,81,73,0.20); color: var(--err); }
@@ -689,6 +728,7 @@ const SECTIONS = [
   { id: 'hooks',        label: 'Hooks' },
   { id: 'reminders',    label: 'Reminders' },
   { id: 'logs',         label: 'Logs' },
+  { id: 'activePlan',   label: 'Active plan' },
   { id: 'mcp',          label: 'MCP & observer' },
   { id: 'setupContext', label: 'Setup context' },
   { id: 'activeRun',    label: 'Active run' },
@@ -746,6 +786,7 @@ async function loadClaudeMdPreview() {
 
 async function refresh() {
   const open = captureOpenDetails();
+  const prevPlanSha = state && state.activePlan && state.activePlan.sha256;
   try {
     const r = await fetch('/api/status');
     state = await r.json();
@@ -753,12 +794,16 @@ async function refresh() {
     showToast && showToast('Refresh failed: ' + e.message, 'err');
     return;
   }
+  // Invalidate cached active-plan body if the underlying sha256 changed.
+  const newPlanSha = state && state.activePlan && state.activePlan.sha256;
+  if (newPlanSha !== prevPlanSha) activePlanCache = null;
   renderHeader();
   renderNav();
   renderContent();
   restoreOpenDetails(open);
   // If preview was visible/open, ensure it stays loaded after re-render.
   if (open.has('claude-md-preview')) loadClaudeMdPreview();
+  if (open.has('active-plan-full')) loadActivePlanPreview();
   // Refresh logs entries silently on the Logs tab so new events appear.
   if (active === 'logs') loadLogsPage();
 }
@@ -790,8 +835,10 @@ function severityFor(id) {
     case 'claudeMd': return !s.claudeMd.exists ? 'err' : (s.claudeMd.optOut ? 'info' : 'ok');
     case 'hooks':    return s.hooks.warnings > 0 ? 'warn' : 'ok';
     case 'reminders': return s.reminders && s.reminders.disabledCount > 0 ? 'info' : 'ok';
+    case 'activePlan': return s.activePlan && s.activePlan.available ? 'info' : 'info';
     case 'logs': {
       if (!s.logs) return 'info';
+      if (s.logs.recentBlockedCount > 0) return 'err';
       if (s.logs.latestReminderStatus === 'high') return 'err';
       if (s.logs.latestReminderStatus === 'heavy') return 'warn';
       return s.logs.total > 0 ? 'ok' : 'info';
@@ -841,6 +888,7 @@ function renderContent() {
     hooks: renderHooks,
     reminders: renderReminders,
     logs: renderLogs,
+    activePlan: renderActivePlan,
     mcp: renderMcp,
     setupContext: renderSetup,
     activeRun: renderRun,
@@ -868,6 +916,9 @@ function renderOverview() {
   const ef = s.enforcement && s.enforcement.available
     ? (s.enforcement.on ? \`ON (\${s.enforcement.count} blocking hooks)\` : \`OFF — \${s.enforcement.count} blocking hooks silenced\`)
     : 'unavailable';
+  const activePlanRow = s.activePlan && s.activePlan.available
+    ? \`\${s.activePlan.path || '(inline)'} · approved \${s.activePlan.ageSeconds == null ? 'unknown' : (s.activePlan.ageSeconds < 60 ? s.activePlan.ageSeconds + 's' : Math.floor(s.activePlan.ageSeconds / 60) + 'm')} ago · \${fmtBytes(s.activePlan.contentBytes || 0)}\`
+    : 'none';
   const reminderTokens = s.logs && s.logs.latestReminderTokens;
   const reminderStatus = s.logs && s.logs.latestReminderStatus;
   const lg = s.logs && s.logs.available
@@ -890,6 +941,7 @@ function renderOverview() {
       \${row('Active run', ar, { kind: 'info', text: s.activeRun.active ? '·' : '·' })}
       \${row('Reminders', rm, { kind: s.reminders && s.reminders.available ? (s.reminders.disabledCount ? 'info' : 'ok') : 'err', text: s.reminders && s.reminders.disabledCount ? '·' : '✓' })}
       \${row('Enforcement', ef, { kind: s.enforcement && s.enforcement.available ? (s.enforcement.on ? 'ok' : 'err') : 'err', text: s.enforcement && s.enforcement.available ? (s.enforcement.on ? '✓' : '✗') : '·' })}
+      \${row('Active plan', activePlanRow, { kind: s.activePlan && s.activePlan.available ? 'info' : 'info', text: '·' })}
       \${row('Logs', lg, { kind: logsKind, text: logsKind === 'err' ? '✗' : logsKind === 'warn' ? '!' : '·' })}
       \${row('Doctor', dc, { kind: s.doctor.issueCount === 0 ? 'ok' : 'warn', text: s.doctor.issueCount === 0 ? '✓' : '!' })}
     </div>\`;
@@ -1028,6 +1080,17 @@ async function viewLogDetail(id) {
             : '<span class="badge warn" title="No content was captured — the hook may have crashed before writing or returned null.">⚠ no stdout</span>');
       html += '<h4 style="margin-top:14px">Provenance ' + provBadge + (ev.stdoutTruncated ? ' <span class="badge warn">⚠ truncated</span>' : '') + '</h4>';
     }
+    // Enforcement-blocked detail: show decision + full reason verbatim.
+    if (ev.type === 'enforcement-blocked') {
+      html += '<h4 style="margin-top:14px">Decision: <span class="badge err">' + escapeHtml(ev.decision || 'block').toUpperCase() + '</span></h4>';
+      if (ev.reason) {
+        html += '<h4 style="margin-top:14px">Reason</h4>';
+        html += '<pre style="border-color: rgba(248,81,73,0.5)">' + escapeHtml(ev.reason) + '</pre>';
+      }
+      if (ev.capturedStdout) {
+        html += '<details style="margin-top:14px"><summary>Raw stdout (' + fmtBytes(ev.stdoutBytes || 0) + ')</summary><pre>' + escapeHtml(ev.capturedStdout) + '</pre></details>';
+      }
+    }
     if (typeof ev.contentBytes === 'number' && ev.contentBytes > 0) {
       const tokens = typeof ev.contentTokens === 'number' ? ev.contentTokens : Math.round(ev.contentBytes / 4);
       const th = (state.logs && state.logs.thresholds) || { heavy: 8000, high: 20000 };
@@ -1092,11 +1155,14 @@ function renderLogs() {
   const rows = logsState.entries.map((e) => {
     const isReminder = e.type.startsWith('reminder');
     const isSilenced = e.type === 'enforcement-silenced';
+    const isBlocked  = e.type === 'enforcement-blocked';
     const badge = isReminder
       ? '<span class="badge info" style="background:rgba(88,166,255,0.18); color:#58a6ff">REMINDER</span>'
       : '<span class="badge err">ENFORCEMENT</span>';
     const statusCell = isSilenced
       ? '<span class="logs-status silenced" title="Master Enforcement OFF silenced this hook — it did NOT run. Claude Code received no output for this event.">✗ SILENCED</span>'
+      : isBlocked
+      ? '<span class="logs-status blocked" title="Hook ran and BLOCKED this action. Claude Code rejected the tool call. Click View for the full reason.">⛔ BLOCKED</span>'
       : '<span class="logs-status injected" title="Hook ran and emitted additionalContext to Claude Code">✓ injected</span>';
     const tokenStatus = e.tokenStatus || 'none';
     const tokenBadge = tokenStatus === 'high'
@@ -1110,13 +1176,18 @@ function renderLogs() {
     const bytesStr = e.contentBytes ? fmtBytes(e.contentBytes) : '';
     const tokensTitle = e.contentBytes
       ? \`≈\${e.contentTokens} tokens (chars/4 heuristic) · \${fmtBytes(e.contentBytes)} raw · status: \${tokenStatus}\`
-      : 'No content (hook was silenced — never ran)';
-    const rowCls = \`token-\${tokenStatus}\${isSilenced ? ' silenced' : ''}\`;
+      : isBlocked
+        ? 'Hook BLOCKED the action. Click View for full reason.'
+        : 'No content (hook was silenced — never ran)';
+    const rowCls = \`token-\${tokenStatus}\${isSilenced ? ' silenced' : ''}\${isBlocked ? ' blocked' : ''}\`;
+    const reasonPreview = isBlocked && e.reason
+      ? \`<div class="logs-reason-preview" title="\${escapeHtml(e.reason)}">\${escapeHtml(e.reason.split('\\n')[0].slice(0, 120))}</div>\`
+      : '';
     return \`<tr class="\${rowCls}">
       <td class="logs-time"><span title="\${escapeHtml(e.timestamp)}">\${escapeHtml(fmtLocalTime(e.timestamp))}</span><br><span class="muted" style="font-size:11px">\${fmtRelativeTime(e.timestamp)}</span></td>
       <td>\${badge}</td>
       <td>\${statusCell}</td>
-      <td class="logs-handler"><span class="muted">\${escapeHtml(e.event)}</span><br>\${escapeHtml(e.handler)}\${e.matcher ? \` <span class="muted">(\${escapeHtml(e.matcher)})</span>\` : ''}</td>
+      <td class="logs-handler"><span class="muted">\${escapeHtml(e.event)}</span><br>\${escapeHtml(e.handler)}\${e.matcher ? \` <span class="muted">(\${escapeHtml(e.matcher)})</span>\` : ''}\${reasonPreview}</td>
       <td class="logs-size" title="\${escapeHtml(tokensTitle)}">\${tokensStr}\${tokenBadge}\${bytesStr ? \`<br><span class="muted" style="font-size:11px">\${bytesStr}</span>\` : ''}</td>
       <td><button class="logs-view" data-log-id="\${escapeHtml(e.id)}">View</button></td>
     </tr>\`;
@@ -1136,7 +1207,8 @@ function renderLogs() {
         <select id="logs-filter">
           <option value="all" \${logsState.type === 'all' ? 'selected' : ''}>All</option>
           <option value="reminder" \${logsState.type === 'reminder' ? 'selected' : ''}>Reminders only</option>
-          <option value="enforcement" \${logsState.type === 'enforcement' ? 'selected' : ''}>Enforcement-silenced only</option>
+          <option value="enforcement" \${logsState.type === 'enforcement' ? 'selected' : ''}>Enforcement (silenced + blocked)</option>
+          <option value="blocked" \${logsState.type === 'blocked' ? 'selected' : ''}>Blocked actions only</option>
         </select>
       </label>
       <button id="logs-reload">Reload</button>
@@ -1149,6 +1221,38 @@ function renderLogs() {
     \${logsState.allLoaded || logsState.entries.length === 0 ? '' : '<div style="margin-top:12px"><button id="logs-load-more">Load older</button></div>'}\`;
 }
 
+function renderActivePlan() {
+  const p = state.activePlan;
+  if (!p || !p.available) {
+    return \`<h2>Active plan</h2>
+      <p class="sub">No approved plan on disk. <code>.claudeflow/state/active-plan.json</code> doesn't exist.</p>
+      <p class="muted" style="font-size:12px">When you approve a plan via ExitPlanMode in Claude Code, the
+      <code>capture-approved-plan</code> hook will persist it here. The next time you run
+      <code>claudeflow-build</code>, phase-0 will prompt to use it as the source of truth.</p>\`;
+  }
+  const age = p.ageSeconds == null
+    ? 'unknown age'
+    : p.ageSeconds < 60 ? p.ageSeconds + 's ago'
+    : p.ageSeconds < 3600 ? Math.floor(p.ageSeconds / 60) + 'm ago'
+    : p.ageSeconds < 86400 ? Math.floor(p.ageSeconds / 3600) + 'h ago'
+    : Math.floor(p.ageSeconds / 86400) + 'd ago';
+  const sha = p.sha256 ? p.sha256.slice(0, 12) + '…' : '(none)';
+  const preview = escapeHtml(p.summaryPreview || '(empty)');
+  return \`<h2>Active plan</h2>
+    <p class="sub">Read-only view of the latest approved plan persisted by the <code>ExitPlanMode</code> hook. The terminal prompt in <code>claudeflow-build</code> phase-0 is the only place you can ACT on this — the panel is informational.</p>
+    <div class="card">
+      \${row('Path',         p.path || '(inline plan, no file path)')}
+      \${row('Source',       p.source || 'unknown')}
+      \${row('Approved',     age + ' · ' + (p.capturedAt || 'unknown timestamp'))}
+      \${row('Session id',   p.sessionId || '(unknown)')}
+      \${row('Sha256',       sha)}
+      \${row('Size',         fmtBytes(p.contentBytes || 0))}
+    </div>
+    <p class="sub" style="margin-top:14px">Preview</p>
+    <pre style="max-height:120px">\${preview}</pre>
+    <details data-detail-id="active-plan-full"><summary>Full plan content</summary><div id="active-plan-body" class="muted">Click to load…</div></details>\`;
+}
+
 function renderMcp() {
   const m = state.mcp;
   if (!m.configFound) return '<h2>MCP & observer</h2><p class="muted">.mcp.json not found</p>';
@@ -1313,13 +1417,35 @@ document.addEventListener('change', (e) => {
   }
 });
 
+let activePlanCache = null;
+async function loadActivePlanPreview() {
+  const target = document.getElementById('active-plan-body');
+  if (!target) return;
+  if (target.dataset.loaded === '1') return;
+  target.dataset.loaded = '1';
+  target.textContent = 'Loading…';
+  try {
+    if (!activePlanCache) {
+      const r = await fetch('/api/active-plan');
+      activePlanCache = await r.text();
+    }
+    const pre = document.createElement('pre');
+    pre.textContent = activePlanCache;
+    target.innerHTML = '';
+    target.appendChild(pre);
+  } catch (e) {
+    target.textContent = 'Failed to load: ' + e.message;
+    target.dataset.loaded = '';
+  }
+}
+
 // Lazy-load CLAUDE.md preview when the user opens the details element.
 // The "toggle" event does not bubble by default — capture phase keeps delegation working.
 document.addEventListener('toggle', (e) => {
   const t = e.target;
-  if (t && t.tagName === 'DETAILS' && t.dataset.detailId === 'claude-md-preview' && t.open) {
-    loadClaudeMdPreview();
-  }
+  if (!t || t.tagName !== 'DETAILS' || !t.open) return;
+  if (t.dataset.detailId === 'claude-md-preview') loadClaudeMdPreview();
+  else if (t.dataset.detailId === 'active-plan-full') loadActivePlanPreview();
 }, true);
 
 async function toggleEnforcement(disable) {
@@ -1402,6 +1528,15 @@ function handler(cwd) {
         if (route === '/' || route === '/index.html') return send(200, renderHtml(), 'text/html; charset=utf-8');
         if (route === '/api/status') return send(200, JSON.stringify(collectStatus(cwd)), 'application/json');
         if (route === '/api/claude-md') return send(200, readClaudeMdSafe(cwd), 'text/plain; charset=utf-8');
+        if (route === '/api/active-plan') {
+          const p = path.join(cwd, '.claudeflow', 'state', 'active-plan.json');
+          try {
+            const r = JSON.parse(fs.readFileSync(p, 'utf8'));
+            return send(200, r.content || '', 'text/plain; charset=utf-8');
+          } catch {
+            return send(404, '', 'text/plain');
+          }
+        }
         if (route === '/api/logs') {
           const limit = Math.min(parseInt(url.searchParams.get('limit'), 10) || 100, 500);
           const before = url.searchParams.get('before') || null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axiomatic-labs/claudeflow",
-  "version": "2.13.34",
+  "version": "2.13.36",
   "description": "Claudeflow — AI-powered development toolkit for Claude Code. Skills, agents, hooks, and quality gates that ship production apps.",
   "bin": {
     "claudeflow": "./bin/cli.js"