@axiomatic-labs/claudeflow 2.13.64 → 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>'
@@ -1467,6 +1514,7 @@ function renderObserver() {
     <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>\`;
 }
 
@@ -1617,6 +1665,11 @@ document.addEventListener('click', (e) => {
   if (t.id === 'clear-observer') {
     return clearObserverAction(t);
   }
+  if (t.dataset && t.dataset.observerFilter) {
+    observerFilter = t.dataset.observerFilter;
+    renderContent();
+    return;
+  }
 });
 
 async function clearObserverAction(btn) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axiomatic-labs/claudeflow",
-  "version": "2.13.64",
+  "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"