dsh-token-total 1.0.4 → 1.0.6

package/src/client/ModelLogo.tsx

@@ -0,0 +1,29 @@
+import { modelLogoMarkup, resolveModelLogo } from './model-logos-core.ts'
+
+/** Neutral glyph for models no bundled brand matches: a soft four-point AI
+ *  spark in the panel's muted gray, so an unknown model reads as "unbranded"
+ *  rather than as some other vendor. */
+const FALLBACK = '<path d="M12 1.6l2.14 5.96a2 2 0 0 0 1.22 1.22l5.96 2.14-5.96 2.14a2 2 0 0 0-1.22 1.22L12 20.24l-2.14-5.96a2 2 0 0 0-1.22-1.22L2.68 10.92l5.96-2.14a2 2 0 0 0 1.22-1.22L12 1.6z" fill="#9aa3b3"/>'
+
+export interface ModelLogoProps {
+  /** Raw model id; may itself be a "provider/model" ref. */
+  model: string
+  /** Resolved model display name (the by-model row's label) — matched with
+   *  the raw id, so an opaque route id beside a brandful name still brands. */
+  name?: string
+  /** Provider route id — a secondary match signal for opaque model ids. */
+  provider?: string
+  /** Resolved provider display names (the by-model row's split), matched last. */
+  providers?: ReadonlyArray<string>
+  /** Rendered square size; the record rows read at 13px. */
+  size?: number
+  className?: string
+}
+
+/** One model's brand logo inline. The markup is a bundled constant (never
+ *  request data) rendered as-is so each brand keeps its own gradients,
+ *  circles and multi-path fills; ids inside stay unique across brands. */
+export function ModelLogo({ model, name, provider, providers, size = 13, className }: ModelLogoProps): JSX.Element {
+  const markup = modelLogoMarkup(resolveModelLogo(provider, model, name, providers)) ?? FALLBACK
+  return <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden="true" className={className} dangerouslySetInnerHTML={{ __html: markup }} />
+}

package/src/client/SessionUsageView.module.css

@@ -0,0 +1,122 @@
+/* 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; }
+/* By-model rows lead with the model's brand logo; the name keeps truncating
+ * inside the flexible remainder of the cell. */
+.modelNameCell { display:flex; align-items:center; gap:6px; min-width:0; }
+.modelNameCell .ellipsis { flex:1; min-width:0; }
+/* 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:5px; height:5px; border-radius:50%; background:currentColor; flex-shrink:0; }
+/* Per-model brand logo: colors are baked into each logo's markup, only the
+ * layout contract lives here. Unknown models get the neutral gray fallback. */
+.modelLogo { 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,216 @@
+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 { ModelLogo } from './ModelLogo.tsx'
+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 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.modelNameCell}><ModelLogo model={row.model} name={row.name} providers={row.providers} className={css.modelLogo} /><span className={css.ellipsis} title={row.model}>{name}</span></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}`}><ModelLogo provider={record.provider} model={record.model} className={css.modelLogo} />{record.model || '—'}</span>
+                <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>
+}

package/src/client/TokenTotalPanel.tsx

@@ -670,30 +670,36 @@ function DailyTrend({ models, daily, granularity, t, colorForModel, panelRef }:
   const maxTotal = Math.max(1, ...visible.map((d) => d.total))
   const ticks = niceTicks(maxTotal, 4)
   // What the X axis reads as depends on the WINDOW, not just the granularity:
-  // a multi-day hourly span (3天) is a DATE axis — one short date per day, at
-  // the day's first bucket, times would be noise across three day-clusters;
-  // a single-day hourly span (今日) is a CLOCK axis — the date is constant and
-  // would only repeat. Daily ranges stay date labels.
+  // a multi-day hourly span (3天) is a DATE axis — one short date per day,
+  // centred over that day's bar cluster, times would be noise across three
+  // day-clusters; a single-day hourly span (今日) is a CLOCK axis — the date is
+  // constant and would only repeat. Daily ranges stay date labels.
   const dayCount = new Set(visible.map((d) => d.day.slice(0, 10))).size
   const multiDayHourly = granularity === 'hour' && dayCount > 1
   const axisMode: 'day' | 'hour' = multiDayHourly ? 'day' : granularity
-  // Label buckets: day starts on multi-day hourly, every bucket otherwise.
-  const labelCandidates: number[] = []
+  // Label groups: on a multi-day hourly axis each DAY is one group whose label
+  // sits at the MIDDLE of that day's bars (centred on the day, not left-
+  // aligned to its first bar); otherwise every bucket is its own group and
+  // the label sits on its bar.
+  const labelGroups: Array<{ start: number; end: number }> = []
   for (let i = 0; i < n; i++) {
-    if (!multiDayHourly || i === 0 || visible[i].day.slice(0, 10) !== visible[i - 1].day.slice(0, 10)) labelCandidates.push(i)
+    const last = labelGroups[labelGroups.length - 1]
+    if (multiDayHourly && last && visible[last.end].day.slice(0, 10) === visible[i].day.slice(0, 10)) last.end = i
+    else labelGroups.push({ start: i, end: i })
   }
-  // Candidates are then thinned by POSITION, walking from the right edge: the
-  // rightmost candidate always keeps its label, an earlier one is kept only
-  // when it clears the previously kept label by the label width. (A fixed
-  // "every Nth" count plus a forced last label drew two labels on top of
-  // each other — the "18:00/23:00" overlap.) Both label shapes are ~30px.
+  // Groups are then thinned by POSITION, walking from the right edge: the
+  // rightmost group always keeps its label, an earlier one is kept only when
+  // it clears the previously kept label by the label width. (A fixed "every
+  // Nth" count plus a forced last label drew two labels on top of each other
+  // — the "18:00/23:00" overlap.) Both label shapes are ~30px.
   const labelMinGap = 42
-  const labeledIdx = new Set<number>()
+  const labeledGroups = new Set<number>()
   let lastLabelX = Number.POSITIVE_INFINITY
-  for (let k = labelCandidates.length - 1; k >= 0; k--) {
-    const x = padL + barHalf + labelCandidates[k] * step
+  for (let k = labelGroups.length - 1; k >= 0; k--) {
+    const g = labelGroups[k]!
+    const x = padL + barHalf + ((g.start + g.end) / 2) * step
     if (lastLabelX - x >= labelMinGap) {
-      labeledIdx.add(labelCandidates[k])
+      labeledGroups.add(k)
       lastLabelX = x
     }
   }
@@ -776,12 +782,18 @@ function DailyTrend({ models, daily, granularity, t, colorForModel, panelRef }:
                   }}
                   onMouseLeave={() => setTip(null)}
                 />
-                {labeledIdx.has(i) && (
-                  <text className={css.axis} x={padL + barHalf + i * step} y={H - 8} textAnchor="middle">{bucketAxisLabel(d.day, axisMode)}</text>
-                )}
               </g>
             )
           })}
+          {labelGroups.map((g, k) => labeledGroups.has(k) && (
+            <text
+              key={`axis-${k}`}
+              className={css.axis}
+              x={padL + barHalf + ((g.start + g.end) / 2) * step}
+              y={H - 8}
+              textAnchor="middle"
+            >{bucketAxisLabel(visible[g.start].day, axisMode)}</text>
+          ))}
           <path className={css.trend} d={trendPath} fill="none" strokeWidth={2} strokeLinejoin="round" strokeLinecap="round" />
           {trendTipPt && (
             <circle className={css.trendDot} cx={trendTipPt.x} cy={trendTipPt.y} r={4} />

package/src/client/api.ts

@@ -11,7 +11,7 @@
  * prefix-stripping proxy; the host's own route key stays absolute
  * (`/token-total/api` in src/routes.ts), because only the browser half is relative.
  */
-import type { BackfillStatus, SessionUsageTree, TokenTotalRange, TokenTotalRequest } from '../wire.ts'
+import type { BackfillStatus, SessionUsageDetail, SessionUsageTree, TokenTotalRange, TokenTotalRequest } from '../wire.ts'
 
 /** One wire failure. */
 export class UsageApiError extends Error {
@@ -28,13 +28,14 @@ interface WireResponse<T> {
   value: T
 }
 
-async function post<T>(method: string, body: unknown): Promise<T> {
+async function post<T>(method: string, body: unknown, signal?: AbortSignal): Promise<T> {
   let res: Response
   try {
     res = await fetch(`token-total/api/${method}`, {
       method: 'POST',
       headers: { 'content-type': 'application/json' },
       body: body === undefined ? undefined : JSON.stringify(body),
+      signal,
     })
   } catch (err) {
     throw new UsageApiError('network', err instanceof Error ? err.message : String(err))
@@ -73,3 +74,8 @@ export async function rebuildStats(): Promise<BackfillStatus> {
 export async function fetchSessionUsage(sessionId: string): Promise<SessionUsageTree> {
   return post<SessionUsageTree>('session', { sessionId })
 }
+
+/** Log-owned requests and live route states for the per-session Usage view. */
+export async function fetchSessionDetail(sessionId: string, signal?: AbortSignal): Promise<SessionUsageDetail> {
+  return post<SessionUsageDetail>('session-detail', { sessionId }, signal)
+}

package/src/client/format.ts

@@ -10,7 +10,7 @@
 
 // Shared with the host half (src/shared.ts has no Node/DOM types, so the
 // client bundle may import it at runtime).
-export { providerOf, modelNameOf, daysInRange as daysBetween } from '../shared.ts'
+export { providerOf, modelNameOf, normalizeModelName, daysInRange as daysBetween } from '../shared.ts'
 
 /** Exact token counts with thousands separators — no 万/亿/k/M units, the
  *  user reads the precise number (long values shrink to fit via FitText).
@@ -62,7 +62,9 @@ export function indexOfDay(day: string): number {
 }
 
 export function shortDay(day: string): string {
-  const parts = day.split('-')
+  // Bucket keys may carry an hour suffix ("YYYY-MM-DDTHH"); only the date
+  // prefix is a date — Number('22T14') is NaN and used to render "10/NaN".
+  const parts = day.slice(0, 10).split('-')
   const m = parts[1]
   const d = parts[2]
   return `${Number(m)}/${Number(d)}`

package/src/client/index.tsx

@@ -38,6 +38,8 @@ import { ContextUsageEntry, CONTEXT_LOCALE_NS, CONTEXT_LOCALES } from './Context
 import { installContextTakeover } from './context-takeover.ts'
 import { LOCALE_NS, en, zh, zhTW, type TokenTotalKey } from './locales.ts'
 import { isCompatibleGlass, whenGlassReady } from './glass.ts'
+import { SessionUsageView } from './SessionUsageView.tsx'
+import { SESSION_USAGE_NS, usageEn, usageZh, usageZhTW, type SessionUsageKey } from './session-usage-locales.ts'
 import css from './TokenTotalPanel.module.css'
 
 /** This bundle's npm package name — the key the Plugins page matches on. */
@@ -77,6 +79,7 @@ export type TokenTotalPanelPageProps = PropsLocale<typeof LOCALE_NS> & {
 declare module '@deepseek-ai/dsh-client-ui-slots' {
   interface LocaleNamespaceMap {
     'tokenTotal': TokenTotalKey
+    'sessionUsage': SessionUsageKey
   }
 }
 
@@ -172,7 +175,12 @@ export function apply(ctx: Context): void {
     const offZhTw = ctx.locale.register(LOCALE_NS, 'zh-TW', zhTW)
     const offContext = Object.entries(CONTEXT_LOCALES).map(([locale, dict]) =>
       ctx.locale.register(CONTEXT_LOCALE_NS, locale, dict as Record<string, string>))
-    return () => { offZh(); offEn(); offZhTw(); for (const off of offContext) off() }
+    const offSession = [
+      ctx.locale.register(SESSION_USAGE_NS, 'zh', usageZh),
+      ctx.locale.register(SESSION_USAGE_NS, 'en', usageEn),
+      ctx.locale.register(SESSION_USAGE_NS, 'zh-TW', usageZhTW),
+    ]
+    return () => { offZh(); offEn(); offZhTw(); for (const off of [...offContext, ...offSession]) off() }
   }, 'dsh-token-total: dictionaries')
 
   // Join the background plugin's frosted-glass sheet when it is installed,
@@ -274,6 +282,17 @@ export function apply(ctx: Context): void {
     locale: LOCALE_NS,
   }, StatsPanelIcon))
 
+  // Native session-scoped View: the host owns its tab, selection and composer.
+  // Waiting for declaration keeps older hosts without this seat harmless.
+  const sessionT = ctx.locale.bind(SESSION_USAGE_NS)
+  ctx.slots.inject('conversation.view', () => ctx.slots.register({
+    name: 'conversation.view',
+    id: 'token-total-usage',
+    order: 20,
+    label: () => sessionT('tab'),
+    locale: SESSION_USAGE_NS,
+  }, SessionUsageView))
+
   // The bottom-bar takeover: shadow the official stats pills (same id, lower
   // priority — the slot's lowest live entry renders) with this plugin's
   // always-on precision, token breakdown and live-speed readouts.