dsh-token-total 1.0.3 → 1.0.5

package/lib/types/wire.d.ts

@@ -129,6 +129,61 @@ export interface SessionUsageTree {
 export interface SessionUsageRequest {
     sessionId: string;
 }
+/** Detailed per-session usage view used by the Usage tab. */
+export interface SessionUsageDetail {
+    sessionId: string;
+    totals: SessionUsageTotals;
+    requests: number;
+    averageFirstTokenMs: number | null;
+    tokensPerSecond: number | null;
+    subagents: Array<{
+        sessionId: string;
+        name: string;
+        totals: SessionUsageTotals;
+        requests: number;
+        averageFirstTokenMs: number | null;
+        tokensPerSecond: number | null;
+    }>;
+    models: Array<{
+        /** Raw model id from the historical route. Stays the row key and the
+         *  fallback label (also the tooltip) when no display name is resolved. */
+        model: string;
+        /** The model selector's display name for this model, resolved host-side
+         *  from the llm service metadata. Optional so an older host (or an
+         *  unresolvable route) still serves a valid payload. */
+        name?: string;
+        /** Display names (raw ids when unknown) of every provider that served this
+         *  model in the session, first-seen order. The by-model card shows these in
+         *  gray when two rows end up sharing one display name. */
+        providers?: string[];
+        totals: SessionUsageTotals;
+        requests: number;
+    }>;
+    records: Array<{
+        id: string;
+        sessionId: string;
+        sessionName: string;
+        turn: number;
+        step: number;
+        startedAt: number;
+        finishedAt: number | null;
+        provider: string;
+        model: string;
+        status: 'running' | 'completed' | 'failed' | 'interrupted';
+        totals: SessionUsageTotals;
+        firstTokenMs: number | null;
+        tokensPerSecond: number | null;
+        turnName: string;
+        effort: string;
+    }>;
+    routes: Array<{
+        id: string;
+        provider: string;
+        name: string;
+        model: string;
+        status: 'idle' | 'running' | 'completed' | 'failed';
+    }>;
+}
 /** The backfill (historical session scan) progress state. */
 export interface BackfillStatus {
     running: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-token-total",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "DSH web plugin: token 用量统计看板 + 单会话（主智能体 + 子智能体）用量统计。提供今日/近3天/近7天/近1月/近3月/自定义筛选、六个汇总卡片、活跃热力图、缓存命中率折线与分模型柱状图、按模型/按供应商 Top5 列表。",
   "icon": "./icon.svg",
   "type": "module",

package/src/client/SessionUsageView.module.css

@@ -0,0 +1,117 @@
+/* A light, self-contained Usage surface. Tables fit the available width:
+ * no horizontal scroll containers, fixed column contracts, titles for names.
+ * Stat cards follow the reference dashboard: tinted left edge + icon chip,
+ * label, big value, small subtitle. Request log folds by conversation turn. */
+.scroll { height:100%; min-height:0; overflow-y:auto; background:#ffffff; color:#252936; color-scheme:light; container-type:inline-size; }
+.page { box-sizing:border-box; width:100%; max-width:1160px; margin:0 auto; padding:24px 26px 32px; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; font-size:13px; }
+.page * { box-sizing:border-box; }
+.scope { color:#8790a3; font-size:11px; margin:0 0 14px; }
+.stats { display:grid; gap:12px; margin-bottom:18px; }
+.statRow { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
+.stat { min-width:0; position:relative; overflow:hidden; background:#fff; border:1px solid #e4e7ee; border-left:4px solid var(--tone); border-radius:12px; padding:12px 16px 11px; }
+.statHead { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
+.statIcon { display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:10px; color:#fff; background:linear-gradient(135deg, var(--tone), var(--tone-soft)); flex-shrink:0; box-shadow:0 3px 8px var(--tone-soft); }
+.statMark { position:absolute; right:-14px; bottom:-18px; width:92px; height:92px; color:var(--tone); pointer-events:none; }
+.statLabel { font-size:12px; color:#7d8495; }
+.statValue { display:block; font-size:25px; font-weight:650; letter-spacing:-0.5px; white-space:nowrap; font-variant-numeric:tabular-nums; }
+.statSub { display:block; margin-top:5px; font-size:11px; color:#939aac; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+.toneBlue { --tone:#4f79f6; --tone-soft:#eaf0fe; }
+.tonePurple { --tone:#8b5cf6; --tone-soft:#f1ebfe; }
+.toneGreen { --tone:#18a97b; --tone-soft:#e5f6f0; }
+.toneOrange { --tone:#e8892c; --tone-soft:#fcf1e4; }
+.toneTeal { --tone:#16a4b8; --tone-soft:#e4f5f8; }
+.tonePink { --tone:#d9538c; --tone-soft:#fbeaf1; }
+.card { min-width:0; background:#fff; border:1px solid #e4e7ee; border-radius:12px; margin-bottom:18px; overflow:hidden; }
+.cardHead { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:54px; padding:15px 18px; border-bottom:1px solid #eef0f4; }
+.cardHead h2 { font-size:14px; font-weight:600; margin:0; }
+.cardHead > span { display:flex; gap:7px; align-items:center; font-size:11px; }
+.count { display:inline-flex; align-items:center; justify-content:center; min-width:21px; padding:2px 6px; font-size:10px; color:#8b93a3; background:#f3f5f8; border-radius:5px; margin-left:5px; font-weight:500; }
+.mid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; align-items:stretch; }
+.mid .card { height:100%; margin-bottom:0; }
+.mid { margin-bottom:18px; }
+.table { border-collapse:collapse; width:100%; table-layout:fixed; font-size:11px; }
+.table th { color:#929aaa; font-weight:500; padding:12px 5px; text-align:right; vertical-align:middle; line-height:1.3; overflow-wrap:anywhere; }
+.table td { padding:13px 5px; text-align:right; border-top:1px solid #eef0f4; color:#626c80; font-variant-numeric:tabular-nums; white-space:nowrap; }
+.table th:first-child,.table td:first-child { text-align:left; padding-left:16px; }
+.table th:last-child,.table td:last-child { padding-right:16px; }
+.childName { width:28%; }
+.childRequests { width:11%; }
+.modelName { width:30%; }
+.modelRequests { width:11%; }
+.modelHit { width:16%; }
+.ellipsis { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#394354; }
+/* Gray provider label under a model name shown by several rows (同名模型). */
+.modelProvider { display:block; margin-top:2px; font-size:10px; color:#939aaa; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+.number { font-variant-numeric:tabular-nums; }
+.speedCell { display:inline-flex; align-items:baseline; gap:3px; white-space:nowrap; }
+.speedCell small { font-size:9px; color:#929aaa; }
+.good { color:#21a17b; }
+.warn { color:#d69a21; }
+.bad { color:#e06571; }
+.live { color:#169bb3; }
+.muted { color:#939aaa; }
+.empty { margin:0; padding:28px 18px; color:#9aa2b1; font-size:12px; text-align:center; }
+.action { color:#818b9e; background:none; border:0; padding:3px 0; font:inherit; font-size:11px; cursor:pointer; }
+.action:hover { color:#279cb6; }
+.action:focus-visible,.turnHead:focus-visible { outline:2px solid #2ab1c6; outline-offset:-2px; }
+.turnList { padding:0 14px 14px; }
+.turn { margin-top:10px; border:1px solid #e7eaf0; border-radius:9px; background:#fff; overflow:hidden; }
+.turnHead { display:grid; grid-template-columns:12px minmax(0,1fr) auto; align-items:center; gap:12px; padding:13px 14px; width:100%; text-align:left; background:#f8f9fc; border:0; cursor:pointer; color:#616c7f; font:inherit; font-size:11px; }
+.chevron { color:#99a1af; transition:transform 0.2s; }
+.rotated { transform:rotate(90deg); }
+.turnTitle { display:flex; align-items:center; gap:6px; min-width:0; font-size:12px; font-weight:600; color:#394354; }
+/* Turn topic is the group title now (the page header owns the session name),
+ * so it carries the primary text color and truncates before the metrics. */
+.turnTopic { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
+/* A subagent's turns look like this session's turns apart from the agent tag;
+ * the tag keeps the full session name in its tooltip. */
+.turnAgent { flex:none; padding:1px 6px; border-radius:5px; background:#e9edf4; color:#6f7889; font-size:10px; font-weight:500; }
+.turnSummary { display:flex; gap:5px; align-items:center; white-space:nowrap; }
+.turnSummary > span:last-child { margin-left:8px; }
+.turnBody { border-top:1px solid #eef0f4; }
+.turnBody[hidden] { display:none; }
+/* A request row is one line: time, what answered, and its metrics pinned to the
+ * row end. The metrics never wrap; they truncate with a tooltip before the head
+ * gives up its model name. */
+.turnRequest { display:grid; grid-template-columns:64px minmax(0,1fr) auto; align-items:center; gap:12px; padding:10px 16px; border-top:1px solid #f3f5f9; }
+.turnRequest:first-child { border-top:0; }
+.turnRequestHead { display:flex; align-items:center; gap:8px; font-size:11px; color:#616c7f; min-width:0; }
+.requestTime { color:#9aa3b3; font-variant-numeric:tabular-nums; flex-shrink:0; }
+.statusDot { width:7px; height:7px; border-radius:50%; background:currentColor; flex-shrink:0; }
+.routeDot { width:6px; height:6px; border-radius:50%; background:#21a17b; flex-shrink:0; }
+.whale { color:#4d6bfe; flex-shrink:0; }
+.recordModel { min-width:0; display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#394354; font-weight:500; }
+.routeText { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#8b93a4; flex-shrink:1; }
+.effort { white-space:nowrap; color:#9aa3b3; background:#f1f3f7; border-radius:5px; padding:1px 6px; }
+.recordMeta { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right; font-size:10px; color:#949cab; font-variant-numeric:tabular-nums; }
+.note { font-size:10px; line-height:1.7; color:#9aa3b3; margin:0; }
+.error { background:#fff4f1; color:#b86751; border:1px solid #f4d8ce; border-radius:9px; padding:12px 16px; margin-bottom:16px; font-size:12px; display:flex; gap:16px; justify-content:space-between; }
+@container (max-width:1050px) {
+  .mid { grid-template-columns:minmax(0,1fr); }
+  .statRow { grid-template-columns:repeat(2,minmax(0,1fr)); }
+  .statValue { font-size:23px; }
+  .table { font-size:12px; }
+  .childName { width:34%; }
+}
+@container (max-width:700px) {
+  .page { padding:18px 14px 24px; }
+  .stat { padding:12px 12px 11px; }
+  .statValue { font-size:20px; }
+  .table { font-size:10px; }
+  .table th,.table td { padding:10px 3px; }
+  .table th:first-child,.table td:first-child { padding-left:10px; }
+  .table th:last-child,.table td:last-child { padding-right:10px; }
+  .childName { width:25%; }
+  .childRequests { width:11%; }
+  .modelName { width:25%; }
+  .modelRequests { width:11%; }
+  .modelHit { width:17%; }
+  .turnHead { gap:8px; padding:11px 10px; }
+  .turnSummary { grid-column:2; font-size:10px; }
+  .turnRequest { grid-template-columns:56px minmax(120px,1fr) auto; gap:8px; padding:10px; }
+  .turnRequestHead { gap:6px; }
+  .routeText { display:none; }
+}
+@media (prefers-reduced-motion:reduce) {
+  .chevron { transition:none; }
+}

package/src/client/SessionUsageView.tsx

@@ -0,0 +1,217 @@
+import { useState } from 'react'
+import type { PropsLocale } from '@deepseek-ai/dsh-client-ui-slots'
+import type { SessionUsageDetail, SessionUsageTotals } from '../wire.ts'
+import { billedTotal, cacheHitPercentOf } from './session-usage-core.ts'
+import { formatCompact, formatTokens, normalizeModelName } from './format.ts'
+import { SESSION_USAGE_NS, type SessionUsageKey } from './session-usage-locales.ts'
+import { useSessionDetail } from './use-session-detail.ts'
+import css from './SessionUsageView.module.css'
+
+type T = (key: SessionUsageKey) => string
+type Row = SessionUsageDetail['records'][number]
+export type SessionUsageViewProps = PropsLocale<typeof SESSION_USAGE_NS> & { sessionId: string }
+
+const seconds = (ms: number | null): string => ms !== null && Number.isFinite(ms) ? `${(ms / 1000).toFixed(1)}s` : '—'
+// Request-log style metrics follow the reference log: seconds without trailing
+// ".0", short lowercase tokens (80.0k / 1.5M), integer percentages.
+const secText = (ms: number | null): string => ms !== null && Number.isFinite(ms) ? String(Math.round(ms / 100) / 10) : '—'
+const tokShort = (n: number): string => n >= 1e6 ? `${(n / 1e6).toFixed(1)}M` : n >= 1e3 ? `${(n / 1e3).toFixed(1)}k` : String(n)
+const pctInt = (rate: number | null): string => rate === null ? '—' : `${Math.round(rate)}%`
+const speed = (n: number | null): string => n !== null && Number.isFinite(n) ? `${Math.round(n)} tok/s` : '—'
+const clock = (ms: number): string => new Date(ms).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })
+const whale = 'M8 39.5C13.5 27.6 26.8 19.4 42.5 19.1c-1.6 2.4-2.3 5-2 7.9-5.6-1.7-11.7-.4-16.2 3.4 4.7 1.1 8.4 4.3 10.2 8.7 1.3-.4 2.7-1 4-1.9.4 2.1-.2 4.3-1.6 5.9-7.7.6-15.5-1.6-20.7-6.6-.7 1.9-.9 3.9-.6 5.9-3.1-1.2-5.6-3-7.6-2.9z'
+const modelShort = (ref: string): string => ref.includes('/') ? ref.slice(ref.indexOf('/') + 1) : ref
+const zero = (): SessionUsageTotals => ({ uncachedInputTokens: 0, outputTokens: 0, cacheReadTokens: 0, cacheWriteTokens: 0 })
+const sum = (rows: Row[]): SessionUsageTotals => rows.reduce((acc, r) => ({
+  uncachedInputTokens: acc.uncachedInputTokens + r.totals.uncachedInputTokens,
+  outputTokens: acc.outputTokens + r.totals.outputTokens,
+  cacheReadTokens: acc.cacheReadTokens + r.totals.cacheReadTokens,
+  cacheWriteTokens: acc.cacheWriteTokens + r.totals.cacheWriteTokens,
+}), zero())
+
+function Token({ n }: { n: number }): JSX.Element {
+  return <span className={css.number} title={formatTokens(n)}>{formatCompact(n)}</span>
+}
+
+function Hit({ totals }: { totals: SessionUsageTotals }): JSX.Element {
+  const rate = cacheHitPercentOf(totals)
+  return <span className={rate === null ? css.muted : rate >= 80 ? css.good : rate >= 50 ? css.warn : css.bad}>{rate === null ? '—' : `${rate.toFixed(1)}%`}</span>
+}
+
+const icons = {
+  requests: 'M4 9h16M4 15h16M10 3 8 21M16 3l-2 18',
+  tokens: 'M4 8c0-2.2 3.6-4 8-4s8 1.8 8 4-3.6 4-8 4-8-1.8-8-4Zm0 0v8c0 2.2 3.6 4 8 4s8-1.8 8-4V8',
+  hit: 'M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z',
+  speed: 'M13 2 4 14h7l-1 8 9-12h-7l1-8Z',
+  input: 'M12 3v12M7 10l5 5 5-5M4 21h16',
+  output: 'M12 21V9M7 14l5-5 5 5M4 3h16',
+  read: 'M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7ZM15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z',
+  write: 'M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5Z',
+}
+
+function Stat({ tone, name, label, value, sub, title }: { tone: string; name: keyof typeof icons; label: string; value: string | JSX.Element; sub?: string; title?: string }): JSX.Element {
+  const icon = icons[name]
+  return <article className={`${css.stat} ${tone}`}>
+    {/* Oversized gradient watermark filling the card's empty right side. */}
+    <svg className={css.statMark} viewBox="0 0 24 24" aria-hidden="true">
+      <defs><linearGradient id={`usage-mark-${name}`} x1="0" y1="0" x2="1" y2="1"><stop offset="0" stopColor="currentColor" stopOpacity="0.3" /><stop offset="1" stopColor="currentColor" stopOpacity="0.03" /></linearGradient></defs>
+      <path d={icon} fill={`url(#usage-mark-${name})`} stroke={`url(#usage-mark-${name})`} strokeWidth="1.1" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+    <div className={css.statHead}><span className={css.statIcon}><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d={icon} /></svg></span><span className={css.statLabel}>{label}</span></div>
+    <strong className={css.statValue} title={title}>{value}</strong>
+    {sub !== undefined && <span className={css.statSub}>{sub}</span>}
+  </article>
+}
+
+function Metrics({ detail, t }: { detail: SessionUsageDetail; t: T }): JSX.Element {
+  const billed = billedTotal(detail.totals)
+  const failed = detail.records.filter(row => row.status === 'failed').length
+  const failRate = detail.requests > 0 ? (failed / detail.requests * 100).toFixed(1) : '0.0'
+  return <div className={css.stats}>
+    <div className={css.statRow}>
+      <Stat tone={css.toneBlue} name="requests" label={t('requestsCount')} value={formatTokens(detail.requests)} sub={`${t('failed')} ${failed} · ${failRate}%`} />
+      <Stat tone={css.tonePurple} name="tokens" label={t('tokens')} value={formatCompact(billed)} title={formatTokens(billed)} sub={`${formatTokens(billed)} tokens`} />
+      <Stat tone={css.toneGreen} name="hit" label={t('hit')} value={<Hit totals={detail.totals} />} sub={`${formatCompact(detail.totals.cacheReadTokens)} ${t('cacheHit')}`} />
+      <Stat tone={css.toneOrange} name="speed" label={t('speed')} value={speed(detail.tokensPerSecond)} sub={`${t('first')} ${seconds(detail.averageFirstTokenMs)}`} />
+    </div>
+    <div className={css.statRow}>
+      <Stat tone={css.toneTeal} name="input" label={t('inputFull')} value={formatCompact(detail.totals.uncachedInputTokens)} title={formatTokens(detail.totals.uncachedInputTokens)} sub={formatTokens(detail.totals.uncachedInputTokens)} />
+      <Stat tone={css.toneOrange} name="output" label={t('outputFull')} value={formatCompact(detail.totals.outputTokens)} title={formatTokens(detail.totals.outputTokens)} sub={formatTokens(detail.totals.outputTokens)} />
+      <Stat tone={css.tonePurple} name="read" label={t('readFull')} value={formatCompact(detail.totals.cacheReadTokens)} title={formatTokens(detail.totals.cacheReadTokens)} sub={formatTokens(detail.totals.cacheReadTokens)} />
+      <Stat tone={css.tonePink} name="write" label={t('writeFull')} value={formatCompact(detail.totals.cacheWriteTokens)} title={formatTokens(detail.totals.cacheWriteTokens)} sub={formatTokens(detail.totals.cacheWriteTokens)} />
+    </div>
+  </div>
+}
+
+function Tables({ detail, t }: { detail: SessionUsageDetail; t: T }): JSX.Element {
+  // The by-model card labels rows with the model selector's display name, never
+  // the route id (which stays in the tooltip). When two rows end up sharing one
+  // display name, each of those rows additionally shows its provider in gray
+  // below the name so they stay tellable apart.
+  const nameCounts = new Map<string, number>()
+  for (const row of detail.models) {
+    const key = normalizeModelName(row.name?.trim() || row.model)
+    nameCounts.set(key, (nameCounts.get(key) ?? 0) + 1)
+  }
+  return <div className={css.mid}>
+    <section className={css.card}><header className={css.cardHead}><h2>{t('children')} <span className={css.count}>{detail.subagents.length}</span></h2></header>
+      <table className={`${css.table} ${css.childTable}`}><colgroup><col className={css.childName} /><col className={css.childRequests} /><col /><col /><col /><col /></colgroup>
+        <thead><tr><th>{t('session')}</th><th>{t('requests')}</th><th>{t('tokens')}</th><th>{t('hit')}</th><th>{t('first')}</th><th>{t('speed')}</th></tr></thead>
+        <tbody>{detail.subagents.map(row => <tr key={row.sessionId}><td><span className={css.ellipsis} title={row.name || row.sessionId}>{row.name || row.sessionId}</span></td><td>{formatTokens(row.requests)}</td><td><Token n={billedTotal(row.totals)} /></td><td><Hit totals={row.totals} /></td><td>{seconds(row.averageFirstTokenMs)}</td><td><span className={css.speedCell}>{row.tokensPerSecond === null ? '—' : <>{Math.round(row.tokensPerSecond)}<small>tok/s</small></>}</span></td></tr>)}</tbody>
+      </table>{detail.subagents.length === 0 && <p className={css.empty}>{t('noChildren')}</p>}
+    </section>
+    <section className={css.card}><header className={css.cardHead}><h2>{t('models')} <span className={css.count}>{detail.models.length}</span></h2></header>
+      <table className={`${css.table} ${css.modelTable}`}><colgroup><col className={css.modelName} /><col className={css.modelRequests} /><col /><col /><col /><col /><col className={css.modelHit} /></colgroup>
+        <thead><tr><th>{t('model')}</th><th>{t('requests')}</th><th>{t('input')}</th><th>{t('output')}</th><th>{t('read')}</th><th>{t('write')}</th><th>{t('hit')}</th></tr></thead>
+        <tbody>{detail.models.map(row => {
+          const name = row.name?.trim() || row.model
+          const providers = row.providers ?? []
+          const shared = (nameCounts.get(normalizeModelName(name)) ?? 0) > 1
+          return <tr key={row.model}>
+            <td><span className={css.ellipsis} title={row.model}>{name}</span>
+              {shared && providers.length > 0 ? <small className={css.modelProvider} title={providers.join(' / ')}>{providers.join(' / ')}</small> : null}
+            </td>
+            <td>{formatTokens(row.requests)}</td><td><Token n={row.totals.uncachedInputTokens} /></td><td><Token n={row.totals.outputTokens} /></td><td><Token n={row.totals.cacheReadTokens} /></td><td><Token n={row.totals.cacheWriteTokens} /></td><td><Hit totals={row.totals} /></td>
+          </tr>
+        })}</tbody>
+      </table>{detail.models.length === 0 && <p className={css.empty}>{t('noModels')}</p>}
+    </section>
+  </div>
+}
+
+function Records({ detail, t }: { detail: SessionUsageDetail; t: T }): JSX.Element {
+  const [opened, setOpened] = useState<Set<string>>(() => new Set())
+  const [allOpen, setAllOpen] = useState(false)
+  const toggleAll = (): void => { setAllOpen(!allOpen); setOpened(new Set()) }
+  const toggle = (id: string): void => setOpened(previous => { const next = new Set(previous); if (next.has(id)) next.delete(id); else next.add(id); return next })
+  const providerNames = new Map(detail.routes.map(route => [route.provider, route.name]))
+  // Fold by conversation turn: one collapsible group per session turn, holding
+  // every request of that turn. A group is titled by what the turn did (the
+  // turn's first real user prompt, turnName from the backend), never by the
+  // session name: the page header already names this session, so repeating it on
+  // every row would only crowd out the topic. A subagent's turn gets a compact
+  // "subagent" tag instead, with the full session name kept in its tooltip —
+  // that tag is the only thing distinguishing it from this session's own turns.
+  const groups: Array<{ key: string; turn: number; name: string; topic: string; main: boolean; rows: Row[] }> = []
+  const index = new Map<string, { key: string; turn: number; name: string; topic: string; main: boolean; rows: Row[] }>()
+  for (const record of detail.records) {
+    const key = `${record.sessionId}:${record.turn}`
+    let group = index.get(key)
+    if (!group) {
+      group = {
+        key,
+        turn: record.turn,
+        name: record.sessionName || record.sessionId,
+        topic: record.turnName || `${t('turn')} ${record.turn}`,
+        main: record.sessionId === detail.sessionId,
+        rows: [],
+      }
+      index.set(key, group); groups.push(group)
+    }
+    group.rows.push(record)
+  }
+  return <section className={css.card}><header className={css.cardHead}><h2>{t('records')} <span className={css.count}>{detail.records.length}</span></h2><button type="button" className={css.action} onClick={toggleAll}>{t(allOpen ? 'collapse' : 'expand')}</button></header>
+    <div className={css.turnList}>{groups.map(group => {
+      const open = allOpen !== opened.has(group.key)
+      const totals = sum(group.rows)
+      const billed = billedTotal(totals)
+      const running = group.rows.filter(row => row.status === 'running').length
+      const rates = group.rows.map(row => row.tokensPerSecond).filter((n): n is number => n !== null)
+      const avgRate = rates.length ? Math.round(rates.reduce((a, b) => a + b, 0) / rates.length) : null
+      return <article key={group.key} className={css.turn}>
+        <button type="button" className={css.turnHead} onClick={() => toggle(group.key)} aria-expanded={open} aria-controls={`usage-turn-${encodeURIComponent(group.key)}`}>
+          <svg className={`${css.chevron} ${open ? css.rotated : ''}`} width="12" height="12" viewBox="0 0 12 12" aria-hidden="true"><path d="m4 2 4 4-4 4" stroke="currentColor" strokeWidth="1.5" fill="none" /></svg>
+          <span className={css.turnTitle}>
+            {group.main ? null : <span className={css.turnAgent} title={group.name}>{t('children')}</span>}
+            <span className={css.turnTopic} title={group.turn === 0 ? t('compaction') : group.topic}>{group.turn === 0 ? t('compaction') : group.topic}</span>
+          </span>
+          <span className={css.turnSummary}>
+            <span>{group.rows.length} {t('reqTimes')} · <span className={css.number} title={formatTokens(billed)}>{tokShort(billed)}</span> {t('tokenWord')}{running > 0 ? ` · ${running} ${t('inProgress')}` : ''}</span>
+            <span>{t('avgCache')} {pctInt(cacheHitPercentOf(totals))}</span>
+            <span>{t('avgRate')} {avgRate === null ? '—' : avgRate} {t('perSec')}</span>
+          </span>
+        </button>
+        <div id={`usage-turn-${encodeURIComponent(group.key)}`} className={css.turnBody} hidden={!open}>
+          {group.rows.map(record => {
+            const duration = record.finishedAt !== null ? record.finishedAt - record.startedAt : null
+            const billed = billedTotal(record.totals)
+            const hit = cacheHitPercentOf(record.totals)
+            const meta: Array<{ text: string; title?: string }> = []
+            if (duration !== null) meta.push({ text: `${secText(duration)} ${t('sec')}` })
+            if (record.firstTokenMs !== null) meta.push({ text: `${t('firstWait')} ${secText(record.firstTokenMs)} ${t('sec')}` })
+            meta.push({ text: `${tokShort(billed)} ${t('tokenWord')}`, title: formatTokens(billed) })
+            if (hit !== null) meta.push({ text: `${t('cacheShort')} ${pctInt(hit)}` })
+            if (record.tokensPerSecond !== null) meta.push({ text: `${Math.round(record.tokensPerSecond)} ${t('perSec')}` })
+            const statusText = record.status === 'running' ? t('answering') : record.status === 'completed' ? '' : t(record.status)
+            return <div key={record.id} className={css.turnRequest}>
+              <span className={css.requestTime}>{clock(record.startedAt)}</span>
+              <div className={css.turnRequestHead}>
+                <span className={`${css.statusDot} ${record.status === 'running' ? css.live : record.status === 'failed' ? css.bad : record.status === 'interrupted' ? css.muted : css.good}`} />
+                <span className={css.recordModel} title={`${record.provider} / ${record.model}`}><svg className={css.whale} width="13" height="13" viewBox="0 0 64 64" aria-hidden="true"><path d={whale} fill="currentColor" /></svg>{record.model || '—'}</span>
+                <span className={css.routeDot} />
+                <span className={css.routeText} title={record.provider}>{providerNames.get(record.provider) || record.provider || '—'} · {modelShort(record.model) || '—'}</span>
+                {statusText !== '' && <span className={record.status === 'running' ? css.live : record.status === 'failed' ? css.bad : css.muted}>{statusText}</span>}
+                {record.effort ? <span className={css.effort}>· {record.effort}</span> : null}
+              </div>
+              {record.finishedAt !== null && <div className={css.recordMeta}>{meta.map((item, i) => <span key={i} title={item.title}>{i > 0 ? ' · ' : ''}{item.text}</span>)}</div>}
+            </div>
+          })}
+        </div>
+      </article>
+    })}</div>{detail.records.length === 0 && <p className={css.empty}>{t('empty')}</p>}
+  </section>
+}
+
+/** Pure presentation export also used by offline visual regression fixtures. */
+export function SessionUsageContent({ detail, t }: { detail: SessionUsageDetail; t: T }): JSX.Element {
+  return <><p className={css.scope}>{t('scope')}</p><Metrics detail={detail} t={t} /><Tables detail={detail} t={t} /><Records key={detail.sessionId} detail={detail} t={t} /><p className={css.note}>{t('note')}</p></>
+}
+
+export function SessionUsageView({ sessionId, t }: SessionUsageViewProps): JSX.Element {
+  const { detail, loading, error, retry } = useSessionDetail(sessionId)
+  return <div className={css.scroll} data-dsh-session-usage><div className={css.page}>
+    {loading && <p className={css.empty} role="status">{t('loading')}</p>}
+    {error && <div className={css.error} role="status">{t('failedLoad')}<button type="button" className={css.action} onClick={retry}>{t('retry')}</button></div>}
+    {detail && <SessionUsageContent detail={detail} t={t} />}
+  </div></div>
+}