botmux 2.107.0 → 2.108.0

package/dist/dashboard/web/insights-page.js

@@ -1,24 +1,1057 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { useT } from './react-hooks.js';
 import { mountReactPage } from './react-mount.js';
-import { initialInsightTab, renderDetailShell, renderTabBar, TIME_WINDOWS, wireInsightsPage, } from './insights.js';
-function Html(props) {
-    return _jsx("span", { style: { display: 'contents' }, dangerouslySetInnerHTML: { __html: props.html } });
+import { botDisplayName, loadNameMaps, relTime, t } from './ui.js';
+import { DropdownMenu, LoadingState, RefreshIconButton } from './dashboard-components.js';
+import { BAD_RESULTS, CONVO_ROLES, CONVO_TAGS, FLOW_PHASES, INSIGHT_FILTERS, INSIGHT_TABS, SESS_SORT_KEYS, SESS_SORTS, SEVERITY_RANK, SPAN_TAGS, TIME_WINDOWS, agentMsOf, aggregateRecords, buildInsightScope, buildInsightsHash, cleanPromptText, cliIdOf, cliCounts, fetchInsightConversation, fetchInsightDetail, fetchInsightsSummary, fetchTurnPrompt, filterRecords, fmtInt, fmtMs, focusSets, groupConvo, idText, initialInsightTab, intentPhrase, intentText, intentTextOf, median, newConvoState, okReports, parseInsightsHash, phaseClass, phaseLabel, phaseSlug, projectOf, projectOptions, promptMarkdownHtml, reportNeedsReview, resultLabel, safeStatus, sessionMetaLine, sessionTitle, severityLabel, sortRecordsBy, spanFailed, statusIcon, structLabel, suggestionTitle, tagLabel, toRecord, turnAdvice, turnHeadline, turnMainPhase, turnSenderKind, } from './insights.js';
+const CLI_FILTER_ALL = '__all__';
+function clamp(n, min, max) {
+    return Math.min(Math.max(n, min), max);
+}
+function paletteAnchorFromButton(button) {
+    const rect = button.getBoundingClientRect();
+    const margin = 12;
+    const width = Math.min(420, Math.max(280, window.innerWidth - margin * 2));
+    const left = clamp(Math.round(rect.left + rect.width / 2 - width / 2), margin, Math.max(margin, window.innerWidth - width - margin));
+    const naturalTop = Math.round(rect.bottom + 8);
+    const top = clamp(naturalTop, margin, Math.max(margin, window.innerHeight - 132));
+    const maxHeight = Math.max(140, Math.floor(window.innerHeight - top - margin));
+    return { top, left, width, maxHeight };
+}
+function toggleSet(set, value) {
+    const next = new Set(set);
+    if (next.has(value))
+        next.delete(value);
+    else
+        next.add(value);
+    return next;
+}
+function addToSet(set, value) {
+    const next = new Set(set);
+    next.add(value);
+    return next;
+}
+function MarkdownBody({ text, className = 'md-body' }) {
+    return _jsx("div", { className: className, dangerouslySetInnerHTML: { __html: promptMarkdownHtml(text) } });
+}
+function Tooltip({ tip }) {
+    return (_jsx("div", { id: "insight-tip", className: "ins-tip", role: "tooltip", hidden: !tip.visible, style: { left: tip.x, top: tip.y }, children: tip.text }));
+}
+function MetricCard({ label, value, sub }) {
+    return (_jsxs("div", { className: "card", children: [_jsx("div", { className: "cv", children: value }), _jsx("div", { className: "cl", children: label }), sub ? _jsx("div", { className: "cs", children: sub }) : null] }));
+}
+function DisclosureNote() {
+    return _jsxs("p", { className: "insight-disclosure", children: ["\u2696\uFE0E ", t('insights.disclosure')] });
+}
+function PhaseMixBar({ phase }) {
+    const entries = Object.entries(phase ?? {}).filter(([, v]) => v.count > 0 || v.ms > 0);
+    if (!entries.length)
+        return null;
+    return (_jsx("div", { className: "mph", children: entries.map(([ph, v]) => {
+            const weight = Math.max(1, v.ms || v.count);
+            return (_jsx("i", { className: phaseClass(ph), style: { flex: weight }, title: `${phaseLabel(ph)} · ${v.count} · ${fmtMs(v.ms)}` }, ph));
+        }) }));
+}
+function InsightTabs({ active, onChange }) {
+    return (_jsx("div", { className: "insight-tabs", role: "tablist", children: INSIGHT_TABS.map(tb => (_jsx("button", { type: "button", className: `itab${tb.key === active ? ' on' : ''}`, role: "tab", "aria-selected": tb.key === active, onClick: () => onChange(tb.key), children: t(tb.label) }, tb.key))) }));
+}
+function OverviewContent({ data }) {
+    const a = data.agg;
+    const rw = a.readWriteRatio === null ? '-' : a.readWriteRatio.toFixed(1);
+    const topTools = data.topFailedTools.slice(0, 5);
+    const topSuggestions = [...data.suggestions]
+        .sort((x, y) => SEVERITY_RANK[x.severity] - SEVERITY_RANK[y.severity] || y.count - x.count)
+        .slice(0, 6);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "cards insights-metrics", children: [_jsx(MetricCard, { label: t('insights.metricSessions'), value: fmtInt(data.totalCount), sub: t('insights.metricAnalyzed', { count: data.analyzedCount }) }), _jsx(MetricCard, { label: t('insights.metricSpans'), value: fmtInt(a.totalSpans), sub: t('insights.metricSafe') }), _jsx(MetricCard, { label: t('insights.metricFailed'), value: fmtInt(a.failedSpans), sub: topTools[0] ? `${topTools[0].tool} ×${topTools[0].count}` : '' }), _jsx(MetricCard, { label: t('insights.metricSlow'), value: fmtInt(a.slowSpans) }), _jsx(MetricCard, { label: t('insights.metricRw'), value: rw, sub: t('insights.metricCompactions', { count: a.compactions }) })] }), _jsxs("div", { className: "insights-overview-grid", children: [_jsxs("section", { className: "block recblock", children: [_jsx("h3", { children: t('insights.recommendations') }), _jsx("div", { className: "reclist", children: topSuggestions.length ? topSuggestions.map(item => (_jsxs("div", { className: `rec ${item.severity}`, children: [_jsxs("div", { className: "rectop", children: [_jsx("b", { children: suggestionTitle(item) }), _jsx("span", { children: severityLabel(item.severity) })] }), _jsx("div", { className: "recev", children: t('insights.seenInSessions', { count: item.count }) })] }, item.id))) : _jsx("p", { className: "mut", children: t('insights.noRecommendations') }) })] }), _jsxs("section", { className: "block", children: [_jsx("h3", { children: t('insights.toolFailures') }), _jsx(HBarList, { rows: topTools.map(tt => ({ key: tt.tool, label: tt.tool, count: tt.count })), empty: t('insights.noFailures') })] })] }), _jsx(DisclosureNote, {})] }));
+}
+function HBarList({ rows, empty, renderValue, onRowClick }) {
+    if (!rows.length)
+        return _jsx("div", { className: "hbars", children: _jsx("p", { className: "mut", children: empty }) });
+    const max = Math.max(1, ...rows.map(r => r.count));
+    return (_jsx("div", { className: "hbars", children: rows.map(row => {
+            const pct = Math.max(row.count ? 4 : 0, Math.round((row.count / max) * 100));
+            const content = (_jsxs(_Fragment, { children: [_jsx("div", { className: "hblabel", title: row.label, children: row.label }), _jsx("div", { className: "hbtrack", children: _jsx("div", { className: "hbfill", style: { width: `${pct}%` } }) }), _jsxs("div", { className: "hbval", children: [renderValue ? renderValue(row) : fmtInt(row.count), row.sub] })] }));
+            return onRowClick ? (_jsx("button", { type: "button", className: "hbrow hbrow-click", onClick: () => onRowClick(row), children: content }, row.key)) : (_jsx("div", { className: "hbrow", children: content }, row.key));
+        }) }));
+}
+function Trend({ records }) {
+    const days = 28;
+    const dayMs = 86400000;
+    const now = Date.now();
+    const counts = new Array(days).fill(0);
+    for (const rec of records) {
+        const ts = Number(rec.session.lastMessageAt ?? 0);
+        if (!ts)
+            continue;
+        const age = Math.floor((now - ts) / dayMs);
+        if (age >= 0 && age < days)
+            counts[days - 1 - age] += 1;
+    }
+    const total = counts.reduce((a, b) => a + b, 0);
+    if (!total)
+        return null;
+    const max = Math.max(1, ...counts);
+    return (_jsxs("section", { className: "block trend-block", children: [_jsxs("div", { className: "ihist-head", children: [_jsx("h3", { children: t('insights.distTrend') }), _jsxs("span", { className: "mut", children: [t('insights.distTrendSub'), " \u00B7 ", total] })] }), _jsx("div", { className: "trend", children: counts.map((c, j) => {
+                    const d = new Date(now - (days - 1 - j) * dayMs);
+                    const label = `${d.getMonth() + 1}-${d.getDate()} · ${c}`;
+                    return _jsx("i", { className: "trendbar", style: { height: `${c ? Math.max(8, Math.round((c / max) * 100)) : 2}%` }, title: label }, j);
+                }) })] }));
+}
+function Histogram({ title, values, bins, fmtMedian = fmtInt, sortKey, onSort }) {
+    const counts = bins.map(b => ({ label: b.label, count: values.filter(b.test).length }));
+    const max = Math.max(1, ...counts.map(c => c.count));
+    const total = Math.max(1, values.length);
+    return (_jsxs("section", { className: "block ihist", children: [_jsxs("div", { className: "ihist-head", children: [_jsx("h3", { children: title }), _jsx("span", { className: "mut", children: t('insights.distMedian', { v: fmtMedian(median(values)) }) }), sortKey ? _jsxs("button", { type: "button", className: "ihist-jump", onClick: () => onSort?.(sortKey), children: [t('insights.viewSessions'), " \u203A"] }) : null] }), _jsx("div", { className: "hbars", children: counts.map(c => {
+                    const pct = Math.max(c.count ? 4 : 0, Math.round((c.count / max) * 100));
+                    const share = Math.round((c.count / total) * 100);
+                    return (_jsxs("div", { className: "hbrow", children: [_jsx("div", { className: "hblabel", children: c.label }), _jsx("div", { className: "hbtrack", children: _jsx("div", { className: "hbfill", style: { width: `${pct}%` } }) }), _jsxs("div", { className: "hbval", children: [fmtInt(c.count), _jsxs("small", { children: [share, "%"] })] })] }, c.label));
+                }) })] }));
+}
+function Distribution({ records, onSort }) {
+    const reports = okReports(records);
+    if (!reports.length)
+        return _jsx("div", { className: "insight-empty", children: t('insights.distEmpty') });
+    const churn = reports.map(r => (r.hot?.files ?? []).reduce((s, f) => s + (f.added ?? 0) + (f.removed ?? 0), 0));
+    const spans = reports.map(r => r.agg.totalSpans);
+    const failed = reports.map(r => r.agg.failedSpans);
+    const slow = reports.map(r => r.agg.slowSpans);
+    const agentMin = reports.map(r => agentMsOf(r) / 60000);
+    const rw = reports.map(r => r.agg.readWriteRatio).filter((v) => v !== null && Number.isFinite(v));
+    return (_jsxs(_Fragment, { children: [_jsx("p", { className: "mut ins-hint", children: t('insights.distHint') }), _jsxs("div", { className: "ihist-grid", children: [_jsx(Trend, { records: records }), _jsx(Histogram, { title: t('insights.distSpans'), values: spans, onSort: onSort, sortKey: "spans", bins: [
+                            { label: '0-10', test: v => v <= 10 },
+                            { label: '11-50', test: v => v > 10 && v <= 50 },
+                            { label: '51-200', test: v => v > 50 && v <= 200 },
+                            { label: '201-500', test: v => v > 200 && v <= 500 },
+                            { label: '500+', test: v => v > 500 },
+                        ] }), _jsx(Histogram, { title: t('insights.distFailed'), values: failed, onSort: onSort, sortKey: "fails", bins: [
+                            { label: '0', test: v => v === 0 },
+                            { label: '1-2', test: v => v >= 1 && v <= 2 },
+                            { label: '3-5', test: v => v >= 3 && v <= 5 },
+                            { label: '6-10', test: v => v >= 6 && v <= 10 },
+                            { label: '10+', test: v => v > 10 },
+                        ] }), _jsx(Histogram, { title: t('insights.distSlow'), values: slow, onSort: onSort, sortKey: "slow", bins: [
+                            { label: '0', test: v => v === 0 },
+                            { label: '1-2', test: v => v >= 1 && v <= 2 },
+                            { label: '3-5', test: v => v >= 3 && v <= 5 },
+                            { label: '5+', test: v => v > 5 },
+                        ] }), _jsx(Histogram, { title: t('insights.distAgentTime'), values: agentMin, onSort: onSort, sortKey: "agent", fmtMedian: n => `${Math.round(n)}m`, bins: [
+                            { label: '<1m', test: v => v < 1 },
+                            { label: '1-5m', test: v => v >= 1 && v < 5 },
+                            { label: '5-30m', test: v => v >= 5 && v < 30 },
+                            { label: '30m-2h', test: v => v >= 30 && v < 120 },
+                            { label: '2h+', test: v => v >= 120 },
+                        ] }), rw.length ? (_jsx(Histogram, { title: t('insights.distRw'), values: rw, fmtMedian: n => n.toFixed(1), bins: [
+                            { label: '0', test: v => v === 0 },
+                            { label: '0-1', test: v => v > 0 && v < 1 },
+                            { label: '1-3', test: v => v >= 1 && v < 3 },
+                            { label: '3+', test: v => v >= 3 },
+                        ] })) : null, _jsx(Histogram, { title: t('insights.distChurn'), values: churn, bins: [
+                            { label: '0', test: v => v === 0 },
+                            { label: '1-100', test: v => v > 0 && v <= 100 },
+                            { label: '100-1k', test: v => v > 100 && v <= 1000 },
+                            { label: '1k-10k', test: v => v > 1000 && v <= 10000 },
+                            { label: '10k+', test: v => v > 10000 },
+                        ] })] }), _jsx(DisclosureNote, {})] }));
+}
+function Flow({ records, onSession }) {
+    const ok = records.filter(r => r.report && r.report.status === 'ok' && r.report.agg);
+    if (!ok.length)
+        return _jsx("div", { className: "insight-empty", children: t('insights.distEmpty') });
+    const tot = {};
+    for (const p of FLOW_PHASES)
+        tot[p] = { count: 0, ms: 0 };
+    for (const rec of ok)
+        for (const p of FLOW_PHASES) {
+            const v = rec.report.agg.phase?.[p];
+            if (v) {
+                tot[p].count += v.count;
+                tot[p].ms += v.ms;
+            }
+        }
+    const totCount = FLOW_PHASES.reduce((s, p) => s + tot[p].count, 0) || 1;
+    const totMs = FLOW_PHASES.reduce((s, p) => s + tot[p].ms, 0) || 1;
+    const rhythm = [...ok].sort((a, b) => agentMsOf(b.report) - agentMsOf(a.report)).slice(0, 40);
+    return (_jsxs(_Fragment, { children: [_jsx("p", { className: "mut ins-hint", children: t('insights.flowHint') }), _jsxs("section", { className: "block flow-pipe-block", children: [_jsx("h3", { children: t('insights.flowPipeline') }), _jsx("p", { className: "mut flow-sub", children: t('insights.flowPipeSub') }), _jsx("div", { className: "flow-pipe", children: FLOW_PHASES.map((p, i) => {
+                            const v = tot[p];
+                            const cPct = Math.round((v.count / totCount) * 100);
+                            const tPct = Math.round((v.ms / totMs) * 100);
+                            return (_jsxs("span", { style: { display: 'contents' }, children: [_jsxs("div", { className: "flow-node", children: [_jsx("i", { className: `flow-dot ${phaseClass(p)}` }), _jsx("strong", { children: phaseLabel(p) }), _jsxs("span", { className: "flow-n", children: [fmtInt(v.count), _jsxs("em", { children: [" \u00B7 ", cPct, "%"] })] }), _jsxs("span", { className: "flow-t", children: [fmtMs(v.ms), _jsxs("em", { children: [" \u00B7 ", tPct, "%"] })] })] }), i < FLOW_PHASES.length - 1 ? _jsx("span", { className: "flow-arrow", children: "\u2192" }) : null] }, p));
+                        }) })] }), _jsxs("div", { className: "insights-overview-grid", children: [_jsxs("section", { className: "block", children: [_jsx("h3", { children: t('insights.flowShares') }), _jsxs("div", { className: "flow-bhead", children: [_jsx("span", {}), _jsx("span", { children: t('insights.flowActShare') }), _jsx("span", { children: t('insights.flowTimeShare') })] }), _jsx("div", { className: "flow-bars", children: FLOW_PHASES.map(p => {
+                                    const v = tot[p];
+                                    const cPct = (v.count / totCount) * 100;
+                                    const tPct = (v.ms / totMs) * 100;
+                                    return (_jsxs("div", { className: "flow-brow", children: [_jsxs("span", { className: "flow-blabel", children: [_jsx("i", { className: phaseClass(p) }), phaseLabel(p)] }), _jsxs("span", { className: "flow-btrack", children: [_jsx("span", { className: `flow-bfill ${phaseClass(p)}`, style: { width: `${Math.max(2, cPct).toFixed(1)}%` } }), _jsxs("em", { children: [Math.round(cPct), "%"] })] }), _jsxs("span", { className: "flow-btrack", children: [_jsx("span", { className: `flow-bfill ${phaseClass(p)}`, style: { width: `${Math.max(2, tPct).toFixed(1)}%` } }), _jsxs("em", { children: [Math.round(tPct), "%"] })] })] }, p));
+                                }) })] }), _jsxs("section", { className: "block", children: [_jsx("h3", { children: t('insights.flowRhythm') }), _jsx("div", { className: "flow-rhythm", children: rhythm.map(rec => (_jsxs("button", { type: "button", className: "flow-sess", onClick: () => onSession(String(rec.session.sessionId)), children: [_jsx("span", { className: "flow-stitle", children: sessionTitle(rec.session) }), _jsx(PhaseMixBar, { phase: rec.report.agg.phase }), _jsx("span", { className: "flow-stime", children: fmtMs(agentMsOf(rec.report)) })] }, String(rec.session.sessionId)))) }), _jsx("div", { className: "rl-legend", children: FLOW_PHASES.map(p => _jsxs("span", { className: "rl-item", children: [_jsx("i", { className: phaseClass(p) }), phaseLabel(p)] }, p)) })] })] }), _jsx(DisclosureNote, {})] }));
+}
+function Hotspots({ records, openHot, onToggleHot, onProject, onSession }) {
+    const reports = records.filter(r => !!r.report && r.report.status === 'ok');
+    if (!reports.length)
+        return _jsx("div", { className: "insight-empty", children: t('insights.distEmpty') });
+    const fileAgg = new Map();
+    const cmdAgg = new Map();
+    const errAgg = new Map();
+    const bump = (m, key, label, sid, title) => {
+        let h = m.get(key);
+        if (!h) {
+            h = { key, label, sessions: [], reads: 0, edits: 0, runs: 0, fails: 0, count: 0 };
+            m.set(key, h);
+        }
+        if (!h.sessions.some(s => s.id === sid))
+            h.sessions.push({ id: sid, title });
+        return h;
+    };
+    for (const rec of reports) {
+        const sid = String(rec.session.sessionId);
+        const title = sessionTitle(rec.session);
+        const hot = rec.report.hot;
+        for (const f of hot?.files ?? []) {
+            const h = bump(fileAgg, `file:${f.path}`, f.path, sid, title);
+            h.reads += f.reads;
+            h.edits += f.edits;
+        }
+        for (const c of hot?.cmds ?? []) {
+            const h = bump(cmdAgg, `cmd:${c.cmd}`, c.cmd, sid, title);
+            h.runs += c.runs;
+            h.fails += c.fails;
+        }
+        for (const e of hot?.errs ?? []) {
+            const h = bump(errAgg, `err:${e.tool} ${e.result}`, `${e.tool} · ${resultLabel(e.result)}`, sid, title);
+            h.count += e.count;
+        }
+    }
+    const recur = (a, b) => b.sessions.length - a.sessions.length;
+    const files = [...fileAgg.values()].sort((a, b) => recur(a, b) || (b.edits + b.reads) - (a.edits + a.reads)).slice(0, 12);
+    const cmds = [...cmdAgg.values()].sort((a, b) => recur(a, b) || b.fails - a.fails || b.runs - a.runs).slice(0, 12);
+    const errs = [...errAgg.values()].sort((a, b) => recur(a, b) || b.count - a.count).slice(0, 10);
+    const projMap = new Map();
+    for (const rec of reports) {
+        const p = projectOf(rec);
+        if (!p)
+            continue;
+        const e = projMap.get(p) ?? { sessions: 0, fails: 0 };
+        e.sessions += 1;
+        e.fails += rec.report.agg.failedSpans;
+        projMap.set(p, e);
+    }
+    const projects = [...projMap.entries()].map(([id, v]) => ({ id, ...v })).sort((a, b) => b.fails - a.fails || b.sessions - a.sessions).slice(0, 10);
+    const projRows = projects.map(x => ({ key: x.id, label: x.id, count: x.sessions, sub: _jsxs("small", { children: [x.fails, " ", t('insights.hotFailsCol')] }) }));
+    const slowSessions = [...reports].filter(r => r.report.agg.slowSpans > 0).sort((a, b) => b.report.agg.slowSpans - a.report.agg.slowSpans).slice(0, 8);
+    return (_jsxs(_Fragment, { children: [_jsx("p", { className: "mut ins-hint", children: t('insights.hotHint') }), _jsxs("div", { className: "hot-grid", children: [_jsx(HotBlock, { title: t('insights.hotFiles'), rows: files, openHot: openHot, onToggle: onToggleHot, onSession: onSession, meta: h => `${t('insights.readsShort')}${h.reads} · ${t('insights.editsShort')}${h.edits}` }), _jsx(HotBlock, { title: t('insights.hotCommands'), rows: cmds, openHot: openHot, onToggle: onToggleHot, onSession: onSession, meta: h => _jsxs(_Fragment, { children: [h.runs, "\u00D7", h.fails ? _jsxs(_Fragment, { children: [" \u00B7 ", _jsxs("span", { className: "bad", children: [h.fails, " ", t('insights.hotFailsCol')] })] }) : null] }) }), _jsx(HotBlock, { title: t('insights.hotErrors'), rows: errs, openHot: openHot, onToggle: onToggleHot, onSession: onSession, meta: h => `${h.count}×` }), _jsxs("section", { className: "block", children: [_jsx("h3", { children: t('insights.hotProjects') }), _jsx(HBarList, { rows: projRows, empty: "-", onRowClick: row => onProject(row.key), renderValue: row => fmtInt(row.count) })] }), _jsxs("section", { className: "block hot-sessions", children: [_jsx("h3", { children: t('insights.hotSlowSessions') }), _jsx("div", { className: "slist", children: slowSessions.length ? slowSessions.map(rec => {
+                                    const a = rec.report.agg;
+                                    return (_jsxs("button", { type: "button", className: "srow", onClick: () => onSession(String(rec.session.sessionId)), children: [_jsxs("div", { className: "srmain", children: [_jsx("strong", { children: sessionTitle(rec.session) }), _jsxs("small", { children: [botDisplayName(rec.session), " \u00B7 ", String(rec.session.cliId ?? '-')] })] }), _jsxs("div", { className: "srstats", children: [_jsxs("b", { children: [t('insights.hotSlowCol'), _jsx("em", { children: fmtInt(a.slowSpans) })] }), _jsxs("b", { children: ["span", _jsx("em", { children: fmtInt(a.totalSpans) })] })] })] }, String(rec.session.sessionId)));
+                                }) : _jsx("p", { className: "mut", children: "-" }) })] })] })] }));
+}
+function HotBlock({ title, rows, openHot, onToggle, onSession, meta }) {
+    return (_jsxs("section", { className: "block", children: [_jsx("h3", { children: title }), _jsx("div", { className: "hotlist", children: rows.length ? rows.map(h => {
+                    const open = openHot.has(h.key);
+                    return (_jsxs("div", { className: `hotitem${open ? ' open' : ''}`, children: [_jsxs("button", { type: "button", className: "hotrow", "aria-expanded": open, onClick: () => onToggle(h.key), children: [_jsx("span", { className: "hotlabel", title: h.label, children: h.label }), _jsx("span", { className: "hotmeta", children: meta(h) }), _jsxs("span", { className: "hotses", children: [h.sessions.length, " ", t('insights.hotSessionsCol')] })] }), open ? (_jsx("div", { className: "hot-sess", children: h.sessions.map(s => _jsx("button", { type: "button", className: "hot-sesslink", onClick: () => onSession(s.id), children: s.title || s.id }, s.id)) })) : null] }, h.key));
+                }) : _jsx("p", { className: "mut", children: "-" }) })] }));
+}
+function SortBar({ sort, layout, onSort, onLayout }) {
+    const sortOptions = SESS_SORTS.map(s => ({ value: s.key, label: t(s.label) }));
+    const sortLabel = sortOptions.find(option => option.value === sort)?.label ?? t('insights.sortLabel');
+    return (_jsxs(_Fragment, { children: [_jsx(DropdownMenu, { id: "insight-session-sort", className: "insight-sort-menu", ariaLabel: t('insights.sortLabel'), label: sortLabel, value: sort, options: sortOptions, onChange: onSort }), _jsx("div", { className: "insight-layout-switch", role: "group", "aria-label": `${t('insights.layoutCard')} / ${t('insights.layoutTable')}`, children: [
+                    ['card', 'insights.layoutCard'],
+                    ['table', 'insights.layoutTable'],
+                ].map(([k, lbl]) => (_jsx("button", { type: "button", className: layout === k ? 'active' : '', "aria-pressed": layout === k, onClick: () => onLayout(k), children: t(lbl) }, k))) })] }));
+}
+function SessionRows({ records, selectedId, wide, onSelect, emptyHint }) {
+    if (!records.length) {
+        return (_jsxs("div", { className: "insight-empty", children: [t('insights.empty'), emptyHint ? _jsxs(_Fragment, { children: [_jsx("br", {}), _jsx("span", { className: "mut", children: emptyHint })] }) : null] }));
+    }
+    const stat = (label, val, bad = false) => _jsxs("b", { className: bad ? 'bad' : undefined, children: [label, _jsx("em", { children: val })] });
+    return (_jsx("div", { className: `slist${wide ? ' wide' : ''}`, children: records.map(rec => {
+            const s = rec.session;
+            const r = rec.report;
+            const ok = r?.status === 'ok';
+            const agg = r?.agg;
+            const reads = agg?.phase?.research?.count ?? 0;
+            const edits = agg?.phase?.edit?.count ?? 0;
+            return (_jsxs("button", { type: "button", className: `srow${s.sessionId === selectedId ? ' on' : ''}${reportNeedsReview(r) ? ' review' : ''}`, onClick: () => onSelect(String(s.sessionId)), children: [_jsxs("div", { className: "srmain", children: [_jsx("strong", { children: sessionTitle(s) }), _jsx("small", { children: sessionMetaLine(rec) }), ok ? _jsx(PhaseMixBar, { phase: r.agg.phase }) : null] }), ok ? (_jsxs("div", { className: "srstats", children: [stat(t('insights.spansShort'), fmtInt(agg.totalSpans)), stat(t('insights.failedShort'), fmtInt(agg.failedSpans), agg.failedSpans > 0), stat(t('insights.slowShort'), fmtInt(agg.slowSpans)), wide ? _jsxs(_Fragment, { children: [stat(t('insights.readsShort'), fmtInt(reads)), stat(t('insights.editsShort'), fmtInt(edits)), stat(t('insights.durShort'), fmtMs(agentMsOf(r)))] }) : null, stat(t('insights.rwShort'), agg.readWriteRatio !== null ? agg.readWriteRatio.toFixed(1) : '-')] })) : _jsx("div", { className: "srmsg", children: safeStatus(r, rec.error) })] }, String(s.sessionId)));
+        }) }));
+}
+function SessionTable({ records, selectedId, onSelect, emptyHint }) {
+    if (!records.length) {
+        return (_jsxs("div", { className: "insight-empty", children: [t('insights.empty'), emptyHint ? _jsxs(_Fragment, { children: [_jsx("br", {}), _jsx("span", { className: "mut", children: emptyHint })] }) : null] }));
+    }
+    return (_jsxs("div", { className: "stable", children: [_jsxs("div", { className: "strow sthead", children: [_jsx("span", { className: "stc-title", children: t('insights.colTitle') }), _jsx("span", { className: "stc-proj", children: t('insights.colProject') }), _jsx("span", { className: "stc-num", children: t('insights.spansShort') }), _jsx("span", { className: "stc-num", children: t('insights.failedShort') }), _jsx("span", { className: "stc-num", children: t('insights.slowShort') }), _jsx("span", { className: "stc-num", children: t('insights.rwShort') }), _jsx("span", { className: "stc-num", children: t('insights.durShort') }), _jsx("span", { className: "stc-num", children: t('insights.colTime') })] }), records.map(rec => {
+                const s = rec.session;
+                const r = rec.report;
+                const ok = r?.status === 'ok';
+                const agg = r?.agg;
+                return (_jsxs("button", { type: "button", className: `strow${s.sessionId === selectedId ? ' on' : ''}${reportNeedsReview(r) ? ' review' : ''}${ok ? '' : ' nostat'}`, onClick: () => onSelect(String(s.sessionId)), children: [_jsxs("span", { className: "stc-title", children: [_jsx("strong", { children: sessionTitle(s) }), _jsxs("small", { children: [botDisplayName(s), " \u00B7 ", String(s.cliId ?? '-')] })] }), _jsx("span", { className: "stc-proj", children: s.workingDir ? projectOf(rec) : '-' }), ok ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "stc-num", children: fmtInt(agg.totalSpans) }), _jsx("span", { className: `stc-num${agg.failedSpans ? ' bad' : ''}`, children: fmtInt(agg.failedSpans) }), _jsx("span", { className: "stc-num", children: fmtInt(agg.slowSpans) }), _jsx("span", { className: "stc-num", children: agg.readWriteRatio !== null ? agg.readWriteRatio.toFixed(1) : '-' }), _jsx("span", { className: "stc-num", children: fmtMs(agentMsOf(r)) })] })) : _jsx("span", { className: "stc-msg", children: safeStatus(r, rec.error) }), _jsx("span", { className: "stc-num stc-time", children: relTime(s.lastMessageAt ?? s.spawnedAt ?? 0) })] }, String(s.sessionId)));
+            })] }));
+}
+function TextPreview({ label, preview }) {
+    if (!preview?.text)
+        return null;
+    return (_jsxs("div", { className: "span-io", children: [_jsx("span", { className: "span-io-label", children: label }), _jsxs("pre", { className: "span-io-text", children: [preview.text, preview.truncated ? '\n…' : ''] })] }));
+}
+function OpGlyph({ span, current }) {
+    const title = `${intentText(span)}${span.intent?.subject ? ` ${span.intent.subject}` : ''}${span.result ? ` → ${resultLabel(span.result.category)}` : ''} · ${fmtMs(span.durationMs)}`;
+    return _jsx("i", { className: `op ph-${phaseSlug(span.phase)}${spanFailed(span) ? ' bad' : ''}${current ? ' cur' : ''}`, title: title });
+}
+function SpanDetail({ spans, idx }) {
+    const s = spans[idx];
+    if (!s)
+        return null;
+    const d = s.detail;
+    const ev = d?.evidence ?? s.evidence;
+    const kv = [
+        [t('insights.dPhase'), phaseLabel(s.phase)],
+        [t('insights.dStart'), fmtMs(s.relStartMs)],
+        [t('insights.dDur'), fmtMs(s.durationMs)],
+    ];
+    const intent = intentPhrase(s.intent);
+    if (intent)
+        kv.push([t('insights.dIntent'), intent]);
+    if (s.result)
+        kv.push([t('insights.dResult'), `${resultLabel(s.result.category)}${s.result.exitCode !== undefined ? ` · exit ${s.result.exitCode}` : ''}`]);
+    if (s.inputSummary)
+        kv.push([t('insights.dIn'), structLabel(s.inputSummary)]);
+    if (s.outputSummary)
+        kv.push([t('insights.dOut'), structLabel(s.outputSummary)]);
+    const tags = (s.tags ?? []).filter(tg => tg !== 'normal');
+    if (tags.length)
+        kv.push([t('insights.dTags'), tags.map(tagLabel).join('、')]);
+    const prev = d?.context?.previousIntent ? intentPhrase(d.context.previousIntent) : '';
+    const next = d?.context?.nextIntent ? intentPhrase(d.context.nextIntent) : '';
+    const sibs = spans.map((sp, i) => ({ sp, i })).filter(x => x.sp.turnIndex === s.turnIndex).sort((a, b) => (a.sp.relStartMs ?? 0) - (b.sp.relStartMs ?? 0));
+    return (_jsxs("div", { className: "spandetail", children: [_jsx("dl", { className: "span-kv", children: kv.map(([k, v]) => _jsxs("div", { children: [_jsx("dt", { children: k }), _jsx("dd", { children: v })] }, k)) }), _jsx(TextPreview, { label: t('insights.dCommand'), preview: ev?.command }), _jsx(TextPreview, { label: t('insights.dCmdOutput'), preview: ev?.output }), prev || next ? _jsxs("div", { className: "span-flank", children: [prev ? _jsxs("span", { className: "sf-prev", children: ["\u2191 ", prev] }) : null, next ? _jsxs("span", { className: "sf-next", children: ["\u2193 ", next] }) : null] }) : null, _jsxs("div", { className: "span-ctx", children: [_jsx("span", { className: "span-ctx-label", children: t('insights.dTurnContext', { turn: s.turnIndex }) }), _jsx("div", { className: "opstrip", children: sibs.map(x => _jsx(OpGlyph, { span: x.sp, current: x.i === idx }, x.i)) })] })] }));
+}
+function SpanRow({ spans, idx, hot, open, detailable = true, onToggle, scrollTarget, onScrolled }) {
+    const ref = useRef(null);
+    const s = spans[idx];
+    useEffect(() => {
+        if (!ref.current || scrollTarget?.kind !== 'span' || scrollTarget.index !== idx)
+            return;
+        ref.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        onScrolled?.();
+    }, [idx, onScrolled, scrollTarget]);
+    if (!s)
+        return null;
+    const subject = s.intent?.subject ? _jsx("code", { className: "span-subj", children: s.intent.subject }) : null;
+    const res = s.result;
+    const tags = (s.tags ?? []).filter(tg => tg !== 'normal' && tg !== 'diagnostic');
+    const toggle = () => detailable && onToggle?.(idx);
+    return (_jsxs("div", { ref: ref, className: `spanrow ph-${phaseSlug(s.phase)}${s.status === 'error' ? ' error' : ''}${hot ? ' hot' : ''}${open ? ' open' : ''}`, children: [_jsxs("div", { className: `sprow-line${detailable ? ' clickable' : ''}`, role: detailable ? 'button' : undefined, tabIndex: detailable ? 0 : undefined, "aria-expanded": detailable ? open : undefined, onClick: toggle, onKeyDown: event => {
+                    if (!detailable)
+                        return;
+                    if (event.key === 'Enter' || event.key === ' ') {
+                        event.preventDefault();
+                        toggle();
+                    }
+                }, children: [_jsxs("span", { className: "span-turn", title: `${t('insights.dStart')} ${fmtMs(s.relStartMs)}`, children: ["#", String(s.turnIndex ?? 0)] }), _jsx("span", { className: `spanst ${s.status}`, children: statusIcon(s.status) }), _jsx("b", { className: "span-what", children: intentText(s) }), subject, res && BAD_RESULTS.has(res.category) ? _jsxs("span", { className: "span-res rc-bad", children: [resultLabel(res.category), res.exitCode !== undefined ? ` · exit ${res.exitCode}` : ''] }) : null, _jsx("span", { className: "span-tags", children: tags.map(tg => _jsx("span", { className: `span-tag tg-${tg}`, children: tagLabel(tg) }, tg)) }), _jsx("span", { className: "span-dur", children: fmtMs(s.durationMs) }), detailable ? _jsx("span", { className: "span-detail-btn", "aria-hidden": "true", children: open ? t('insights.dCollapse') : t('insights.dDetail') }) : null] }), detailable && open ? _jsx(SpanDetail, { spans: spans, idx: idx }) : null] }));
+}
+function WorkSummary({ report }) {
+    const ws = report.workSummary;
+    if (!ws || (!ws.fileChanges?.length && !ws.commandsRun?.length))
+        return null;
+    const files = ws.fileChanges ?? [];
+    const cmds = ws.commandsRun ?? [];
+    return (_jsxs("div", { className: "worksum", children: [_jsxs("section", { className: "ws-panel", children: [_jsx("h4", { children: t('insights.wsFiles', { n: files.length }) }), _jsx("div", { className: "ws-list", children: files.length ? files.map((f, i) => (_jsxs("div", { className: "ws-row", children: [_jsx("code", { className: "ws-path", title: f.path, children: f.path }), _jsx("span", { className: "ws-meta", children: t('insights.wsReads', { n: f.reads }) }), (f.added || f.removed) ? _jsxs("span", { className: "ws-stat", children: [_jsxs("span", { className: "ws-add", children: ["+", f.added ?? 0] }), _jsxs("span", { className: "ws-del", children: ["-", f.removed ?? 0] })] }) : f.edits ? _jsx("span", { className: "ws-stat ws-stat-edits", children: t('insights.wsEdits', { n: f.edits }) }) : null] }, `${f.path}:${i}`))) : _jsx("p", { className: "mut", children: t('insights.wsNoFiles') }) })] }), _jsxs("section", { className: "ws-panel", children: [_jsx("h4", { children: t('insights.wsCmds', { n: cmds.length }) }), _jsx("div", { className: "ws-list", children: cmds.length ? cmds.map((c, i) => {
+                            const bad = c.failures > 0;
+                            return (_jsxs("div", { className: `ws-row${bad ? ' bad' : ''}`, children: [_jsxs("code", { className: "ws-cmd", title: c.command.text, children: [c.command.text, c.command.truncated ? '…' : ''] }), _jsxs("span", { className: "ws-meta", children: [c.count > 1 ? _jsxs("span", { className: "ws-x", children: ["\u00D7", c.count] }) : null, bad ? _jsx("span", { className: "ws-fail", children: t('insights.wsFail', { n: c.failures }) }) : null] })] }, `${c.command.text}:${i}`));
+                        }) : _jsx("p", { className: "mut", children: t('insights.wsNoCmds') }) })] })] }));
+}
+function Evidence({ report, focus, view, onSpanFilter, onToggleSpan, scrollTarget, onScrolled }) {
+    const spans = report.spans ?? [];
+    if (!spans.length) {
+        return _jsxs(_Fragment, { children: [_jsx(WorkSummary, { report: report }), _jsx("p", { className: "mut", children: t('insights.noSpans') })] });
+    }
+    const order = [...spans.keys()].sort((a, b) => (spans[a].relStartMs ?? 0) - (spans[b].relStartMs ?? 0));
+    const counts = new Map();
+    for (const i of order)
+        for (const tg of spans[i].tags ?? [])
+            if (SPAN_TAGS.includes(tg))
+                counts.set(tg, (counts.get(tg) ?? 0) + 1);
+    const visible = view.spanFilter === 'all' ? order : order.filter(i => spans[i].tags?.includes(view.spanFilter));
+    return (_jsxs("div", { className: "evidence", children: [_jsx(WorkSummary, { report: report }), focus.rec ? _jsx("div", { className: "ev-reason", children: idText('why', focus.rec.why) }) : null, _jsxs("div", { className: "spanfilter", children: [_jsxs("button", { type: "button", className: `spanchip${view.spanFilter === 'all' ? ' on' : ''}`, onClick: () => onSpanFilter('all'), children: [t('insights.spanAll'), " ", _jsx("b", { children: order.length })] }), SPAN_TAGS.filter(tg => counts.has(tg)).map(tg => (_jsxs("button", { type: "button", className: `spanchip tg-${tg}${view.spanFilter === tg ? ' on' : ''}`, onClick: () => onSpanFilter(tg), children: [tagLabel(tg), " ", _jsx("b", { children: counts.get(tg) })] }, tg)))] }), _jsx("div", { className: "spantable", children: visible.length ? visible.map(i => (_jsx(SpanRow, { spans: spans, idx: i, hot: focus.spanIdx.has(i), open: view.openSpans.has(i), onToggle: onToggleSpan, scrollTarget: scrollTarget, onScrolled: onScrolled }, i))) : _jsx("p", { className: "mut", children: t('insights.evNoFlags') }) })] }));
+}
+function PromptSourceChip({ src, fallback }) {
+    if (!src?.kind)
+        return _jsx("span", { className: "tp-label", children: fallback ?? t('insights.turnPrompt') });
+    if (src.kind === 'a2a_agent') {
+        const name = src.agentName || src.senderName;
+        return _jsxs("span", { className: "tp-label tp-src tp-src-a2a", children: ["\uD83E\uDD1D ", name ? `${name} · a2a` : 'a2a'] });
+    }
+    if (src.kind === 'system')
+        return _jsxs("span", { className: "tp-label tp-src tp-src-system", children: ["\u2699\uFE0F ", t('insights.senderSystem')] });
+    return _jsxs("span", { className: "tp-label tp-src tp-src-user", children: ["\uD83D\uDC64 ", src.senderName || fallback || t('insights.turnPrompt')] });
+}
+function PromptMentions({ src }) {
+    const mentions = (src?.mentionedNames ?? []).filter(Boolean);
+    if (!mentions.length)
+        return null;
+    return _jsxs("span", { className: "tp-mentions", children: [t('insights.srcMentions'), " ", mentions.map(n => `@${n}`).join(' ')] });
+}
+function TurnEventGlyph({ event }) {
+    const bad = event.status === 'error' || (!!event.result && BAD_RESULTS.has(event.result.category));
+    const what = intentTextOf(event.intent, String(event.label.params.tool ?? event.kind));
+    const title = `${what}${event.intent?.subject ? ` ${event.intent.subject}` : ''}${event.result ? ` → ${resultLabel(event.result.category)}` : ''} · ${fmtMs(event.durationMs)}`;
+    return _jsx("i", { className: `op ph-${phaseSlug(event.phase)}${bad ? ' bad' : ''}`, title: title });
+}
+function TurnCard({ report, turn, focus, view, onToggleTurn, onToggleSpan, onTogglePrompt, onTogglePromptRaw, onOpenPrompt, scrollTarget, onScrolled }) {
+    const ref = useRef(null);
+    const spans = report.spans ?? [];
+    const open = view.openTurns.has(turn.turnIndex);
+    const hot = focus.turnIdx.has(turn.turnIndex);
+    const m = turn.metrics;
+    const advice = turn.severity !== 'info' ? turnAdvice(turn.tags) : '';
+    const ptext = turn.prompt?.text ? (cleanPromptText(turn.prompt.text) || turn.prompt.text) : '';
+    const promptExpanded = view.openPrompts.has(turn.turnIndex);
+    const promptRaw = view.rawPrompts.has(turn.turnIndex);
+    const promptBody = promptRaw
+        ? _jsxs("pre", { className: "tp-raw", children: [ptext, turn.prompt?.truncated ? '\n…' : ''] })
+        : _jsx(MarkdownBody, { text: ptext + (turn.prompt?.truncated ? ' …' : '') });
+    const mini = `${t('insights.mEdits')}${m.edits} ${t('insights.mRuns')}${m.runs}${m.failures ? ` · ${t('insights.mFailures')}${m.failures}` : ''} · ${fmtMs(m.durationMs)}`;
+    useEffect(() => {
+        if (!ref.current || scrollTarget?.kind !== 'turn' || scrollTarget.index !== turn.turnIndex)
+            return;
+        ref.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        onScrolled();
+    }, [onScrolled, scrollTarget, turn.turnIndex]);
+    const pill = (label, val, bad = false) => _jsxs("span", { className: `tm${bad ? ' bad' : ''}`, children: [_jsx("i", { children: label }), _jsx("b", { children: val })] });
+    return (_jsxs("div", { ref: ref, className: `turnrow sev-${turn.severity}${hot ? ' hot' : ''}${turn.severity !== 'info' ? ' flagged' : ''}${open ? ' open' : ''}`, children: [_jsxs("div", { className: "turnline", children: [_jsxs("span", { className: "turn-no", children: ["#", String(turn.turnIndex)] }), _jsx("b", { className: "turn-headline", children: turnHeadline(turn.headline) }), _jsx("div", { className: "opstrip turn-strip", children: turn.events.map((e, i) => _jsx(TurnEventGlyph, { event: e }, `${e.spanIndex}:${i}`)) }), _jsx("span", { className: "turn-mini", children: mini }), _jsx("button", { type: "button", className: "turn-expand-btn", "aria-expanded": open, onClick: () => onToggleTurn(turn.turnIndex), children: open ? t('insights.turnCollapse') : t('insights.turnExpand', { count: turn.events.length }) })] }), ptext ? (_jsxs("div", { className: "turn-prompt", children: [_jsx(PromptSourceChip, { src: turn.prompt?.source }), _jsxs("div", { className: "tp-body", children: [_jsx("div", { className: `tp-md${promptExpanded ? ' expanded' : ''}`, children: promptBody }), _jsxs("div", { className: "tp-actions", children: [_jsx(PromptMentions, { src: turn.prompt?.source }), _jsx("button", { type: "button", className: "tp-toggle", onClick: () => onTogglePrompt(turn.turnIndex), children: promptExpanded ? t('insights.turnPromptCollapse') : t('insights.turnPromptExpand') }), _jsx("button", { type: "button", className: "tp-toggle", onClick: () => onTogglePromptRaw(turn.turnIndex), children: promptRaw ? t('insights.turnPromptRendered') : t('insights.turnPromptRaw') }), _jsx("button", { type: "button", className: "tp-toggle", onClick: () => onOpenPrompt(turn.turnIndex), children: t('insights.turnPromptFull') })] })] })] })) : null, advice ? _jsx("div", { className: "turn-advice", children: advice }) : null, open ? (_jsxs("div", { className: "turn-detail", children: [_jsxs("div", { className: "turn-metrics", children: [pill(t('insights.mReads'), String(m.reads)), pill(t('insights.mEdits'), String(m.edits)), pill(t('insights.mRuns'), String(m.runs)), m.failures ? pill(t('insights.mFailures'), String(m.failures), true) : null, pill(t('insights.mDur'), fmtMs(m.durationMs))] }), _jsx("div", { className: "spantable", children: turn.events.map(e => (_jsx(SpanRow, { spans: spans, idx: e.spanIndex, hot: false, open: view.openSpans.has(e.spanIndex), onToggle: onToggleSpan, scrollTarget: scrollTarget, onScrolled: onScrolled }, e.spanIndex))) })] })) : null] }));
+}
+function TurnEfficiency({ report, focus, view, onLedgerSort, onLedgerSender, onToggleTurn, onToggleSpan, onTogglePrompt, onTogglePromptRaw, onOpenPrompt, scrollTarget, onScrolled }) {
+    const spans = report.spans ?? [];
+    const allTurns = report.turnTimeline ?? [];
+    if (!allTurns.length)
+        return _jsx("p", { className: "mut", children: t('insights.noSpans') });
+    const recs = report.recommendations ?? [];
+    const canGroup = recs.some(r => (r.evidence?.turnIndexes?.length ?? 0) > 0);
+    const senderCount = { user: 0, a2a_agent: 0, system: 0 };
+    for (const tn of allTurns)
+        senderCount[turnSenderKind(tn)] += 1;
+    const turns = view.ledgerSender === 'all'
+        ? allTurns.filter(tn => turnSenderKind(tn) !== 'system')
+        : allTurns.filter(tn => turnSenderKind(tn) === view.ledgerSender);
+    const flagged = turns.filter(tn => tn.severity !== 'info').length;
+    const card = (tn) => (_jsx(TurnCard, { report: report, turn: tn, focus: focus, view: view, onToggleTurn: onToggleTurn, onToggleSpan: onToggleSpan, onTogglePrompt: onTogglePrompt, onTogglePromptRaw: onTogglePromptRaw, onOpenPrompt: onOpenPrompt, scrollTarget: scrollTarget, onScrolled: onScrolled }, tn.turnIndex));
+    const controls = (_jsxs(_Fragment, { children: [_jsxs("div", { className: "spanfilter ledgersender", children: [_jsxs("button", { type: "button", className: `spanchip${view.ledgerSender === 'all' ? ' on' : ''}`, onClick: () => onLedgerSender('all'), children: [t('insights.spanAll'), " ", _jsx("b", { children: senderCount.user + senderCount.a2a_agent })] }), senderCount.user ? _jsxs("button", { type: "button", className: `spanchip${view.ledgerSender === 'user' ? ' on' : ''}`, onClick: () => onLedgerSender('user'), children: ["\uD83D\uDC64 ", t('insights.senderHuman'), " ", _jsx("b", { children: senderCount.user })] }) : null, senderCount.a2a_agent ? _jsxs("button", { type: "button", className: `spanchip${view.ledgerSender === 'a2a_agent' ? ' on' : ''}`, onClick: () => onLedgerSender('a2a_agent'), children: ["\uD83E\uDD1D ", t('insights.senderA2A'), " ", _jsx("b", { children: senderCount.a2a_agent })] }) : null, senderCount.system ? _jsxs("button", { type: "button", className: `spanchip spanchip-sys${view.ledgerSender === 'system' ? ' on' : ''}`, onClick: () => onLedgerSender('system'), children: ["\u2699\uFE0F ", t('insights.senderSystem'), " ", _jsx("b", { children: senderCount.system })] }) : null] }), canGroup ? (_jsxs("div", { className: "spanfilter ledgersort", children: [_jsx("button", { type: "button", className: `spanchip${view.ledgerSort === 'normal' ? ' on' : ''}`, onClick: () => onLedgerSort('normal'), children: t('insights.ledgerNormal') }), _jsx("button", { type: "button", className: `spanchip${view.ledgerSort === 'grouped' ? ' on' : ''}`, onClick: () => onLedgerSort('grouped'), children: t('insights.ledgerGrouped') })] })) : null] }));
+    const note = report.meta?.capped ? _jsx("p", { className: "turn-hidden mut", children: t('insights.turnsCapped', { shown: String(report.meta.spansReturned ?? spans.length), total: String(report.meta.spansTotal ?? spans.length) }) }) : null;
+    if (!turns.length)
+        return _jsxs("div", { className: "turnlist", children: [controls, _jsx("p", { className: "mut", children: t('insights.evNoFlags') })] });
+    if (view.ledgerSort === 'grouped' && canGroup) {
+        const sortedRecs = [...recs].sort((a, b) => SEVERITY_RANK[a.severity] - SEVERITY_RANK[b.severity]);
+        const byIndex = new Map(turns.map(tn => [tn.turnIndex, tn]));
+        const assigned = new Map();
+        for (const r of sortedRecs)
+            for (const ti of r.evidence?.turnIndexes ?? [])
+                if (byIndex.has(ti) && !assigned.has(ti))
+                    assigned.set(ti, r.id);
+        const blocks = [];
+        for (const r of sortedRecs) {
+            const ts = turns.filter(tn => assigned.get(tn.turnIndex) === r.id).sort((a, b) => a.turnIndex - b.turnIndex);
+            if (!ts.length)
+                continue;
+            blocks.push(_jsxs("div", { className: "turn-group", children: [_jsxs("div", { className: `turn-group-head sev-${r.severity}`, children: [_jsx("b", { children: idText('rec', { id: r.id, params: {} }) }), _jsx("span", { children: t('insights.ledgerGroupCount', { count: ts.length }) })] }), ts.map(card)] }, r.id));
+        }
+        const other = turns.filter(tn => !assigned.has(tn.turnIndex)).sort((a, b) => a.turnIndex - b.turnIndex);
+        if (other.length) {
+            blocks.push(_jsxs("div", { className: "turn-group", children: [_jsxs("div", { className: "turn-group-head sev-info", children: [_jsx("b", { children: t('insights.ledgerOther') }), _jsx("span", { children: t('insights.ledgerGroupCount', { count: other.length }) })] }), other.map(card)] }, "other"));
+        }
+        return _jsxs("div", { className: "turnlist", children: [_jsx("p", { className: "turn-sum mut", children: t('insights.turnSummary', { total: turns.length, flagged }) }), controls, blocks, note] });
+    }
+    return _jsxs("div", { className: "turnlist", children: [_jsx("p", { className: "turn-sum mut", children: t('insights.turnSummary', { total: turns.length, flagged }) }), controls, [...turns].sort((a, b) => a.turnIndex - b.turnIndex).map(card), note] });
+}
+function ConvoRecBadges({ turnIndex, recByTurn }) {
+    const ids = recByTurn.get(turnIndex);
+    if (!ids?.length)
+        return null;
+    return _jsx(_Fragment, { children: ids.map(id => _jsxs("span", { className: "cbub-rec", title: idText('rec', { id, params: {} }), children: ["\uD83D\uDCA1 ", idText('rec', { id, params: {} })] }, id)) });
+}
+function ConvoPrompt({ msg, recByTurn, onOpenPrompt }) {
+    const side = msg.role === 'user' ? 'right' : 'left';
+    const text = msg.text ? (cleanPromptText(msg.text) || msg.text) : '';
+    const sevCls = msg.severity && msg.severity !== 'info' ? ` sev-${msg.severity}` : '';
+    return (_jsxs("div", { className: `cbub cbub-${side} role-${msg.role}${sevCls}`, children: [_jsxs("div", { className: "cbub-head", children: [_jsx(PromptSourceChip, { src: msg.source }), _jsx(PromptMentions, { src: msg.source }), _jsxs("span", { className: "cbub-turn", children: ["#", String(msg.turnIndex)] }), _jsx(ConvoRecBadges, { turnIndex: msg.turnIndex, recByTurn: recByTurn })] }), _jsx("div", { className: "cbub-body", children: text ? _jsx(MarkdownBody, { text: text + (msg.truncated ? ' …' : '') }) : _jsx("p", { className: "mut", children: t('insights.replayNoText') }) }), msg.truncated ? _jsx("div", { className: "cbub-foot", children: _jsx("button", { type: "button", className: "tp-toggle", onClick: () => onOpenPrompt(msg.turnIndex), children: t('insights.turnPromptFull') }) }) : null] }));
+}
+function ConvoOpRow({ msg, open, onToggle }) {
+    const e = msg.event;
+    if (!e)
+        return null;
+    const bad = e.status === 'error' || (!!e.result && BAD_RESULTS.has(e.result.category));
+    const subj = e.intent?.subject ? _jsx("code", { className: "span-subj", children: e.intent.subject }) : null;
+    const what = intentTextOf(e.intent, String(e.label?.params?.tool ?? e.kind));
+    const ev = e.evidence;
+    const expandable = !!(ev?.command?.text || ev?.output?.text);
+    const tags = (msg.tags ?? []).filter(tg => tg !== 'normal' && tg !== 'diagnostic');
+    const toggle = () => expandable && onToggle(msg.id);
+    return (_jsxs("div", { className: `cop${bad ? ' bad' : ''}${open ? ' open' : ''}`, children: [_jsxs("div", { className: `cop-line${expandable ? ' clickable' : ''}`, role: expandable ? 'button' : undefined, tabIndex: expandable ? 0 : undefined, onClick: toggle, onKeyDown: event => {
+                    if (!expandable)
+                        return;
+                    if (event.key === 'Enter' || event.key === ' ') {
+                        event.preventDefault();
+                        toggle();
+                    }
+                }, children: [_jsx("i", { className: `op ph-${phaseSlug(e.phase)}${bad ? ' bad' : ''}` }), _jsx("b", { className: "span-what", children: what }), subj, e.result && BAD_RESULTS.has(e.result.category) ? _jsxs("span", { className: "span-res rc-bad", children: [resultLabel(e.result.category), e.result.exitCode !== undefined ? ` · exit ${e.result.exitCode}` : ''] }) : null, _jsx("span", { className: "span-tags", children: tags.map(tg => _jsx("span", { className: `span-tag tg-${tg}`, children: tagLabel(tg) }, tg)) }), _jsx("span", { className: "span-dur", children: fmtMs(e.durationMs) }), expandable ? _jsx("span", { className: "span-detail-btn", "aria-hidden": "true", children: open ? t('insights.dCollapse') : t('insights.dDetail') }) : null] }), open && ev ? _jsxs("div", { className: "spandetail", children: [_jsx(TextPreview, { label: t('insights.dCommand'), preview: ev.command }), _jsx(TextPreview, { label: t('insights.dCmdOutput'), preview: ev.output })] }) : null] }));
+}
+function ConvoOps({ unit, convo, recByTurn, onToggleOp }) {
+    const sayMsgs = unit.msgs.filter(m => m.text && !m.event);
+    const opMsgs = unit.msgs.filter(m => m.event);
+    const worst = unit.msgs.some(m => m.severity === 'bad') ? ' sev-bad' : unit.msgs.some(m => m.severity === 'warn') ? ' sev-warn' : '';
+    return (_jsxs("div", { className: `cbub cbub-left role-agent cbub-ops${worst}`, children: [_jsxs("div", { className: "cbub-head", children: [_jsxs("span", { className: "tp-label tp-src tp-src-system", children: ["\uD83E\uDD16 ", t('insights.replayAgent')] }), _jsxs("span", { className: "cbub-turn", children: ["#", String(unit.turnIndex)] }), opMsgs.length ? _jsx("span", { className: "cbub-opcount", children: t('insights.replayOps', { count: opMsgs.length }) }) : null, _jsx(ConvoRecBadges, { turnIndex: unit.turnIndex, recByTurn: recByTurn })] }), sayMsgs.length ? _jsx("div", { className: "cbub-saywrap", children: sayMsgs.map(m => _jsx("div", { className: "cbub-say", children: _jsx(MarkdownBody, { text: m.text }) }, m.id)) }) : null, opMsgs.length ? _jsx("div", { className: "cbub-ops-list", children: opMsgs.map(m => _jsx(ConvoOpRow, { msg: m, open: convo.openOps.has(m.id), onToggle: onToggleOp }, m.id)) }) : null] }));
+}
+function Conversation({ convo, recByTurn, onQuery, onRole, onTag, onLoadMore, onToggleOp, onOpenPrompt }) {
+    const [draft, setDraft] = useState(convo.q);
+    useEffect(() => setDraft(convo.q), [convo.q]);
+    const units = groupConvo(convo.messages);
+    return (_jsxs("div", { className: "convo", children: [_jsxs("div", { className: "convo-controls", children: [_jsx("input", { type: "search", className: "convo-search", placeholder: t('insights.replaySearch'), value: draft, onChange: event => setDraft(event.currentTarget.value), onKeyDown: event => {
+                            if (event.key !== 'Enter')
+                                return;
+                            event.preventDefault();
+                            const next = draft.trim();
+                            if (next !== convo.q)
+                                onQuery(next);
+                        } }), _jsxs("div", { className: "convo-filters", children: [_jsxs("div", { className: "spanfilter convo-rolefilter", children: [_jsx("span", { className: "convo-flabel", children: t('insights.replayBy') }), CONVO_ROLES.map(r => _jsx("button", { type: "button", className: `spanchip${convo.role === r.key ? ' on' : ''}`, onClick: () => onRole(r.key), children: t(`insights.${r.label}`) }, r.key))] }), _jsxs("div", { className: "spanfilter convo-tagfilter", children: [_jsx("span", { className: "convo-flabel", children: t('insights.replayState') }), CONVO_TAGS.map(tg => _jsx("button", { type: "button", className: `spanchip${convo.tag === tg.key ? ' on' : ''}`, onClick: () => onTag(tg.key), children: tg.label.startsWith('tag.') ? tagLabel(tg.label.slice(4)) : t(`insights.${tg.label}`) }, tg.key))] })] })] }), _jsx("div", { className: "convothread", children: !convo.messages.length ? (convo.loading ? _jsx(LoadingState, { label: t('insights.detailLoading'), compact: true }) : _jsx("p", { className: "mut", children: t('insights.replayEmpty') })) : (_jsxs(_Fragment, { children: [units.map((u, i) => u.kind === 'prompt'
+                            ? _jsx(ConvoPrompt, { msg: u.msg, recByTurn: recByTurn, onOpenPrompt: onOpenPrompt }, u.msg.id)
+                            : _jsx(ConvoOps, { unit: u, convo: convo, recByTurn: recByTurn, onToggleOp: onToggleOp }, `${u.turnIndex}:${i}`)), convo.hasMore ? (_jsx("div", { className: "convo-more", children: _jsx("button", { type: "button", className: "primary convo-loadmore", disabled: convo.loading, onClick: onLoadMore, children: convo.loading ? t('insights.detailLoading') : t('insights.replayLoadMore', { shown: convo.messages.length, total: convo.total }) }) })) : _jsx("p", { className: "convo-more mut", children: t('insights.replayAllLoaded', { total: convo.total }) })] })) })] }));
+}
+function Recommendations({ report, activeId, onActive }) {
+    const recs = report.recommendations ?? [];
+    if (!recs.length)
+        return _jsx("p", { className: "mut", children: t('insights.noRecommendations') });
+    return (_jsx("div", { className: "reclist", children: [...recs].sort((a, b) => SEVERITY_RANK[a.severity] - SEVERITY_RANK[b.severity]).map(r => {
+            const active = r.id === activeId;
+            const targeted = (r.evidence?.spanIndexes?.length ?? 0) > 0 || (r.evidence?.turnIndexes?.length ?? 0) > 0;
+            const impact = idText('impact', r.impact);
+            const why = idText('why', r.why);
+            return (_jsxs("button", { type: "button", className: `rec ${r.severity}${targeted ? ' rec-clickable' : ''}${active ? ' active' : ''}`, onClick: () => onActive(active ? null : r.id), children: [_jsxs("div", { className: "rectop", children: [_jsx("b", { children: idText('rec', { id: r.id, params: {} }) }), _jsx("span", { children: severityLabel(r.severity) })] }), impact ? _jsx("div", { className: "rec-impact", children: impact }) : null, r.nextActions.length ? _jsx("ul", { className: "rec-actions", children: r.nextActions.map(a => _jsx("li", { children: idText('action', a) }, `${a.id}:${JSON.stringify(a.params)}`)) }) : null, why ? _jsx("div", { className: "rec-why", children: why }) : null, targeted ? _jsx("span", { className: "rec-cta", children: active ? t('insights.diagActive') : t('insights.diagShow') }) : null] }, r.id));
+        }) }));
+}
+function Subagents({ report }) {
+    const lanes = report.subagents ?? [];
+    if (!lanes.length)
+        return null;
+    const totMs = lanes.reduce((s, l) => s + l.durationMs, 0);
+    return (_jsxs("section", { className: "block subagent-block", children: [_jsxs("h3", { children: [t('insights.subagents'), " ", _jsxs("span", { className: "mut", children: ["\u00B7 ", lanes.length, " \u00B7 ", fmtMs(totMs)] })] }), _jsx("p", { className: "mut ins-hint", children: t('insights.subagentsHint') }), _jsx("div", { className: "sublanes", children: lanes.map((l, i) => (_jsxs("div", { className: `sublane${l.failures ? ' bad' : ''}`, children: [_jsxs("div", { className: "sublane-head", children: [_jsx("span", { className: "sublane-type", children: l.agentType }), _jsxs("span", { className: "sublane-task", children: [l.task?.text ?? '', l.task?.truncated ? '…' : ''] })] }), _jsx(PhaseMixBar, { phase: l.phase }), _jsxs("div", { className: "sublane-stats", children: [_jsxs("span", { children: [fmtInt(l.spans), " ", t('insights.spansShort')] }), _jsx("span", { children: fmtMs(l.durationMs) }), l.failures ? _jsxs("span", { className: "bad", children: [fmtInt(l.failures), " ", t('insights.failedShort')] }) : null] })] }, `${l.agentType}:${i}`))) })] }));
+}
+function TurnRail({ report, focus, recByTurn, onJumpTurn, onTip, onTipHide }) {
+    const turns = [...(report.turnTimeline ?? [])].sort((a, b) => a.turnIndex - b.turnIndex);
+    if (turns.length < 2)
+        return null;
+    const focused = focus.turnIdx.size > 0;
+    const legend = ['research', 'edit', 'run', 'delegate', 'discuss'];
+    return (_jsxs("section", { className: "block turnrail-block", children: [_jsxs("div", { className: "turnrail-head", children: [_jsx("h3", { children: t('insights.turnRail') }), _jsxs("span", { className: "turnrail-legend", children: [legend.map(p => _jsxs("span", { className: "rl-item", children: [_jsx("i", { className: phaseClass(p) }), phaseLabel(p)] }, p)), _jsxs("span", { className: "rl-item rl-sep", children: [_jsx("i", { className: "rbr-sub" }), t('insights.railSubagent')] })] })] }), _jsx("div", { className: "turnrail", onMouseLeave: onTipHide, children: turns.map(tn => {
+                    const m = tn.metrics;
+                    const phase = turnMainPhase(tn);
+                    const fail = (tn.tags ?? []).includes('failure') || (tn.events ?? []).some(e => e.status === 'error');
+                    const slow = (tn.tags ?? []).includes('slow');
+                    const recHit = recByTurn.has(tn.turnIndex);
+                    const hot = focus.turnIdx.has(tn.turnIndex);
+                    const cls = ['railnode', phaseClass(phase), hot ? 'hot' : '', (focused && !hot) ? 'dim' : ''].filter(Boolean).join(' ');
+                    const tip = `#${tn.turnIndex} · ${phaseLabel(phase)} · ${t('insights.mReads')}${m.reads} ${t('insights.mEdits')}${m.edits} ${t('insights.mRuns')}${m.runs}${m.failures ? ` · ${t('insights.mFailures')}${m.failures}` : ''} · ${fmtMs(m.durationMs)}`;
+                    const subs = (tn.events ?? []).filter(e => e.kind === 'delegate').length;
+                    return (_jsxs("span", { style: { display: 'contents' }, children: [_jsxs("button", { type: "button", className: cls, onMouseMove: event => onTip(event, tip), onBlur: onTipHide, onClick: () => onJumpTurn(tn), children: [_jsx("span", { children: String(tn.turnIndex) }), fail ? _jsx("i", { className: "rb rb-fail" }) : null, slow ? _jsx("i", { className: "rb rb-slow" }) : null, recHit ? _jsx("i", { className: "rb rb-rec" }) : null] }), subs ? _jsx("span", { className: "railbranch", onMouseMove: event => onTip(event, `#${tn.turnIndex} · ${t('insights.railSubagents', { n: subs })}`), children: Array.from({ length: Math.min(subs, 4) }).map((_, i) => _jsx("i", { className: "rbr-sub" }, i)) }) : null] }, tn.turnIndex));
+                }) })] }));
+}
+function WorkGantt({ report, onOpenSpan, onTip, onTipHide }) {
+    const timed = (report.spans ?? []).map((s, i) => ({ s, i, start: s.relStartMs ?? 0, dur: Math.max(s.durationMs ?? 0, 0) }))
+        .filter(x => Number.isFinite(x.start)).sort((a, b) => a.start - b.start);
+    if (timed.length < 2)
+        return null;
+    const active = Math.max(timed.reduce((sum, x) => sum + x.dur, 0), 1);
+    let cursor = 0;
+    const realSpan = (timed[timed.length - 1].start + timed[timed.length - 1].dur) - timed[0].start;
+    return (_jsxs("section", { className: "block gantt-block", children: [_jsxs("div", { className: "turnrail-head", children: [_jsx("h3", { children: t('insights.gantt') }), _jsx("span", { className: "gantt-cap", children: t('insights.ganttCaption', { span: timed.length, dur: fmtMs(realSpan), active: fmtMs(active) }) })] }), _jsx("div", { className: "gantt", children: _jsx("div", { className: "gtrack", onMouseLeave: onTipHide, children: timed.map(x => {
+                        const left = cursor / active * 100;
+                        const width = Math.max(x.dur / active * 100, 0.3);
+                        cursor += x.dur;
+                        const fail = x.s.status === 'error' || (x.s.tags ?? []).includes('failure');
+                        const slow = (x.s.tags ?? []).includes('slow');
+                        const cls = ['gbar', phaseClass(x.s.phase), fail ? 'gbar-fail' : '', slow ? 'gbar-slow' : ''].filter(Boolean).join(' ');
+                        const st = x.s.status === 'error' ? ` · ${tagLabel('failure')}` : '';
+                        const tip = `#${x.i} · ${x.s.tool} · ${phaseLabel(x.s.phase)} · ${fmtMs(x.s.durationMs)}${st}`;
+                        return _jsx("button", { type: "button", className: cls, style: { left: `${left.toFixed(3)}%`, width: `${width.toFixed(3)}%` }, onMouseMove: event => onTip(event, tip), onClick: () => onOpenSpan(x.i) }, x.i);
+                    }) }) })] }));
+}
+function ContextCurve({ report, onTip, onTipHide }) {
+    const pts = (report.turnTimeline ?? [])
+        .map(tn => (tn.context && Number.isFinite(tn.context.contextTokens)) ? { turn: tn.turnIndex, v: tn.context.contextTokens } : null)
+        .filter((p) => p !== null)
+        .sort((a, b) => a.turn - b.turn);
+    if (pts.length < 2)
+        return null;
+    const max = Math.max(...pts.map(p => p.v), 1);
+    const w = 100;
+    const h = 40;
+    const xs = (i) => (i / (pts.length - 1)) * w;
+    const ys = (v) => h - 1 - (v / max) * (h - 2);
+    const line = pts.map((p, i) => `${xs(i).toFixed(2)},${ys(p.v).toFixed(2)}`).join(' ');
+    const area = `0,${h} ${line} ${w},${h}`;
+    const band = w / pts.length;
+    const mid = fmtInt(Math.round(max / 2));
+    return (_jsxs("section", { className: "block ctxcurve-block", children: [_jsxs("div", { className: "turnrail-head", children: [_jsx("h3", { children: t('insights.ctxCurve') }), _jsx("span", { className: "gantt-cap", children: t('insights.ctxCaption', { peak: fmtInt(max), turns: pts.length }) })] }), _jsxs("div", { className: "ctxchart", children: [_jsxs("div", { className: "ctxyaxis", children: [_jsx("span", { children: fmtInt(max) }), _jsx("span", { children: mid }), _jsx("span", { children: "0 tok" })] }), _jsxs("div", { className: "ctxplot", children: [_jsxs("svg", { className: "ctxcurve", viewBox: `0 0 ${w} ${h}`, preserveAspectRatio: "none", role: "img", "aria-label": t('insights.ctxCurve'), onMouseLeave: onTipHide, children: [_jsx("polygon", { className: "ctxarea", points: area }), _jsx("polyline", { className: "ctxline", points: line }), pts.map((p, i) => (_jsx("rect", { className: "ctxhit", x: Math.max(0, xs(i) - band / 2), y: 0, width: band, height: h, onMouseMove: event => onTip(event, `${t('insights.ctxTurn', { n: p.turn })} · ${fmtInt(p.v)} tok`) }, p.turn)))] }), _jsxs("div", { className: "ctxxaxis", children: [_jsx("span", { children: t('insights.ctxTurn', { n: pts[0].turn }) }), _jsx("span", { children: t('insights.ctxTurn', { n: pts[pts.length - 1].turn }) })] })] })] })] }));
+}
+function DetailBody({ report, view, onViewChange, onOpenPrompt, onJumpTurn, onOpenSpan, scrollTarget, onScrolled, onTip, onTipHide, onLoadConvo }) {
+    if (report.status !== 'ok')
+        return _jsx("p", { className: "mut", children: safeStatus(report) });
+    const a = report.agg;
+    const focus = focusSets(report, view.activeId);
+    const recByTurn = new Map();
+    for (const r of report.recommendations ?? [])
+        for (const ti of r.evidence?.turnIndexes ?? []) {
+            const arr = recByTurn.get(ti) ?? [];
+            if (!arr.includes(r.id))
+                arr.push(r.id);
+            recByTurn.set(ti, arr);
+        }
+    const meta = [
+        report.meta?.asOf ? t('sessions.insightAsOf', { asOf: String(report.meta.asOf) }) : '',
+        report.meta?.partial ? t('sessions.insightPartial') : '',
+        report.meta?.capped ? t('sessions.insightCapped', { shown: String(report.meta.spansReturned ?? report.spans?.length ?? 0), total: String(report.meta.spansTotal ?? report.spans?.length ?? 0) }) : '',
+    ].filter(Boolean).join(' · ');
+    const spanCount = report.spans?.length ?? 0;
+    const turnTotal = report.turnTimeline?.length ?? 0;
+    const setTab = (tab) => {
+        onViewChange({ tab });
+        if (tab === 'convo' && !view.convo.messages.length && !view.convo.loading)
+            onLoadConvo(true);
+    };
+    const toggleSpan = (idx) => onViewChange({ openSpans: toggleSet(view.openSpans, idx) });
+    const toggleTurn = (idx) => onViewChange({ openTurns: toggleSet(view.openTurns, idx) });
+    const togglePrompt = (idx) => onViewChange({ openPrompts: toggleSet(view.openPrompts, idx) });
+    const togglePromptRaw = (idx) => onViewChange({ rawPrompts: toggleSet(view.rawPrompts, idx) });
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "cards insight-detail-metrics", children: [_jsx(MetricCard, { label: t('insights.metricSpans'), value: fmtInt(a.totalSpans) }), _jsx(MetricCard, { label: t('insights.metricFailed'), value: fmtInt(a.failedSpans) }), _jsx(MetricCard, { label: t('insights.metricSlow'), value: fmtInt(a.slowSpans) }), _jsx(MetricCard, { label: t('insights.metricRw'), value: a.readWriteRatio === null ? '-' : a.readWriteRatio.toFixed(1) })] }), meta ? _jsx("p", { className: "insight-meta", children: meta }) : null, _jsxs("section", { className: "block recblock", children: [_jsx("h3", { children: t('insights.recommendations') }), _jsx(Recommendations, { report: report, activeId: view.activeId, onActive: activeId => onViewChange({ activeId }) })] }), _jsx(TurnRail, { report: report, focus: focus, recByTurn: recByTurn, onJumpTurn: onJumpTurn, onTip: onTip, onTipHide: onTipHide }), _jsx(WorkGantt, { report: report, onOpenSpan: onOpenSpan, onTip: onTip, onTipHide: onTipHide }), _jsx(Subagents, { report: report }), _jsx(ContextCurve, { report: report, onTip: onTip, onTipHide: onTipHide }), _jsxs("div", { className: "detailtabs", children: [_jsxs("div", { className: "detailtabbar", role: "tablist", "aria-label": t('insights.detailTabs'), children: [_jsxs("button", { type: "button", role: "tab", className: view.tab === 'spans' ? 'on' : '', onClick: () => setTab('spans'), children: [t('insights.trace'), " ", _jsx("b", { children: spanCount })] }), _jsxs("button", { type: "button", role: "tab", className: view.tab === 'ledger' ? 'on' : '', onClick: () => setTab('ledger'), children: [t('insights.ledger'), " ", _jsx("b", { children: turnTotal })] }), _jsx("button", { type: "button", role: "tab", className: view.tab === 'convo' ? 'on' : '', onClick: () => setTab('convo'), children: t('insights.replay') })] }), _jsxs("div", { className: "detailtabbody", children: [_jsx("div", { className: "insight-tab-panel", "data-panel": "spans", hidden: view.tab !== 'spans', children: _jsx(Evidence, { report: report, focus: focus, view: view, onSpanFilter: spanFilter => onViewChange({ spanFilter }), onToggleSpan: toggleSpan, scrollTarget: scrollTarget, onScrolled: onScrolled }) }), _jsx("div", { className: "insight-tab-panel", "data-panel": "ledger", hidden: view.tab !== 'ledger', children: _jsx(TurnEfficiency, { report: report, focus: focus, view: view, onLedgerSort: ledgerSort => onViewChange({ ledgerSort }), onLedgerSender: ledgerSender => onViewChange({ ledgerSender }), onToggleTurn: toggleTurn, onToggleSpan: toggleSpan, onTogglePrompt: togglePrompt, onTogglePromptRaw: togglePromptRaw, onOpenPrompt: onOpenPrompt, scrollTarget: scrollTarget, onScrolled: onScrolled }) }), _jsx("div", { className: "insight-tab-panel", "data-panel": "convo", hidden: view.tab !== 'convo', children: _jsx(Conversation, { convo: view.convo, recByTurn: recByTurn, onQuery: q => onLoadConvo(true, { q }), onRole: role => { if (role !== view.convo.role)
+                                        onLoadConvo(true, { role }); }, onTag: tag => { if (tag !== view.convo.tag)
+                                        onLoadConvo(true, { tag }); }, onLoadMore: () => onLoadConvo(false), onToggleOp: id => onViewChange({ convo: { ...view.convo, openOps: toggleSet(view.convo.openOps, id) } }), onOpenPrompt: onOpenPrompt }) })] })] })] }));
+}
+function PromptModal({ modal, onClose, onToggleRaw }) {
+    if (modal.turnIndex === null)
+        return null;
+    const prompt = modal.prompt;
+    const src = prompt?.source;
+    const cleaned = prompt?.text ? (cleanPromptText(prompt.text) || prompt.text) : '';
+    const trunc = prompt?.truncated;
+    const body = prompt
+        ? modal.raw
+            ? _jsxs("pre", { className: "tp-raw modal-raw", children: [cleaned, trunc ? '\n…' : ''] })
+            : _jsx(MarkdownBody, { className: "md-body modal-md", text: cleaned + (trunc ? ' …' : '') })
+        : _jsx(LoadingState, { label: t('insights.detailLoading'), compact: true });
+    return (_jsxs("div", { id: "insight-modal", className: "insight-modal", children: [_jsx("div", { className: "modal-backdrop", onClick: onClose }), _jsx("div", { className: "modal-panel", role: "dialog", "aria-modal": "true", "aria-label": t('insights.turnPrompt'), children: prompt ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "modal-head", children: [_jsxs("div", { className: "modal-who", children: [_jsx(PromptSourceChip, { src: src }), _jsx(PromptMentions, { src: src }), _jsxs("span", { className: "modal-turnno", children: ["#", modal.turnIndex] })] }), _jsxs("div", { className: "modal-acts", children: [_jsx("button", { type: "button", className: "tp-toggle", onClick: onToggleRaw, children: modal.raw ? t('insights.turnPromptRendered') : t('insights.turnPromptRaw') }), _jsx("button", { type: "button", className: "modal-close", onClick: onClose, "aria-label": t('insights.modalClose'), children: "\u00D7" })] })] }), _jsxs("div", { className: "modal-body", children: [body, trunc ? _jsx("p", { className: "modal-trunc mut", children: t('insights.promptTruncated') }) : null] })] })) : _jsx("div", { className: "modal-body", children: body }) })] }));
+}
+function CommandPalette({ palette, items, onClose, onInput, onChoose }) {
+    if (!palette.open)
+        return null;
+    const anchored = !!palette.anchor;
+    const panelStyle = anchored
+        ? {
+            top: palette.anchor.top,
+            left: palette.anchor.left,
+            width: palette.anchor.width,
+            '--palette-panel-max-height': `${palette.anchor.maxHeight}px`,
+            '--palette-list-max-height': `${Math.max(80, palette.anchor.maxHeight - 54)}px`,
+        }
+        : undefined;
+    const node = (_jsxs("div", { id: "insight-palette", className: `insights-page insight-palette ${anchored ? 'palette-anchored' : 'palette-centered'}`, children: [_jsx("div", { className: "modal-backdrop", onClick: onClose }), _jsxs("div", { className: `palette-panel${anchored ? ' anchored' : ''}`, role: "dialog", "aria-modal": "false", style: panelStyle, children: [_jsx("input", { type: "search", className: "palette-input", placeholder: t('insights.palettePlaceholder'), value: palette.q, autoFocus: true, onChange: event => onInput(event.currentTarget.value) }), _jsx("div", { className: "palette-list", children: items.length ? items.map((it, i) => (_jsxs("button", { type: "button", className: `palette-item${i === palette.idx ? ' on' : ''}`, onClick: () => onChoose(it.type, it.key), children: [_jsx("span", { className: "pal-label", children: it.label }), _jsx("span", { className: "pal-sub", children: it.sub })] }, `${it.type}:${it.key}`))) : _jsx("p", { className: "mut palette-empty", children: t('insights.paletteEmpty') }) })] })] }));
+    return createPortal(node, document.body);
+}
+function readInitialState() {
+    const hp = parseInsightsHash();
+    return {
+        tab: initialInsightTab(),
+        filter: INSIGHT_FILTERS.includes(hp.filter) ? hp.filter : 'all',
+        cli: new Set((hp.cli ?? '').split(',').filter(Boolean)),
+        q: hp.q ?? '',
+        sess: hp.sess ?? null,
+        project: hp.project ?? '',
+        time: hp.time ?? 'all',
+        showNoise: hp.noise === '1',
+        sort: SESS_SORT_KEYS.includes(hp.sort) ? hp.sort : 'recent',
+        layout: hp.layout === 'table' ? 'table' : 'card',
+    };
 }
-// Render-once scaffold: React owns the translated page shell and unmount
-// lifecycle; wireInsightsPage owns the tab/detail/modal controller until the
-// insight workbench is split into smaller reactive components.
 function InsightsPage() {
     const tr = useT();
-    const rootRef = useRef(null);
-    const tab = initialInsightTab();
+    const initial = useRef(readInitialState()).current;
+    const selectedIdRef = useRef(null);
+    const initialSessRef = useRef(initial.sess);
+    const detailReqRef = useRef(0);
+    const convoReqRef = useRef(0);
+    const modalReqRef = useRef(0);
+    const [namesVersion, setNamesVersion] = useState(0);
+    const [overviewData, setOverviewData] = useState(null);
+    const [records, setRecords] = useState([]);
+    const [statusText, setStatusText] = useState('');
+    const [refreshing, setRefreshing] = useState(false);
+    const [tab, setTab] = useState(initial.tab);
+    const [filter, setFilter] = useState(initial.filter);
+    const [cliFilter, setCliFilter] = useState(
+    // Single-select model: a legacy multi-CLI deep-link (?cli=a,b) collapses to its first CLI
+    // so the dropdown label always matches the active filter (was: showed "all" while filtering ≥2).
+    initial.cli.size > 1 ? new Set([[...initial.cli][0]]) : initial.cli);
+    const [q, setQ] = useState(initial.q);
+    const [project, setProject] = useState(initial.project);
+    const [timeWin, setTimeWin] = useState(initial.time);
+    const [showNoise, setShowNoise] = useState(initial.showNoise);
+    const [sessSort, setSessSort] = useState(initial.sort);
+    const [sessLayout, setSessLayout] = useState(initial.layout);
+    const [selectedId, setSelectedId] = useState(null);
+    const [detailReport, setDetailReport] = useState(null);
+    const [detailLoading, setDetailLoading] = useState(false);
+    const [detailError, setDetailError] = useState('');
+    const [detailView, setDetailView] = useState({
+        activeId: null,
+        tab: 'spans',
+        spanFilter: 'all',
+        openSpans: new Set(),
+        openTurns: new Set(),
+        ledgerSort: 'normal',
+        openPrompts: new Set(),
+        rawPrompts: new Set(),
+        ledgerSender: 'all',
+        convo: newConvoState(),
+    });
+    const [openHot, setOpenHot] = useState(new Set());
+    const [palette, setPalette] = useState({ open: false, q: '', idx: 0 });
+    const [modal, setModal] = useState({ turnIndex: null, raw: false, prompt: null, loading: false });
+    const [scrollTarget, setScrollTarget] = useState(null);
+    const [tip, setTip] = useState({ text: '', x: 0, y: 0, visible: false });
+    const scope = useMemo(() => buildInsightScope(timeWin, project, showNoise), [project, showNoise, timeWin]);
+    const cliBase = useMemo(() => filterRecords(records, filter, q, new Set(), scope), [filter, q, records, scope, namesVersion]);
+    const presentCliKey = useMemo(() => [...new Set(cliBase.map(cliIdOf))].sort().join(','), [cliBase]);
+    const projectBase = useMemo(() => filterRecords(records, filter, q, cliFilter, { ...scope, project: undefined }), [cliFilter, filter, q, records, scope, namesVersion]);
+    const projectOpts = useMemo(() => projectOptions(projectBase), [projectBase]);
+    const projectDropdownOptions = useMemo(() => [
+        { value: '', label: tr('insights.projectAll') },
+        ...projectOpts.map(o => ({ value: o.id, label: `${o.id} (${o.count})` })),
+    ], [projectOpts, tr]);
+    const timeDropdownOptions = useMemo(() => TIME_WINDOWS.map(w => ({ value: w.key, label: tr(w.label) })), [tr]);
+    const reviewDropdownOptions = useMemo(() => INSIGHT_FILTERS.map(f => ({
+        value: f,
+        label: f === 'all'
+            ? tr('insights.filterAllSessions')
+            : f === 'review'
+                ? tr('insights.filterReview')
+                : f === 'failed'
+                    ? tr('insights.filterFailed')
+                    : tr('insights.filterSlow'),
+    })), [tr]);
+    const cliDropdownOptions = useMemo(() => [
+        { value: CLI_FILTER_ALL, label: `${tr('insights.filterAllCli')} (${cliBase.length})` },
+        ...cliCounts(cliBase).map(c => ({ value: c.id, label: `${c.id} (${c.count})` })),
+    ], [cliBase, tr]);
+    const projectLabel = projectDropdownOptions.find(option => option.value === project)?.label ?? tr('insights.projectAll');
+    const timeLabel = timeDropdownOptions.find(option => option.value === timeWin)?.label ?? tr('insights.timeAll');
+    const reviewLabel = reviewDropdownOptions.find(option => option.value === filter)?.label ?? tr('insights.filterAllSessions');
+    const cliFilterValue = cliFilter.size === 1 ? [...cliFilter][0] : CLI_FILTER_ALL;
+    const cliFilterLabel = cliDropdownOptions.find(option => option.value === cliFilterValue)?.label ?? tr('insights.filterAllCli');
+    const rows = useMemo(() => sortRecordsBy(filterRecords(records, filter, q, cliFilter, scope), sessSort), [cliFilter, filter, q, records, scope, sessSort, namesVersion]);
+    const overview = useMemo(() => overviewData ? aggregateRecords(rows) : null, [overviewData, rows]);
+    const selectedRecord = useMemo(() => selectedId ? rows.find(r => r.session.sessionId === selectedId) ?? records.find(r => r.session.sessionId === selectedId) : undefined, [records, rows, selectedId]);
+    const paletteItems = useMemo(() => {
+        const ql = palette.q.trim().toLowerCase();
+        const tabs = INSIGHT_TABS
+            .map(tb => ({ type: 'tab', key: tb.key, label: t(tb.label), sub: t('insights.paletteTabs') }))
+            .filter(it => !ql || it.label.toLowerCase().includes(ql));
+        const sess = records
+            .filter(r => {
+            const s = r.session;
+            return !ql || `${sessionTitle(s)} ${botDisplayName(s)} ${s.cliId ?? ''}`.toLowerCase().includes(ql);
+        })
+            .slice(0, 20)
+            .map(r => ({ type: 'session', key: String(r.session.sessionId), label: sessionTitle(r.session), sub: `${botDisplayName(r.session)} · ${r.session.cliId ?? '-'}` }));
+        return [...tabs, ...sess];
+    }, [palette.q, records, namesVersion]);
+    const showTip = useCallback((event, text) => {
+        const pad = 14;
+        setTip({ text, x: event.clientX + pad, y: event.clientY + pad, visible: true });
+    }, []);
+    const hideTip = useCallback(() => setTip(v => ({ ...v, visible: false })), []);
+    const patchDetailView = useCallback((patch) => {
+        setDetailView(prev => ({ ...prev, ...patch }));
+    }, []);
+    const closeModal = useCallback(() => {
+        setModal({ turnIndex: null, raw: false, prompt: null, loading: false });
+    }, []);
+    const resetDetailState = useCallback(() => {
+        setDetailReport(null);
+        setDetailError('');
+        setDetailLoading(false);
+        setDetailView({
+            activeId: null,
+            tab: 'spans',
+            spanFilter: 'all',
+            openSpans: new Set(),
+            openTurns: new Set(),
+            ledgerSort: 'normal',
+            openPrompts: new Set(),
+            rawPrompts: new Set(),
+            ledgerSender: 'all',
+            convo: newConvoState(),
+        });
+        setScrollTarget(null);
+        closeModal();
+    }, [closeModal]);
+    const selectSession = useCallback((sessionId) => {
+        selectedIdRef.current = sessionId;
+        setSelectedId(sessionId);
+        resetDetailState();
+        setDetailLoading(true);
+        const req = ++detailReqRef.current;
+        void (async () => {
+            try {
+                const report = await fetchInsightDetail(sessionId);
+                if (req !== detailReqRef.current || selectedIdRef.current !== sessionId)
+                    return;
+                setDetailReport(report);
+            }
+            catch (e) {
+                if (req !== detailReqRef.current || selectedIdRef.current !== sessionId)
+                    return;
+                setDetailError(String(e));
+            }
+            finally {
+                if (req === detailReqRef.current && selectedIdRef.current === sessionId)
+                    setDetailLoading(false);
+            }
+        })();
+    }, [resetDetailState]);
+    const loadConvo = useCallback((reset, overrides = {}) => {
+        const sid = selectedIdRef.current;
+        if (!sid || detailView.convo.loading)
+            return;
+        const nextQ = overrides.q ?? detailView.convo.q;
+        const nextRole = overrides.role ?? detailView.convo.role;
+        const nextTag = overrides.tag ?? detailView.convo.tag;
+        const offset = reset ? 0 : detailView.convo.nextOffset;
+        setDetailView(prev => ({
+            ...prev,
+            convo: {
+                ...prev.convo,
+                ...overrides,
+                messages: reset ? [] : prev.convo.messages,
+                nextOffset: reset ? 0 : prev.convo.nextOffset,
+                hasMore: reset ? false : prev.convo.hasMore,
+                loading: true,
+            },
+        }));
+        const req = ++convoReqRef.current;
+        void (async () => {
+            try {
+                const c = await fetchInsightConversation(sid, { offset, limit: 40, q: nextQ, role: nextRole, tag: nextTag });
+                if (req !== convoReqRef.current || selectedIdRef.current !== sid)
+                    return;
+                setDetailView(prev => ({
+                    ...prev,
+                    convo: {
+                        ...prev.convo,
+                        messages: reset ? c.messages : [...prev.convo.messages, ...c.messages],
+                        total: c.total,
+                        hasMore: c.hasMore,
+                        nextOffset: c.nextOffset,
+                        loading: false,
+                    },
+                }));
+            }
+            catch {
+                if (req !== convoReqRef.current || selectedIdRef.current !== sid)
+                    return;
+                setDetailView(prev => ({ ...prev, convo: { ...prev.convo, loading: false } }));
+            }
+        })();
+    }, [detailView.convo]);
+    const refresh = useCallback(async () => {
+        setRefreshing(true);
+        setStatusText(tr('insights.loading'));
+        try {
+            const overviewNext = await fetchInsightsSummary();
+            setOverviewData(overviewNext);
+            setRecords(overviewNext.sessions.map(toRecord));
+            setStatusText(tr('insights.loaded', { count: overviewNext.meta.analyzedSessions }));
+        }
+        catch (e) {
+            setOverviewData(null);
+            setRecords([]);
+            setStatusText(`${tr('insights.unavailable')}: ${String(e)}`);
+        }
+        finally {
+            setRefreshing(false);
+        }
+    }, [tr]);
+    const openPromptModal = useCallback((turnIndex) => {
+        const sid = selectedIdRef.current;
+        if (!sid)
+            return;
+        const req = ++modalReqRef.current;
+        setModal({ turnIndex, raw: false, prompt: null, loading: true });
+        void (async () => {
+            try {
+                const prompt = await fetchTurnPrompt(sid, turnIndex);
+                if (req !== modalReqRef.current || selectedIdRef.current !== sid)
+                    return;
+                setModal({ turnIndex, raw: false, prompt, loading: false });
+            }
+            catch {
+                if (req !== modalReqRef.current || selectedIdRef.current !== sid)
+                    return;
+                setModal({ turnIndex, raw: false, prompt: { text: tr('insights.unavailable'), truncated: false }, loading: false });
+            }
+        })();
+    }, [tr]);
+    const jumpToSession = useCallback((sessionId) => {
+        setTab('sessions');
+        selectSession(sessionId);
+    }, [selectSession]);
+    const openSpanFromVisual = useCallback((idx) => {
+        patchDetailView({ tab: 'spans', spanFilter: 'all', openSpans: addToSet(detailView.openSpans, idx) });
+        setScrollTarget({ kind: 'span', index: idx });
+    }, [detailView.openSpans, patchDetailView]);
+    const jumpTurnFromRail = useCallback((turn) => {
+        patchDetailView({
+            tab: 'ledger',
+            ledgerSort: 'normal',
+            ledgerSender: turnSenderKind(turn) === 'system' ? 'system' : detailView.ledgerSender,
+            openTurns: addToSet(detailView.openTurns, turn.turnIndex),
+        });
+        setScrollTarget({ kind: 'turn', index: turn.turnIndex });
+    }, [detailView.ledgerSender, detailView.openTurns, patchDetailView]);
+    const choosePalette = useCallback((type, key) => {
+        setPalette({ open: false, q: '', idx: 0 });
+        if (type === 'tab') {
+            setTab(key);
+            selectedIdRef.current = null;
+            setSelectedId(null);
+            return;
+        }
+        jumpToSession(key);
+    }, [jumpToSession]);
     useEffect(() => {
-        if (!rootRef.current)
-            return undefined;
-        return wireInsightsPage(rootRef.current);
+        void loadNameMaps().then(() => setNamesVersion(v => v + 1));
     }, []);
-    return (_jsxs("section", { className: "page insights-page", ref: rootRef, children: [_jsxs("div", { className: "page-heading", children: [_jsxs("div", { children: [_jsx("p", { className: "eyebrow", children: tr('nav.insights') }), _jsx("h1", { children: tr('insights.title') }), _jsx("p", { children: tr('insights.subtitle') })] }), _jsxs("div", { className: "insight-head-acts", children: [_jsx("button", { type: "button", id: "insight-palette-open", className: "ins-clear", children: tr('insights.paletteOpen') }), _jsx("button", { type: "button", id: "insight-refresh", className: "primary", children: tr('insights.refresh') })] })] }), _jsxs("form", { id: "insight-filters", className: "filters insights-filters", children: [_jsx("input", { type: "search", name: "q", placeholder: tr('insights.search') }), _jsx("select", { id: "insight-project", className: "ins-select", "aria-label": tr('insights.projectAll') }), _jsx("select", { id: "insight-time", className: "ins-select", "aria-label": tr('insights.timeAll'), children: TIME_WINDOWS.map(w => _jsx("option", { value: w.key, children: tr(w.label) }, w.key)) }), _jsxs("div", { className: "segmented", role: "group", "aria-label": tr('insights.filter'), children: [_jsx("button", { type: "button", "data-filter": "all", children: tr('insights.filterAll') }), _jsx("button", { type: "button", "data-filter": "review", children: tr('insights.filterReview') }), _jsx("button", { type: "button", "data-filter": "failed", children: tr('insights.filterFailed') }), _jsx("button", { type: "button", "data-filter": "slow", children: tr('insights.filterSlow') })] }), _jsx("div", { id: "insight-cli-filter", className: "spanfilter cli-filter", role: "group", "aria-label": tr('insights.filter') }), _jsxs("label", { className: "ins-toggle", children: [_jsx("input", { type: "checkbox", id: "insight-noise" }), " ", tr('insights.showAll')] }), _jsx("button", { type: "button", id: "insight-clear", className: "ins-clear", children: tr('insights.clear') })] }), _jsx("div", { id: "insight-tabbar", children: _jsx(Html, { html: renderTabBar(tab) }) }), _jsx("div", { id: "insight-status", className: "insight-page-status" }), _jsx("div", { className: "insight-panel", role: "tabpanel", "data-tabpanel": "overview", children: _jsx("div", { id: "insight-overview" }) }), _jsxs("div", { className: "insight-panel", role: "tabpanel", "data-tabpanel": "sessions", hidden: true, children: [_jsxs("div", { id: "insight-list-view", children: [_jsxs("div", { className: "insight-list-head", children: [_jsx("span", { id: "insight-list-subtitle" }), _jsx("div", { className: "sesssort", id: "insight-sort" })] }), _jsx("div", { id: "insight-list" })] }), _jsxs("div", { id: "insight-detail-view", hidden: true, children: [_jsxs("button", { type: "button", id: "insight-back", className: "ins-back", children: ["\u2190 ", tr('insights.backToList')] }), _jsx("div", { id: "insight-detail", children: _jsx(Html, { html: renderDetailShell(undefined) }) })] })] }), _jsx("div", { className: "insight-panel", role: "tabpanel", "data-tabpanel": "flow", hidden: true, children: _jsx("div", { id: "insight-flow" }) }), _jsx("div", { className: "insight-panel", role: "tabpanel", "data-tabpanel": "dist", hidden: true, children: _jsx("div", { id: "insight-dist" }) }), _jsx("div", { className: "insight-panel", role: "tabpanel", "data-tabpanel": "hot", hidden: true, children: _jsx("div", { id: "insight-hot" }) }), _jsx("div", { id: "insight-modal", className: "insight-modal", hidden: true }), _jsx("div", { id: "insight-palette", className: "insight-palette", hidden: true }), _jsx("div", { id: "insight-tip", className: "ins-tip", role: "tooltip", hidden: true })] }));
+    useEffect(() => {
+        void refresh();
+    }, [refresh]);
+    useEffect(() => {
+        selectedIdRef.current = selectedId;
+    }, [selectedId]);
+    useEffect(() => {
+        const present = new Set(presentCliKey.split(',').filter(Boolean));
+        setCliFilter(prev => {
+            let changed = false;
+            const next = new Set();
+            for (const id of prev) {
+                if (present.has(id))
+                    next.add(id);
+                else
+                    changed = true;
+            }
+            return changed ? next : prev;
+        });
+    }, [presentCliKey]);
+    useEffect(() => {
+        if (project && !projectOpts.some(o => o.id === project))
+            setProject('');
+    }, [project, projectOpts]);
+    useEffect(() => {
+        if (selectedId && records.length && !records.some(r => r.session.sessionId === selectedId)) {
+            selectedIdRef.current = null;
+            setSelectedId(null);
+            resetDetailState();
+        }
+    }, [records, resetDetailState, selectedId]);
+    useEffect(() => {
+        const want = initialSessRef.current;
+        if (!want || selectedId || !records.some(r => r.session.sessionId === want))
+            return;
+        initialSessRef.current = null;
+        selectSession(want);
+    }, [records, selectSession, selectedId]);
+    useEffect(() => {
+        if (detailView.tab === 'convo' && !detailView.convo.messages.length && !detailView.convo.loading)
+            loadConvo(true);
+    }, [detailView.convo.loading, detailView.convo.messages.length, detailView.tab, loadConvo]);
+    useEffect(() => {
+        const p = {};
+        if (tab !== 'overview')
+            p.tab = tab;
+        if (filter !== 'all')
+            p.filter = filter;
+        if (q.trim())
+            p.q = q.trim();
+        if (project)
+            p.project = project;
+        if (timeWin !== 'all')
+            p.time = timeWin;
+        if (cliFilter.size)
+            p.cli = [...cliFilter].join(',');
+        if (sessSort !== 'recent')
+            p.sort = sessSort;
+        if (sessLayout !== 'card')
+            p.layout = sessLayout;
+        if (showNoise)
+            p.noise = '1';
+        if (selectedId)
+            p.sess = selectedId;
+        try {
+            history.replaceState(null, '', buildInsightsHash(p));
+        }
+        catch { /* ignore */ }
+    }, [cliFilter, filter, project, q, selectedId, sessLayout, sessSort, showNoise, tab, timeWin]);
+    useEffect(() => {
+        const active = palette.open || modal.turnIndex !== null;
+        document.body.classList.toggle('insight-modal-open', active);
+        return () => document.body.classList.remove('insight-modal-open');
+    }, [modal.turnIndex, palette.open]);
+    useEffect(() => {
+        const onKey = (event) => {
+            if ((event.key === 'k' || event.key === 'K') && (event.metaKey || event.ctrlKey)) {
+                event.preventDefault();
+                setPalette(p => p.open ? { open: false, q: '', idx: 0 } : { open: true, q: '', idx: 0, anchor: undefined });
+                return;
+            }
+            if (palette.open) {
+                if (event.isComposing || event.keyCode === 229)
+                    return;
+                if (event.key === 'Escape') {
+                    event.preventDefault();
+                    setPalette({ open: false, q: '', idx: 0 });
+                }
+                else if (event.key === 'ArrowDown') {
+                    event.preventDefault();
+                    setPalette(p => ({ ...p, idx: Math.min(Math.max(0, paletteItems.length - 1), p.idx + 1) }));
+                }
+                else if (event.key === 'ArrowUp') {
+                    event.preventDefault();
+                    setPalette(p => ({ ...p, idx: Math.max(0, p.idx - 1) }));
+                }
+                else if (event.key === 'Enter') {
+                    event.preventDefault();
+                    const it = paletteItems[palette.idx];
+                    if (it)
+                        choosePalette(it.type, it.key);
+                }
+                return;
+            }
+            if (event.key === 'Escape' && modal.turnIndex !== null)
+                closeModal();
+        };
+        document.addEventListener('keydown', onKey);
+        return () => document.removeEventListener('keydown', onKey);
+    }, [choosePalette, closeModal, modal.turnIndex, palette.idx, palette.open, paletteItems]);
+    const clearFilters = () => {
+        setQ('');
+        setFilter('all');
+        setCliFilter(new Set());
+        setProject('');
+        setTimeWin('all');
+        setShowNoise(false);
+    };
+    const emptyHint = !rows.length && !showNoise ? t('insights.emptyAnalyzableHint') : undefined;
+    return (_jsxs("section", { className: "page insights-page", children: [_jsxs("div", { className: "page-heading", children: [_jsxs("div", { children: [_jsx("p", { className: "eyebrow", children: tr('nav.insights') }), _jsxs("div", { className: "insight-title-line", children: [_jsx("h1", { children: tr('insights.title') }), _jsx(InsightTabs, { active: tab, onChange: next => setTab(next) }), _jsx("div", { id: "insight-status", className: "insight-page-status", children: statusText })] })] }), _jsx("div", { className: "page-heading-actions insight-heading-actions", children: _jsx("button", { type: "button", id: "insight-palette-open", className: "insight-palette-trigger", onClick: event => {
+                                setPalette({
+                                    open: true,
+                                    q: '',
+                                    idx: 0,
+                                    anchor: paletteAnchorFromButton(event.currentTarget),
+                                });
+                            }, children: tr('insights.paletteOpen') }) })] }), _jsxs("form", { id: "insight-filters", className: "filters dashboard-toolbar insights-filters", onSubmit: event => event.preventDefault(), children: [_jsx("input", { type: "search", name: "q", placeholder: tr('insights.search'), value: q, onChange: event => setQ(event.currentTarget.value) }), _jsx(DropdownMenu, { id: "insight-project", className: "insight-filter-menu", ariaLabel: tr('insights.projectAll'), label: projectLabel, value: project, options: projectDropdownOptions, onChange: setProject }), _jsx(DropdownMenu, { id: "insight-time", className: "insight-filter-menu", ariaLabel: tr('insights.timeAll'), label: timeLabel, value: timeWin, options: timeDropdownOptions, onChange: setTimeWin }), _jsx(DropdownMenu, { id: "insight-review-filter", className: "insight-filter-menu insight-review-menu", ariaLabel: tr('insights.filter'), label: reviewLabel, value: filter, options: reviewDropdownOptions, onChange: setFilter }), _jsx(DropdownMenu, { id: "insight-cli-filter", className: "insight-filter-menu insight-cli-menu", ariaLabel: tr('insights.filter'), label: cliFilterLabel, value: cliFilterValue, options: cliDropdownOptions, onChange: value => setCliFilter(value === CLI_FILTER_ALL ? new Set() : new Set([value])) }), _jsxs("label", { className: "filter-toggle ins-toggle", children: [_jsx("input", { type: "checkbox", id: "insight-noise", checked: showNoise, onChange: event => setShowNoise(event.currentTarget.checked) }), _jsx("span", { className: "filter-toggle-label", children: tr('insights.showAll') }), _jsx("span", { className: "filter-toggle-switch", "aria-hidden": "true" })] }), _jsx("button", { type: "button", id: "insight-clear", className: "ins-clear", onClick: clearFilters, children: tr('insights.clear') }), _jsx("div", { className: "insight-head-acts", children: _jsx(RefreshIconButton, { id: "insight-refresh", label: tr('insights.refresh'), busy: refreshing, disabled: refreshing, onClick: () => void refresh() }) })] }), _jsx("div", { className: "insight-panel", role: "tabpanel", "data-tabpanel": "overview", hidden: tab !== 'overview', children: _jsx("div", { id: "insight-overview", children: overview ? _jsx(OverviewContent, { data: overview }) : null }) }), _jsx("div", { className: "insight-panel", role: "tabpanel", "data-tabpanel": "sessions", hidden: tab !== 'sessions', children: !selectedId ? (_jsxs("div", { id: "insight-list-view", children: [_jsxs("div", { className: "insight-list-head", children: [_jsx("span", { id: "insight-list-subtitle", children: tr('insights.listCount', { shown: rows.length, total: records.length }) }), _jsx("div", { className: "sesssort", id: "insight-sort", children: _jsx(SortBar, { sort: sessSort, layout: sessLayout, onSort: setSessSort, onLayout: setSessLayout }) })] }), _jsx("div", { id: "insight-list", children: sessLayout === 'table'
+                                ? _jsx(SessionTable, { records: rows, selectedId: selectedId, onSelect: selectSession, emptyHint: emptyHint })
+                                : _jsx(SessionRows, { records: rows, selectedId: selectedId, wide: true, onSelect: selectSession, emptyHint: emptyHint }) })] })) : (_jsxs("div", { id: "insight-detail-view", children: [_jsxs("button", { type: "button", id: "insight-back", className: "ins-back", onClick: () => { selectedIdRef.current = null; setSelectedId(null); resetDetailState(); }, children: ["\u2190 ", tr('insights.backToList')] }), _jsx("section", { id: "insight-detail", className: "insight-detail", children: selectedRecord ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "shead", children: [_jsx("h2", { children: sessionTitle(selectedRecord.session) }), _jsxs("div", { className: "smeta", children: [botDisplayName(selectedRecord.session), " \u00B7 ", String(selectedRecord.session.cliId ?? '-'), " \u00B7 ", _jsx("code", { children: String(selectedRecord.session.sessionId ?? '') })] })] }), _jsx("div", { id: "insight-detail-body", children: detailLoading ? _jsx(LoadingState, { label: tr('insights.detailLoading'), compact: true }) : detailError ? _jsx("p", { className: "mut", children: detailError }) : detailReport ? (_jsx(DetailBody, { report: detailReport, view: detailView, onViewChange: patchDetailView, onOpenPrompt: openPromptModal, onJumpTurn: jumpTurnFromRail, onOpenSpan: openSpanFromVisual, scrollTarget: scrollTarget, onScrolled: () => setScrollTarget(null), onTip: showTip, onTipHide: hideTip, onLoadConvo: loadConvo })) : _jsx("p", { className: "mut", children: tr('insights.selectSession') }) })] })) : _jsx("p", { className: "mut", children: tr('insights.selectSession') }) })] })) }), _jsx("div", { className: "insight-panel", role: "tabpanel", "data-tabpanel": "flow", hidden: tab !== 'flow', children: _jsx("div", { id: "insight-flow", children: overviewData ? _jsx(Flow, { records: rows, onSession: jumpToSession }) : null }) }), _jsx("div", { className: "insight-panel", role: "tabpanel", "data-tabpanel": "dist", hidden: tab !== 'dist', children: _jsx("div", { id: "insight-dist", children: overviewData ? _jsx(Distribution, { records: rows, onSort: sort => { setSessSort(sort); setTab('sessions'); selectedIdRef.current = null; setSelectedId(null); } }) : null }) }), _jsx("div", { className: "insight-panel", role: "tabpanel", "data-tabpanel": "hot", hidden: tab !== 'hot', children: _jsx("div", { id: "insight-hot", children: overviewData ? (_jsx(Hotspots, { records: rows, openHot: openHot, onToggleHot: key => setOpenHot(prev => toggleSet(prev, key)), onProject: p => { setProject(p); setTab('sessions'); selectedIdRef.current = null; setSelectedId(null); }, onSession: jumpToSession })) : null }) }), _jsx(PromptModal, { modal: modal, onClose: closeModal, onToggleRaw: () => setModal(m => ({ ...m, raw: !m.raw })) }), _jsx(CommandPalette, { palette: palette, items: paletteItems, onClose: () => setPalette({ open: false, q: '', idx: 0 }), onInput: next => setPalette(prev => ({ ...prev, open: true, q: next, idx: 0 })), onChoose: choosePalette }), _jsx(Tooltip, { tip: tip })] }));
 }
 export function renderInsightsPage(root) {
     return mountReactPage(root, _jsx(InsightsPage, {}));