botmux 2.89.0 → 2.90.0

package/dist/dashboard/web/insights.js

@@ -1,4 +1,4 @@
-import { botDisplayName, escapeHtml, loadNameMaps, relTime, stripMentionPrefix, t } from './ui.js';
+import { botDisplayName, escapeHtml, loadNameMaps, relTime, t } from './ui.js';
 import MarkdownIt from 'markdown-it';
 const SEVERITY_RANK = { bad: 0, warn: 1, info: 2 };
 function fmtInt(n) {
@@ -34,7 +34,12 @@ function safeStatus(report, error) {
     return report.status;
 }
 function sessionTitle(s) {
-    return stripMentionPrefix(s.title ?? s.firstUserMessage ?? s.rootMessageId ?? s.sessionId);
+    // Strip the leading @mention(s), then fall back to the id when nothing
+    // readable remains — e.g. a title of just "@Gpt" or a blank/whitespace one.
+    // (stripMentionPrefix returns the raw string when stripping empties it, so we
+    // inline the strip here to detect the truly-empty case and fall back.)
+    const stripped = String(s.title ?? '').replace(/^(?:@\S+\s*)+/, '').trim();
+    return stripped || String(s.sessionId ?? '');
 }
 function severityLabel(sev) {
     return sev === 'bad' ? t('insights.sevBad') : sev === 'warn' ? t('insights.sevWarn') : t('insights.sevInfo');
@@ -198,8 +203,6 @@ function aggregateRecords(records) {
         subagentCostShare: null,
     };
     let analyzed = 0;
-    let rwSum = 0;
-    let rwN = 0;
     const suggMap = new Map();
     for (const rec of records) {
         const r = rec.report;
@@ -221,10 +224,6 @@ function aggregateRecords(records) {
                 agg.phase[ph].ms += pv.ms;
             }
         }
-        if (a.readWriteRatio !== null && Number.isFinite(a.readWriteRatio)) {
-            rwSum += a.readWriteRatio;
-            rwN += 1;
-        }
         for (const s of r.suggestions ?? []) {
             const e = suggMap.get(s.id);
             if (e)
@@ -233,7 +232,12 @@ function aggregateRecords(records) {
                 suggMap.set(s.id, { id: s.id, title: s.title, severity: s.severity, count: 1, evidence: s.evidence ?? [], action: s.action });
         }
     }
-    agg.readWriteRatio = rwN ? Number((rwSum / rwN).toFixed(2)) : null;
+    // Pooled read:write (Σreads / Σwrites), consistent with the pooled totals on the
+    // same metric row (spans/failed/slow). A mean of per-session ratios would let a
+    // tiny 2-read/1-write session skew the headline as much as a 300/100 one.
+    agg.readWriteRatio = agg.phase.edit.count > 0
+        ? Number((agg.phase.research.count / agg.phase.edit.count).toFixed(2))
+        : null;
     const topFailedTools = Object.entries(agg.failByTool)
         .map(([tool, count]) => ({ tool, count }))
         .sort((x, y) => y.count - x.count)
@@ -242,6 +246,11 @@ function aggregateRecords(records) {
 }
 // Overview metrics + recommendations for the CURRENTLY VISIBLE (filtered) records,
 // so the summary tracks the active filter rather than staying global.
+// Cross-tool measurement caveat (Codex reads via shell aren't counted as 'read', etc.) —
+// shown under the overview & distribution so ratios/distributions aren't misread.
+function disclosureNote() {
+    return `<p class="insight-disclosure">⚖︎ ${escapeHtml(t('insights.disclosure'))}</p>`;
+}
 function renderOverview(d) {
     const a = d.agg;
     const rw = a.readWriteRatio === null ? '-' : a.readWriteRatio.toFixed(1);
@@ -277,20 +286,50 @@ function renderOverview(d) {
     }).join('') : `<p class="mut">${escapeHtml(t('insights.noFailures'))}</p>`}
         </div>
       </section>
-    </div>`;
+    </div>
+    ${disclosureNote()}`;
 }
-function renderPhaseMix(report) {
-    const entries = Object.entries(report.agg.phase ?? {}).filter(([, v]) => v.count > 0 || v.ms > 0);
+function phaseMixBar(phase) {
+    const entries = Object.entries(phase ?? {}).filter(([, v]) => v.count > 0 || v.ms > 0);
     if (!entries.length)
         return '';
-    return `<div class="mph">${entries.map(([phase, v]) => {
+    return `<div class="mph">${entries.map(([ph, v]) => {
         const weight = Math.max(1, v.ms || v.count);
-        return `<i class="${phaseClass(phase)}" style="flex:${weight}" title="${escapeHtml(`${phaseLabel(phase)} · ${v.count} · ${fmtMs(v.ms)}`)}"></i>`;
+        return `<i class="${phaseClass(ph)}" style="flex:${weight}" title="${escapeHtml(`${phaseLabel(ph)} · ${v.count} · ${fmtMs(v.ms)}`)}"></i>`;
     }).join('')}</div>`;
 }
+function renderPhaseMix(report) {
+    return phaseMixBar(report.agg.phase);
+}
+// Delegated sub-agents (Claude Task/Agent) as swim-lanes: each shows its type,
+// task, what it did (phase mix) and how long it ran. Renders nothing when none.
+function renderSubagents(report) {
+    const lanes = report.subagents ?? [];
+    if (!lanes.length)
+        return '';
+    const totMs = lanes.reduce((s, l) => s + l.durationMs, 0);
+    const rows = lanes.map(l => `<div class="sublane${l.failures ? ' bad' : ''}">
+      <div class="sublane-head">
+        <span class="sublane-type">${escapeHtml(l.agentType)}</span>
+        <span class="sublane-task">${escapeHtml(l.task?.text ?? '')}${l.task?.truncated ? '…' : ''}</span>
+      </div>
+      ${phaseMixBar(l.phase)}
+      <div class="sublane-stats">
+        <span>${fmtInt(l.spans)} ${escapeHtml(t('insights.spansShort'))}</span>
+        <span>${escapeHtml(fmtMs(l.durationMs))}</span>
+        ${l.failures ? `<span class="bad">${fmtInt(l.failures)} ${escapeHtml(t('insights.failedShort'))}</span>` : ''}
+      </div>
+    </div>`).join('');
+    return `<section class="block subagent-block">
+    <h3>${escapeHtml(t('insights.subagents'))} <span class="mut">· ${lanes.length} · ${escapeHtml(fmtMs(totMs))}</span></h3>
+    <p class="mut ins-hint">${escapeHtml(t('insights.subagentsHint'))}</p>
+    <div class="sublanes">${rows}</div>
+  </section>`;
+}
 const INSIGHT_TABS = [
     { key: 'overview', label: 'insights.tabOverview' },
     { key: 'sessions', label: 'insights.tabSessions' },
+    { key: 'flow', label: 'insights.tabFlow' },
     { key: 'dist', label: 'insights.tabDist' },
     { key: 'hot', label: 'insights.tabHot' },
 ];
@@ -333,7 +372,7 @@ function median(values) {
 }
 // One histogram card. bins is an ordered list of {label, test}; each session value
 // falls into the first matching bin. Reuses the .hbars bar styling.
-function renderHistogram(title, values, bins, fmtMedian = fmtInt) {
+function renderHistogram(title, values, bins, fmtMedian = fmtInt, sortKey) {
     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);
@@ -342,15 +381,48 @@ function renderHistogram(title, values, bins, fmtMedian = fmtInt) {
         const share = Math.round((c.count / total) * 100);
         return `<div class="hbrow"><div class="hblabel">${escapeHtml(c.label)}</div><div class="hbtrack"><div class="hbfill" style="width:${pct}%"></div></div><div class="hbval">${fmtInt(c.count)}<small>${share}%</small></div></div>`;
     }).join('');
+    const jump = sortKey ? `<button type="button" class="ihist-jump" data-distsort="${sortKey}">${escapeHtml(t('insights.viewSessions'))} ›</button>` : '';
     return `<section class="block ihist">
-    <div class="ihist-head"><h3>${escapeHtml(title)}</h3><span class="mut">${escapeHtml(t('insights.distMedian', { v: fmtMedian(median(values)) }))}</span></div>
+    <div class="ihist-head"><h3>${escapeHtml(title)}</h3><span class="mut">${escapeHtml(t('insights.distMedian', { v: fmtMedian(median(values)) }))}</span>${jump}</div>
     <div class="hbars">${rows}</div>
   </section>`;
 }
+// Sessions-per-day over the last 4 weeks (from each record's lastMessageAt) — a quick
+// "how busy lately" trend. Pure client-side, no new engine data.
+function renderTrend(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]++;
+    }
+    const total = counts.reduce((a, b) => a + b, 0);
+    if (!total)
+        return '';
+    const max = Math.max(1, ...counts);
+    // Native title tooltip (date · count). The old data-tip was never wired to a
+    // tooltip host outside the detail body, so it surfaced nothing on hover.
+    const bars = counts.map((c, j) => {
+        const d = new Date(now - (DAYS - 1 - j) * dayMs);
+        const label = `${d.getMonth() + 1}-${d.getDate()} · ${c}`;
+        return `<i class="trendbar" style="height:${c ? Math.max(8, Math.round((c / max) * 100)) : 2}%" title="${escapeHtml(label)}"></i>`;
+    }).join('');
+    return `<section class="block trend-block">
+    <div class="ihist-head"><h3>${escapeHtml(t('insights.distTrend'))}</h3><span class="mut">${escapeHtml(t('insights.distTrendSub'))} · ${total}</span></div>
+    <div class="trend">${bars}</div>
+  </section>`;
+}
 function renderDistribution(records) {
     const reports = okReports(records);
     if (!reports.length)
         return `<div class="insight-empty">${escapeHtml(t('insights.distEmpty'))}</div>`;
+    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);
@@ -358,65 +430,179 @@ function renderDistribution(records) {
     const rw = reports.map(r => r.agg.readWriteRatio).filter((v) => v !== null && Number.isFinite(v));
     return `<p class="mut ins-hint">${escapeHtml(t('insights.distHint'))}</p>
   <div class="ihist-grid">
+    ${renderTrend(records)}
     ${renderHistogram(t('insights.distSpans'), spans, [
         { 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 },
-    ])}
+    ], fmtInt, 'spans')}
     ${renderHistogram(t('insights.distFailed'), failed, [
         { 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 },
-    ])}
+    ], fmtInt, 'fails')}
     ${renderHistogram(t('insights.distSlow'), slow, [
         { 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 },
-    ])}
+    ], fmtInt, 'slow')}
     ${renderHistogram(t('insights.distAgentTime'), agentMin, [
         { 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 },
-    ], n => `${Math.round(n)}m`)}
+    ], n => `${Math.round(n)}m`, 'agent')}
     ${rw.length ? renderHistogram(t('insights.distRw'), rw, [
         { 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 },
     ], n => n.toFixed(1)) : ''}
-  </div>`;
+    ${renderHistogram(t('insights.distChurn'), churn, [
+        { 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 },
+    ])}
+  </div>
+  ${disclosureNote()}`;
+}
+const FLOW_PHASES = ['research', 'edit', 'run', 'delegate', 'discuss'];
+// "行为流": where the agent's actions & wall-time land across activity phases,
+// plus each session's phase rhythm. Built from agg.phase (present in summary mode),
+// so it works at the overview level without the (detail-only) turn timeline.
+function renderFlow(records) {
+    const ok = records.filter(r => r.report && r.report.status === 'ok' && r.report.agg);
+    if (!ok.length)
+        return `<div class="insight-empty">${escapeHtml(t('insights.distEmpty'))}</div>`;
+    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 nodes = 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);
+        const arrow = i < FLOW_PHASES.length - 1 ? '<span class="flow-arrow">→</span>' : '';
+        return `<div class="flow-node"><i class="flow-dot ${phaseClass(p)}"></i>
+      <strong>${escapeHtml(phaseLabel(p))}</strong>
+      <span class="flow-n">${fmtInt(v.count)}<em> · ${cPct}%</em></span>
+      <span class="flow-t">${escapeHtml(fmtMs(v.ms))}<em> · ${tPct}%</em></span></div>${arrow}`;
+    }).join('');
+    const bars = FLOW_PHASES.map(p => {
+        const v = tot[p];
+        const cPct = (v.count / totCount) * 100;
+        const tPct = (v.ms / totMs) * 100;
+        return `<div class="flow-brow">
+      <span class="flow-blabel"><i class="${phaseClass(p)}"></i>${escapeHtml(phaseLabel(p))}</span>
+      <span class="flow-btrack"><span class="flow-bfill ${phaseClass(p)}" style="width:${Math.max(2, cPct).toFixed(1)}%"></span><em>${Math.round(cPct)}%</em></span>
+      <span class="flow-btrack"><span class="flow-bfill ${phaseClass(p)}" style="width:${Math.max(2, tPct).toFixed(1)}%"></span><em>${Math.round(tPct)}%</em></span>
+    </div>`;
+    }).join('');
+    const rhythm = [...ok]
+        .sort((a, b) => agentMsOf(b.report) - agentMsOf(a.report))
+        .slice(0, 40)
+        .map(rec => `<button type="button" class="flow-sess" data-session-id="${escapeHtml(String(rec.session.sessionId))}">
+      <span class="flow-stitle">${escapeHtml(sessionTitle(rec.session))}</span>
+      ${renderPhaseMix(rec.report)}
+      <span class="flow-stime">${escapeHtml(fmtMs(agentMsOf(rec.report)))}</span></button>`)
+        .join('');
+    return `<p class="mut ins-hint">${escapeHtml(t('insights.flowHint'))}</p>
+    <section class="block flow-pipe-block">
+      <h3>${escapeHtml(t('insights.flowPipeline'))}</h3>
+      <p class="mut flow-sub">${escapeHtml(t('insights.flowPipeSub'))}</p>
+      <div class="flow-pipe">${nodes}</div>
+    </section>
+    <div class="insights-overview-grid">
+      <section class="block">
+        <h3>${escapeHtml(t('insights.flowShares'))}</h3>
+        <div class="flow-bhead"><span></span><span>${escapeHtml(t('insights.flowActShare'))}</span><span>${escapeHtml(t('insights.flowTimeShare'))}</span></div>
+        <div class="flow-bars">${bars}</div>
+      </section>
+      <section class="block">
+        <h3>${escapeHtml(t('insights.flowRhythm'))}</h3>
+        <div class="flow-rhythm">${rhythm}</div>
+        <div class="rl-legend">${FLOW_PHASES.map(p => `<span class="rl-item"><i class="${phaseClass(p)}"></i>${escapeHtml(phaseLabel(p))}</span>`).join('')}</div>
+      </section>
+    </div>
+    ${disclosureNote()}`;
 }
-function renderHotspots(records) {
-    const reports = okReports(records);
+function renderHotspots(records, openHot) {
+    const reports = records.filter(r => !!r.report && r.report.status === 'ok');
     if (!reports.length)
         return `<div class="insight-empty">${escapeHtml(t('insights.distEmpty'))}</div>`;
-    // Tool failure hotspots: total fails + how many sessions hit each tool.
-    const toolFails = new Map();
-    for (const r of reports) {
-        for (const [tool, n] of Object.entries(r.agg.failByTool ?? {})) {
-            const e = toolFails.get(tool) ?? { fails: 0, sessions: 0 };
-            e.fails += n;
-            e.sessions += 1;
-            toolFails.set(tool, e);
+    // Cross-session recurrence from each session's compact report.hot, tracking which
+    // sessions contributed so each row can drill down to them.
+    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 tools = [...toolFails.entries()].map(([tool, v]) => ({ tool, ...v })).sort((a, b) => b.fails - a.fails).slice(0, 10);
-    const toolMax = Math.max(1, ...tools.map(x => x.fails));
-    // Slowest sessions.
-    const slowSessions = [...records].filter(r => r.report?.status === 'ok' && r.report.agg.slowSpans > 0)
-        .sort((a, b) => (b.report.agg.slowSpans) - (a.report.agg.slowSpans)).slice(0, 8);
-    // Projects by session + fails.
+    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 block = (title, rows, meta) => `
+    <section class="block">
+      <h3>${escapeHtml(title)}</h3>
+      <div class="hotlist">${rows.length ? rows.map(h => {
+        const open = openHot.has(h.key);
+        const sess = open ? `<div class="hot-sess">${h.sessions.map(s => `<button type="button" class="hot-sesslink" data-session-id="${escapeHtml(s.id)}">${escapeHtml(s.title || s.id)}</button>`).join('')}</div>` : '';
+        return `<div class="hotitem${open ? ' open' : ''}">
+          <button type="button" class="hotrow" data-hotkey="${escapeHtml(h.key)}" aria-expanded="${open}">
+            <span class="hotlabel" title="${escapeHtml(h.label)}">${escapeHtml(h.label)}</span>
+            <span class="hotmeta">${meta(h)}</span>
+            <span class="hotses">${h.sessions.length} ${escapeHtml(t('insights.hotSessionsCol'))}</span>
+          </button>${sess}
+        </div>`;
+    }).join('') : `<p class="mut">-</p>`}</div>
+    </section>`;
+    // Projects (kept, with drill-down) + slowest sessions.
     const projMap = new Map();
-    for (const rec of records) {
-        if (rec.report?.status !== 'ok')
-            continue;
+    for (const rec of reports) {
         const p = projectOf(rec);
         if (!p)
             continue;
@@ -427,34 +613,30 @@ function renderHotspots(records) {
     }
     const projects = [...projMap.entries()].map(([id, v]) => ({ id, ...v })).sort((a, b) => b.fails - a.fails || b.sessions - a.sessions).slice(0, 10);
     const projMax = Math.max(1, ...projects.map(x => x.sessions));
+    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 `<p class="mut ins-hint">${escapeHtml(t('insights.hotHint'))}</p>
   <div class="hot-grid">
-    <section class="block">
-      <h3>${escapeHtml(t('insights.hotToolFailures'))}</h3>
-      <div class="hbars">${tools.length ? tools.map(x => {
-        const pct = Math.max(4, Math.round((x.fails / toolMax) * 100));
-        return `<div class="hbrow"><div class="hblabel">${escapeHtml(x.tool)}</div><div class="hbtrack"><div class="hbfill" style="width:${pct}%"></div></div><div class="hbval">${fmtInt(x.fails)}<small>${x.sessions} ${escapeHtml(t('insights.hotSessionsCol'))}</small></div></div>`;
-    }).join('') : `<p class="mut">${escapeHtml(t('insights.noFailures'))}</p>`}</div>
-    </section>
+    ${block(t('insights.hotFiles'), files, h => `${escapeHtml(t('insights.readsShort'))}${h.reads} · ${escapeHtml(t('insights.editsShort'))}${h.edits}`)}
+    ${block(t('insights.hotCommands'), cmds, h => `${h.runs}×${h.fails ? ` · <span class="bad">${h.fails} ${escapeHtml(t('insights.hotFailsCol'))}</span>` : ''}`)}
+    ${block(t('insights.hotErrors'), errs, h => `${h.count}×`)}
     <section class="block">
       <h3>${escapeHtml(t('insights.hotProjects'))}</h3>
       <div class="hbars">${projects.length ? projects.map(x => {
         const pct = Math.max(4, Math.round((x.sessions / projMax) * 100));
-        return `<div class="hbrow"><div class="hblabel">${escapeHtml(x.id)}</div><div class="hbtrack"><div class="hbfill" style="width:${pct}%"></div></div><div class="hbval">${fmtInt(x.sessions)}<small>${x.fails} ${escapeHtml(t('insights.hotFailsCol'))}</small></div></div>`;
+        return `<button type="button" class="hbrow hbrow-click" data-hotproject="${escapeHtml(x.id)}"><div class="hblabel">${escapeHtml(x.id)}</div><div class="hbtrack"><div class="hbfill" style="width:${pct}%"></div></div><div class="hbval">${fmtInt(x.sessions)}<small>${x.fails} ${escapeHtml(t('insights.hotFailsCol'))}</small></div></button>`;
     }).join('') : `<p class="mut">-</p>`}</div>
     </section>
     <section class="block hot-sessions">
       <h3>${escapeHtml(t('insights.hotSlowSessions'))}</h3>
       <div class="slist">${slowSessions.length ? slowSessions.map(rec => {
         const a = rec.report.agg;
-        return `<button type="button" class="srow" data-session-id="${escapeHtml(rec.session.sessionId)}">
+        return `<button type="button" class="srow" data-session-id="${escapeHtml(String(rec.session.sessionId))}">
           <div class="srmain"><strong>${escapeHtml(sessionTitle(rec.session))}</strong>
           <small>${escapeHtml(botDisplayName(rec.session))} · ${escapeHtml(String(rec.session.cliId ?? '-'))}</small></div>
           <div class="srstats"><b>${escapeHtml(t('insights.hotSlowCol'))}<em>${fmtInt(a.slowSpans)}</em></b><b>span<em>${fmtInt(a.totalSpans)}</em></b></div>
         </button>`;
     }).join('') : `<p class="mut">-</p>`}</div>
     </section>
-    <p class="hot-note mut">${escapeHtml(t('insights.hotComingSoon'))}</p>
   </div>`;
 }
 const SESS_SORTS = [
@@ -465,8 +647,10 @@ const SESS_SORTS = [
     { key: 'slow', label: 'insights.sortSlow' },
     { key: 'agent', label: 'insights.sortAgent' },
 ];
-function renderSortBar(active) {
-    return `<span class="sesssort-label mut">${escapeHtml(t('insights.sortLabel'))}</span>` + SESS_SORTS.map(s => `<button type="button" class="spanchip${s.key === active ? ' on' : ''}" data-sesssort="${s.key}">${escapeHtml(t(s.label))}</button>`).join('');
+function renderSortBar(active, layout) {
+    const sorts = `<span class="sesssort-label mut">${escapeHtml(t('insights.sortLabel'))}</span>` + SESS_SORTS.map(s => `<button type="button" class="spanchip${s.key === active ? ' on' : ''}" data-sesssort="${s.key}">${escapeHtml(t(s.label))}</button>`).join('');
+    const layouts = `<span class="sesssort-sep"></span>` + [['card', 'insights.layoutCard'], ['table', 'insights.layoutTable']].map(([k, lbl]) => `<button type="button" class="spanchip${layout === k ? ' on' : ''}" data-sesslayout="${k}">${escapeHtml(t(lbl))}</button>`).join('');
+    return sorts + layouts;
 }
 function reviewScore(r) {
     return r?.status === 'ok' ? r.agg.failedSpans * 6 + r.agg.slowSpans * 3 + r.suggestions.filter(s => s.severity === 'bad').length * 5 : 0;
@@ -500,7 +684,7 @@ function renderSessionRows(records, selectedId, wide = false) {
         const review = reportNeedsReview(r) ? ' review' : '';
         const reads = agg?.phase?.research?.count ?? 0;
         const edits = agg?.phase?.edit?.count ?? 0;
-        return `<button type="button" class="srow${on}${review}" data-session-id="${escapeHtml(s.sessionId)}">
+        return `<button type="button" class="srow${on}${review}" data-session-id="${escapeHtml(String(s.sessionId))}">
       <div class="srmain">
         <strong>${escapeHtml(sessionTitle(s))}</strong>
         <small>${escapeHtml(botDisplayName(s))} · ${escapeHtml(String(s.cliId ?? '-'))}${s.workingDir ? ` · ${escapeHtml(projectOf(rec))}` : ''} · ${escapeHtml(relTime(s.lastMessageAt ?? s.spawnedAt ?? 0))}</small>
@@ -516,6 +700,44 @@ function renderSessionRows(records, selectedId, wide = false) {
     </button>`;
     }).join('')}</div>`;
 }
+// Dense table layout for the session list (ASI 表格视图) — sticky header, tabular
+// columns; row click drills into the same full-width detail.
+function renderSessionTable(records, selectedId) {
+    if (!records.length)
+        return `<div class="insight-empty">${escapeHtml(t('insights.empty'))}</div>`;
+    const head = `<div class="strow sthead">
+    <span class="stc-title">${escapeHtml(t('insights.colTitle'))}</span>
+    <span class="stc-proj">${escapeHtml(t('insights.colProject'))}</span>
+    <span class="stc-num">${escapeHtml(t('insights.spansShort'))}</span>
+    <span class="stc-num">${escapeHtml(t('insights.failedShort'))}</span>
+    <span class="stc-num">${escapeHtml(t('insights.slowShort'))}</span>
+    <span class="stc-num">${escapeHtml(t('insights.rwShort'))}</span>
+    <span class="stc-num">${escapeHtml(t('insights.durShort'))}</span>
+    <span class="stc-num">${escapeHtml(t('insights.colTime'))}</span>
+  </div>`;
+    const rows = records.map(rec => {
+        const s = rec.session;
+        const r = rec.report;
+        const ok = r?.status === 'ok';
+        const agg = r?.agg;
+        const on = s.sessionId === selectedId ? ' on' : '';
+        const review = reportNeedsReview(r) ? ' review' : '';
+        const mid = ok
+            ? `<span class="stc-num">${fmtInt(agg.totalSpans)}</span>
+         <span class="stc-num${agg.failedSpans ? ' bad' : ''}">${fmtInt(agg.failedSpans)}</span>
+         <span class="stc-num">${fmtInt(agg.slowSpans)}</span>
+         <span class="stc-num">${agg.readWriteRatio !== null ? agg.readWriteRatio.toFixed(1) : '-'}</span>
+         <span class="stc-num">${escapeHtml(fmtMs(agentMsOf(r)))}</span>`
+            : `<span class="stc-msg">${escapeHtml(safeStatus(r, rec.error))}</span>`;
+        return `<button type="button" class="strow${on}${review}${ok ? '' : ' nostat'}" data-session-id="${escapeHtml(String(s.sessionId))}">
+      <span class="stc-title"><strong>${escapeHtml(sessionTitle(s))}</strong><small>${escapeHtml(botDisplayName(s))} · ${escapeHtml(String(s.cliId ?? '-'))}</small></span>
+      <span class="stc-proj">${escapeHtml(s.workingDir ? projectOf(rec) : '-')}</span>
+      ${mid}
+      <span class="stc-num stc-time">${escapeHtml(relTime(s.lastMessageAt ?? s.spawnedAt ?? 0))}</span>
+    </button>`;
+    }).join('');
+    return `<div class="stable">${head}${rows}</div>`;
+}
 // ── Diagnosis-driven detail view ────────────────────────────────────────────
 // codex's detail=spans report carries everything rendered here as fail-closed safe
 // projections (enums / tool names / numbers / basenames — never raw text):
@@ -1260,6 +1482,7 @@ function renderDetailBody(report, view) {
     </section>
     ${renderTurnRail(report, focus, recByTurn)}
     ${renderWorkGantt(report)}
+    ${renderSubagents(report)}
     ${renderContextCurve(report)}
     <div class="detailtabs">
       <div class="detailtabbar" role="tablist" aria-label="${escapeHtml(t('insights.detailTabs'))}">
@@ -1281,13 +1504,39 @@ async function fetchDetail(sessionId) {
         throw new Error(String(d?.error ?? r.status));
     return d.report;
 }
+// URL state (deep-link + refresh-stable): the insights view state lives in the hash
+// query after #/insights (e.g. #/insights?tab=dist&project=botmux&sess=<id>). Written
+// via history.replaceState (no router re-run), read back on (re)mount.
+function parseInsightsHash() {
+    const h = typeof location !== 'undefined' ? (location.hash || '') : '';
+    const qi = h.indexOf('?');
+    if (qi < 0)
+        return {};
+    const out = {};
+    for (const [k, v] of new URLSearchParams(h.slice(qi + 1)))
+        out[k] = v;
+    return out;
+}
+function buildInsightsHash(p) {
+    const sp = new URLSearchParams();
+    for (const [k, v] of Object.entries(p))
+        if (v)
+            sp.set(k, v);
+    const q = sp.toString();
+    return '#/insights' + (q ? `?${q}` : '');
+}
+const INSIGHT_FILTERS = ['all', 'review', 'failed', 'slow'];
+const INSIGHT_TAB_KEYS = ['overview', 'sessions', 'flow', 'dist', 'hot'];
+const SESS_SORT_KEYS = ['recent', 'review', 'spans', 'fails', 'slow', 'agent'];
 export function renderInsightsPage(root) {
+    const hp = parseInsightsHash();
     let overviewData = null;
     let records = [];
-    let filter = 'all';
-    const cliFilter = new Set();
-    let q = '';
+    let filter = INSIGHT_FILTERS.includes(hp.filter) ? hp.filter : 'all';
+    const cliFilter = new Set((hp.cli ?? '').split(',').filter(Boolean));
+    let q = hp.q ?? '';
     let selectedId = null;
+    let initialSess = hp.sess ?? null;
     let activeRec = null;
     let detailReport = null;
     let detailTab = 'spans';
@@ -1305,11 +1554,16 @@ export function renderInsightsPage(root) {
     let modalPrompt = null;
     let modalReq = 0;
     let disposed = false;
-    let tab = 'overview';
-    let project = '';
-    let timeWin = 'all';
-    let showNoise = false;
-    let sessSort = 'recent';
+    let tab = INSIGHT_TAB_KEYS.includes(hp.tab) ? hp.tab : 'overview';
+    let project = hp.project ?? '';
+    let timeWin = hp.time ?? 'all';
+    let showNoise = hp.noise === '1';
+    let sessSort = SESS_SORT_KEYS.includes(hp.sort) ? hp.sort : 'recent';
+    let sessLayout = hp.layout === 'table' ? 'table' : 'card';
+    const openHot = new Set();
+    let paletteOpen = false;
+    let paletteQ = '';
+    let paletteIdx = 0;
     root.innerHTML = `
     <section class="page insights-page">
       <div class="page-heading">
@@ -1318,7 +1572,10 @@ export function renderInsightsPage(root) {
           <h1>${escapeHtml(t('insights.title'))}</h1>
           <p>${escapeHtml(t('insights.subtitle'))}</p>
         </div>
-        <button type="button" id="insight-refresh" class="primary">${escapeHtml(t('insights.refresh'))}</button>
+        <div class="insight-head-acts">
+          <button type="button" id="insight-palette-open" class="ins-clear">${escapeHtml(t('insights.paletteOpen'))}</button>
+          <button type="button" id="insight-refresh" class="primary">${escapeHtml(t('insights.refresh'))}</button>
+        </div>
       </div>
       <form id="insight-filters" class="filters insights-filters">
         <input type="search" name="q" placeholder="${escapeHtml(t('insights.search'))}">
@@ -1352,9 +1609,11 @@ export function renderInsightsPage(root) {
           <div id="insight-detail">${renderDetailShell(undefined)}</div>
         </div>
       </div>
+      <div class="insight-panel" role="tabpanel" data-tabpanel="flow" hidden><div id="insight-flow"></div></div>
       <div class="insight-panel" role="tabpanel" data-tabpanel="dist" hidden><div id="insight-dist"></div></div>
       <div class="insight-panel" role="tabpanel" data-tabpanel="hot" hidden><div id="insight-hot"></div></div>
       <div id="insight-modal" class="insight-modal" hidden></div>
+      <div id="insight-palette" class="insight-palette" hidden></div>
       <div id="insight-tip" class="ins-tip" role="tooltip" hidden></div>
     </section>`;
     const status = root.querySelector('#insight-status');
@@ -1363,9 +1622,11 @@ export function renderInsightsPage(root) {
     const listSubtitle = root.querySelector('#insight-list-subtitle');
     const detail = root.querySelector('#insight-detail');
     const search = root.querySelector('input[name=q]');
+    search.value = q;
     const refreshBtn = root.querySelector('#insight-refresh');
     const filterButtons = [...root.querySelectorAll('[data-filter]')];
     const cliFilterEl = root.querySelector('#insight-cli-filter');
+    const flowEl = root.querySelector('#insight-flow');
     const distEl = root.querySelector('#insight-dist');
     const hotEl = root.querySelector('#insight-hot');
     const projectSel = root.querySelector('#insight-project');
@@ -1374,6 +1635,8 @@ export function renderInsightsPage(root) {
     const clearBtn = root.querySelector('#insight-clear');
     const tabbar = root.querySelector('#insight-tabbar');
     const panels = [...root.querySelectorAll('.insight-panel')];
+    const paletteEl = root.querySelector('#insight-palette');
+    const paletteOpenBtn = root.querySelector('#insight-palette-open');
     const listView = root.querySelector('#insight-list-view');
     const detailView = root.querySelector('#insight-detail-view');
     const backBtn = root.querySelector('#insight-back');
@@ -1390,6 +1653,101 @@ export function renderInsightsPage(root) {
         const sinceMs = w && w.days > 0 ? Date.now() - w.days * 86400000 : undefined;
         return { project: project || undefined, sinceMs, analyzableOnly: !showNoise };
     }
+    // Mirror current view state into the URL hash (deep-link + refresh-stable) without
+    // triggering the router (replaceState fires no hashchange).
+    function syncHash() {
+        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 */ }
+    }
+    function paletteItems() {
+        const ql = paletteQ.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];
+    }
+    function choosePalette(type, key) {
+        closePalette();
+        if (type === 'tab') {
+            tab = key;
+            selectedId = null;
+            paint();
+        }
+        else {
+            tab = 'sessions';
+            showTab();
+            void selectSession(key);
+        }
+    }
+    // Re-render ONLY the results list (not the <input>), so typing never rebuilds
+    // or re-focuses the input — that would reset the caret and break IME (CJK)
+    // composition on every keystroke.
+    function paintPaletteList() {
+        const list = paletteEl.querySelector('.palette-list');
+        if (!list)
+            return;
+        const items = paletteItems();
+        if (paletteIdx >= items.length)
+            paletteIdx = Math.max(0, items.length - 1);
+        list.innerHTML = items.length ? items.map((it, i) => `<button type="button" class="palette-item${i === paletteIdx ? ' on' : ''}" data-pal-type="${it.type}" data-pal-key="${escapeHtml(it.key)}" data-pal-i="${i}">
+        <span class="pal-label">${escapeHtml(it.label)}</span><span class="pal-sub">${escapeHtml(it.sub)}</span>
+      </button>`).join('') : `<p class="mut palette-empty">${escapeHtml(t('insights.paletteEmpty'))}</p>`;
+        list.querySelectorAll('.palette-item').forEach(btn => btn.addEventListener('click', () => choosePalette(btn.dataset.palType ?? 'tab', btn.dataset.palKey ?? '')));
+        list.querySelector('.palette-item.on')?.scrollIntoView({ block: 'nearest' });
+    }
+    function paintPalette() {
+        if (!paletteOpen) {
+            paletteEl.hidden = true;
+            paletteEl.innerHTML = '';
+            document.body.classList.remove('insight-modal-open');
+            return;
+        }
+        paletteEl.hidden = false;
+        document.body.classList.add('insight-modal-open');
+        // Build the shell once per open. The <input> stays stable across keystrokes;
+        // only paintPaletteList() touches the DOM on input/arrow navigation.
+        paletteEl.innerHTML = `<div class="modal-backdrop" data-pal-close></div>
+      <div class="palette-panel" role="dialog" aria-modal="true">
+        <input type="search" class="palette-input" placeholder="${escapeHtml(t('insights.palettePlaceholder'))}" value="${escapeHtml(paletteQ)}">
+        <div class="palette-list"></div>
+      </div>`;
+        const input = paletteEl.querySelector('.palette-input');
+        if (input) {
+            input.focus();
+            input.oninput = () => { paletteQ = input.value; paletteIdx = 0; paintPaletteList(); };
+        }
+        paletteEl.querySelectorAll('[data-pal-close]').forEach(el => el.addEventListener('click', closePalette));
+        paintPaletteList();
+    }
+    function openPalette() { paletteOpen = true; paletteQ = ''; paletteIdx = 0; paintPalette(); }
+    function closePalette() { paletteOpen = false; paintPalette(); }
     // Project <select> options reflect the severity+search+time scoped set (project
     // pick itself NOT applied), so the dropdown always shows reachable projects.
     function paintProjectOptions() {
@@ -1446,21 +1804,24 @@ export function renderInsightsPage(root) {
         filterButtons.forEach(btn => btn.classList.toggle('active', btn.dataset.filter === filter));
         overviewEl.innerHTML = overviewData ? renderOverview(aggregateRecords(rows)) : '';
         listSubtitle.textContent = t('insights.listCount', { shown: rows.length, total: records.length });
-        sortBar.innerHTML = renderSortBar(sessSort);
+        sortBar.innerHTML = renderSortBar(sessSort, sessLayout);
         // When the analyzable-only default empties the list, point at the toggle so
         // the user isn't stranded on a blank page wondering where their sessions went.
         list.innerHTML = (!rows.length && !showNoise)
             ? `<div class="insight-empty">${escapeHtml(t('insights.empty'))}<br><span class="mut">${escapeHtml(t('insights.emptyAnalyzableHint'))}</span></div>`
-            : renderSessionRows(rows, selectedId, true);
+            : sessLayout === 'table' ? renderSessionTable(rows, selectedId) : renderSessionRows(rows, selectedId, true);
         const selected = rows.find(r => r.session.sessionId === selectedId) ?? records.find(r => r.session.sessionId === selectedId);
         if (!selectedId || !selected)
             detail.innerHTML = renderDetailShell(undefined);
         wireSessionButtons(list);
         showSessionsView();
+        flowEl.innerHTML = overviewData ? renderFlow(rows) : '';
+        wireSessionButtons(flowEl, true);
         distEl.innerHTML = overviewData ? renderDistribution(rows) : '';
-        hotEl.innerHTML = overviewData ? renderHotspots(rows) : '';
+        hotEl.innerHTML = overviewData ? renderHotspots(rows, openHot) : '';
         wireSessionButtons(hotEl, true);
         showTab();
+        syncHash();
     }
     // Re-render the detail body in place (no refetch) after a focus/filter change.
     function paintDetailBody() {
@@ -1723,6 +2084,7 @@ export function renderInsightsPage(root) {
     async function selectSession(sessionId) {
         selectedId = sessionId;
         showSessionsView();
+        syncHash();
         activeRec = null;
         detailTab = 'spans';
         spanFilter = 'all';
@@ -1786,6 +2148,11 @@ export function renderInsightsPage(root) {
             selectedId = null;
         paint();
         refreshBtn.disabled = false;
+        // Restore a deep-linked session (load its detail) once records are in.
+        const want = initialSess;
+        initialSess = null;
+        if (want && !selectedId && records.some(r => r.session.sessionId === want))
+            void selectSession(want);
     }
     search.oninput = () => { q = search.value; paint(); };
     refreshBtn.onclick = () => void refresh();
@@ -1798,12 +2165,51 @@ export function renderInsightsPage(root) {
     });
     backBtn.addEventListener('click', () => { selectedId = null; showSessionsView(); paint(); });
     sortBar.addEventListener('click', e => {
+        const lay = e.target.closest('[data-sesslayout]');
+        if (lay) {
+            sessLayout = lay.dataset.sesslayout === 'table' ? 'table' : 'card';
+            paint();
+            return;
+        }
         const btn = e.target.closest('[data-sesssort]');
         if (!btn)
             return;
         sessSort = btn.dataset.sesssort || 'recent';
         paint();
     });
+    // 分布直方图 → 跳到会话 tab 按该指标排序。
+    distEl.addEventListener('click', e => {
+        const btn = e.target.closest('[data-distsort]');
+        if (!btn)
+            return;
+        sessSort = btn.dataset.distsort || 'recent';
+        tab = 'sessions';
+        selectedId = null;
+        paint();
+    });
+    // 项目热点 → 设项目筛选并跳到会话 tab（最慢会话行的 data-session-id 由 wireSessionButtons 处理）。
+    hotEl.addEventListener('click', e => {
+        const target = e.target;
+        // Expand/collapse a recurrence row → reveal its contributing sessions in place.
+        const hk = target.closest('[data-hotkey]');
+        if (hk) {
+            const k = hk.dataset.hotkey || '';
+            if (openHot.has(k))
+                openHot.delete(k);
+            else
+                openHot.add(k);
+            hotEl.innerHTML = renderHotspots(currentRows(), openHot);
+            wireSessionButtons(hotEl, true);
+            return;
+        }
+        const proj = target.closest('[data-hotproject]');
+        if (!proj)
+            return;
+        project = proj.dataset.hotproject || '';
+        tab = 'sessions';
+        selectedId = null;
+        paint();
+    });
     projectSel.addEventListener('change', () => { project = projectSel.value; paint(); });
     timeSel.addEventListener('change', () => { timeWin = timeSel.value; paint(); });
     noiseToggle.addEventListener('change', () => { showNoise = noiseToggle.checked; paint(); });
@@ -1836,9 +2242,49 @@ export function renderInsightsPage(root) {
             cliFilter.add(key);
         paint();
     });
-    // Esc closes the full-text prompt modal.
-    const onKey = (e) => { if (e.key === 'Escape' && modalTurn !== null)
-        closeModal(); };
+    paletteOpenBtn.addEventListener('click', openPalette);
+    // ⌘K opens the palette; Esc closes palette/modal; arrows + Enter drive the palette.
+    const onKey = (e) => {
+        if ((e.key === 'k' || e.key === 'K') && (e.metaKey || e.ctrlKey)) {
+            e.preventDefault();
+            if (paletteOpen)
+                closePalette();
+            else
+                openPalette();
+            return;
+        }
+        if (paletteOpen) {
+            // While an IME (CJK) composition is active, Enter/Arrow confirm or move the
+            // candidate list — don't hijack them to select/close the palette. keyCode 229
+            // is the legacy "composition in progress" signal for browsers without isComposing.
+            if (e.isComposing || e.keyCode === 229)
+                return;
+            const items = paletteItems();
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                closePalette();
+            }
+            else if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                paletteIdx = Math.min(items.length - 1, paletteIdx + 1);
+                paintPaletteList();
+            }
+            else if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                paletteIdx = Math.max(0, paletteIdx - 1);
+                paintPaletteList();
+            }
+            else if (e.key === 'Enter') {
+                e.preventDefault();
+                const it = items[paletteIdx];
+                if (it)
+                    choosePalette(it.type, it.key);
+            }
+            return;
+        }
+        if (e.key === 'Escape' && modalTurn !== null)
+            closeModal();
+    };
     document.addEventListener('keydown', onKey);
     void loadNameMaps().then(() => { if (!disposed)
         paint(); });