@axiomatic-labs/claudeflow 2.13.21 → 2.13.23

package/lib/hook-overrides.js

@@ -24,7 +24,10 @@ const path = require('path');
 
 const OVERRIDES_REL = path.join('.claudeflow', 'config', 'user-hook-overrides.json');
 const SETTINGS_REL = path.join('.claude', 'settings.json');
-const HOOK_PATH_REGEX = /\.claude\/hooks\/(.+?\.js)/;
+// Capture every `.claude/hooks/<path>.js` token in a command string. Wrapped
+// commands include both `run-with-override.js` (the wrapper) and the actual
+// hook path; we want the LAST match — that's the real handler.
+const HOOK_PATH_REGEX_GLOBAL = /\.claude\/hooks\/([^"'\s]+\.js)/g;
 
 function readJsonSafe(absPath) {
   try { return JSON.parse(fs.readFileSync(absPath, 'utf8')); } catch { return null; }
@@ -37,8 +40,14 @@ function writeJson(absPath, data) {
 
 function normalizeHandlerPath(command) {
   if (!command) return '';
-  const m = HOOK_PATH_REGEX.exec(command);
-  return m ? m[1] : command.replace(/^node\s+/, '').replace(/^["']|["']$/g, '').trim();
+  const matches = [...command.matchAll(HOOK_PATH_REGEX_GLOBAL)];
+  if (matches.length === 0) {
+    return command.replace(/^node\s+/, '').replace(/^["']|["']$/g, '').trim();
+  }
+  // Skip the wrapper itself when present; pick the last non-wrapper match.
+  const real = matches.filter((m) => m[1] !== 'run-with-override.js');
+  const chosen = real.length ? real[real.length - 1] : matches[matches.length - 1];
+  return chosen[1];
 }
 
 function defaultOverrides() {
@@ -128,10 +137,13 @@ function restoreHandlerInSettings(settings, event, matcher, spec) {
   if (!already) rule.hooks.push(spec);
 }
 
-// Stateful toggle used by the panel.
-//   - disable=true: capture spec from current settings.json, append to
-//     overrides, remove from settings.json
-//   - disable=false: pop spec from overrides, restore to settings.json
+// Stateful toggle used by the panel. Only edits overrides.json — settings.json
+// is never mutated. The wrapper (.claude/hooks/run-with-override.js) reads
+// overrides on every invocation, so disable/enable takes effect on the next
+// hook fire (no Claude Code restart required).
+//
+// Settings.json is also consulted to verify the handler exists at all
+// (refuses to disable a phantom handler), but it is never written.
 function toggleHookOverride(projectRoot, { event, matcher = '', handler, disable }) {
   const settingsPath = path.join(projectRoot, SETTINGS_REL);
   const settings = readJsonSafe(settingsPath) || { hooks: {} };
@@ -143,12 +155,11 @@ function toggleHookOverride(projectRoot, { event, matcher = '', handler, disable
       (d) => d.event === event && (d.matcher || '') === matcherKey && d.handler === handler,
     );
     if (already) return { state: 'noop', reason: 'already-disabled' };
-    const spec = findHandlerInSettings(settings, event, matcherKey, handler);
-    if (!spec) return { state: 'error', reason: 'handler-not-found-in-settings' };
-    overrides.disabledHandlers.push({ event, matcher: matcherKey, handler, spec });
+    if (!findHandlerInSettings(settings, event, matcherKey, handler)) {
+      return { state: 'error', reason: 'handler-not-found-in-settings' };
+    }
+    overrides.disabledHandlers.push({ event, matcher: matcherKey, handler });
     writeOverrides(projectRoot, overrides);
-    const next = applyHookOverrides(settings, overrides);
-    fs.writeFileSync(settingsPath, JSON.stringify(next, null, 2) + '\n');
     return { state: 'disabled' };
   }
 
@@ -156,10 +167,7 @@ function toggleHookOverride(projectRoot, { event, matcher = '', handler, disable
     (d) => d.event === event && (d.matcher || '') === matcherKey && d.handler === handler,
   );
   if (idx === -1) return { state: 'noop', reason: 'not-disabled' };
-  const [removed] = overrides.disabledHandlers.splice(idx, 1);
-  if (!removed.spec) return { state: 'error', reason: 'no-spec-recorded' };
-  restoreHandlerInSettings(settings, event, matcherKey, removed.spec);
-  fs.writeFileSync(settingsPath, JSON.stringify(settings, null, 2) + '\n');
+  overrides.disabledHandlers.splice(idx, 1);
   writeOverrides(projectRoot, overrides);
   return { state: 'enabled' };
 }

package/lib/install.js

@@ -86,10 +86,9 @@ async function run() {
     fs.mkdirSync(path.join(cwd, '.claude'), { recursive: true });
     if (fs.existsSync(srcSettings)) {
       syncClaudeSettings(srcSettings, dstSettings);
-      // Re-apply user hook overrides (if any) so disabled handlers stay
-      // disabled across update — without this, every update would resurrect
-      // hooks the user explicitly turned off via `claudeflow panel`.
-      applyHookOverridesToFile(cwd);
+      // Settings.json now ships with every hook command wrapped through
+      // run-with-override.js. The wrapper consults user-hook-overrides.json
+      // at invocation time, so toggles persist without any settings rewrite.
     }
 
     // Upsert playwright entry in .mcp.json with project-specific CDP port.

package/lib/panel.js

@@ -96,14 +96,18 @@ function getHooksInfo(cwd) {
     disabledIndex.set(`${d.event}|${d.matcher || ''}|${d.handler}`, d);
   }
 
+  // settings.json lists every hook (with each command wrapped through
+  // run-with-override.js). The wrapper checks overrides at invocation time,
+  // so the panel just annotates each handler with its current disabled
+  // state from the overrides file.
   const hooks = settings.hooks || {};
-  const eventsMap = new Map();
+  const events = [];
   let totalHandlers = 0;
   let warnings = 0;
   let disabledCount = 0;
 
   for (const [event, rules] of Object.entries(hooks)) {
-    if (!eventsMap.has(event)) eventsMap.set(event, []);
+    const handlers = [];
     for (const rule of rules) {
       const matcher = rule.matcher || '';
       for (const h of rule.hooks || []) {
@@ -111,44 +115,28 @@ function getHooksInfo(cwd) {
         const handlerPath = normalizeHandlerPath(cmd) || (cmd ? cmd : '');
         const isEmpty = !handlerPath;
         if (isEmpty) warnings++;
-        eventsMap.get(event).push({
+        const key = `${event}|${matcher}|${handlerPath}`;
+        const isDisabled = disabledIndex.has(key);
+        if (isDisabled) disabledCount++;
+        handlers.push({
           handler: handlerPath || '(empty command)',
-          matcher: matcher || '',
+          matcher,
           matcherDisplay: matcher || '(any)',
           empty: isEmpty,
-          disabled: false,
+          disabled: isDisabled,
           rawCommand: cmd,
         });
         totalHandlers++;
       }
     }
+    events.push({ event, count: handlers.length, handlers });
   }
 
-  // Add disabled handlers (live in overrides, not in settings.json)
-  for (const d of overrides.disabledHandlers || []) {
-    if (!eventsMap.has(d.event)) eventsMap.set(d.event, []);
-    eventsMap.get(d.event).push({
-      handler: d.handler,
-      matcher: d.matcher || '',
-      matcherDisplay: d.matcher || '(any)',
-      empty: false,
-      disabled: true,
-      rawCommand: (d.spec && d.spec.command) || '',
-    });
-    disabledCount++;
-  }
-
-  const events = Array.from(eventsMap.entries()).map(([event, handlers]) => ({
-    event,
-    count: handlers.length,
-    handlers,
-  }));
-
   return {
     settingsFound: true,
     events,
-    totalHandlers: totalHandlers + disabledCount,
-    activeHandlers: totalHandlers,
+    totalHandlers,
+    activeHandlers: totalHandlers - disabledCount,
     disabledHandlers: disabledCount,
     warnings,
   };
@@ -297,17 +285,33 @@ header .cwd { color: var(--muted); font-family: var(--mono); font-size: 12px; fl
 header .actions { display: flex; gap: 12px; align-items: center; color: var(--muted); font-size: 12px; }
 header button { background: var(--panel-2); border: 1px solid var(--border); color: var(--fg); padding: 6px 12px; border-radius: 6px; cursor: pointer; font: inherit; }
 header button:hover { border-color: var(--accent); }
-main { display: grid; grid-template-columns: 220px 1fr; min-height: calc(100vh - 56px); }
-nav { border-right: 1px solid var(--border); background: var(--panel); padding: 12px 0; }
+main { display: flex; min-height: calc(100vh - 56px); }
+nav { width: 220px; flex-shrink: 0; border-right: 1px solid var(--border); background: var(--panel); padding: 12px 0; }
 nav a { display: flex; align-items: center; gap: 10px; padding: 10px 22px; color: var(--fg); text-decoration: none; cursor: pointer; border-left: 3px solid transparent; font-size: 13px; }
 nav a:hover { background: var(--panel-2); }
 nav a.active { background: var(--panel-2); border-left-color: var(--accent); }
+@media (max-width: 720px) {
+  main { flex-direction: column; }
+  nav {
+    width: 100%; border-right: 0; border-bottom: 1px solid var(--border);
+    padding: 0; display: flex; overflow-x: auto;
+  }
+  nav a {
+    flex-shrink: 0; padding: 12px 16px; border-left: 0;
+    border-bottom: 3px solid transparent; white-space: nowrap;
+  }
+  nav a.active { border-left: 0; border-bottom-color: var(--accent); }
+  section { padding: 16px 18px; max-width: none; }
+  header { padding: 12px 16px; gap: 8px; }
+  header .cwd { font-size: 11px; }
+  header .actions { font-size: 11px; }
+}
 nav .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
 .dot.ok { background: var(--ok); }
 .dot.warn { background: var(--warn); }
 .dot.err { background: var(--err); }
 .dot.info { background: var(--muted); }
-section { padding: 22px 28px; max-width: 980px; }
+section { flex: 1; min-width: 0; padding: 22px 28px; max-width: 980px; }
 section h2 { font-size: 16px; margin: 0 0 6px; letter-spacing: 0.3px; }
 section .sub { color: var(--muted); font-size: 12px; margin-bottom: 18px; }
 .card { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 14px 18px; margin-bottom: 14px; }
@@ -369,12 +373,66 @@ let state = null;
 let active = 'overview';
 let timer = null;
 
+// Preserve which <details> were open across re-renders (auto-refresh would
+// otherwise collapse them every 5s).
+function captureOpenDetails() {
+  const ids = new Set();
+  document.querySelectorAll('details[open][data-detail-id]').forEach(d => ids.add(d.dataset.detailId));
+  // Also capture anonymous details by event name (hooks accordion).
+  document.querySelectorAll('details[open][data-event]').forEach(d => ids.add('event:' + d.dataset.event));
+  return ids;
+}
+
+function restoreOpenDetails(ids) {
+  if (!ids.size) return;
+  document.querySelectorAll('details[data-detail-id]').forEach(d => {
+    if (ids.has(d.dataset.detailId)) d.open = true;
+  });
+  document.querySelectorAll('details[data-event]').forEach(d => {
+    if (ids.has('event:' + d.dataset.event)) d.open = true;
+  });
+}
+
+// Cache fetched CLAUDE.md content so re-renders during auto-refresh don't
+// drop the preview the user already loaded.
+let claudeMdCache = null;
+
+async function loadClaudeMdPreview() {
+  const target = document.getElementById('claude-md-preview');
+  if (!target) return;
+  if (target.dataset.loaded === '1') return;
+  target.dataset.loaded = '1';
+  target.textContent = 'Loading…';
+  try {
+    if (!claudeMdCache) {
+      const r = await fetch('/api/claude-md');
+      claudeMdCache = await r.text();
+    }
+    const pre = document.createElement('pre');
+    pre.textContent = claudeMdCache;
+    target.innerHTML = '';
+    target.appendChild(pre);
+  } catch (e) {
+    target.textContent = 'Failed to load: ' + e.message;
+    target.dataset.loaded = '';
+  }
+}
+
 async function refresh() {
-  const r = await fetch('/api/status');
-  state = await r.json();
+  const open = captureOpenDetails();
+  try {
+    const r = await fetch('/api/status');
+    state = await r.json();
+  } catch (e) {
+    showToast && showToast('Refresh failed: ' + e.message, 'err');
+    return;
+  }
   renderHeader();
   renderNav();
   renderContent();
+  restoreOpenDetails(open);
+  // If preview was visible/open, ensure it stays loaded after re-render.
+  if (open.has('claude-md-preview')) loadClaudeMdPreview();
 }
 
 function renderHeader() {
@@ -478,12 +536,7 @@ function renderClaudeMd() {
       \${row('Default rules block', blk, { kind: c.block.present ? 'ok' : 'info', text: c.block.present ? '✓' : '·' })}
       \${row('Opt-out marker', c.optOut ? 'present (block disabled)' : 'absent', { kind: c.optOut ? 'info' : 'ok', text: c.optOut ? '·' : '✓' })}
     </div>
-    <details><summary>Preview content</summary><div id="claude-md-preview">Loading…</div></details>
-    <script>
-      fetch('/api/claude-md').then(r => r.text()).then(t => {
-        document.getElementById('claude-md-preview').innerHTML = '<pre>' + t.replace(/[&<>]/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;'}[c])) + '</pre>';
-      });
-    </\${'script'}>
+    <details data-detail-id="claude-md-preview"><summary>Preview content</summary><div id="claude-md-preview" class="muted">Click to load…</div></details>
   \`;
 }
 
@@ -503,7 +556,7 @@ function renderHooks() {
         <span class="matcher">\${escapeHtml(hd.matcherDisplay)}</span>
       </div>\`;
     }).join('');
-    return \`<details><summary>\${escapeHtml(ev.event)} <span class="muted">(\${ev.count})</span></summary>\${handlers}</details>\`;
+    return \`<details data-event="\${escapeHtml(ev.event)}"><summary>\${escapeHtml(ev.event)} <span class="muted">(\${ev.count})</span></summary>\${handlers}</details>\`;
   }).join('');
   return \`<h2>Hooks</h2>
     <p class="sub">\${h.events.length} events · \${h.activeHandlers} active\${h.disabledHandlers ? ' · <span class="muted">' + h.disabledHandlers + ' disabled</span>' : ''}\${h.warnings ? ' · <span class="warning">' + h.warnings + ' warnings</span>' : ''}</p>
@@ -602,6 +655,15 @@ document.addEventListener('change', (e) => {
   }
 });
 
+// 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();
+  }
+}, true);
+
 document.getElementById('refresh').onclick = refresh;
 document.getElementById('auto').onchange = (e) => {
   if (timer) clearInterval(timer);

package/package.json

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