@axiomatic-labs/claudeflow 2.13.67 → 2.13.69

package/lib/panel.js

@@ -1031,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;')
@@ -1461,10 +1468,10 @@ 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>';
 
@@ -1518,6 +1525,33 @@ function renderObserver() {
     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>'
@@ -1530,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>
@@ -1540,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>';

package/package.json

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