@axiomatic-labs/claudeflow 2.13.56 → 2.13.58

package/lib/panel.js

@@ -22,6 +22,7 @@ const {
   checkObserverState,
   readObserverState: readObserverStateFromDoctor,
   readPlaywrightCdpEndpoint,
+  applyCdpPortFix,
 } = require('./doctor.js');
 const {
   readOverrides,
@@ -205,6 +206,10 @@ function getMcpInfo(cwd) {
       configured: reading.state === 'ok' ? reading.port : null,
       computed: deriveCdpPort(cwd),
       match: cdp.severity === 'ok',
+      // `fixable` is true only for the "wrong port" mismatch case — the
+      // applyCdpPortFix routine can rewrite the args entry. Other cases
+      // (invalid JSON, unparseable value) can't be auto-fixed by the panel.
+      fixable: cdp.severity === 'mismatch',
       state: reading.state,
       message: cdp.message,
     },
@@ -658,6 +663,9 @@ 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; }
+.btn-warn { background: var(--panel); border: 1px solid rgba(245,194,52,0.5); color: var(--warn, #f5c234); padding: 6px 12px; border-radius: 6px; cursor: pointer; font: inherit; }
+.btn-warn:hover { border-color: var(--warn, #f5c234); background: rgba(245,194,52,0.08); }
+.btn-warn:disabled { opacity: 0.4; cursor: not-allowed; }
 .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); }
@@ -1299,7 +1307,9 @@ function renderMcp() {
       \${row('Playwright --cdp-endpoint port', String(m.playwright.configured || 'n/a'))}
       \${row('Computed port (from path)', String(m.playwright.computed))}
       \${row('Match', m.playwright.match ? 'YES' : 'NO', { kind: m.playwright.match ? 'ok' : 'err', text: m.playwright.match ? '✓' : '✗' })}
+      \${m.playwright.fixable ? '<div style="padding:10px 14px;border-top:1px solid var(--border);"><button id="fix-cdp-port" class="btn-warn">Fix CDP port</button> <span class="muted" style="margin-left:10px;font-size:12px;">Rewrites .mcp.json --cdp-endpoint to localhost:'+m.playwright.computed+' (the port this machine derives from the cwd).</span></div>' : ''}
       \${row('Observer', m.observer.running ? 'running (pid '+m.observer.pid+')' : 'STOPPED — browser errors NOT being collected', { kind: m.observer.running ? 'ok' : (m.playwright.match ? 'warn' : 'info'), text: m.observer.running ? '✓' : (m.playwright.match ? '⚠' : '·') })}
+      \${!m.observer.running && m.playwright.match ? '<div style="padding:10px 14px;border-top:1px solid var(--border);"><button id="restart-observer" class="btn-warn">Restart observer</button> <span class="muted" style="margin-left:10px;font-size:12px;">Re-runs SessionStart/browser-error-daemon.js — spawns Chrome with --cdp-endpoint and registers the daemon pidfile.</span></div>' : ''}
     </div>
     <h2 style="margin-top:18px">Stale lockfiles</h2>
     \${lockfiles}\`;
@@ -1409,8 +1419,56 @@ document.addEventListener('click', (e) => {
     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();
   }
+  if (t.id === 'restart-observer') {
+    return restartObserverAction(t);
+  }
+  if (t.id === 'fix-cdp-port') {
+    return fixCdpPortAction(t);
+  }
 });
 
+async function fixCdpPortAction(btn) {
+  const originalLabel = btn.textContent;
+  btn.disabled = true;
+  btn.textContent = 'Fixing…';
+  try {
+    const r = await fetch('/api/cdp-port/fix', { method: 'POST' });
+    const result = await r.json();
+    if (r.ok && result.ok) {
+      showToast('CDP port fixed — .mcp.json rewritten. ' + (result.after && result.after.message || ''), 'ok');
+    } else {
+      showToast('Fix failed: ' + (result.error || 'unknown'), 'err');
+    }
+  } catch (e) {
+    showToast('Network error: ' + e.message, 'err');
+  } finally {
+    btn.disabled = false;
+    btn.textContent = originalLabel;
+    await refresh();
+  }
+}
+
+async function restartObserverAction(btn) {
+  const originalLabel = btn.textContent;
+  btn.disabled = true;
+  btn.textContent = 'Restarting…';
+  try {
+    const r = await fetch('/api/observer/restart', { method: 'POST' });
+    const result = await r.json();
+    if (r.ok && result.ok) {
+      showToast('Observer restarted — pid ' + (result.observer && result.observer.pid) + '. Refreshing…', 'ok');
+    } else {
+      showToast('Restart failed: ' + (result.error || result.script_stderr || 'unknown'), 'err');
+    }
+  } catch (e) {
+    showToast('Network error: ' + e.message, 'err');
+  } finally {
+    btn.disabled = false;
+    btn.textContent = originalLabel;
+    await refresh();
+  }
+}
+
 async function clearLogsAction() {
   try {
     const r = await fetch('/api/logs', { method: 'DELETE' });
@@ -1661,6 +1719,58 @@ function handler(cwd) {
         return send(status, JSON.stringify(result), 'application/json');
       }
 
+      if (req.method === 'POST' && route === '/api/cdp-port/fix') {
+        // Re-run checkCdpPortMismatch to get fresh state (the file may have
+        // changed since the panel last fetched). Only apply the fix if the
+        // check still reports severity='mismatch' (i.e. the wrong-port case
+        // — other failure modes like invalid JSON cannot be auto-fixed).
+        const check = checkCdpPortMismatch(cwd);
+        if (check.severity !== 'mismatch') {
+          return send(409, JSON.stringify({
+            ok: false,
+            error: `cdp-port check is "${check.severity}" — only "mismatch" is auto-fixable. Current message: ${check.message}`,
+            check_severity: check.severity,
+          }), 'application/json');
+        }
+        try {
+          applyCdpPortFix(check);
+        } catch (e) {
+          return send(500, JSON.stringify({ ok: false, error: `applyCdpPortFix failed: ${e.message}` }), 'application/json');
+        }
+        const after = checkCdpPortMismatch(cwd);
+        return send(200, JSON.stringify({
+          ok: after.severity === 'ok',
+          before: { severity: check.severity, message: check.message },
+          after: { severity: after.severity, message: after.message },
+        }), 'application/json');
+      }
+
+      if (req.method === 'POST' && route === '/api/observer/restart') {
+        // Re-run the SessionStart/browser-error-daemon.js hook script
+        // synchronously. The script calls ensureObserver() which spawns
+        // Chrome with --cdp-endpoint as a detached process. Once the
+        // script exits, the daemon is up (or the script logged the failure).
+        const daemonScript = path.join(cwd, '.claude', 'hooks', 'SessionStart', 'browser-error-daemon.js');
+        if (!fs.existsSync(daemonScript)) {
+          return send(404, JSON.stringify({ ok: false, error: 'daemon script not found at .claude/hooks/SessionStart/browser-error-daemon.js' }), 'application/json');
+        }
+        const { spawnSync } = require('child_process');
+        const r = spawnSync(process.execPath, [daemonScript], {
+          cwd,
+          env: { ...process.env, CLAUDE_PROJECT_DIR: cwd },
+          encoding: 'utf8',
+          timeout: 15000,
+        });
+        const observerState = readObserverState(cwd, deriveCdpPort(cwd));
+        const ok = observerState.running;
+        return send(ok ? 200 : 500, JSON.stringify({
+          ok,
+          observer: observerState,
+          script_exit: r.status,
+          script_stderr: (r.stderr || '').slice(0, 500),
+        }), 'application/json');
+      }
+
       if (req.method === 'POST' && route === '/api/reminders/toggle') {
         const raw = await readRequestBody(req);
         let payload;

package/package.json

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