@axiomatic-labs/claudeflow 2.13.55 → 2.13.57

package/lib/doctor.js

@@ -129,6 +129,54 @@ function checkStaleLockfiles(cwd) {
   };
 }
 
+// Read the browser-error-daemon observer state from its pidfile.
+// Returns { running, pid, lockfile } — running=true only when the pid is
+// alive AND the lockfile exists. Used by both doctor and panel.
+function readObserverState(cwd, cdpPort) {
+  const lockfile = path.join(cwd, '.claudeflow', 'tmp', `.browser-cdp-${cdpPort}.pid`);
+  let pid = null;
+  try {
+    pid = parseInt(fs.readFileSync(lockfile, 'utf8').trim(), 10);
+  } catch {
+    return { running: false, pid: null, lockfile };
+  }
+  if (!Number.isFinite(pid) || pid <= 0) return { running: false, pid, lockfile };
+  let alive = false;
+  try { process.kill(pid, 0); alive = true; } catch (e) { alive = e.code === 'EPERM'; }
+  return { running: alive, pid, lockfile };
+}
+
+// Surface as a doctor/panel issue when the browser-error-daemon observer
+// is stopped while Playwright is configured. The observer collects console
+// errors + network failures during headed browser verification — when it's
+// down, those signals are silently lost, so the agent may verify a flow
+// that has console errors and not know it.
+function checkObserverState(cwd) {
+  const mcpPath = path.join(cwd, '.mcp.json');
+  let cfg;
+  try { cfg = JSON.parse(fs.readFileSync(mcpPath, 'utf8')); }
+  catch { return { id: 'observer-state', severity: 'info', message: 'No .mcp.json — observer not applicable.' }; }
+  const hasPlaywright = cfg.mcpServers
+    && Object.keys(cfg.mcpServers).some((s) => s.toLowerCase().includes('playwright'));
+  if (!hasPlaywright) {
+    return { id: 'observer-state', severity: 'info', message: 'Playwright not configured — observer not applicable.' };
+  }
+  const observer = readObserverState(cwd, deriveCdpPort(cwd));
+  if (observer.running) {
+    return {
+      id: 'observer-state',
+      severity: 'ok',
+      message: `browser-error-daemon running (pid ${observer.pid}).`,
+    };
+  }
+  return {
+    id: 'observer-state',
+    severity: 'mismatch',
+    message: 'browser-error-daemon is STOPPED while Playwright is configured. Console errors / network failures from headed sessions are NOT being collected — the agent may verify a flow with console errors and miss them. The observer should auto-start at SessionStart via `.claude/hooks/SessionStart/browser-error-daemon.js`; if it keeps stopping, inspect that hook for crashes or check the pidfile at `.claudeflow/tmp/.browser-cdp-<port>.pid`.',
+    detail: [{ lockfile: observer.lockfile, pid: observer.pid }],
+  };
+}
+
 function applyStaleLockfileFix(check) {
   for (const { file } of check.fix.stale) {
     try { fs.unlinkSync(file); } catch {}
@@ -163,6 +211,7 @@ async function run(argv = []) {
   const checks = [
     checkCdpPortMismatch(cwd),
     checkStaleLockfiles(cwd),
+    checkObserverState(cwd),
   ];
 
   for (const check of checks) printCheck(check);
@@ -202,6 +251,8 @@ module.exports = run;
 module.exports.deriveCdpPort = deriveCdpPort;
 module.exports.checkCdpPortMismatch = checkCdpPortMismatch;
 module.exports.checkStaleLockfiles = checkStaleLockfiles;
+module.exports.checkObserverState = checkObserverState;
+module.exports.readObserverState = readObserverState;
 module.exports.readPlaywrightCdpEndpoint = readPlaywrightCdpEndpoint;
 module.exports.applyCdpPortFix = applyCdpPortFix;
 module.exports.applyStaleLockfileFix = applyStaleLockfileFix;

package/lib/panel.js

@@ -19,6 +19,8 @@ const {
   deriveCdpPort,
   checkCdpPortMismatch,
   checkStaleLockfiles,
+  checkObserverState,
+  readObserverState: readObserverStateFromDoctor,
   readPlaywrightCdpEndpoint,
 } = require('./doctor.js');
 const {
@@ -211,19 +213,10 @@ function getMcpInfo(cwd) {
   };
 }
 
-function readObserverState(cwd, cdpPort) {
-  const lockfile = path.join(cwd, '.claudeflow', 'tmp', `.browser-cdp-${cdpPort}.pid`);
-  let pid = null;
-  try {
-    pid = parseInt(fs.readFileSync(lockfile, 'utf8').trim(), 10);
-  } catch {
-    return { running: false, pid: null, lockfile };
-  }
-  if (!Number.isFinite(pid) || pid <= 0) return { running: false, pid, lockfile };
-  let alive = false;
-  try { process.kill(pid, 0); alive = true; } catch (e) { alive = e.code === 'EPERM'; }
-  return { running: alive, pid, lockfile };
-}
+// Re-export the canonical helper from doctor.js so panel callers keep the
+// same name. The implementation moved to doctor.js so both surfaces (CLI
+// doctor + panel) share a single source of truth.
+const readObserverState = readObserverStateFromDoctor;
 
 function getSetupContextInfo(cwd) {
   const p = path.join(cwd, '.claudeflow', 'config', 'setup-context.json');
@@ -524,7 +517,11 @@ function getLogsInfo(cwd) {
 }
 
 function getDoctorInfo(cwd) {
-  const checks = [checkCdpPortMismatch(cwd), checkStaleLockfiles(cwd)];
+  const checks = [
+    checkCdpPortMismatch(cwd),
+    checkStaleLockfiles(cwd),
+    checkObserverState(cwd),
+  ];
   const issues = checks.filter((c) => c.severity !== 'ok' && c.severity !== 'info');
   return {
     issueCount: issues.length,
@@ -661,6 +658,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); }
@@ -872,7 +872,15 @@ function severityFor(id) {
       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 'mcp': {
+      if (!s.mcp.configFound) return 'info';
+      const playwrightOk = s.mcp.playwright.match && s.mcp.staleLockfiles.length === 0;
+      // Observer stopped while Playwright is configured = warn. Console errors
+      // and network failures from headed sessions are silently lost when the
+      // observer is down.
+      const observerOk = !s.mcp.playwright.match || (s.mcp.observer && s.mcp.observer.running);
+      return playwrightOk && observerOk ? 'ok' : 'warn';
+    }
     case 'setupContext': return !s.setupContext.exists ? 'err' : (s.setupContext.toolingComplete ? 'ok' : 'warn');
     case 'activeRun': return s.activeRun.active ? 'info' : 'info';
     case 'doctor':   return s.doctor.issueCount > 0 ? 'warn' : 'ok';
@@ -1294,7 +1302,8 @@ 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 ? '✓' : '✗' })}
-      \${row('Observer', m.observer.running ? 'running (pid '+m.observer.pid+')' : 'stopped', { kind: m.observer.running ? 'ok' : 'info', text: m.observer.running ? '✓' : '·' })}
+      \${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}\`;
@@ -1404,8 +1413,32 @@ 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);
+  }
 });
 
+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' });
@@ -1656,6 +1689,32 @@ function handler(cwd) {
         return send(status, JSON.stringify(result), '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.55",
+  "version": "2.13.57",
   "description": "Claudeflow — AI-powered development toolkit for Claude Code. Skills, agents, hooks, and quality gates that ship production apps.",
   "bin": {
     "claudeflow": "./bin/cli.js"