dsh-token-total 1.0.8 → 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.
- * Six stat cards sit in one row (≤1050px: 3-up, ≤700px: 2-up) as quiet white
- * surfaces on a pale canvas: no accent edges or watermarks, a flat tone chip
- * leading each label, hierarchy from the type scale and a hairline above the
- * footnote. Request log folds by conversation turn. */
-.scroll { height:100%; min-height:0; overflow-y:auto; background:#f6f7f9; 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; }
+.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:#fff; border:1px solid #e7eaf0; border-radius:12px; padding:12px 14px 11px; transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
-.stat:hover { border-color:#d9dfe9; box-shadow:0 14px 30px -22px rgba(23,32,54,.32); transform:translateY(-1px); }
+.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:var(--tone-soft); flex-shrink:0; }
-.statLabel { font-size:12px; font-weight:500; color:#7b8494; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
-.statValue { display:block; font-size:21px; font-weight:650; letter-spacing:-0.4px; color:#1b2130; white-space:nowrap; font-variant-numeric:tabular-nums; }
-.statSub { display:block; margin-top:8px; padding-top:7px; border-top:1px solid #f2f4f8; font-size:11px; color:#939aab; 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; }
-.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; }
+.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,58 +59,60 @@
 .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); }
   .stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
@@ -131,3 +144,13 @@
   .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 }
 
@@ -202,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 {
@@ -225,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>
 }

package/src/client/context-window-core.ts

@@ -0,0 +1,137 @@
+/**
+ * Pure helpers behind the context-window panel: the treemap squarifier, the
+ * per-category roll-up the legend prints, and the occupancy reading. Kept
+ * separate from the component so both are testable without a DOM.
+ */
+import type { SessionContextCategory, SessionContextItem, SessionContextWindow } from '../wire.ts'
+
+/** Legend order, also the color assignment order (see the CSS module). */
+export const CONTEXT_CATEGORY_ORDER: readonly SessionContextCategory[] = [
+  'system', 'tools', 'memory', 'files', 'results', 'conversation',
+]
+
+/** One positioned treemap block in container pixels. */
+export interface TreemapBox {
+  key: string
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+/** Per-category token totals in legend order, empty categories dropped. */
+export function contextCategoryTotals(
+  items: readonly SessionContextItem[],
+): Array<{ key: SessionContextCategory; tokens: number }> {
+  const totals = new Map<SessionContextCategory, number>()
+  for (const item of items) totals.set(item.category, (totals.get(item.category) ?? 0) + item.tokens)
+  return CONTEXT_CATEGORY_ORDER
+    .map(key => ({ key, tokens: totals.get(key) ?? 0 }))
+    .filter(row => row.tokens > 0)
+}
+
+/** Window occupancy in whole percent, or null when the host never reported the
+ *  model's window (the panel then says "unknown" instead of guessing one). */
+export function contextWindowPercent(usedTokens: number, contextWindow: number | null): number | null {
+  if (contextWindow === null || !(contextWindow > 0) || !(usedTokens >= 0)) return null
+  return Math.min(100, Math.round(usedTokens / contextWindow * 100))
+}
+
+/** How much the replay estimate may drift from the billed prompt before the
+ *  panel stops treating them as the same number (rounding, framing tokens). */
+export const CONTEXT_ESTIMATE_TOLERANCE = 0.15
+
+/** One reading of the snapshot for the headline: the billed prompt when the log
+ *  has one (exact), else the replay estimate. `estimateDiffers` marks the case
+ *  where the log carries text the model was never billed for — an upstream
+ *  compression plugin, say — so the panel can explain a treemap that sums
+ *  higher than the total. */
+export interface ContextReading {
+  usedTokens: number
+  percent: number | null
+  estimateTokens: number
+  estimateDiffers: boolean
+}
+
+export function contextReading(context: SessionContextWindow): ContextReading {
+  const estimateTokens = context.totalTokens
+  const usedTokens = context.promptTokens ?? estimateTokens
+  const gap = estimateTokens > 0 ? Math.abs(estimateTokens - usedTokens) / Math.max(estimateTokens, usedTokens) : 0
+  return {
+    usedTokens,
+    percent: contextWindowPercent(usedTokens, context.contextWindow),
+    estimateTokens,
+    estimateDiffers: context.promptTokens !== null && gap > CONTEXT_ESTIMATE_TOLERANCE,
+  }
+}
+
+/** Aspect ratio of the worst tile in a row of `sum` area, given the strip's
+ *  short side — the squarified-treemap cost function. */
+function worstRatio(sum: number, max: number, min: number, side: number): number {
+  const squared = sum * sum
+  const sideSquared = side * side
+  return Math.max((sideSquared * max) / squared, squared / (sideSquared * min))
+}
+
+const round = (value: number): number => Math.round(value * 100) / 100
+
+/**
+ * Squarified treemap (Bruls, Huizing & van Wijk): tile `width`×`height` with
+ * one block per positive weight, proportional to its tokens and as close to
+ * square as the greedy row packing allows. Blocks come back in the input's
+ * descending-weight order, covering the whole area.
+ */
+export function treemapLayout(
+  rows: ReadonlyArray<{ key: string; tokens: number }>,
+  width: number,
+  height: number,
+): TreemapBox[] {
+  const ordered = rows.filter(row => row.tokens > 0 && Number.isFinite(row.tokens)).sort((a, b) => b.tokens - a.tokens)
+  if (ordered.length === 0 || !(width > 0) || !(height > 0)) return []
+  const total = ordered.reduce((sum, row) => sum + row.tokens, 0)
+  const scale = (width * height) / total
+  const areas = ordered.map(row => ({ key: row.key, area: row.tokens * scale }))
+  const boxes: TreemapBox[] = []
+  let x = 0
+  let y = 0
+  let w = width
+  let h = height
+  let index = 0
+  while (index < areas.length) {
+    const side = Math.min(w, h)
+    if (!(side > 0)) break
+    // Grow one row while the worst aspect ratio keeps improving.
+    let end = index + 1
+    let sum = areas[index]!.area
+    let max = sum
+    let min = sum
+    let worst = worstRatio(sum, max, min, side)
+    while (end < areas.length) {
+      const area = areas[end]!.area
+      const nextSum = sum + area
+      const nextMax = Math.max(max, area)
+      const nextMin = Math.min(min, area)
+      const nextWorst = worstRatio(nextSum, nextMax, nextMin, side)
+      if (nextWorst > worst) break
+      sum = nextSum
+      max = nextMax
+      min = nextMin
+      worst = nextWorst
+      end++
+    }
+    const thickness = sum / side
+    if (!(thickness > 0)) break
+    let offset = 0
+    for (let k = index; k < end; k++) {
+      const length = areas[k]!.area / thickness
+      const box = w >= h
+        ? { key: areas[k]!.key, x, y: y + offset, width: thickness, height: length }
+        : { key: areas[k]!.key, x: x + offset, y, width: length, height: thickness }
+      boxes.push({ key: box.key, x: round(box.x), y: round(box.y), width: round(box.width), height: round(box.height) })
+      offset += length
+    }
+    if (w >= h) { x += thickness; w -= thickness } else { y += thickness; h -= thickness }
+    index = end
+  }
+  return boxes
+}