@axiomatic-labs/claudeflow 2.13.33 → 2.13.35

package/lib/panel.js

@@ -385,6 +385,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 +409,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 };
@@ -422,6 +425,29 @@ function readLogEvent(cwd, id) {
   }
 }
 
+// Destructive: removes every sidecar in .claude/tmp/log-events/ and truncates
+// .claude/tmp/hooks.log. Returns counts so the UI can confirm the wipe.
+function clearLogs(cwd) {
+  const dir = logEventsDir(cwd);
+  let removed = 0;
+  try {
+    const files = fs.readdirSync(dir).filter((f) => f.endsWith('.json'));
+    for (const f of files) {
+      try { fs.unlinkSync(path.join(dir, f)); removed++; } catch {}
+    }
+  } catch {}
+  // Truncate the human-readable log too so the user sees a fresh tail -f.
+  let logTruncated = false;
+  const logPath = path.join(cwd, '.claude', 'tmp', 'hooks.log');
+  try {
+    if (fs.existsSync(logPath)) {
+      fs.writeFileSync(logPath, '');
+      logTruncated = true;
+    }
+  } catch {}
+  return { removed, logTruncated };
+}
+
 function getLogsInfo(cwd) {
   const dir = logEventsDir(cwd);
   const thresholds = tokenThresholds();
@@ -429,11 +455,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;
@@ -444,6 +475,7 @@ function getLogsInfo(cwd) {
           latestReminderTokens = tokens;
           latestReminderStatus = classifyTokens(tokens, thresholds);
         }
+        if (r.type === 'enforcement-blocked') recentBlockedCount++;
       } catch {}
     }
   } catch {}
@@ -454,6 +486,7 @@ function getLogsInfo(cwd) {
     thresholds,
     latestReminderTokens,
     latestReminderStatus,
+    recentBlockedCount,
   };
 }
 
@@ -593,6 +626,10 @@ details[open] summary { padding-bottom: 8px; border-bottom: 1px solid var(--bord
 .logs-controls { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
 .logs-controls select, .logs-controls button { background: var(--panel); border: 1px solid var(--border); color: var(--fg); padding: 6px 10px; border-radius: 6px; font: inherit; }
 .logs-controls button:hover { border-color: var(--accent); cursor: pointer; }
+.logs-clear-btn { margin-left: auto; color: var(--err); border-color: rgba(248,81,73,0.4); }
+.logs-clear-btn:hover { border-color: var(--err); background: rgba(248,81,73,0.08); }
+.logs-clear-btn:disabled { opacity: 0.4; cursor: not-allowed; color: var(--muted); border-color: var(--border); }
+.logs-clear-btn:disabled:hover { border-color: var(--border); background: var(--panel); }
 .logs-table { width: 100%; border-collapse: collapse; font-size: 13px; }
 .logs-table th, .logs-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
 .logs-table th { font-weight: 500; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
@@ -611,6 +648,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); }
@@ -765,6 +806,7 @@ function severityFor(id) {
     case 'reminders': return s.reminders && s.reminders.disabledCount > 0 ? 'info' : 'ok';
     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';
@@ -1001,6 +1043,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 };
@@ -1065,11 +1118,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'
@@ -1083,13 +1139,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>\`;
@@ -1109,10 +1170,12 @@ 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>
+      <button id="logs-clear" class="logs-clear-btn" \${state.logs && state.logs.total ? '' : 'disabled'} title="Delete every sidecar in .claude/tmp/log-events/ and truncate .claude/tmp/hooks.log. Cannot be undone.">Clear all</button>
     </div>
     \${empty || \`<table class="logs-table">
       <thead><tr><th>Time</th><th>Type</th><th title="Did the hook actually run? ✓ injected = hook ran and emitted to Claude Code · ✗ SILENCED = master Enforcement OFF blocked the hook from running.">Status</th><th>Handler</th><th title="Approximate token count (chars/4 heuristic, ±10–15% vs Claude's real tokenizer). Heavy ≥\${thresholds.heavy.toLocaleString()} → yellow border. High ≥\${thresholds.high.toLocaleString()} → red border. Anthropic does not publish official thresholds for per-turn additionalContext.">≈ Tokens</th><th></th></tr></thead>
@@ -1237,8 +1300,31 @@ document.addEventListener('click', (e) => {
   if (t.id === 'logs-load-more') {
     return loadLogsPage({ append: true });
   }
+  if (t.id === 'logs-clear') {
+    const total = (state.logs && state.logs.total) || 0;
+    if (!total) return;
+    if (!confirm('Delete ' + total + ' captured log event(s) and truncate .claude/tmp/hooks.log?\\n\\nThis cannot be undone. (Future events will be captured normally.)')) return;
+    return clearLogsAction();
+  }
 });
 
+async function clearLogsAction() {
+  try {
+    const r = await fetch('/api/logs', { method: 'DELETE' });
+    const result = await r.json();
+    if (!r.ok) {
+      showToast('Clear failed: ' + (result.error || r.status), 'err');
+      return;
+    }
+    showToast('Cleared ' + result.removed + ' event(s)' + (result.logTruncated ? ' + truncated hooks.log' : ''), 'ok');
+    logsState.entries = [];
+    logsState.allLoaded = false;
+    await refresh();
+  } catch (e) {
+    showToast('Network error: ' + e.message, 'err');
+  }
+}
+
 document.addEventListener('change', (e) => {
   const t = e.target;
   if (!t || !t.classList) return;
@@ -1380,6 +1466,11 @@ function handler(cwd) {
         return send(status, JSON.stringify(result), 'application/json');
       }
 
+      if (req.method === 'DELETE' && route === '/api/logs') {
+        const result = clearLogs(cwd);
+        return send(200, JSON.stringify(result), 'application/json');
+      }
+
       if (req.method === 'POST' && route === '/api/enforcement/toggle') {
         const raw = await readRequestBody(req);
         let payload;

package/package.json

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