@axiomatic-labs/claudeflow 2.13.62 → 2.13.63

package/lib/panel.js

@@ -285,6 +285,76 @@ function getEnforcementInfo(cwd) {
   };
 }
 
+function getObserverInfo(cwd) {
+  // Read both the canonical state file (full snapshot) AND the summary file
+  // (which is what hooks consume — has the incident filter applied).
+  const tmpDir = path.join(cwd, '.claudeflow', 'tmp');
+  const statePath = path.join(tmpDir, 'error-observer-state.json');
+  const summaryPath = path.join(tmpDir, 'error-observer-summary.json');
+  let state;
+  let summary;
+  try { state = JSON.parse(fs.readFileSync(statePath, 'utf8')); } catch { state = null; }
+  try { summary = JSON.parse(fs.readFileSync(summaryPath, 'utf8')); } catch { summary = null; }
+
+  // Daemon liveness reuses doctor.js's helper (same source of truth).
+  const daemon = readObserverState(cwd);
+
+  // Servers table — flatten into UI-friendly rows.
+  const servers = state && state.servers && typeof state.servers === 'object'
+    ? Object.entries(state.servers).map(([label, srv]) => ({
+        label,
+        port: srv.port || null,
+        status: srv.status || 'unknown',
+        supervised: !!srv.supervised,
+        observed_external: !!srv.observed_external,
+        health_ok: srv.health_ok !== false,
+        last_ready_at: srv.last_ready_at || null,
+        last_issue_at: srv.last_issue_at || null,
+        last_exit_at: srv.last_exit_at || null,
+        last_exit_code: srv.last_exit_code,
+        last_exit_signal: srv.last_exit_signal,
+      }))
+    : [];
+
+  // Browser section.
+  const browser = state && state.browser ? {
+    last_snapshot_at: state.browser.last_snapshot_at || null,
+    latest_url: state.browser.latest_url || null,
+    latest_route: state.browser.latest_route || null,
+    latest_origin: state.browser.latest_origin || null,
+    snapshots_received: state.browser.snapshots_received || 0,
+  } : null;
+
+  // Unresolved incidents — already filtered in summary, but expose state's
+  // full list too so the UI can show recent (incl. resolved) history.
+  const unresolvedIncidents = summary && Array.isArray(summary.unresolved_incidents)
+    ? summary.unresolved_incidents
+    : [];
+  const allIncidents = state && state.incidents && typeof state.incidents === 'object'
+    ? Object.values(state.incidents)
+        .sort((a, b) => String(b.last_seen_at || '').localeCompare(String(a.last_seen_at || '')))
+        .slice(0, 50)
+    : [];
+
+  return {
+    daemon,
+    summary_status: summary ? summary.status : null,
+    summary_reason: summary ? summary.reason : null,
+    summary_checked_at: summary ? summary.checked_at : null,
+    started_at: state ? state.started_at : null,
+    updated_at: state ? state.updated_at : null,
+    servers,
+    browser,
+    unresolved_incidents: unresolvedIncidents,
+    recent_incidents: allIncidents,
+    totals: summary ? {
+      unresolved: summary.unresolved_incidents_total || 0,
+      browser: summary.browser_incidents_total || 0,
+      server: summary.server_incidents_total || 0,
+    } : null,
+  };
+}
+
 function getRunToCompletionInfo(cwd) {
   const overrides = readOverrides(cwd);
   return {
@@ -548,6 +618,7 @@ function collectStatus(cwd) {
     reminders: getRemindersInfo(cwd),
     enforcement: getEnforcementInfo(cwd),
     runToCompletion: getRunToCompletionInfo(cwd),
+    observer: getObserverInfo(cwd),
     activePlan: getActivePlanInfo(cwd),
     logs: getLogsInfo(cwd),
     doctor: getDoctorInfo(cwd),
@@ -748,6 +819,7 @@ const SECTIONS = [
   { id: 'hooks',        label: 'Hooks' },
   { id: 'reminders',    label: 'Reminders' },
   { id: 'logs',         label: 'Logs' },
+  { id: 'observer',     label: 'Observer' },
   { id: 'activePlan',   label: 'Active plan' },
   { id: 'mcp',          label: 'MCP & observer' },
   { id: 'setupContext', label: 'Setup context' },
@@ -880,12 +952,19 @@ function severityFor(id) {
     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 'observer': {
+      if (!s.observer) return 'info';
+      // Daemon down → warn (not err, since the observer is supportive infra).
+      if (!s.observer.daemon || !s.observer.daemon.running) return 'warn';
+      // Any unresolved incidents → warn so the user sees the badge.
+      if (s.observer.totals && s.observer.totals.unresolved > 0) return 'warn';
+      // Any supervised server in unhealthy/exited → warn.
+      if (s.observer.servers && s.observer.servers.some((sr) => sr.status === 'unhealthy' || sr.status === 'exited')) return 'warn';
+      return 'ok';
+    }
     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';
@@ -930,6 +1009,7 @@ function renderContent() {
     hooks: renderHooks,
     reminders: renderReminders,
     logs: renderLogs,
+    observer: renderObserver,
     activePlan: renderActivePlan,
     mcp: renderMcp,
     setupContext: renderSetup,
@@ -1295,6 +1375,108 @@ function renderActivePlan() {
     <details data-detail-id="active-plan-full"><summary>Full plan content</summary><div id="active-plan-body" class="muted">Click to load…</div></details>\`;
 }
 
+function renderObserver() {
+  const o = state.observer;
+  if (!o) return '<h2>Observer</h2><p class="muted">No observer info available.</p>';
+  const daemonAlive = o.daemon && o.daemon.running;
+  const statusBadge = daemonAlive
+    ? \`<span class="badge ok">✓ running</span> <span class="muted">pid \${o.daemon.pid} • port \${o.daemon.port} • detected via \${o.daemon.source}</span>\`
+    : \`<span class="badge warn">⚠ stopped</span> <span class="muted">no listener detected</span>\`;
+  const restartBtn = !daemonAlive
+    ? '<button id="restart-observer" class="btn-warn" style="margin-left:14px;">Restart observer</button>'
+    : '';
+  const totals = o.totals || { unresolved: 0, browser: 0, server: 0 };
+  const totalsBadge = totals.unresolved > 0
+    ? \`<span class="badge warn">\${totals.unresolved} unresolved</span> <span class="muted">(browser: \${totals.browser}, server: \${totals.server})</span>\`
+    : '<span class="badge ok">✓ no unresolved incidents</span>';
+  const summaryStatus = o.summary_status ? \`<span class="muted">summary status: <code>\${escapeHtml(o.summary_status)}</code></span>\` : '';
+
+  // Servers table
+  const serversTable = o.servers.length === 0
+    ? '<p class="muted">No servers configured in setup-context.json.servers.</p>'
+    : '<table class="kv-table" style="width:100%;border-collapse:collapse;font-size:13px;">' +
+      '<thead><tr><th style="text-align:left;padding:6px 8px;">Label</th><th style="text-align:left;padding:6px 8px;">Port</th><th style="text-align:left;padding:6px 8px;">Status</th><th style="text-align:left;padding:6px 8px;">Health</th><th style="text-align:left;padding:6px 8px;">Last ready</th><th style="text-align:left;padding:6px 8px;">Last issue</th></tr></thead>' +
+      '<tbody>' +
+      o.servers.map((srv) => {
+        const statusColor = srv.status === 'running' || srv.status === 'external' ? 'ok' : (srv.status === 'unhealthy' || srv.status === 'exited' ? 'err' : 'info');
+        const healthIcon = srv.health_ok ? '<span class="badge ok">✓</span>' : '<span class="badge err">✗</span>';
+        const exitInfo = srv.last_exit_code !== null && srv.last_exit_code !== undefined
+          ? \` <span class="muted">(exit \${srv.last_exit_code}\${srv.last_exit_signal ? '/' + srv.last_exit_signal : ''})</span>\`
+          : '';
+        return \`<tr style="border-top:1px solid var(--border);">
+          <td style="padding:6px 8px;"><strong>\${escapeHtml(srv.label)}</strong></td>
+          <td style="padding:6px 8px;"><code>\${srv.port || '?'}</code></td>
+          <td style="padding:6px 8px;"><span class="badge \${statusColor}">\${escapeHtml(srv.status)}</span>\${exitInfo}</td>
+          <td style="padding:6px 8px;">\${healthIcon}</td>
+          <td style="padding:6px 8px;" class="muted">\${escapeHtml(formatRelativeTime(srv.last_ready_at))}</td>
+          <td style="padding:6px 8px;" class="muted">\${escapeHtml(formatRelativeTime(srv.last_issue_at))}</td>
+        </tr>\`;
+      }).join('') +
+      '</tbody></table>';
+
+  // Browser section
+  const browserBlock = o.browser && o.browser.last_snapshot_at
+    ? \`<div class="card" style="padding:10px 14px;font-size:13px;">
+        \${row('Latest URL', o.browser.latest_url ? '<code>' + escapeHtml(o.browser.latest_url) + '</code>' : '<span class="muted">none</span>')}
+        \${row('Latest route', o.browser.latest_route ? '<code>' + escapeHtml(o.browser.latest_route) + '</code>' : '<span class="muted">none</span>')}
+        \${row('Snapshots received', String(o.browser.snapshots_received))}
+        \${row('Last snapshot', formatRelativeTime(o.browser.last_snapshot_at))}
+      </div>\`
+    : '<p class="muted">No browser snapshots received yet. (The observer collects when the agent navigates with mcp__claude-in-chrome__*.)</p>';
+
+  // Incidents feed
+  const incidentsBlock = o.recent_incidents.length === 0
+    ? '<p class="muted">No incidents recorded.</p>'
+    : '<div class="incidents-feed">' +
+      o.recent_incidents.map((inc) => {
+        const sevClass = inc.severity === 'error' || inc.severity === 'critical' ? 'err' : (inc.severity === 'warning' ? 'warn' : 'info');
+        const resolvedBadge = inc.resolved_at
+          ? '<span class="badge ok" style="margin-left:6px;">resolved</span>'
+          : '<span class="badge warn" style="margin-left:6px;">active</span>';
+        const surfaceLabel = inc.source === 'server' && inc.metadata && inc.metadata.label
+          ? inc.metadata.label
+          : inc.surface || inc.source;
+        return \`<div class="incident-row" style="padding:10px 14px;border-top:1px solid var(--border);">
+          <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px;">
+            <span class="badge \${sevClass}">\${escapeHtml(inc.severity || 'info')}</span>
+            <span class="muted">\${escapeHtml(inc.source || 'unknown')}</span>
+            <span class="muted">→</span>
+            <strong>\${escapeHtml(surfaceLabel)}</strong>
+            <span class="muted">\${escapeHtml(inc.type || '')}</span>
+            \${resolvedBadge}
+            <span class="muted" style="margin-left:auto;font-size:11px;">\${escapeHtml(formatRelativeTime(inc.last_seen_at))}</span>
+          </div>
+          <div style="font-size:12px;white-space:pre-wrap;">\${escapeHtml((inc.message || '').slice(0, 600))}\${(inc.message || '').length > 600 ? '…' : ''}</div>
+          \${inc.metadata && inc.metadata.url ? '<div class="muted" style="font-size:11px;margin-top:4px;">at <code>' + escapeHtml(inc.metadata.url) + '</code></div>' : ''}
+        </div>\`;
+      }).join('') +
+      '</div>';
+
+  return \`<h2>Observer</h2>
+    <p class="sub">Daemon: \${statusBadge}\${restartBtn}</p>
+    <p class="sub">Incidents: \${totalsBadge}  \${summaryStatus}</p>
+    <h3 style="margin-top:18px;font-size:14px;">Servers (\${o.servers.length})</h3>
+    <div class="card" style="padding:0;">\${serversTable}</div>
+    <h3 style="margin-top:18px;font-size:14px;">Browser channel</h3>
+    \${browserBlock}
+    <h3 style="margin-top:18px;font-size:14px;">Incidents (most recent \${o.recent_incidents.length})</h3>
+    <div class="card" style="padding:0;">\${incidentsBlock}</div>\`;
+}
+
+function formatRelativeTime(iso) {
+  if (!iso) return 'never';
+  try {
+    const t = new Date(iso).getTime();
+    if (Number.isNaN(t)) return 'unknown';
+    const diff = Date.now() - t;
+    if (diff < 0) return 'in the future';
+    if (diff < 60_000) return Math.floor(diff / 1000) + 's ago';
+    if (diff < 3_600_000) return Math.floor(diff / 60_000) + 'm ago';
+    if (diff < 86_400_000) return Math.floor(diff / 3_600_000) + 'h ago';
+    return Math.floor(diff / 86_400_000) + 'd ago';
+  } catch { return 'unknown'; }
+}
+
 function renderMcp() {
   const m = state.mcp;
   if (!m.configFound) return '<h2>MCP & observer</h2><p class="muted">.mcp.json not found</p>';
@@ -1922,6 +2104,7 @@ module.exports = run;
 module.exports.start = start;
 module.exports.createPanelServer = handler;
 module.exports.derivePanelPort = derivePanelPort;
+module.exports.getObserverInfo = getObserverInfo;
 module.exports.collectStatus = collectStatus;
 module.exports.getClaudeMdInfo = getClaudeMdInfo;
 module.exports.getHooksInfo = getHooksInfo;

package/package.json

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