/* global React, apiFetch, useApiResource, useAuth, useToast, Select */ // MCP Analytics v2 — the "Session Analytics" standalone app. // Renders its own sidebar (with an Armature app switcher) and its // four primary views (Overview, Topics, Searches, Sessions) plus a // thinking-trace drill-down for any session. // // Mounts at /mcp-analytics. Gated by `auth.me.featureFlags.mcpAnalytics`. // app.jsx renders this page in a layoutMode="standalone" branch so the // global Armature sidebar is suppressed and we replace it with the SA // sidebar end-to-end. // // Data: GET /api/mcp-analytics/v2/overview|topics|searches|sessions etc. // See lib/mcp-analytics/queries-v2.js + docs/superpowers/specs/2026-05-27. const { useEffect: useEffectMa, useMemo: useMemoMa, useState: useStateMa, useCallback: useCallbackMa, } = React; const SA_RANGES = ['24h', '7d', '30d', '90d']; // Sessions table pages by growing the request limit. We start at one page // and add a page per "Load more" click, up to the server-side cap in // listSessionsV2 (1000). When fewer than the limit come back, we've hit the // end of the feed for this range/filter. const SA_SESSIONS_PAGE_SIZE = 100; const SA_SESSIONS_MAX = 1000; const SA_NAV = [ { key: 'overview', label: 'Overview', path: 'overview' }, { key: 'topics', label: 'Topics', path: 'topics' }, { key: 'searches', label: 'Searches', path: 'searches' }, { key: 'sessions', label: 'Sessions', path: 'sessions' }, ]; function saNormaliseTab(tab) { return SA_NAV.find((n) => n.key === tab)?.key || 'overview'; } // ──────────────────────────────────────────────────────────────────────── // SIGIL — deterministic 28×28 SVG keyed off the session id hash. The // same id always renders the same shape; gives anonymous sessions a // distinct visual identity in tables and rails. Pure function; no API. // ──────────────────────────────────────────────────────────────────────── function saFnv1aHash(str) { let h = 0x811c9dc5; for (let i = 0; i < str.length; i++) { h ^= str.charCodeAt(i); h = Math.imul(h, 0x01000193) >>> 0; } return h; } const SIGIL_TEMPLATES = [ // 8 templates. Each is a list of tuples on a // 0–28 grid; the picked palette colours map to slot 0 and slot 1. function tpl0(c0, c1) { // split-square return [ { tag: 'rect', x: 0, y: 0, w: 14, h: 14, fill: c0 }, { tag: 'rect', x: 14, y: 14, w: 14, h: 14, fill: c1 }, ]; }, function tpl1(c0, c1) { // ring return [ { tag: 'circle', cx: 14, cy: 14, r: 10, fill: c0 }, { tag: 'circle', cx: 14, cy: 14, r: 4, fill: '#F6F2EF' }, ]; }, function tpl2(c0, c1) { // triangle return [{ tag: 'polygon', points: '0,28 28,28 14,0', fill: c0 }]; }, function tpl3(c0, c1) { // bordered with center square return [ { tag: 'rect', x: 2, y: 2, w: 24, h: 24, fill: 'none', stroke: '#090808', sw: 2 }, { tag: 'rect', x: 10, y: 10, w: 8, h: 8, fill: c1 }, ]; }, function tpl4(c0, c1) { // two horizontal bars return [ { tag: 'rect', x: 0, y: 0, w: 28, h: 9, fill: c0 }, { tag: 'rect', x: 0, y: 19, w: 28, h: 9, fill: c0 }, ]; }, function tpl5(c0, c1) { // diamond return [ { tag: 'polygon', points: '14,0 28,14 14,28 0,14', fill: 'none', stroke: '#090808', sw: 2 }, { tag: 'circle', cx: 14, cy: 14, r: 4, fill: c1 }, ]; }, function tpl6(c0, c1) { // quadrants return [ { tag: 'rect', x: 0, y: 0, w: 9, h: 9, fill: c0 }, { tag: 'rect', x: 19, y: 0, w: 9, h: 9, fill: c1 }, { tag: 'rect', x: 0, y: 19, w: 9, h: 9, fill: c1 }, { tag: 'rect', x: 19, y: 19, w: 9, h: 9, fill: c0 }, ]; }, function tpl7(c0, c1) { // vertical half return [{ tag: 'rect', x: 0, y: 0, w: 14, h: 28, fill: c0 }]; }, ]; const SIGIL_PALETTE = [ ['#090808', '#c8410d'], // ink + brick ['#090808', '#090808'], // ink + ink ['#c8410d', '#090808'], // brick + ink ['#8A5A00', '#090808'], // warn + ink ]; function Sigil({ seed, size = 28 }) { const safeSeed = String(seed || ''); const h = saFnv1aHash(safeSeed); const tplIdx = h % SIGIL_TEMPLATES.length; let palIdx = (h >>> 3) % SIGIL_PALETTE.length; const [c0, c1] = SIGIL_PALETTE[palIdx]; const shapes = SIGIL_TEMPLATES[tplIdx](c0, c1); return ( {shapes.map((s, i) => { if (s.tag === 'rect') { return ; } if (s.tag === 'circle') { return ; } return ; })} ); } function saShortId(sessionId) { if (!sessionId) return 'sess_…'; const clean = String(sessionId).replace(/-/g, ''); if (clean.length <= 8) return `sess_${clean}`; return `sess_${clean.slice(0, 4)}…${clean.slice(-3)}`; } // Friendly label for the MCP client ("harness") behind a session. The // gateway learns the raw clientInfo.name from the `initialize` handshake // (e.g. "claude-ai", "cursor-vscode", "Visual Studio Code"); we map the // ones we recognise to a tidy display name and otherwise show the raw // value. NULL client_name (legacy/unknown sessions) returns null so the // caller can omit the chip rather than render "Unknown" noise inline. const SA_HARNESS_LABELS = { 'claude-ai': 'Claude', 'claude-code': 'Claude Code', claude: 'Claude', cursor: 'Cursor', 'cursor-vscode': 'Cursor', windsurf: 'Windsurf', cline: 'Cline', continue: 'Continue', 'visual studio code': 'VS Code', vscode: 'VS Code', zed: 'Zed', goose: 'Goose', 'mcp-inspector': 'MCP Inspector', }; function saHarnessLabel(clientName) { if (!clientName) return null; const raw = String(clientName).trim(); if (!raw) return null; return SA_HARNESS_LABELS[raw.toLowerCase()] || raw; } // Bookmark glyph for the Save / Saved toggle in the trace top bar. // Outline when idle, solid when saved (filled brick via CSS color). function SaBookmarkIcon({ filled = false, size = 14 }) { return ( ); } function saFormatRelative(iso) { if (!iso) return ''; const t = new Date(iso).getTime(); if (Number.isNaN(t)) return ''; const diffMs = Date.now() - t; const m = Math.floor(diffMs / 60000); if (m < 1) return 'just now'; if (m < 60) return `${m}m ago`; const h = Math.floor(m / 60); if (h < 24) return `${h}h ago`; const d = Math.floor(h / 24); if (d < 30) return `${d}d ago`; return new Date(iso).toLocaleDateString(); } function saFormatNumber(n) { if (n == null) return '–'; return new Intl.NumberFormat('en-US').format(n); } // One-line narrative summary of a topic/use-case row. Reads as // a sentence so a PM doesn't have to interpret a row of numbers. function saTopicNarrative(topic) { const total = (topic.member_count || 0); if (total === 0) return ''; const sessions = total === 1 ? '1 session' : `${saFormatNumber(total)} sessions`; const bits = [sessions]; if (topic.peak_frustration === 'high') bits.push('high frustration'); else if (topic.peak_frustration === 'medium') bits.push('some frustration'); if (topic.last_seen_at && Date.now() - new Date(topic.last_seen_at).getTime() < 24 * 60 * 60 * 1000) { bits.push('seen today'); } return bits.join(' · '); } function saFormatDelta(pct) { if (pct == null) return '—'; if (pct === 0) return '— flat'; const sign = pct > 0 ? '↑' : '↓'; return `${sign} ${Math.abs(pct)}%`; } function saFormatDurationMs(ms) { const n = Number(ms) || 0; if (n <= 0) return '0s'; if (n < 1000) return `${n} ms`; const totalSec = Math.round(n / 1000); if (totalSec < 60) return `${totalSec}s`; const m = Math.floor(totalSec / 60); const s = totalSec % 60; if (m < 60) return s ? `${m}m ${s}s` : `${m}m`; const h = Math.floor(m / 60); return `${h}h ${m % 60}m`; } function saFormatPercent(value) { const n = Number(value); if (!Number.isFinite(n)) return '—'; return `${Math.round(n * 100)}%`; } function saHumanLabel(value) { return String(value || '') .replace(/_/g, ' ') .replace(/\b\w/g, (ch) => ch.toUpperCase()); } function saConfidenceLabel(value) { const n = Number(value); if (!Number.isFinite(n)) return 'Unknown'; if (n >= 0.75) return 'High'; if (n >= 0.45) return 'Medium'; return 'Low'; } // ──────────────────────────────────────────────────────────────────────── // SHELL — sidebar with app switcher + Session Analytics nav // ──────────────────────────────────────────────────────────────────────── function SaAppSwitcher({ navigate, onClose }) { return (
e.stopPropagation()}>
{ onClose(); navigate('/'); }}>
Testing & Benchmarks
RUN WORKFLOWS · COMPARE MCPS
Session Analytics
CODE-MODE MCP TELEMETRY
); } function SaSidebar({ activeKey, navigate, counts = null, mcpServerName = null, profile = null }) { const [switcherOpen, setSwitcherOpen] = useStateMa(false); useEffectMa(() => { if (!switcherOpen) return undefined; function onDoc() { setSwitcherOpen(false); } document.addEventListener('click', onDoc); return () => document.removeEventListener('click', onDoc); }, [switcherOpen]); return ( ); } function SaNavIcon({ name }) { switch (name) { case 'overview': return ( ); case 'topics': return ( ); case 'searches': return ( ); case 'sessions': return ( ); default: return null; } } function SaRangePicker({ range, onChange }) { return (
{SA_RANGES.map((r) => ( ))}
); } function SaToolbar({ title, range, onRangeChange, right = null }) { return (

{title}

{right} {range && ( )}
); } function saBuildQuery(baseQuery = '', additions = {}) { const params = new URLSearchParams(String(baseQuery || '').replace(/^\?/, '')); for (const [key, value] of Object.entries(additions)) { if (value == null || value === '') params.delete(key); else params.set(key, String(value)); } const qs = params.toString(); return qs ? `?${qs}` : ''; } function SaServerFilter({ servers = [], value, onChange, loading = false }) { const serverOptions = servers.map((server) => ({ value: server.id, label: server.name || server.base_url || server.id, })); const selectedServer = value && value !== 'all' && !serverOptions.some((option) => option.value === value) ? [{ value, label: value }] : []; const options = [ { value: 'all', label: 'All MCP servers' }, ...selectedServer, ...serverOptions, ]; return (
MCP server onChange(next)} options={options} ariaLabel="Sort topics" />
); } function SaProvisionalBanner({ label, body }) { return (
{label} {body}
); } function SaSortPills({ value, onChange, options }) { return (
{options.map((o) => ( ))}
); } function SaTopicsBody({ topics, navigate, mcpServerId = null, analyticsQuery = '' }) { const [expandedId, setExpandedId] = useStateMa(null); if (topics.length === 0) { return ; } return (
{topics.map((t, i) => ( setExpandedId(t.id === expandedId ? null : t.id)} navigate={navigate} mcpServerId={mcpServerId} analyticsQuery={analyticsQuery} /> ))}
); } function SaTopicRow({ rank, topic, expanded, onToggle, navigate, mcpServerId = null, analyticsQuery = '', }) { // Promoted topics get an inline detail panel (sample sessions + // stats + related searches). Raw rows have no detail // endpoint, so for them clicking the row navigates straight to the // Sessions table filtered by the exact intent — that's the // actionable thing a PM wants: "show me who's asking this and what // happened in their session". Either way clicking a row gets you // closer to the work, not into a dead end. const isPromoted = !!topic.id && !topic.is_raw; function handleRowClick() { if (isPromoted) { onToggle(); } else { navigate(`/mcp-analytics/sessions${saBuildQuery(analyticsQuery, { intent: topic.label })}`); } } return (
{String(rank).padStart(2, '0')}
{topic.label} {topic.is_unmet_demand && UNMET DEMAND}
{/* Narrative sub-line: human-readable summary of what the * numbers mean. Reads like a sentence so a PM doesn't have * to translate the column data. */}
{saTopicNarrative(topic)}
{topic.description &&
{topic.description}
}
{saFormatNumber(topic.member_count)}
{/* trend sparkline reserved */}
{isPromoted ? '›' : '→'}
{expanded && isPromoted && ( )}
); } function SaFrustCell({ value }) { const v = value || 'low'; return (
{v.toUpperCase()}
); } function SaTopicDetailInline({ topicId, mcpServerId = null, navigate }) { const serverParam = mcpServerId ? `?server=${encodeURIComponent(mcpServerId)}` : ''; const { data, loading, error } = useApiResource( `/api/mcp-analytics/v2/topics/${topicId}${serverParam}`, [topicId, mcpServerId], ); if (loading) return
; if (error) return
; if (!data) return null; return (

Sample intents

{(data.samples || []).map((s) => (
s.session_id && navigate(`/mcp-analytics/sessions/${s.session_id}`)}> {s.intent || '(no intent)'} {saShortId(s.session_id)} · {saFormatRelative(s.started_at)}
))}

Stats

Related searches

{(data.related_searches || []).map((r, i) => (
"{r.query}"{saFormatNumber(r.freq)}
))}
); } function SaKv({ k, v }) { return
{k}{v}
; } // ──────────────────────────────────────────────────────────────────────── // SEARCHES PAGE // ──────────────────────────────────────────────────────────────────────── function SaSearchesPage({ range, onRangeChange, navigate, mcpServerId = null, serverControl = null, analyticsQuery = '', }) { const serverParam = mcpServerId ? `&server=${encodeURIComponent(mcpServerId)}` : ''; const { data, loading, error } = useApiResource( `/api/mcp-analytics/v2/searches?range=${range}${serverParam}`, [range, mcpServerId], ); const [selectedId, setSelectedId] = useStateMa(null); useEffectMa(() => { const clusters = data?.clusters || []; if (!clusters.length) { if (selectedId !== null) setSelectedId(null); return; } if (!selectedId || !clusters.some((cluster) => cluster.id === selectedId)) { setSelectedId(clusters[0].id || null); } }, [data, selectedId]); return ( <>
What is this? Searches your agents ran that came back empty. Some point to a capability you haven't built; others are a tool you already have that the agent couldn't find by the name it searched. Either way it's a fix that makes your MCP easier to use.
{loading && !data ? : error ? : ( )} ); } function SaSearchesBody({ data, range, mcpServerId = null, selectedId, setSelectedId, navigate, analyticsQuery = '', }) { const clusters = data?.clusters || []; const unclustered = data?.unclustered || []; if (clusters.length === 0 && unclustered.length === 0) { return ; } return ( <> {clusters.length > 0 && (
{clusters.map((c, i) => ( setSelectedId(c.id)} /> ))}
{selectedId && ( )}
)} {unclustered.length > 0 && (
Ungrouped misses One row per exact query. The clustering job rolls similar terms together as volume builds; click any row to see the sessions that ran it.
{unclustered.map((c, i) => ( navigate(`/mcp-analytics/sessions${saBuildQuery(analyticsQuery, { search_miss: c.label })}`)} /> ))}
)} ); } function SaClusterRow({ num, cluster, isSelected, onClick = undefined, interactive = true }) { return (
{String(num).padStart(2, '0')}
⚠
{cluster.label}
{cluster.description &&
{cluster.description}
}
{/* Always render this cell (empty when ≤1) so the 6-column grid stays aligned. */}
{cluster.unique_queries > 1 ? `${cluster.unique_queries} QUERIES` : ''}
{cluster.affected_events} SESS
{saFormatNumber(cluster.member_count)}
); } function SaClusterDetail({ clusterId, range, mcpServerId = null, navigate }) { const serverParam = mcpServerId ? `&server=${encodeURIComponent(mcpServerId)}` : ''; const { data, loading, error } = useApiResource( `/api/mcp-analytics/v2/searches/${clusterId}?range=${range}${serverParam}`, [clusterId, range, mcpServerId], ); if (loading) return
; if (error) return
; if (!data) return null; const cl = data.cluster; return (
SEARCH MISS

{cl.label}

{cl.member_count} EMPTY SEARCHES

Searched for

{(data.member_queries || []).map((m, i) => (
"{m.query}"{m.count}
))}

Suggested fix

{(cl.suggested_apis || []).length > 0 ? ( (cl.suggested_apis || []).map((s, i) => (
▌ SUGGESTED ENDPOINT
{s.verb} {s.path}
{s.rationale}
{s.body_shape &&
{s.body_shape}
}
)) ) : ( )}

Sample sessions

{(data.sample_sessions || []).map((s) => (
s.session_id && navigate(`/mcp-analytics/sessions/${s.session_id}`)}>
{s.missed_query &&
searched "{s.missed_query}"
}
{s.intent ? `"${s.intent}"` : 'No declared intent'}
{saFormatRelative(s.started_at).toUpperCase()}
))}
); } // ──────────────────────────────────────────────────────────────────────── // SESSIONS PAGE // ──────────────────────────────────────────────────────────────────────── function SaSessionsPage({ range, onRangeChange, navigate, queryString = '', mcpServerId = null, serverControl = null, }) { const [view, setView] = useStateMa('all'); // The Topics page deep-links here with `?intent=` to // narrow the table to one prompt's sessions. We surface the filter // as a visible chip the user can clear (then the URL also drops the // param so back/forward stays consistent). const intent = useMemoMa(() => { const sp = new URLSearchParams(queryString || ''); return sp.get('intent'); }, [queryString]); // The Gaps page deep-links here with `?search_miss=` to show // the sessions that ran one failed search. Same clearable-chip // treatment as the intent filter. const searchMiss = useMemoMa(() => { const sp = new URLSearchParams(queryString || ''); return sp.get('search_miss'); }, [queryString]); function clearParam(key) { const sp = new URLSearchParams(queryString || ''); sp.delete(key); const qs = sp.toString(); navigate(`/mcp-analytics/sessions${qs ? `?${qs}` : ''}`); } const intentParam = intent ? `&intent=${encodeURIComponent(intent)}` : ''; const searchMissParam = searchMiss ? `&search_miss=${encodeURIComponent(searchMiss)}` : ''; const serverParam = mcpServerId ? `&server=${encodeURIComponent(mcpServerId)}` : ''; // "Load more" grows the limit; useApiResource keeps the prior rows on // screen while the larger page loads, so the feed extends in place. Any // change of range/view/filter is a fresh query — collapse back to page one. const [limit, setLimit] = useStateMa(SA_SESSIONS_PAGE_SIZE); useEffectMa(() => { setLimit(SA_SESSIONS_PAGE_SIZE); }, [range, view, intent, searchMiss, mcpServerId]); const { data, loading, error } = useApiResource( `/api/mcp-analytics/v2/sessions?range=${range}&view=${view}${intentParam}${searchMissParam}${serverParam}&limit=${limit}`, [range, view, intent, searchMiss, mcpServerId, limit], ); const loadedCount = data?.sessions?.length || 0; // A full page back means there may be more; once a short page returns (or // we reach the cap) the feed is exhausted for this view. const canLoadMore = loadedCount >= limit && limit < SA_SESSIONS_MAX; // Clicking "Load more" bumps `limit` past the still-stale `loadedCount`, so // `canLoadMore` flips false for the duration of the fetch and would unmount // the button. Track the in-flight click explicitly so the button stays put // showing "Loading…" until the larger page lands and clears on settle. const [loadingMore, setLoadingMore] = useStateMa(false); useEffectMa(() => { if (!loading) setLoadingMore(false); }, [loading]); return ( <>
What is this? Every conversation your MCP saw, newest first. Click into one to read the agent's reasoning step by step — search, script, upstream calls, results.
{intent && (
Filtered by intent "{intent}"
)} {searchMiss && (
Sessions that searched "{searchMiss}"
)}
{loading && !data ? : error ? : ( <> {(canLoadMore || loadingMore) && (
)} )}
); } function SaSessionsSideRail({ counts, view, onView }) { const c = counts || {}; function row(key, label, dot) { return (
onView(key)}> {dot && }{label} {saFormatNumber(c[key] || 0)}
); } // The "Saved" row is the user's personal list — not just another // filter. Pin it to its own section above the auto-filters with // the bookmark glyph and a brick-tinted card so it reads as "your // stuff", not "another query option". const savedCount = c.flagged || 0; return ( ); } function SaSessionsTable({ sessions, navigate }) { if (sessions.length === 0) { return ; } // Story-row layout. The intent is the headline; the sigil and short // hash are demoted to a corner. The PM scans by JOB, not by id. return (
{sessions.map((s) => ( navigate(`/mcp-analytics/sessions/${s.id}`)} /> ))}
); } // One-line narrative for a session row. Reads as story, not data. function saSessionStoryLine(session) { const calls = session.event_count || 0; const searches = session.search_count || 0; const scripts = Math.max(0, calls - searches); const errs = session.error_count || 0; const bits = []; if (searches > 0) bits.push(`${searches} ${searches === 1 ? 'search' : 'searches'}`); if (scripts > 0) bits.push(`${scripts} ${scripts === 1 ? 'script' : 'scripts'}`); if (errs > 0) bits.push(`${errs} failed`); if (session.peak_frustration === 'high') bits.push('high frustration'); return bits.join(' · '); } function SaSessionStory({ session, onClick }) { const intent = session.primary_intent?.label || session.inferred_user_goal || session.raw_intent || session.intent_summary || null; const harnessLabel = saHarnessLabel(session.client_name); const startedAt = new Date(session.started_at); const duration = session.last_event_at ? Math.round((new Date(session.last_event_at).getTime() - startedAt.getTime()) / 1000) : null; // No per-session sigil: the intent headline is the row's identity. // The session id is kept as a small sub-label for support/sharing. return (
{intent || Session with no declared intent}
{saFormatRelative(session.last_event_at)} {duration != null && · {duration < 60 ? `${duration}s` : `${Math.floor(duration / 60)}m ${duration % 60}s`}} · {saSessionStoryLine(session)} {harnessLabel && {harnessLabel}}
{saShortId(session.id)}
›
); } function SaCallPills({ session }) { const total = session.event_count || 0; // We don't have per-event details in the row; approximate by mixing // search_count and ok/error counts. const searches = session.search_count || 0; const scripts = Math.max(0, total - searches); const errors = session.error_count || 0; const pills = []; for (let i = 0; i < searches && pills.length < 8; i++) { pills.push('search'); } for (let i = 0; i < scripts && pills.length < 8; i++) { pills.push(i < errors ? 'exec-fail' : 'exec'); } return (
{pills.map((p, i) => ( ))} {saFormatNumber(total)}
); } // ──────────────────────────────────────────────────────────────────────── // THINKING TRACE // ──────────────────────────────────────────────────────────────────────── function SaThinkingTracePage({ sessionId, navigate }) { const { data, loading, error, reload } = useApiResource( `/api/mcp-analytics/v2/sessions/${sessionId}/trace`, [sessionId], ); const toast = useToast?.(); async function onFlag() { try { await apiFetch(`/api/mcp-analytics/v2/sessions/${sessionId}/flag`, { method: 'POST', body: JSON.stringify({ flagged: !(data?.session?.is_flagged) }), headers: { 'content-type': 'application/json' }, }); reload(); } catch (err) { if (toast?.show) toast.show({ tone: 'error', message: 'Could not flag session' }); } } return ( <>
{/* Back arrow first — it's the dominant "get me out of here" * affordance. Replaces the old ✕ CLOSE on the right which * read as a destructive close-modal action. */}
{/* Show the inferred intent so the trail describes what * you're looking at, not an opaque hash. */} {(() => { const intent = (data?.events || []).find((e) => e.metadata?.intent)?.metadata?.intent || data?.session?.inferred_user_goal || data?.session?.primary_intent?.label || data?.session?.raw_intent || data?.session?.intent_summary; const text = intent ? `"${intent}"` : saShortId(sessionId); return text.length > 80 ? `${text.slice(0, 78)}…` : text; })()}
{/* Save toggle — writes `flagged_at` on the session row, * which powers the "Saved" filter on the Activity page side * rail. Bookmark glyph fills brick when active so the * current state is unambiguous. */}
{loading && !data ? : error ? : data && ( )} ); } function SaThinkingTraceBody({ data, navigate }) { const s = data.session; const events = data.events || []; const judgement = data.judgement || null; const peakLabel = (s.peak_frustration || '').toUpperCase(); // Session duration: prefer the stored value, but fall back to // last_event_at - started_at because the stored column is updated // only when a session is explicitly ended (`ended_at`). const computedDurationMs = Number(s.duration_ms) > 0 ? Number(s.duration_ms) : (s.last_event_at && s.started_at) ? Math.max(0, new Date(s.last_event_at).getTime() - new Date(s.started_at).getTime()) : 0; // Lead with what the user was trying to do, not the database id. // The first @intent the agent declared in this session — walk // events in order and pick the first non-empty one. (Searches // don't carry @intent, so the title might come from the second // or third event, which is fine.) const firstIntent = (events.find((e) => e.metadata?.intent)?.metadata?.intent) || null; const sessionIntent = firstIntent || s.inferred_user_goal || s.primary_intent?.label || s.raw_intent || s.intent_summary || null; return (
SESSION
{sessionIntent || No declared intent}
{/* Started / duration / events / id live in the right-rail * Session card now — repeating them here was just noise. */}
{judgement && } {peakLabel && PEAK: {peakLabel}}
{s.inferred_user_goal && ( )} {events.map((ev, idx) => ( 0 ? events[idx - 1] : null} sessionStart={s.started_at} /> ))}
); } function SaThoughtEvent({ label, meta = null, text, timestamp, contextStr = null, frustration = null }) { // Context is the narrative ("WHY the agent is doing this") and // changes per step. Intent ("WHAT") is typically a short label // that repeats. Lead with context — fall back to intent only // when no context was declared. const headline = contextStr || text; const showIntentLine = !!contextStr && !!text && text !== contextStr; return (
{timestamp ? new Date(timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false }) : ''}
{label} {meta && {meta}}
"{headline}"
{(showIntentLine || frustration) && (
{showIntentLine && (<>Intent{text})} {frustration && (<> Frustration {frustration.toUpperCase()} )}
)}
); } function SaTraceEvent({ event, prev, sessionStart }) { if (event.kind === 'search_sdk_standalone') { return ; } // Work events emit any embedded search_calls first, then the declared context, // then the concrete tool card. return ( <> {(event.search_calls || []).map((sc, i) => ( ))} {(event.metadata?.intent || event.metadata?.context) && ( )} {event.kind === 'tool_call' ? : } ); } function SaSearchEvent({ event, sessionStart = null, prev = null }) { void sessionStart; void prev; const sc = (event.search_calls || [])[0] || {}; const isMiss = !!sc.is_miss || (event.metadata?.is_miss === true); return (
{new Date(event.started_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false })}
SEARCH_SDK "{sc.query || event.metadata?.query || '(unknown)'}" {isMiss ? '⚠ 0 MATCHES' : `${sc.match_count || 0} MATCHES`}
); } function SaSearchInline({ sc, when = null }) { void when; const isMiss = !!sc.is_miss; return (
SEARCH_SDK "{sc.query}" {isMiss ? '⚠ 0 MATCHES' : `${sc.match_count || 0} MATCHES`}
); } // Single collapsible section inside an execute_script card. All four // detail blocks (script source, upstream calls, result, error) use // the same toggle pattern so the card reads as one stack of "click // to see" rows. Collapsed by default — the @context above already // tells you WHY; these blocks are for when you want the receipts. function SaTraceCollapse({ openLabel, closedLabel, meta = null, tone = 'default', defaultOpen = false, children }) { const [open, setOpen] = useStateMa(defaultOpen); return (
{open &&
{children}
}
); } function SaExecuteEvent({ event }) { const ok = event.ok && !event.error_text; const calls = event.calls || []; const maxDur = Math.max(1, ...calls.map((c) => c.duration_ms || 0)); const scriptLineCount = event.script_source ? event.script_source.split('\n').length : 0; const resultSize = event.result_preview ? event.result_preview.length : 0; const okCalls = calls.filter((c) => c.status >= 200 && c.status < 400).length; const errCalls = calls.length - okCalls; return (
{new Date(event.started_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false })}
EXECUTE_SCRIPT {calls.length} API CALLS {event.duration_ms ?? 0} MS {ok ? 'OK' : 'FAILED'}
{event.script_source && ( 
{event.script_source}
 )} {calls.length > 0 && ( 0 ? `${calls.length} · ${errCalls} failed` : `${calls.length}`}>
{calls.map((c, i) => (
{(c.shape || '').split(' ')[0] || c.method || '?'} {(c.shape || '').split(' ').slice(1).join(' ') || c.operation_id || '?'} {c.duration_ms || 0} ms = 200 && c.status < 400) ? 'ok' : 'bad'}`}>{c.status || '—'}
))}
)} {event.result_preview && (
{event.result_preview.slice(0, 600)}
 )} {event.error_text && (
{event.error_text}
 )}
); } function saToolCallLabel(event) { const raw = event.metadata?.tool_name || 'tool_call'; const label = String(raw) .trim() .replace(/[^a-zA-Z0-9]+/g, '_') .replace(/^_+|_+$/g, '') .toUpperCase(); return label || 'TOOL_CALL'; } function SaToolCallEvent({ event }) { const ok = event.ok && !event.error_text; const calls = event.calls || []; const maxDur = Math.max(1, ...calls.map((c) => c.duration_ms || 0)); const inputPreview = event.metadata?.input_preview || event.script_source || null; const inputSize = inputPreview ? String(inputPreview).length : 0; const resultSize = event.result_preview ? event.result_preview.length : 0; const okCalls = calls.filter((c) => c.status >= 200 && c.status < 400).length; const errCalls = calls.length - okCalls; return (
{new Date(event.started_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false })}
{saToolCallLabel(event)} {calls.length > 0 && {calls.length} API CALLS} {event.duration_ms ?? 0} MS {ok ? 'OK' : 'FAILED'}
{inputPreview && ( 
{String(inputPreview)}
 )} {calls.length > 0 && ( 0 ? `${calls.length} · ${errCalls} failed` : `${calls.length}`}>
{calls.map((c, i) => (
{(c.shape || '').split(' ')[0] || c.method || '?'} {(c.shape || '').split(' ').slice(1).join(' ') || c.operation_id || '?'} {c.duration_ms || 0} ms = 200 && c.status < 400) ? 'ok' : 'bad'}`}>{c.status || '-'}
))}
)} {event.result_preview && (
{event.result_preview.slice(0, 600)}
 )} {event.error_text && (
{event.error_text}
 )}
); } function SaOutcomePill({ judgement }) { const outcome = String(judgement?.outcome_label || '').toUpperCase(); const tone = judgement?.outcome_label === 'success' ? 'ok' : judgement?.outcome_label === 'partial' ? 'warn' : 'bad'; return ( {outcome} {saFormatPercent(judgement?.success_score)} ); } function SaTraceSidebar({ session, judgement = null, events = [], sessionId, navigate }) { const { data: similar } = useApiResource(`/api/mcp-analytics/v2/sessions/${sessionId}/similar`, [sessionId]); const harnessLabel = saHarnessLabel(session.client_name); const clientValue = harnessLabel ? `${harnessLabel}${session.client_version ? ` ${session.client_version}` : ''}` : 'Unknown'; return ( <> {judgement ? : }
Session
0 ? Number(session.duration_ms) : (session.last_event_at && session.started_at) ? Math.max(0, new Date(session.last_event_at).getTime() - new Date(session.started_at).getTime()) : 0 )} />
{similar?.sessions?.length > 0 && (
Similar sessions
{similar.sessions.map((rel) => (
navigate(`/mcp-analytics/sessions/${rel.id}`)}>
{saFormatRelative(rel.started_at).toUpperCase()} · {rel.event_count} EVENTS
"{rel.first_intent || '(no intent)'}"
{(rel.error_count || 0) > 0 ? '⚠ ERRORS' : 'OK'}
))}
)} ); } function SaOutcomePendingCard() { return (
Outcome
No completed session judgement exists for this trace yet.
); } function saEventEvidenceLabel(event) { if (!event) return 'Event'; const time = event.started_at ? new Date(event.started_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false }) : ''; let label = ''; if (event.kind === 'search_sdk_standalone') { const search = (event.search_calls || [])[0] || {}; label = search.query || event.metadata?.query || 'Search SDK'; } else if (event.kind === 'tool_call') { label = saToolCallLabel(event).replace(/_/g, ' '); } else { label = 'Execute script'; } return [time, saHumanLabel(label)].filter(Boolean).join(' '); } function saEventEvidenceTitle(event) { if (!event) return 'Scroll to evidence event'; const context = event.metadata?.context || event.metadata?.intent || ''; if (context) return context; if (event.error_text) return event.error_text; return 'Scroll to evidence event'; } function SaOutcomeCard({ judgement, events }) { const eventById = new Map((events || []).map((event) => [event.id, event])); const evidence = (judgement.evidence_event_ids || []) .map((id) => eventById.get(id)) .filter(Boolean); const tools = judgement.tool_involvement || {}; const toolSummary = `${tools.work_event_count ?? 0} events · ${tools.upstream_api_call_count ?? 0} API calls · ${tools.upstream_api_failure_count ?? 0} failed`; const failureLabels = judgement.failure_reason_labels || []; const frictionLabels = judgement.friction_labels || []; function scrollToEvent(id) { const el = document.getElementById(`sa-event-${id}`); if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' }); } return (
Outcome
{failureLabels.length > 0 && (
Failures
{failureLabels.map((label) => {saHumanLabel(label)})}
)} {frictionLabels.length > 0 && (
Friction
{frictionLabels.map((label) => {saHumanLabel(label)})}
)} {judgement.summary &&
{judgement.summary}
} {evidence.length > 0 && (
Evidence
{evidence.map((event) => ( ))}
)}
); } // ──────────────────────────────────────────────────────────────────────── // ROOT — McpAnalyticsPage (rendered by app.jsx) // ──────────────────────────────────────────────────────────────────────── function McpAnalyticsPage({ navigate, queryString = '', tab, sessionId }) { const auth = useAuth?.() || {}; const query = useMemoMa(() => new URLSearchParams(queryString || ''), [queryString]); const range = useMemoMa(() => { const r = query.get('range'); return SA_RANGES.includes(r) ? r : '7d'; }, [query]); const selectedServerId = useMemoMa(() => { const server = query.get('server') || query.get('mcp_server_id'); return server && server !== 'all' ? server : 'all'; }, [query]); const activeKey = sessionId ? 'sessions' : saNormaliseTab(tab); const serversResource = useApiResource('/api/mcp-analytics/servers'); const serverControl = ( { const params = new URLSearchParams(queryString); params.delete('mcp_server_id'); if (nextServer && nextServer !== 'all') params.set('server', nextServer); else params.delete('server'); const qs = params.toString(); navigate(`/mcp-analytics/${activeKey}${qs ? `?${qs}` : ''}`); }} /> ); const analyticsQuery = useMemoMa(() => { const params = new URLSearchParams(); const explicitRange = query.get('range'); if (SA_RANGES.includes(explicitRange)) params.set('range', explicitRange); if (selectedServerId !== 'all') params.set('server', selectedServerId); const qs = params.toString(); return qs ? `?${qs}` : ''; }, [query, selectedServerId]); const mcpServerId = selectedServerId === 'all' ? null : selectedServerId; const setRange = useCallbackMa((nextRange) => { const params = new URLSearchParams(queryString); params.set('range', nextRange); navigate(`/mcp-analytics/${activeKey}${params.toString() ? `?${params.toString()}` : ''}`); }, [navigate, queryString, activeKey]); let page; if (sessionId) { page = ; } else if (activeKey === 'topics') { page = ( ); } else if (activeKey === 'searches') { page = ( ); } else if (activeKey === 'sessions') { page = ( ); } else { page = ( ); } // Session Analytics shares the global Armature shell (sidebar lives // in shell.jsx, app-grouped). The page renders straight into the // shell's .main > .page slot — the `sa-page` class scopes the v2 // brutalist treatment to this surface only. return
{page}
; } // Expose globally for the Babel/script-tag loader. window.McpAnalyticsPage = McpAnalyticsPage; window.Sigil = Sigil;