@axiomatic-labs/claudeflow 2.13.28 → 2.13.30

package/lib/panel.js

@@ -309,6 +309,98 @@ function getRemindersInfo(cwd) {
   };
 }
 
+// ─── log events (Logs tab) ───────────────────────────────────────
+//
+// Sidecar files live in `.claude/tmp/log-events/<id>.json`. Each is one
+// event (enforcement-silenced or reminder-injected) with metadata and,
+// for reminders, the full content that was injected at fire time. The
+// panel reads them via:
+//   GET /api/logs?limit=&type=&before=  → metadata-only paged list
+//   GET /api/logs/:id                   → full record incl. content
+function logEventsDir(cwd) {
+  return path.join(cwd, '.claude', 'tmp', 'log-events');
+}
+
+function isValidLogId(id) {
+  return typeof id === 'string' && /^[A-Za-z0-9_-]+$/.test(id) && id.length <= 64;
+}
+
+function listLogEvents(cwd, { limit = 200, before = null, type = 'all' } = {}) {
+  const dir = logEventsDir(cwd);
+  let files;
+  try {
+    files = fs.readdirSync(dir).filter((f) => f.endsWith('.json'));
+  } catch {
+    return { entries: [], total: 0 };
+  }
+  files.sort().reverse(); // filenames begin with sortable timestamp; newest first
+  const total = files.length;
+
+  let beforeIdx = 0;
+  if (before) {
+    const beforeFile = `${before}.json`;
+    const idx = files.indexOf(beforeFile);
+    if (idx >= 0) beforeIdx = idx + 1;
+  }
+
+  const entries = [];
+  for (let i = beforeIdx; i < files.length && entries.length < limit; i++) {
+    let r;
+    try { r = JSON.parse(fs.readFileSync(path.join(dir, files[i]), 'utf8')); }
+    catch { continue; }
+    if (type !== 'all') {
+      if (type === 'enforcement' && !r.type.startsWith('enforcement')) continue;
+      if (type === 'reminder' && !r.type.startsWith('reminder')) continue;
+    }
+    // Strip large `content` from list view; clients fetch it via /api/logs/:id
+    // Old sidecars (pre-token-estimate) lack `contentTokens`. Backfill on
+    // the fly using the same chars/4 heuristic — keeps the UI consistent
+    // for events captured before the upgrade.
+    const tokens = typeof r.contentTokens === 'number'
+      ? r.contentTokens
+      : (r.contentBytes ? Math.round(r.contentBytes / 4) : 0);
+    entries.push({
+      id: r.id,
+      timestamp: r.timestamp,
+      type: r.type,
+      event: r.event,
+      matcher: r.matcher || '',
+      handler: r.handler,
+      summary: r.summary,
+      contentBytes: r.contentBytes || 0,
+      contentTokens: tokens,
+      activeReminderIds: r.activeReminderIds || null,
+    });
+  }
+  return { entries, total };
+}
+
+function readLogEvent(cwd, id) {
+  if (!isValidLogId(id)) return null;
+  try {
+    return JSON.parse(fs.readFileSync(path.join(logEventsDir(cwd), `${id}.json`), 'utf8'));
+  } catch {
+    return null;
+  }
+}
+
+function getLogsInfo(cwd) {
+  const dir = logEventsDir(cwd);
+  let total = 0;
+  let mostRecent = null;
+  try {
+    const files = fs.readdirSync(dir).filter((f) => f.endsWith('.json')).sort();
+    total = files.length;
+    if (total > 0) {
+      try {
+        const r = JSON.parse(fs.readFileSync(path.join(dir, files[files.length - 1]), 'utf8'));
+        mostRecent = r.timestamp;
+      } catch {}
+    }
+  } catch {}
+  return { available: true, total, mostRecent };
+}
+
 function getDoctorInfo(cwd) {
   const checks = [checkCdpPortMismatch(cwd), checkStaleLockfiles(cwd)];
   const issues = checks.filter((c) => c.severity !== 'ok' && c.severity !== 'info');
@@ -331,6 +423,7 @@ function collectStatus(cwd) {
     activeRun: getActiveRunInfo(cwd),
     reminders: getRemindersInfo(cwd),
     enforcement: getEnforcementInfo(cwd),
+    logs: getLogsInfo(cwd),
     doctor: getDoctorInfo(cwd),
   };
 }
@@ -441,6 +534,26 @@ details[open] summary { padding-bottom: 8px; border-bottom: 1px solid var(--bord
 .reminder-row .reminder-desc { font-size: 12px; margin-left: 22px; margin-top: 2px; }
 .reminder-row .reminder-id { font-size: 11px; margin-left: 22px; margin-top: 2px; }
 .reminder-row code { background: var(--panel-2); padding: 1px 5px; border-radius: 3px; font-size: 11px; }
+.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-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; }
+.logs-table tr:hover td { background: rgba(124, 58, 237, 0.05); }
+.logs-time { font-family: var(--mono); font-size: 12px; white-space: nowrap; }
+.logs-handler { font-family: var(--mono); font-size: 12px; }
+.logs-size { font-family: var(--mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
+.logs-view { background: var(--panel-2); border: 1px solid var(--border); color: var(--fg); padding: 4px 12px; border-radius: 5px; font: inherit; font-size: 12px; cursor: pointer; }
+.logs-view:hover { border-color: var(--accent); }
+#log-drawer { display: none; position: fixed; top: 0; right: 0; bottom: 0; width: 60%; max-width: 920px; background: var(--panel); border-left: 1px solid var(--border); box-shadow: -8px 0 24px rgba(0,0,0,0.4); z-index: 100; overflow-y: auto; }
+#log-drawer .drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 22px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel); }
+#log-drawer .drawer-head .title { font-weight: 600; }
+#log-drawer .drawer-head button { background: none; border: 1px solid var(--border); color: var(--fg); padding: 5px 10px; border-radius: 5px; cursor: pointer; }
+#log-drawer .drawer-body { padding: 18px 22px; }
+#log-drawer h3 { margin: 0 0 12px; font-size: 15px; }
+#log-drawer h4 { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
+#log-drawer pre { max-height: none; }
 .toast { position: fixed; bottom: 18px; right: 18px; background: var(--panel); border: 1px solid var(--border); padding: 10px 14px; border-radius: 6px; font-size: 13px; box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
 .toast.err { border-color: var(--err); }
 .toast.ok { border-color: var(--ok); }
@@ -466,12 +579,20 @@ details[open] summary { padding-bottom: 8px; border-bottom: 1px solid var(--bord
   <nav id="nav"></nav>
   <section id="content"><p class="muted">Loading…</p></section>
 </main>
+<aside id="log-drawer">
+  <div class="drawer-head">
+    <span class="title">Log event details</span>
+    <button id="log-drawer-close">Close ✕</button>
+  </div>
+  <div class="drawer-body" id="log-drawer-body"></div>
+</aside>
 <script>
 const SECTIONS = [
   { id: 'overview',     label: 'Overview' },
   { id: 'claudeMd',     label: 'CLAUDE.md' },
   { id: 'hooks',        label: 'Hooks' },
   { id: 'reminders',    label: 'Reminders' },
+  { id: 'logs',         label: 'Logs' },
   { id: 'mcp',          label: 'MCP & observer' },
   { id: 'setupContext', label: 'Setup context' },
   { id: 'activeRun',    label: 'Active run' },
@@ -542,6 +663,8 @@ async function refresh() {
   restoreOpenDetails(open);
   // If preview was visible/open, ensure it stays loaded after re-render.
   if (open.has('claude-md-preview')) loadClaudeMdPreview();
+  // Refresh logs entries silently on the Logs tab so new events appear.
+  if (active === 'logs') loadLogsPage();
 }
 
 function renderHeader() {
@@ -571,6 +694,7 @@ 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 'logs':      return s.logs && s.logs.total > 0 ? 'ok' : 'info';
     case 'mcp':      return !s.mcp.configFound ? 'info' : (s.mcp.playwright.match && s.mcp.staleLockfiles.length === 0 ? 'ok' : 'warn');
     case 'setupContext': return !s.setupContext.exists ? 'err' : (s.setupContext.toolingComplete ? 'ok' : 'warn');
     case 'activeRun': return s.activeRun.active ? 'info' : 'info';
@@ -615,6 +739,7 @@ function renderContent() {
     claudeMd: renderClaudeMd,
     hooks: renderHooks,
     reminders: renderReminders,
+    logs: renderLogs,
     mcp: renderMcp,
     setupContext: renderSetup,
     activeRun: renderRun,
@@ -642,6 +767,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 lg = s.logs && s.logs.available
+    ? \`\${s.logs.total} captured\${s.logs.mostRecent ? ' · last ' + fmtRelativeTime(s.logs.mostRecent) : ''}\`
+    : 'no events';
   return \`<h2>Overview</h2>
     <p class="sub">Snapshot at \${new Date(s.timestamp).toLocaleTimeString()}</p>
     <div class="card">
@@ -653,6 +781,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('Logs', lg, { kind: s.logs && s.logs.total > 0 ? 'ok' : 'info', text: '·' })}
       \${row('Doctor', dc, { kind: s.doctor.issueCount === 0 ? 'ok' : 'warn', text: s.doctor.issueCount === 0 ? '✓' : '!' })}
     </div>\`;
 }
@@ -730,6 +859,139 @@ function renderReminders() {
     \${sections}\`;
 }
 
+// Logs tab — paginated table backed by /api/logs. Lazy-loaded (we don't
+// inline 500 rows into the initial render). The "View" button fetches
+// the full sidecar from /api/logs/:id and renders it in the drawer.
+let logsState = { entries: [], type: 'all', loading: false, allLoaded: false };
+
+async function loadLogsPage({ append = false } = {}) {
+  const params = new URLSearchParams({ limit: '100', type: logsState.type });
+  if (append && logsState.entries.length > 0) {
+    params.set('before', logsState.entries[logsState.entries.length - 1].id);
+  }
+  logsState.loading = true;
+  try {
+    const r = await fetch('/api/logs?' + params.toString());
+    const j = await r.json();
+    if (append) logsState.entries = logsState.entries.concat(j.entries);
+    else logsState.entries = j.entries;
+    logsState.allLoaded = j.entries.length < 100;
+  } catch (e) {
+    showToast('Logs fetch failed: ' + e.message, 'err');
+  } finally {
+    logsState.loading = false;
+    if (active === 'logs') renderContent();
+  }
+}
+
+async function viewLogDetail(id) {
+  const drawer = document.getElementById('log-drawer');
+  const body = document.getElementById('log-drawer-body');
+  drawer.style.display = 'block';
+  body.innerHTML = '<p class="muted">Loading…</p>';
+  try {
+    const r = await fetch('/api/logs/' + encodeURIComponent(id));
+    if (!r.ok) { body.innerHTML = '<p class="error">Event not found.</p>'; return; }
+    const ev = await r.json();
+    const meta = [
+      ['ID', ev.id],
+      ['Timestamp (UTC)', ev.timestamp],
+      ['Local time', new Date(ev.timestamp).toLocaleString()],
+      ['Type', ev.type],
+      ['Event', ev.event],
+      ['Matcher', ev.matcher || '(any)'],
+      ['Handler', ev.handler],
+    ];
+    let html = '<h3>' + escapeHtml(ev.summary || ev.type) + '</h3>';
+    html += '<div class="card">' + meta.map(([k, v]) => row(k, v)).join('') + '</div>';
+    if (Array.isArray(ev.activeReminderIds)) {
+      html += '<h4 style="margin-top:14px">Active reminders at fire time</h4>';
+      html += '<p class="sub">' + ev.activeReminderIds.map(escapeHtml).join(', ') + '</p>';
+    }
+    if (typeof ev.contentBytes === 'number' && ev.contentBytes > 0) {
+      const tokens = typeof ev.contentTokens === 'number' ? ev.contentTokens : Math.round(ev.contentBytes / 4);
+      html += '<h4 style="margin-top:14px">Injected content — ≈' + tokens.toLocaleString() + ' tokens <span class="muted" style="font-size:11px">(approx · ' + fmtBytes(ev.contentBytes) + ' raw)</span></h4>';
+    }
+    if (typeof ev.content === 'string' && ev.content.length > 0) {
+      html += '<pre>' + escapeHtml(ev.content) + '</pre>';
+    } else if (ev.type === 'enforcement-silenced') {
+      html += '<p class="muted">No content — the hook was silenced before running.</p>';
+    } else {
+      html += '<p class="muted">No captured content.</p>';
+    }
+    body.innerHTML = html;
+  } catch (e) {
+    body.innerHTML = '<p class="error">Error: ' + escapeHtml(e.message) + '</p>';
+  }
+}
+
+function closeLogDrawer() {
+  document.getElementById('log-drawer').style.display = 'none';
+}
+
+function fmtRelativeTime(iso) {
+  const ms = Date.now() - new Date(iso).getTime();
+  if (ms < 1000) return 'just now';
+  if (ms < 60000) return Math.floor(ms / 1000) + 's ago';
+  if (ms < 3600000) return Math.floor(ms / 60000) + 'm ago';
+  if (ms < 86400000) return Math.floor(ms / 3600000) + 'h ago';
+  return Math.floor(ms / 86400000) + 'd ago';
+}
+
+function fmtLocalTime(iso) {
+  const d = new Date(iso);
+  const pad = (n) => String(n).padStart(2, '0');
+  return \`\${d.getFullYear()}-\${pad(d.getMonth() + 1)}-\${pad(d.getDate())} \${pad(d.getHours())}:\${pad(d.getMinutes())}:\${pad(d.getSeconds())}\`;
+}
+
+function renderLogs() {
+  // Trigger initial load (or filter change reload) on first render.
+  if (logsState.entries.length === 0 && !logsState.loading) {
+    loadLogsPage();
+  }
+  const totalLabel = state.logs && state.logs.total != null ? \`\${state.logs.total} total events\` : '';
+  const rows = logsState.entries.map((e) => {
+    const isReminder = e.type.startsWith('reminder');
+    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 tokensStr = e.contentTokens
+      ? \`≈\${e.contentTokens.toLocaleString()}\`
+      : '—';
+    const bytesStr = e.contentBytes ? fmtBytes(e.contentBytes) : '';
+    const tokensTitle = e.contentBytes
+      ? \`≈\${e.contentTokens} tokens (approx, chars/4 heuristic) · \${fmtBytes(e.contentBytes)} raw\`
+      : 'No content (enforcement-silenced)';
+    return \`<tr>
+      <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 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-size" title="\${escapeHtml(tokensTitle)}">\${tokensStr}\${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>\`;
+  }).join('');
+  const empty = logsState.entries.length === 0
+    ? '<p class="muted" style="padding:24px 0">No events captured yet. Open a Claude Code session, send a prompt — reminders + any silenced enforcement hooks will appear here.</p>'
+    : '';
+  return \`<h2>Logs</h2>
+    <p class="sub">Real-time trace of every reminder injection and enforcement-silenced hook. \${totalLabel} · sidecars in <code>.claude/tmp/log-events/</code> (capped at 2000, oldest evicted).</p>
+    <div class="logs-controls">
+      <label>Filter:
+        <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>
+        </select>
+      </label>
+      <button id="logs-reload">Reload</button>
+    </div>
+    \${empty || \`<table class="logs-table">
+      <thead><tr><th>Time</th><th>Type</th><th>Handler</th><th title="Approximate token count (chars/4 heuristic — within ±10–15% of Claude's actual tokenizer for markdown/code mix)">≈ Tokens</th><th></th></tr></thead>
+      <tbody>\${rows}</tbody>
+    </table>\`}
+    \${logsState.allLoaded || logsState.entries.length === 0 ? '' : '<div style="margin-top:12px"><button id="logs-load-more">Load older</button></div>'}\`;
+}
+
 function renderMcp() {
   const m = state.mcp;
   if (!m.configFound) return '<h2>MCP & observer</h2><p class="muted">.mcp.json not found</p>';
@@ -831,9 +1093,33 @@ async function toggleReminder(id, disable) {
   await refresh();
 }
 
+document.addEventListener('click', (e) => {
+  const t = e.target;
+  if (!t) return;
+  if (t.id === 'log-drawer-close') return closeLogDrawer();
+  if (t.classList && t.classList.contains('logs-view') && t.dataset.logId) {
+    return viewLogDetail(t.dataset.logId);
+  }
+  if (t.id === 'logs-reload') {
+    logsState.entries = [];
+    logsState.allLoaded = false;
+    return loadLogsPage();
+  }
+  if (t.id === 'logs-load-more') {
+    return loadLogsPage({ append: true });
+  }
+});
+
 document.addEventListener('change', (e) => {
   const t = e.target;
   if (!t || !t.classList) return;
+  if (t.id === 'logs-filter') {
+    logsState.type = t.value;
+    logsState.entries = [];
+    logsState.allLoaded = false;
+    loadLogsPage();
+    return;
+  }
   if (t.classList.contains('hook-toggle')) {
     const event = t.dataset.event;
     const matcher = t.dataset.matcher;
@@ -936,6 +1222,18 @@ 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/logs') {
+          const limit = Math.min(parseInt(url.searchParams.get('limit'), 10) || 100, 500);
+          const before = url.searchParams.get('before') || null;
+          const type = url.searchParams.get('type') || 'all';
+          return send(200, JSON.stringify(listLogEvents(cwd, { limit, before, type })), 'application/json');
+        }
+        if (route.startsWith('/api/logs/')) {
+          const id = route.slice('/api/logs/'.length);
+          const ev = readLogEvent(cwd, id);
+          if (!ev) return send(404, JSON.stringify({ error: 'not found' }), 'application/json');
+          return send(200, JSON.stringify(ev), 'application/json');
+        }
         if (route === '/healthz') return send(200, 'ok', 'text/plain');
       }
 

package/package.json

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