@axiomatic-labs/claudeflow 2.13.66 → 2.13.67

package/lib/panel.js

@@ -331,11 +331,18 @@ function getObserverInfo(cwd) {
   const unresolvedIncidents = summary && Array.isArray(summary.unresolved_incidents)
     ? summary.unresolved_incidents
     : [];
-  const allIncidents = state && state.incidents && typeof state.incidents === 'object'
+  const allInState = 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)
     : [];
+  // Default surface to UI: ACTIVE only. "Clear observer state" resolves all
+  // active incidents, so after clear the active list is empty (which matches
+  // the user's expectation that "Clear" empties the feed). Resolved incidents
+  // are kept in state.incidents for audit and can be surfaced via the
+  // "Show resolved" filter pill.
+  const activeIncidents = allInState.filter((inc) => !inc.resolved_at && inc.active !== false);
+  const resolvedIncidents = allInState.filter((inc) => inc.resolved_at || inc.active === false);
 
   return {
     daemon,
@@ -347,7 +354,10 @@ function getObserverInfo(cwd) {
     servers,
     browser,
     unresolved_incidents: unresolvedIncidents,
-    recent_incidents: allIncidents,
+    active_incidents: activeIncidents,
+    resolved_incidents: resolvedIncidents,
+    // Kept for backwards compat with older render code — same as active_incidents.
+    recent_incidents: activeIncidents,
     totals: summary ? {
       unresolved: summary.unresolved_incidents_total || 0,
       browser: summary.browser_incidents_total || 0,
@@ -848,6 +858,7 @@ const SECTIONS = [
 let state = null;
 let active = 'overview';
 let observerFilter = 'all';
+let observerShowResolved = false;
 let timer = null;
 
 // Preserve which <details> were open across re-renders (auto-refresh would
@@ -1457,10 +1468,13 @@ 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).
+  // Active vs resolved toggle (client-side state observerShowResolved).
+  // After "Clear observer state", all active incidents are marked resolved;
+  // by default the UI shows only active. Toggle the pill to see history.
+  const showResolved = (typeof observerShowResolved !== 'undefined') && observerShowResolved;
+  const sourceList = showResolved ? o.resolved_incidents : o.active_incidents;
+
+  // Build the filter index ON THE CURRENT VIEW (active or resolved).
   const serverByOrigin = {};
   o.servers.forEach((srv) => {
     if (srv.port) serverByOrigin[\`localhost:\${srv.port}\`] = srv.label;
@@ -1479,7 +1493,7 @@ function renderObserver() {
     return inc.source || 'other';
   }
   const buckets = {};
-  o.recent_incidents.forEach((inc) => {
+  sourceList.forEach((inc) => {
     const b = incidentBucket(inc);
     if (!buckets[b]) buckets[b] = [];
     buckets[b].push(inc);
@@ -1487,7 +1501,7 @@ function renderObserver() {
   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
+    ? sourceList
     : (buckets[observerFilter] || []);
 
   const filterPill = (label, value, count) => {
@@ -1495,9 +1509,13 @@ function renderObserver() {
     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) +
+  // Show resolved toggle pill — separate from surface filters.
+  const showResolvedClass = showResolved ? 'observer-filter active' : 'observer-filter';
+  const showResolvedPill = \`<button class="\${showResolvedClass}" data-observer-show-resolved="toggle" style="margin-left:auto;">\${showResolved ? 'Showing resolved' : 'Show resolved'}<span class="muted" style="margin-left:6px;font-size:11px;">\${o.resolved_incidents.length}</span></button>\`;
+  const filterPills = '<div class="observer-filters" style="display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:8px 0;">' +
+    filterPill('All', 'all', sourceList.length) +
     surfacesInUse.map((surface) => filterPill(surface, surface, buckets[surface].length)).join('') +
+    showResolvedPill +
     '</div>';
 
   // Incidents feed
@@ -1542,7 +1560,7 @@ function renderObserver() {
     <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>
+    <h3 style="margin-top:18px;font-size:14px;">\${showResolved ? 'Resolved incidents (' + o.resolved_incidents.length + ')' : 'Active incidents (' + o.active_incidents.length + ')'}</h3>
     \${filterPills}
     <div class="card" style="padding:0;">\${incidentsBlock}</div>\`;
 }
@@ -1699,6 +1717,13 @@ document.addEventListener('click', (e) => {
     renderContent();
     return;
   }
+  if (t.dataset && t.dataset.observerShowResolved) {
+    observerShowResolved = !observerShowResolved;
+    // Reset surface filter when toggling, since counts change.
+    observerFilter = 'all';
+    renderContent();
+    return;
+  }
 });
 
 async function clearObserverAction(btn) {

package/package.json

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