@axiomatic-labs/claudeflow 2.13.66 → 2.13.68

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
@@ -1020,6 +1031,13 @@ function row(k, v, badge) {
   return \`<div class="card-row"><span class="k">\${escapeHtml(k)}</span><span class="v">\${b}\${escapeHtml(v)}</span></div>\`;
 }
 
+// Same as row() but the value is rendered as raw HTML (caller is responsible
+// for escaping). Use for values that already contain HTML markup (e.g. <code>).
+function rowHtml(k, vHtml, badge) {
+  const b = badge ? \`<span class="badge \${badge.kind}">\${escapeHtml(badge.text)}</span>\` : '';
+  return \`<div class="card-row"><span class="k">\${escapeHtml(k)}</span><span class="v">\${b}\${vHtml}</span></div>\`;
+}
+
 function escapeHtml(s) {
   return String(s == null ? '' : s)
     .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
@@ -1450,17 +1468,20 @@ function renderObserver() {
   // 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))}
+        \${rowHtml('Latest URL', o.browser.latest_url ? '<code>' + escapeHtml(o.browser.latest_url) + '</code>' : '<span class="muted">none</span>')}
+        \${rowHtml('Latest route', o.browser.latest_route ? '<code>' + escapeHtml(o.browser.latest_route) + '</code>' : '<span class="muted">none</span>')}
+        \${rowHtml('Snapshots received', String(o.browser.snapshots_received))}
+        \${rowHtml('Last snapshot', escapeHtml(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>';
 
-  // 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 +1500,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 +1508,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,11 +1516,42 @@ 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>';
 
+  // Match file:line patterns in stack traces (most common formats):
+  //   http://localhost:3001/src/foo.tsx:51:22
+  //   /Users/abs/path.ts:42
+  //   at SomeFn (path:line:col)
+  function extractFileLineHints(text) {
+    if (typeof text !== 'string') return [];
+    const hints = new Set();
+    // localhost source URLs (Vite/CRA dev server)
+    const localRe = /https?:\\/\\/localhost(?::\\d+)?\\/([^\\s:]+?\\.(?:tsx?|jsx?|vue|svelte)):(\\d+)(?::(\\d+))?/g;
+    let m;
+    while ((m = localRe.exec(text)) !== null) {
+      hints.add(\`\${m[1]}:\${m[2]}\${m[3] ? ':' + m[3] : ''}\`);
+      if (hints.size >= 6) break;
+    }
+    // Bare absolute paths
+    const absRe = /\\b(\\/[A-Za-z0-9_./-]+?\\.(?:tsx?|jsx?|vue|svelte)):(\\d+)(?::(\\d+))?/g;
+    while ((m = absRe.exec(text)) !== null) {
+      hints.add(\`\${m[1]}:\${m[2]}\${m[3] ? ':' + m[3] : ''}\`);
+      if (hints.size >= 6) break;
+    }
+    return [...hints];
+  }
+
+  // Server-side detail (recent_log + exit info) lookup per surface label.
+  const serverByLabel = {};
+  o.servers.forEach((srv) => { serverByLabel[srv.label] = srv; });
+
   // Incidents feed
   const incidentsBlock = filteredIncidents.length === 0
     ? '<p class="muted">No incidents in this filter.</p>'
@@ -1512,6 +1564,36 @@ function renderObserver() {
         const surfaceLabel = inc.source === 'server' && inc.metadata && inc.metadata.label
           ? inc.metadata.label
           : inc.surface || inc.source;
+        const fullMsg = inc.message || '';
+        const fileLineHints = extractFileLineHints(fullMsg);
+        // Show first 240 chars by default, collapsible to full message.
+        const PREVIEW_CHARS = 240;
+        const isLong = fullMsg.length > PREVIEW_CHARS;
+        const previewMsg = isLong ? fullMsg.slice(0, PREVIEW_CHARS) + '…' : fullMsg;
+        const fullBlock = isLong
+          ? '<details style="margin-top:4px;"><summary style="cursor:pointer;color:var(--muted);font-size:11px;">Show full message + stack (' + fullMsg.length + ' chars)</summary><pre style="font-size:11px;white-space:pre-wrap;background:var(--panel-2);padding:8px;border-radius:4px;margin:4px 0 0 0;overflow:auto;max-height:400px;">' + escapeHtml(fullMsg) + '</pre></details>'
+          : '';
+        const fileLinesHtml = fileLineHints.length > 0
+          ? '<div class="muted" style="font-size:11px;margin-top:4px;">📄 ' + fileLineHints.map((f) => '<code>' + escapeHtml(f) + '</code>').join(' • ') + '</div>'
+          : '';
+        const urlLine = inc.metadata && inc.metadata.url
+          ? '<div class="muted" style="font-size:11px;margin-top:4px;">🌐 <code>' + escapeHtml(inc.metadata.url) + '</code>' + (inc.metadata.route && inc.metadata.route !== inc.metadata.url ? ' (' + escapeHtml(inc.metadata.route) + ')' : '') + '</div>'
+          : '';
+        // For server incidents, attach recent_log + exit info from the matching server record.
+        let serverDetail = '';
+        if (inc.source === 'server') {
+          const srv = serverByLabel[surfaceLabel];
+          if (srv) {
+            const exitInfo = srv.last_exit_code !== null && srv.last_exit_code !== undefined
+              ? \`<div class="muted" style="font-size:11px;margin-top:4px;">🛑 last exit: code \${srv.last_exit_code}\${srv.last_exit_signal ? ' / signal ' + srv.last_exit_signal : ''} at \${escapeHtml(formatRelativeTime(srv.last_exit_at))}</div>\`
+              : '';
+            const logLines = Array.isArray(srv.recent_log) ? srv.recent_log : [];
+            const logBlock = logLines.length > 0
+              ? '<details style="margin-top:4px;"><summary style="cursor:pointer;color:var(--muted);font-size:11px;">📋 recent_log (' + logLines.length + ' lines from daemon-supervised stdout/stderr)</summary><pre style="font-size:11px;white-space:pre-wrap;background:var(--panel-2);padding:8px;border-radius:4px;margin:4px 0 0 0;overflow:auto;max-height:300px;">' + logLines.slice(-50).map((l) => escapeHtml(typeof l === 'string' ? l : (l.line || JSON.stringify(l)))).join('\\n') + '</pre></details>'
+              : '<div class="muted" style="font-size:11px;margin-top:4px;">📋 No recent_log captured (server is observed_external — daemon only port-probes it, doesn\\'t pipe stdout/stderr). Run the server under the daemon supervisor to capture log lines, or check the dev server\\'s own terminal output.</div>';
+            serverDetail = exitInfo + logBlock;
+          }
+        }
         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>
@@ -1522,8 +1604,11 @@ function renderObserver() {
             \${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 style="font-size:12px;white-space:pre-wrap;">\${escapeHtml(previewMsg)}</div>
+          \${fullBlock}
+          \${fileLinesHtml}
+          \${urlLine}
+          \${serverDetail}
         </div>\`;
       }).join('') +
       '</div>';
@@ -1542,7 +1627,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 +1784,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.68",
   "description": "Claudeflow — AI-powered development toolkit for Claude Code. Skills, agents, hooks, and quality gates that ship production apps.",
   "bin": {
     "claudeflow": "./bin/cli.js"