dsh-token-total 1.0.7 → 1.0.9

package/src/client/ContextWindowPanel.tsx

@@ -0,0 +1,222 @@
+import { useLayoutEffect, useMemo, useRef, useState } from 'react'
+import type { SessionContextCategory, SessionContextItem, SessionContextWindow } from '../wire.ts'
+import { CONTEXT_CATEGORY_ORDER, contextCategoryTotals, contextReading, treemapLayout } from './context-window-core.ts'
+import { cacheRate, formatCompact, formatPercent, formatTokens } from './format.ts'
+import type { SessionUsageKey } from './session-usage-locales.ts'
+import css from './ContextWindowPanel.module.css'
+
+type T = (key: SessionUsageKey, params?: Record<string, string>) => string
+
+const CATEGORY_LABEL: Record<SessionContextCategory, SessionUsageKey> = {
+  system: 'contextSystem', tools: 'contextTools', memory: 'contextMemory',
+  files: 'contextFiles', results: 'contextResults', conversation: 'contextConversation',
+}
+const CATEGORY_TONE: Record<SessionContextCategory, string> = {
+  system: css.toneSystem, tools: css.toneTools, memory: css.toneMemory,
+  files: css.toneFiles, results: css.toneResults, conversation: css.toneConversation,
+}
+/** Which locale string names an injected/system row, keyed by its log kind. */
+const KIND_LABEL: Record<string, SessionUsageKey> = {
+  'system-prompt': 'contextKindSystemPrompt',
+  'runtime-context': 'contextKindRuntimeContext',
+  'skill-catalog': 'contextKindSkillCatalog',
+  'time-context': 'contextKindTimeContext',
+  'compaction-summary': 'contextKindCompaction',
+  user: 'contextKindUser',
+  assistant: 'contextKindAssistant',
+}
+
+/** What one treemap tile is called: a tool name or path as-is, an
+ *  injected kind through the dictionary, and a folded tail as "N more". */
+function itemText(item: SessionContextItem, t: T): string {
+  if (item.kind === 'rest') return t('contextKindRest', { count: String(item.count) })
+  const label = item.kind === undefined ? undefined : KIND_LABEL[item.kind]
+  const base = label !== undefined ? t(label) : item.label || item.kind || ''
+  // Repeated entries of one kind (a tool ran 63 times, five user prompts) keep
+  // their multiplicity visible: that repetition is what makes them bulky.
+  return item.count > 1 ? `${base} ${t('contextTimes', { count: String(item.count) })}` : base
+}
+
+const sumOf = (items: readonly SessionContextItem[]): number => items.reduce((sum, item) => sum + item.tokens, 0)
+
+/** Wall-clock stamp of the last successful read, same shape as the page's. */
+const clock = (ms: number): string => new Date(ms).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' })
+
+/** Hover-card footprint estimate, so the tip can be kept inside the map
+ *  without measuring itself first. */
+const TIP_W = 220
+const TIP_H = 70
+
+/** The hover card for one tile: name and call count, the exact token count
+ *  with its category, and the block's share of the estimate and of the
+ *  model's window — the figures a tile has no room to print. */
+function Tip({ item, box, map, t, total, contextWindow }: {
+  item: SessionContextItem
+  box: { x: number; y: number; width: number; height: number }
+  map: { width: number; height: number }
+  t: T
+  total: number
+  contextWindow: number | null
+}): JSX.Element {
+  const share = total > 0 ? formatPercent(item.tokens / total * 100) : null
+  const windowShare = contextWindow !== null && contextWindow > 0 ? formatPercent(item.tokens / contextWindow * 100) : null
+  // Under the tile's center by default, flipping above it near the map floor,
+  // clamped to the map so overflow:hidden never clips the tip away.
+  const left = Math.min(Math.max(box.x + box.width / 2 - TIP_W / 2, 4), Math.max(4, map.width - TIP_W - 4))
+  const top = box.y + box.height + 6 + TIP_H < map.height - 4
+    ? box.y + box.height + 6
+    : Math.max(4, box.y - TIP_H - 6)
+  return <div className={css.tip} role="tooltip" style={{ left, top }}>
+    <div className={css.tipName}>{itemText(item, t)}</div>
+    <div className={css.tipMeta}>{formatTokens(item.tokens)} token · {t(CATEGORY_LABEL[item.category])}</div>
+    {share !== null && <div className={css.tipShare}>
+      {t('contextTipShare', { percent: share })}{windowShare === null ? '' : ` · ${t('contextTipWindow', { percent: windowShare })}`}
+    </div>}
+  </div>
+}
+
+function Treemap({ items, t, contextWindow }: { items: SessionContextItem[]; t: T; contextWindow: number | null }): JSX.Element {
+  const hostRef = useRef<HTMLDivElement | null>(null)
+  const [size, setSize] = useState({ width: 0, height: 0 })
+  // Hover state is keyed by block, not by tile instance, so the tip follows its
+  // block across refreshes even while the boxes re-lay-out underneath it.
+  const [hoverKey, setHoverKey] = useState<string | null>(null)
+  // The treemap needs real pixels: measure the box and re-lay out on resize
+  // (the Usage page is a container-query surface, so widths change freely).
+  useLayoutEffect(() => {
+    const host = hostRef.current
+    if (host === null) return
+    const measure = (): void => setSize(previous => {
+      const width = host.clientWidth
+      const height = host.clientHeight
+      return previous.width === width && previous.height === height ? previous : { width, height }
+    })
+    measure()
+    if (typeof ResizeObserver === 'undefined') {
+      window.addEventListener('resize', measure)
+      return () => window.removeEventListener('resize', measure)
+    }
+    const observer = new ResizeObserver(measure)
+    observer.observe(host)
+    return () => observer.disconnect()
+  }, [])
+  const boxes = useMemo(
+    () => treemapLayout(items.map(item => ({ key: item.key, tokens: item.tokens })), size.width, size.height),
+    [items, size.width, size.height],
+  )
+  const byKey = useMemo(() => new Map(items.map(item => [item.key, item])), [items])
+  const hoverBox = hoverKey === null ? undefined : boxes.find(box => box.key === hoverKey)
+  const hoverItem = hoverBox === undefined ? undefined : byKey.get(hoverBox.key)
+  return <div ref={hostRef} className={css.map} onMouseLeave={() => setHoverKey(null)}>
+    {boxes.map(box => {
+      const item = byKey.get(box.key)
+      if (item === undefined || box.width <= 0 || box.height <= 0) return null
+      const text = itemText(item, t)
+      // Tiles shed their captions before they shed their color: a label needs
+      // room for two glyphs plus padding, the size line needs a second row.
+      const showLabel = box.width >= 46 && box.height >= 22
+      const showSize = box.width >= 62 && box.height >= 40
+      return <div key={box.key} className={css.slot}
+        style={{ left: box.x, top: box.y, width: box.width, height: box.height }}
+        onMouseEnter={() => setHoverKey(box.key)}
+        aria-label={`${text} · ${formatTokens(item.tokens)} token · ${t(CATEGORY_LABEL[item.category])}`}>
+        <div className={`${css.tile} ${CATEGORY_TONE[item.category]}`}>
+          {showLabel && <span className={css.tileLabel}>{text}</span>}
+          {showSize && <span className={css.tileSize}>{formatCompact(item.tokens)} · {t(CATEGORY_LABEL[item.category])}</span>}
+        </div>
+      </div>
+    })}
+    {hoverBox !== undefined && hoverItem !== undefined &&
+      <Tip item={hoverItem} box={hoverBox} map={size} t={t} total={sumOf(items)} contextWindow={contextWindow} />}
+  </div>
+}
+
+/** The context-window panel above the Usage cards, in magpie's shape: the used
+ *  total and the model's window on the left, the newest answer's prompt-cache
+ *  split on the right, a treemap of what occupies the window below (with a
+ *  hover card per tile), and one legend row naming the six buckets with their
+ *  sizes. Every figure is an estimate, so the panel never claims an exact
+ *  count — and the live pill stamps when the estimate was last refreshed. */
+export function ContextWindowPanel({ context, t, updatedAt }: {
+  context: SessionContextWindow
+  t: T
+  /** Wall-clock ms of the last successful read, when the host reports one. */
+  updatedAt?: number | null
+}): JSX.Element {
+  const [open, setOpen] = useState(true)
+  const totals = contextCategoryTotals(context.items)
+  const reading = contextReading(context)
+  const percent = reading.percent
+  const hitRate = context.cacheKnown ? cacheRate(context.cacheHitTokens, context.cacheMissTokens) : null
+  const model = context.model !== '' && !context.model.includes('/') && context.provider !== ''
+    ? `${context.provider}/${context.model}`
+    : context.model
+  const windowText = context.contextWindow === null
+    ? t('contextWindowUnknown')
+    : t('contextWindowKnown', {
+      value: formatCompact(context.contextWindow),
+      percent: String(percent ?? 0),
+    })
+  return <section className={css.panel} data-dsh-context-window>
+    {/* Collapsed, the body's spacing is gone, so the header pads its own
+        bottom — otherwise the folded row reads heavy on top. */}
+    <header className={open ? css.head : `${css.head} ${css.headCollapsed}`}>
+      <button type="button" className={css.toggle} onClick={() => setOpen(!open)} aria-expanded={open} aria-controls="dsh-context-window-body">
+        <svg className={`${css.chevron} ${open ? css.chevronOpen : ''}`} 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>
+        <h2>{t('contextTitle')}</h2>
+      </button>
+      <div className={css.headRight}>
+        {model !== '' && <span className={css.model} title={`${context.provider} / ${context.model}`}>{model}</span>}
+        <span className={css.livePill}>
+          <span className={css.liveDot} aria-hidden="true" />
+          {t('contextLive')}
+          {typeof updatedAt === 'number' && <span className={css.liveTime}> · {clock(updatedAt)}</span>}
+        </span>
+      </div>
+    </header>
+    <div id="dsh-context-window-body" className={css.body} hidden={!open}>
+      <div className={css.summary}>
+        <div className={css.used}>
+          <span className={css.label}>{t('contextUsed')}</span>
+          <strong className={css.total} title={formatTokens(reading.usedTokens)}>{formatCompact(reading.usedTokens)}<small>token</small></strong>
+          <span className={css.window}>{windowText}</span>
+        </div>
+        <div className={css.cache}>
+          <span className={css.label}>{t('contextCache')}</span>
+          <div className={css.cacheBar}>
+            {hitRate === null
+              ? <span className={css.cacheEmpty} />
+              : <>
+                <span className={css.cacheHit} style={{ width: `${hitRate}%` }} />
+                <span className={css.cacheMiss} style={{ width: `${100 - hitRate}%` }} />
+              </>}
+          </div>
+          <div className={css.cacheLegend}>
+            {hitRate === null
+              ? <span className={css.cachePending}>{t('contextCachePending')}</span>
+              : <>
+                <span><i className={css.cacheHitDot} aria-hidden="true" />{t('contextCacheHit')} {formatPercent(hitRate)}</span>
+                <span><i className={css.cacheMissDot} aria-hidden="true" />{t('contextCacheMiss')} {formatPercent(100 - hitRate)}</span>
+              </>}
+          </div>
+        </div>
+      </div>
+      {reading.estimateDiffers && <p className={css.note}>
+        {t('contextEstimateNote', { estimate: formatCompact(reading.estimateTokens), billed: formatCompact(reading.usedTokens) })}
+      </p>}
+      {context.items.length === 0
+        ? <p className={css.empty}>{t('contextEmpty')}</p>
+        : <Treemap items={context.items} t={t} contextWindow={context.contextWindow} />}
+      {totals.length > 0 && <ul className={css.legend}>
+        {totals.map(row => <li key={row.key}>
+          <span className={`${css.swatch} ${CATEGORY_TONE[row.key]}`} aria-hidden="true" />
+          <span className={css.legendName}>{t(CATEGORY_LABEL[row.key])}</span>
+          <span className={css.legendValue}>{formatCompact(row.tokens)}</span>
+        </li>)}
+      </ul>}
+    </div>
+  </section>
+}
+
+/** Legend order shared with the CSS tone classes (kept exported for tests). */
+export const CONTEXT_LEGEND_ORDER = CONTEXT_CATEGORY_ORDER

package/src/client/SessionUsageView.module.css

@@ -1,46 +1,57 @@
-/* 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; }
+/* DSH-native Usage surface: every colour rides the host semantic tokens
+ * (--dsw-alias-*), so the page follows the DSH light/dark theme — the light
+ * canvas is the host's pure-white bg-base, the dark canvas its near-black
+ * base, and surfaces separate by border (the host's flat-light convention)
+ * instead of by canvas tint. Tables fit the available width: no horizontal
+ * scroll containers, fixed column contracts, titles for names. Six stat cards
+ * sit in one row (1050px and below: 3-up, 700px and below: 2-up) as quiet
+ * bordered surfaces: no accent edges or watermarks, a flat tone chip leading
+ * each label, hierarchy from the type scale. Request log folds by
+ * conversation turn.
+ * Accent hues are this plugin's tone scale — the same accents the dashboard
+ * cards wear. Dark values flip under body[data-ds-dark-theme], the host's own
+ * dark mechanism (never a prefers-color-scheme media query: the host theme is
+ * app-level and can disagree with the OS). */
+.scroll { height:100%; min-height:0; overflow-y:auto; background:var(--dsw-alias-bg-base); color:var(--dsw-alias-label-primary); container-type:inline-size; }
+.page { box-sizing:border-box; width:100%; max-width:1160px; margin:0 auto; padding:24px 26px 32px; font-family:var(--dsw-font-family); font-size:13px; }
 .page * { box-sizing:border-box; }
 /* Freshness header: live badge + last-read stamp on the left, manual refresh
  * pinned to the right edge. */
 .head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px; }
-.headStatus { display:flex; align-items:center; gap:7px; min-width:0; font-size:11px; color:#8790a3; }
-.liveDot { width:6px; height:6px; border-radius:50%; background:#18a97b; box-shadow:0 0 0 3px #e5f6f0; flex-shrink:0; }
-.asOf { color:#9aa3b3; font-variant-numeric:tabular-nums; white-space:nowrap; }
-.refresh { display:inline-flex; align-items:center; gap:5px; flex:none; color:#6f7a8d; background:#fff; border:1px solid #e4e7ee; border-radius:8px; padding:5px 11px; font:inherit; font-size:11px; cursor:pointer; }
-.refresh:hover { color:#279cb6; border-color:#cbd3e0; }
+.headStatus { display:flex; align-items:center; gap:7px; min-width:0; font-size:11px; color:var(--dsw-alias-label-tertiary); }
+.liveDot { width:6px; height:6px; border-radius:50%; background:var(--dsw-alias-state-success-primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--dsw-alias-state-success-primary) 15%, transparent); flex-shrink:0; }
+.asOf { color:var(--dsw-alias-label-tertiary); font-variant-numeric:tabular-nums; white-space:nowrap; }
+.refresh { display:inline-flex; align-items:center; gap:5px; flex:none; color:var(--dsw-alias-label-secondary); background:var(--dsw-alias-bg-layer-1); border:1px solid var(--dsw-alias-border-l2); border-radius:8px; padding:5px 11px; font:inherit; font-size:11px; cursor:pointer; }
+.refresh:hover { color:var(--dsw-alias-label-primary); border-color:var(--dsw-alias-border-l3); background:var(--dsw-alias-interactive-bg-hover); }
 .refresh:disabled { opacity:.55; cursor:default; }
-.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; }
+.scope { color:var(--dsw-alias-label-tertiary); font-size:11px; margin:0 0 14px; }
+.stats { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; margin-bottom:16px; }
+.stat { min-width:0; position:relative; background:var(--dsw-alias-bg-layer-1); border:1px solid var(--dsw-alias-border-l1); border-radius:12px; padding:12px 14px 11px; box-shadow:0 1px 2px var(--dsw-alias-bg-mask-2); transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
+.stat:hover { border-color:var(--dsw-alias-border-l2); box-shadow:0 14px 30px -22px var(--dsw-alias-bg-mask-1), 0 1px 2px var(--dsw-alias-bg-mask-2); transform:translateY(-1px); }
+.statHead { display:flex; align-items:center; gap:5px; margin-bottom:6px; }
+.statIcon { display:flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:6px; color:var(--tone); background:color-mix(in srgb, var(--tone) 14%, transparent); flex-shrink:0; }
+.statLabel { font-size:12px; font-weight:500; color:var(--dsw-alias-label-tertiary); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
+.statValue { display:block; font-size:21px; font-weight:650; letter-spacing:-0.4px; color:var(--dsw-alias-label-primary); white-space:nowrap; font-variant-numeric:tabular-nums; }
+.statSub { display:block; margin-top:8px; padding-top:7px; border-top:1px solid var(--dsw-alias-border-l1); font-size:11px; color:var(--dsw-alias-label-tertiary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
+/* Accent hues: this plugin's tone scale, matching the dashboard cards' chart
+ * accents. The soft chip is a translucent mix of the hue itself, so it flips
+ * with the theme automatically; only the base hue needs a dark value (below). */
+.toneBlue { --tone:#4d6bfe; }
+.tonePurple { --tone:#975bf1; }
+.toneGreen { --tone:#00b96b; }
+.toneOrange { --tone:#e07b39; }
+.toneTeal { --tone:#0d8a8a; }
+.card { min-width:0; background:var(--dsw-alias-bg-layer-1); border:1px solid var(--dsw-alias-border-l2); 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 var(--dsw-alias-border-l1); }
+.cardHead h2 { font-size:14px; font-weight:600; margin:0; color:var(--dsw-alias-label-primary); }
 .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; }
+.count { display:inline-flex; align-items:center; justify-content:center; min-width:21px; padding:2px 6px; font-size:10px; color:var(--dsw-alias-label-tertiary); background:var(--dsw-alias-markdown-tag); 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 { color:var(--dsw-alias-label-tertiary); 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 var(--dsw-alias-border-l1); color:var(--dsw-alias-label-secondary); 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%; }
@@ -48,69 +59,71 @@
 .modelName { width:30%; }
 .modelRequests { width:11%; }
 .modelHit { width:16%; }
-.ellipsis { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#394354; }
+.ellipsis { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--dsw-alias-label-primary-dimmed); }
 /* 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; }
+.modelProvider { display:block; margin-top:2px; font-size:10px; color:var(--dsw-alias-label-tertiary); 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,.refresh:focus-visible { outline:2px solid #2ab1c6; outline-offset:-2px; }
+.speedCell small { font-size:9px; color:var(--dsw-alias-label-tertiary); }
+/* Status accents ride the host state tokens; the running/live teal is this
+ * plugin's tone-5 accent (the host has no teal state token). */
+.good { color:var(--dsw-alias-state-success-primary); }
+.warn { color:var(--dsw-alias-state-warn-label); }
+.bad { color:var(--dsw-alias-state-error-primary); }
+.live { color:#0d8a8a; }
+.muted { color:var(--dsw-alias-label-tertiary); }
+.empty { margin:0; padding:28px 18px; color:var(--dsw-alias-label-tertiary); font-size:12px; text-align:center; }
+.action { color:var(--dsw-alias-label-secondary); background:none; border:0; padding:3px 0; font:inherit; font-size:11px; cursor:pointer; }
+.action:hover { color:var(--dsw-alias-label-link); }
+.action:focus-visible,.turnHead:focus-visible,.refresh:focus-visible { outline:2px solid var(--dsw-alias-label-link); 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; }
+.turn { margin-top:10px; border:1px solid var(--dsw-alias-border-l1); border-radius:9px; background:var(--dsw-alias-bg-layer-1); 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:var(--dsw-alias-menu-group-header-fill); border:0; cursor:pointer; color:var(--dsw-alias-label-secondary); font:inherit; font-size:11px; }
+.chevron { color:var(--dsw-alias-label-tertiary); 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; }
+.turnTitle { display:flex; align-items:center; gap:6px; min-width:0; font-size:12px; font-weight:600; color:var(--dsw-alias-label-primary-dimmed); }
 /* 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; }
+.turnAgent { flex:none; padding:1px 6px; border-radius:5px; background:var(--dsw-alias-interactive-bg-active); color:var(--dsw-alias-label-secondary); 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 { border-top:1px solid var(--dsw-alias-border-l1); }
 .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 { display:grid; grid-template-columns:64px minmax(0,1fr) auto; align-items:center; gap:12px; padding:10px 16px; border-top:1px solid var(--dsw-alias-border-l1); }
 .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; }
+.turnRequestHead { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--dsw-alias-label-secondary); min-width:0; }
+.requestTime { color:var(--dsw-alias-label-tertiary); 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; }
+.recordModel { min-width:0; display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--dsw-alias-label-primary-dimmed); font-weight:500; }
+.routeText { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--dsw-alias-label-tertiary); flex-shrink:1; }
+.effort { white-space:nowrap; color:var(--dsw-alias-label-tertiary); background:var(--dsw-alias-markdown-tag); 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:var(--dsw-alias-label-tertiary); font-variant-numeric:tabular-nums; }
+.note { font-size:10px; line-height:1.7; color:var(--dsw-alias-label-tertiary); margin:0; }
+.error { background:color-mix(in srgb, var(--dsw-alias-state-error-primary) 10%, transparent); color:var(--dsw-alias-state-error-primary); border:1px solid color-mix(in srgb, var(--dsw-alias-state-error-primary) 35%, transparent); 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; }
+  .stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
   .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; }
+  .stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
+  .stat { padding:10px 12px 9px; }
+  .statValue { font-size:18px; }
   .table { font-size:10px; }
   .table th,.table td { padding:10px 3px; }
   .table th:first-child,.table td:first-child { padding-left:10px; }
@@ -128,4 +141,16 @@
 }
 @media (prefers-reduced-motion:reduce) {
   .chevron { transition:none; }
+  .stat { transition:none; }
+  .stat:hover { transform:none; }
 }
+/* Dark theme: the host sets body[data-ds-dark-theme] and every alias token
+ * above re-resolves on its own; only this plugin's own accent hues need
+ * explicit dark values — brighter variants of the dashboard's dark chart
+ * accents, so chips and running states hold their weight on dark cards. */
+body[data-ds-dark-theme] .toneBlue { --tone:#7d95ff; }
+body[data-ds-dark-theme] .tonePurple { --tone:#b18cff; }
+body[data-ds-dark-theme] .toneGreen { --tone:#2fbf7c; }
+body[data-ds-dark-theme] .toneOrange { --tone:#e89a5c; }
+body[data-ds-dark-theme] .toneTeal { --tone:#3bc5c5; }
+body[data-ds-dark-theme] .live { color:#3bc5c5; }

package/src/client/SessionUsageView.tsx

@@ -5,10 +5,11 @@ import { billedTotal, cacheHitPercentOf } from './session-usage-core.ts'
 import { formatCompact, formatTokens, normalizeModelName, decodeRateOf } from './format.ts'
 import { SESSION_USAGE_NS, type SessionUsageKey } from './session-usage-locales.ts'
 import { useSessionDetail } from './use-session-detail.ts'
+import { ContextWindowPanel } from './ContextWindowPanel.tsx'
 import { ModelLogo } from './ModelLogo.tsx'
 import css from './SessionUsageView.module.css'
 
-type T = (key: SessionUsageKey) => string
+type T = (key: SessionUsageKey, params?: Record<string, string>) => string
 type Row = SessionUsageDetail['records'][number]
 export type SessionUsageViewProps = PropsLocale<typeof SESSION_USAGE_NS> & { sessionId: string }
 
@@ -45,19 +46,15 @@ const icons = {
   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>
+    <div className={css.statHead}>
+      <span className={css.statIcon}><svg width="12" height="12" 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>
@@ -68,18 +65,12 @@ function Metrics({ detail, t }: { detail: SessionUsageDetail; t: T }): JSX.Eleme
   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>
+    <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.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.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>
 }
 
@@ -150,6 +141,11 @@ function Records({ detail, t }: { detail: SessionUsageDetail; t: T }): JSX.Eleme
     }
     group.rows.push(record)
   }
+  // Newest turn on top: groups order by the time of their most recent request,
+  // not by first appearance, so the live work leads and finished history trails
+  // (records arrive root-session first, subagents after, regardless of time).
+  const latest = (group: { rows: Row[] }): number => group.rows.reduce((max, row) => Math.max(max, row.startedAt), 0)
+  groups.sort((a, b) => latest(b) - latest(a))
   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)
@@ -175,8 +171,8 @@ function Records({ detail, t }: { detail: SessionUsageDetail; t: T }): JSX.Eleme
           </span>
         </button>
         <div id={`usage-turn-${encodeURIComponent(group.key)}`} className={css.turnBody} hidden={!open}>
-          {/* Requests arrive in event order, so every turn lists its newest
-              request first; turn groups themselves keep chronological order. */}
+          {/* Newest first inside and out: every turn lists its newest request
+              first, and turn groups themselves lead with the latest turn. */}
           {group.rows.slice().reverse().map(record => {
             const duration = record.finishedAt !== null ? record.finishedAt - record.startedAt : null
             const billed = billedTotal(record.totals)
@@ -207,8 +203,16 @@ function Records({ detail, t }: { detail: SessionUsageDetail; t: T }): JSX.Eleme
 }
 
 /** 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 SessionUsageContent({ detail, t, updatedAt }: { detail: SessionUsageDetail; t: T; updatedAt?: number | null }): JSX.Element {
+  return <>
+    <p className={css.scope}>{t('scope')}</p><Metrics detail={detail} t={t} /><Tables detail={detail} t={t} />
+    {/* The context window sits between the per-subagent/model tables and the
+        request records: it describes what the next request carries right now,
+        while everything above is spent-token history and everything below is
+        per-turn detail. */}
+    {detail.context ? <ContextWindowPanel context={detail.context} t={t} updatedAt={updatedAt} /> : null}
+    <Records key={detail.sessionId} detail={detail} t={t} /><p className={css.note}>{t('note')}</p>
+  </>
 }
 
 export function SessionUsageView({ sessionId, t }: SessionUsageViewProps): JSX.Element {
@@ -230,6 +234,6 @@ export function SessionUsageView({ sessionId, t }: SessionUsageViewProps): JSX.E
     </header>
     {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={refresh}>{t('retry')}</button></div>}
-    {detail && <SessionUsageContent detail={detail} t={t} />}
+    {detail && <SessionUsageContent detail={detail} t={t} updatedAt={updatedAt} />}
   </div></div>
 }