@axiomatic-labs/claudeflow 2.13.63 → 2.13.65

package/lib/panel.js

@@ -734,6 +734,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; }
+.observer-filter { background: var(--panel); border: 1px solid var(--border); color: var(--fg); padding: 4px 10px; border-radius: 999px; cursor: pointer; font-size: 12px; font: inherit; }
+.observer-filter:hover { border-color: var(--accent, #6cf); }
+.observer-filter.active { background: rgba(108,170,255,0.12); border-color: var(--accent, #6cf); color: var(--accent, #6cf); }
 .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; }
@@ -829,6 +832,7 @@ const SECTIONS = [
 
 let state = null;
 let active = 'overview';
+let observerFilter = 'all';
 let timer = null;
 
 // Preserve which <details> were open across re-renders (auto-refresh would
@@ -1424,11 +1428,54 @@ function renderObserver() {
       </div>\`
     : '<p class="muted">No browser snapshots received yet. (The observer collects when the agent navigates with mcp__claude-in-chrome__*.)</p>';
 
+  // Build the filter index: for each surface (server label), find which
+  // incidents belong to it. browser incidents are matched by origin URL
+  // against each server's :PORT. Browser-other = browser incidents whose
+  // origin doesn't match any configured server (e.g. external URL).
+  const serverByOrigin = {};
+  o.servers.forEach((srv) => {
+    if (srv.port) serverByOrigin[\`localhost:\${srv.port}\`] = srv.label;
+    if (srv.port) serverByOrigin[\`127.0.0.1:\${srv.port}\`] = srv.label;
+  });
+  function incidentBucket(inc) {
+    if (inc.source === 'server') {
+      return (inc.metadata && inc.metadata.label) || inc.surface || 'server-unknown';
+    }
+    if (inc.source === 'browser') {
+      const url = (inc.metadata && (inc.metadata.url || inc.metadata.origin)) || '';
+      const m = url.match(/^https?:\\/\\/([^/]+)/);
+      if (m && serverByOrigin[m[1]]) return serverByOrigin[m[1]];
+      return 'browser-other';
+    }
+    return inc.source || 'other';
+  }
+  const buckets = {};
+  o.recent_incidents.forEach((inc) => {
+    const b = incidentBucket(inc);
+    if (!buckets[b]) buckets[b] = [];
+    buckets[b].push(inc);
+  });
+  const surfacesInUse = Object.keys(buckets).sort();
+  // Apply observerFilter client-side state. Default 'all' (no filter).
+  const filteredIncidents = (typeof observerFilter === 'undefined' || observerFilter === 'all')
+    ? o.recent_incidents
+    : (buckets[observerFilter] || []);
+
+  const filterPill = (label, value, count) => {
+    const active = (typeof observerFilter === 'undefined' && value === 'all') || observerFilter === value;
+    const cls = active ? 'observer-filter active' : 'observer-filter';
+    return \`<button class="\${cls}" data-observer-filter="\${escapeHtml(value)}">\${escapeHtml(label)}<span class="muted" style="margin-left:6px;font-size:11px;">\${count}</span></button>\`;
+  };
+  const filterPills = '<div class="observer-filters" style="display:flex;gap:6px;flex-wrap:wrap;margin:8px 0;">' +
+    filterPill('All', 'all', o.recent_incidents.length) +
+    surfacesInUse.map((surface) => filterPill(surface, surface, buckets[surface].length)).join('') +
+    '</div>';
+
   // Incidents feed
-  const incidentsBlock = o.recent_incidents.length === 0
-    ? '<p class="muted">No incidents recorded.</p>'
+  const incidentsBlock = filteredIncidents.length === 0
+    ? '<p class="muted">No incidents in this filter.</p>'
     : '<div class="incidents-feed">' +
-      o.recent_incidents.map((inc) => {
+      filteredIncidents.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>'
@@ -1452,14 +1499,22 @@ function renderObserver() {
       }).join('') +
       '</div>';
 
+  // Clear button — only meaningful when the daemon is running AND there's
+  // either at least one unresolved incident or some browser snapshots to wipe.
+  const clearable = daemonAlive && (totals.unresolved > 0 || (o.browser && o.browser.snapshots_received > 0) || o.recent_incidents.length > 0);
+  const clearBtn = clearable
+    ? '<button id="clear-observer" class="logs-clear-btn" style="margin-left:14px;" title="Resolves all active incidents, clears per-server recent_log buffers, and resets browser snapshot counter. The state file keeps incident history (marked resolved). Future events repopulate as usual.">Clear observer state</button>'
+    : '';
+
   return \`<h2>Observer</h2>
-    <p class="sub">Daemon: \${statusBadge}\${restartBtn}</p>
+    <p class="sub">Daemon: \${statusBadge}\${restartBtn}\${clearBtn}</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>
+    \${filterPills}
     <div class="card" style="padding:0;">\${incidentsBlock}</div>\`;
 }
 
@@ -1607,8 +1662,38 @@ document.addEventListener('click', (e) => {
   if (t.id === 'fix-cdp-port') {
     return fixCdpPortAction(t);
   }
+  if (t.id === 'clear-observer') {
+    return clearObserverAction(t);
+  }
+  if (t.dataset && t.dataset.observerFilter) {
+    observerFilter = t.dataset.observerFilter;
+    renderContent();
+    return;
+  }
 });
 
+async function clearObserverAction(btn) {
+  if (!confirm('Resolve all active observer incidents and clear server logs?\\n\\nIncident history is preserved in state.incidents (marked resolved). Future events repopulate normally. This cannot be undone.')) return;
+  const originalLabel = btn.textContent;
+  btn.disabled = true;
+  btn.textContent = 'Clearing…';
+  try {
+    const r = await fetch('/api/observer/clear', { method: 'POST' });
+    const result = await r.json();
+    if (r.ok && result.ok) {
+      showToast('Observer state cleared at ' + (result.reset_at || 'now'), 'ok');
+    } else {
+      showToast('Clear failed: ' + (result.error || 'unknown'), 'err');
+    }
+  } catch (e) {
+    showToast('Network error: ' + e.message, 'err');
+  } finally {
+    btn.disabled = false;
+    btn.textContent = originalLabel;
+    await refresh();
+  }
+}
+
 async function fixCdpPortAction(btn) {
   const originalLabel = btn.textContent;
   btn.disabled = true;
@@ -1936,6 +2021,42 @@ function handler(cwd) {
         }), 'application/json');
       }
 
+      if (req.method === 'POST' && route === '/api/observer/clear') {
+        // Forwards to the observer daemon's /reset-session endpoint, which
+        // resolves all active browser + server incidents, clears the per-server
+        // recent_log buffers, and resets the browser snapshot counter. The
+        // history is preserved in state.incidents (marked resolved), so this
+        // is a soft clear: future polls won't see the old incidents as active.
+        const observer = readObserverState(cwd);
+        if (!observer.running) {
+          return send(409, JSON.stringify({ ok: false, error: 'observer is not running — start it first, then clear.' }), 'application/json');
+        }
+        const { request: httpRequest } = require('node:http');
+        const result = await new Promise((resolve) => {
+          const req2 = httpRequest({
+            hostname: '127.0.0.1',
+            port: observer.port,
+            path: '/reset-session',
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json', 'Content-Length': 2 },
+          }, (r) => {
+            let body = '';
+            r.on('data', (c) => { body += c; });
+            r.on('end', () => {
+              try { resolve({ status: r.statusCode, body: JSON.parse(body) }); }
+              catch { resolve({ status: r.statusCode, body: { raw: body } }); }
+            });
+          });
+          req2.on('error', (err) => resolve({ status: 0, body: { error: err.message } }));
+          req2.write('{}');
+          req2.end();
+        });
+        if (result.status === 200 && result.body && result.body.ok) {
+          return send(200, JSON.stringify({ ok: true, reset_at: result.body.reset_at }), 'application/json');
+        }
+        return send(502, JSON.stringify({ ok: false, error: 'observer returned ' + result.status, daemon_response: result.body }), '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

package/package.json

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