@axiomatic-labs/claudeflow 2.13.29 → 2.13.31

package/lib/panel.js

@@ -309,6 +309,39 @@ function getRemindersInfo(cwd) {
   };
 }
 
+// ─── token-budget thresholds ─────────────────────────────────────
+//
+// Anthropic does NOT publish official limits for per-turn additionalContext.
+// These defaults are heuristics derived from:
+//   - GitHub issue anthropics/claude-code#45188 (system prompt 100K+ tokens
+//     made sessions unusable without /compact)
+//   - Community guidance: keep injected per-turn content well under 10–15%
+//     of the 200K context window so user content + tool results have room
+//   - Practical observation that 5–10K tokens for project rules is common
+//
+// Override per project via env vars before launching `claudeflow panel`:
+//   CLAUDEFLOW_TOKEN_HEAVY=8000   (yellow threshold)
+//   CLAUDEFLOW_TOKEN_HIGH=20000   (red threshold)
+const TOKEN_HEAVY_DEFAULT = 8000;
+const TOKEN_HIGH_DEFAULT  = 20000;
+
+function tokenThresholds() {
+  const heavy = parseInt(process.env.CLAUDEFLOW_TOKEN_HEAVY, 10);
+  const high  = parseInt(process.env.CLAUDEFLOW_TOKEN_HIGH, 10);
+  return {
+    heavy: Number.isFinite(heavy) && heavy > 0 ? heavy : TOKEN_HEAVY_DEFAULT,
+    high:  Number.isFinite(high)  && high  > 0 ? high  : TOKEN_HIGH_DEFAULT,
+  };
+}
+
+function classifyTokens(tokens, thresholds = tokenThresholds()) {
+  if (!tokens || tokens <= 0) return 'none';
+  if (tokens >= thresholds.high)  return 'high';
+  if (tokens >= thresholds.heavy) return 'heavy';
+  if (tokens < 2000)              return 'light';
+  return 'normal';
+}
+
 // ─── log events (Logs tab) ───────────────────────────────────────
 //
 // Sidecar files live in `.claude/tmp/log-events/<id>.json`. Each is one
@@ -331,10 +364,11 @@ function listLogEvents(cwd, { limit = 200, before = null, type = 'all' } = {}) {
   try {
     files = fs.readdirSync(dir).filter((f) => f.endsWith('.json'));
   } catch {
-    return { entries: [], total: 0 };
+    return { entries: [], total: 0, thresholds: tokenThresholds() };
   }
   files.sort().reverse(); // filenames begin with sortable timestamp; newest first
   const total = files.length;
+  const thresholds = tokenThresholds();
 
   let beforeIdx = 0;
   if (before) {
@@ -353,6 +387,12 @@ function listLogEvents(cwd, { limit = 200, before = null, type = 'all' } = {}) {
       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,
@@ -362,10 +402,12 @@ function listLogEvents(cwd, { limit = 200, before = null, type = 'all' } = {}) {
       handler: r.handler,
       summary: r.summary,
       contentBytes: r.contentBytes || 0,
+      contentTokens: tokens,
+      tokenStatus: classifyTokens(tokens, thresholds),
       activeReminderIds: r.activeReminderIds || null,
     });
   }
-  return { entries, total };
+  return { entries, total, thresholds };
 }
 
 function readLogEvent(cwd, id) {
@@ -379,19 +421,37 @@ function readLogEvent(cwd, id) {
 
 function getLogsInfo(cwd) {
   const dir = logEventsDir(cwd);
+  const thresholds = tokenThresholds();
   let total = 0;
   let mostRecent = null;
+  let latestReminderTokens = null;
+  let latestReminderStatus = null;
   try {
     const files = fs.readdirSync(dir).filter((f) => f.endsWith('.json')).sort();
     total = files.length;
-    if (total > 0) {
+    // 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--) {
       try {
-        const r = JSON.parse(fs.readFileSync(path.join(dir, files[files.length - 1]), 'utf8'));
-        mostRecent = r.timestamp;
+        const r = JSON.parse(fs.readFileSync(path.join(dir, files[i]), 'utf8'));
+        if (mostRecent === null) mostRecent = r.timestamp;
+        if (latestReminderTokens === null && r.type && r.type.startsWith('reminder')) {
+          const tokens = typeof r.contentTokens === 'number'
+            ? r.contentTokens
+            : (r.contentBytes ? Math.round(r.contentBytes / 4) : 0);
+          latestReminderTokens = tokens;
+          latestReminderStatus = classifyTokens(tokens, thresholds);
+        }
       } catch {}
     }
   } catch {}
-  return { available: true, total, mostRecent };
+  return {
+    available: true,
+    total,
+    mostRecent,
+    thresholds,
+    latestReminderTokens,
+    latestReminderStatus,
+  };
 }
 
 function getDoctorInfo(cwd) {
@@ -539,6 +599,14 @@ details[open] summary { padding-bottom: 8px; border-bottom: 1px solid var(--bord
 .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); }
+.logs-table tr.token-light    td:first-child { border-left: 3px solid #3fb950; }
+.logs-table tr.token-normal   td:first-child { border-left: 3px solid var(--border); }
+.logs-table tr.token-heavy    td:first-child { border-left: 3px solid var(--warn); }
+.logs-table tr.token-high     td:first-child { border-left: 3px solid var(--err); }
+.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); }
+.token-badge.light { background: rgba(63,185,80,0.18); color: var(--ok); }
 #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; }
@@ -687,7 +755,12 @@ 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 'logs': {
+      if (!s.logs) return 'info';
+      if (s.logs.latestReminderStatus === 'high') return 'err';
+      if (s.logs.latestReminderStatus === 'heavy') return 'warn';
+      return 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';
@@ -760,9 +833,17 @@ 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 reminderTokens = s.logs && s.logs.latestReminderTokens;
+  const reminderStatus = s.logs && s.logs.latestReminderStatus;
   const lg = s.logs && s.logs.available
-    ? \`\${s.logs.total} captured\${s.logs.mostRecent ? ' · last ' + fmtRelativeTime(s.logs.mostRecent) : ''}\`
+    ? \`\${s.logs.total} captured\${s.logs.mostRecent ? ' · last ' + fmtRelativeTime(s.logs.mostRecent) : ''}\${reminderTokens ? ' · latest reminder ≈' + reminderTokens.toLocaleString() + ' tokens' + (reminderStatus === 'heavy' ? ' ⚠ heavy' : reminderStatus === 'high' ? ' ✗ HIGH' : '') : ''}\`
     : 'no events';
+  const logsKind = (() => {
+    if (!s.logs || !s.logs.available) return 'info';
+    if (reminderStatus === 'high') return 'err';
+    if (reminderStatus === 'heavy') return 'warn';
+    return s.logs.total > 0 ? 'ok' : 'info';
+  })();
   return \`<h2>Overview</h2>
     <p class="sub">Snapshot at \${new Date(s.timestamp).toLocaleTimeString()}</p>
     <div class="card">
@@ -774,7 +855,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('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>\`;
 }
@@ -901,8 +982,27 @@ async function viewLogDetail(id) {
       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') {
-      html += '<h4 style="margin-top:14px">Injected content (' + fmtBytes(ev.contentBytes) + ')</h4>';
+    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 };
+      const cls = tokens >= th.high ? 'high' : tokens >= th.heavy ? 'heavy' : tokens < 2000 ? 'light' : 'normal';
+      const statusBadge = cls === 'high'
+        ? '<span class="token-badge high">⚠ HIGH</span>'
+        : cls === 'heavy'
+        ? '<span class="token-badge heavy">⚠ HEAVY</span>'
+        : '';
+      html += '<h4 style="margin-top:14px">Injected content — ≈' + tokens.toLocaleString() + ' tokens ' + statusBadge + ' <span class="muted" style="font-size:11px">(approx · ' + fmtBytes(ev.contentBytes) + ' raw)</span></h4>';
+      if (cls === 'heavy' || cls === 'high') {
+        const advice = cls === 'high'
+          ? 'This reminder exceeds <strong>' + th.high.toLocaleString() + ' tokens</strong> — eats meaningful context budget. Strongly consider:'
+          : 'This reminder exceeds <strong>' + th.heavy.toLocaleString() + ' tokens</strong> — heavy. Consider:';
+        html += '<div class="card" style="border-color:' + (cls === 'high' ? 'rgba(248,81,73,0.4)' : 'rgba(210,153,34,0.4)') + '"><p>' + advice + '</p>';
+        html += '<ul style="margin:6px 0 0 18px; padding:0">';
+        html += '<li>Trim CLAUDE.md (currently the largest contributor) — see the CLAUDE.md tab</li>';
+        html += '<li>Disable individual reminder IDs you don\\\'t need in the Reminders tab</li>';
+        html += '<li>Tune the threshold via <code>CLAUDEFLOW_TOKEN_HEAVY</code> / <code>CLAUDEFLOW_TOKEN_HIGH</code> env vars if your project genuinely needs more</li>';
+        html += '</ul></div>';
+      }
     }
     if (typeof ev.content === 'string' && ev.content.length > 0) {
       html += '<pre>' + escapeHtml(ev.content) + '</pre>';
@@ -942,17 +1042,30 @@ function renderLogs() {
     loadLogsPage();
   }
   const totalLabel = state.logs && state.logs.total != null ? \`\${state.logs.total} total events\` : '';
+  const thresholds = (state.logs && state.logs.thresholds) || { heavy: 8000, high: 20000 };
   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 sizeStr = e.contentBytes ? fmtBytes(e.contentBytes) : '—';
-    return \`<tr>
+    const tokenStatus = e.tokenStatus || 'none';
+    const tokenBadge = tokenStatus === 'high'
+      ? '<span class="token-badge high" title="High — exceeds the high-water threshold (' + thresholds.high.toLocaleString() + ' tokens). Consider trimming.">⚠ HIGH</span>'
+      : tokenStatus === 'heavy'
+      ? '<span class="token-badge heavy" title="Heavy — exceeds the heavy threshold (' + thresholds.heavy.toLocaleString() + ' tokens). Consider trimming.">⚠ HEAVY</span>'
+      : '';
+    const tokensStr = e.contentTokens
+      ? \`≈\${e.contentTokens.toLocaleString()}\`
+      : '—';
+    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 (enforcement-silenced)';
+    return \`<tr class="token-\${tokenStatus}">
       <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">\${sizeStr}</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>\`;
   }).join('');
@@ -961,6 +1074,11 @@ function renderLogs() {
     : '';
   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>
+    <p class="sub muted" style="font-size:11px">
+      Token-budget thresholds: <strong style="color:var(--warn)">heavy ≥\${thresholds.heavy.toLocaleString()}</strong> · <strong style="color:var(--err)">high ≥\${thresholds.high.toLocaleString()}</strong>.
+      Heuristic — Anthropic doesn't publish official limits for per-turn additionalContext.
+      Override via <code>CLAUDEFLOW_TOKEN_HEAVY</code> / <code>CLAUDEFLOW_TOKEN_HIGH</code> env vars.
+    </p>
     <div class="logs-controls">
       <label>Filter:
         <select id="logs-filter">
@@ -972,7 +1090,7 @@ function renderLogs() {
       <button id="logs-reload">Reload</button>
     </div>
     \${empty || \`<table class="logs-table">
-      <thead><tr><th>Time</th><th>Type</th><th>Handler</th><th>Size</th><th></th></tr></thead>
+      <thead><tr><th>Time</th><th>Type</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>
       <tbody>\${rows}</tbody>
     </table>\`}
     \${logsState.allLoaded || logsState.entries.length === 0 ? '' : '<div style="margin-top:12px"><button id="logs-load-more">Load older</button></div>'}\`;

package/package.json

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