dsh-token-total 1.0.0 → 1.0.2

package/lib/client.js

@@ -29406,13 +29406,13 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region \0token-total-css:/home/runner/work/dsh-token-total/dsh-token-total/src/client/TokenTotalPanel.module.css?inline
-		const css$1 = "/**\n * Usage statistics panel styles — a DSH-native CSS Module. Every visual\n * value rides the DSH semantic tokens (--dsw-alias-* colors, --dsw-font-*\n * typography, --ds-* motion); no static palette values, no theme selectors.\n * The heatmap's 5 levels come from the brand accent via color-mix; model\n * colours are the fixed --dsw-chart-1..5 series (rank order by token\n * volume) plus the gray --dsw-chart-other step — the reasonix token-total\n * palette, with a lifted dark variant defined below.\n */\n\n/* The panel as a standalone main panel. It gets the same 960px content column\n   the Plugins page gives it — the declarations below mirror the Plugins page's\n   own `.page_768838850` so both entries render identically. Without the cap the charts\n   would stretch to whatever the centre column happens to be.\n\n   One deliberate difference from that page: its 28px top inset is NOT part of\n   this container. A main panel starts at the window's top-left corner, so an\n   inset painted by this scrolling container is a strip above the content that\n   no window-drag region covers; `.backRow_768838850` below owns the inset instead, which\n   is the shape the shipped page plugins use for the same reason\n   (`ui-plugin-manager`'s `.pageHead_768838850`/`.detailTop_768838850` and `ui-schedule`'s page\n   head). The rendered position is unchanged. */\n.page_768838850 {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  box-sizing: border-box;\n  height: 100%;\n  overflow: auto;\n  padding: 0 clamp(24px, 4vw, 48px) 48px;\n  color: var(--dsw-alias-label-primary);\n}\n\n.page_768838850 > * {\n  width: 100%;\n  max-width: 960px;\n}\n\n/* The standalone panel's back control. Only the main panel renders this seat —\n   the Plugins page entry already sits inside the page's own chrome, which\n   draws its own crumb back to the bundle list. The spacing matches the gap the\n   panel keeps between its own sections.\n\n   The row also carries the panel's former 28px top inset: it starts at the\n   window's top edge, so the whole strip above the back control drags the\n   window (Electron app-regions are geometry, not stacking, so a strip owned by\n   the scrolling container would subtract itself from the drag row beneath\n   it). */\n.backRow_768838850 {\n  display: flex;\n  box-sizing: border-box;\n  padding-top: 28px;\n  margin-bottom: 18px;\n}\n\n.back_768838850 {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.panel_768838850 {\n  display: flex;\n  flex-direction: column;\n  gap: 18px;\n  min-width: 0;\n}\n\n/* ── toolbar ───────────────────────────────────────────────────────────── */\n\n.toolbar_768838850 {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 10px;\n}\n\n/* Each picker (time range) lives in a framed group. */\n.group_768838850 {\n  display: inline-flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 2px;\n  padding: 3px;\n  border: 1px solid var(--dsw-alias-border-l2);\n  border-radius: 8px;\n  background: var(--dsw-alias-bg-layer-1);\n}\n\n/* A range-preset chip: ghost Button inside the group, active state tinted\n   with the interactive-active fill. */\n.segItem_768838850 {\n  border-radius: 6px;\n}\n\n.segItem_768838850:hover:not(:disabled) {\n  background: var(--dsw-alias-interactive-bg-hover);\n}\n\n.segActive_768838850,\n.segActive_768838850:hover:not(:disabled) {\n  background: var(--dsw-alias-interactive-bg-active);\n  color: var(--dsw-alias-label-primary);\n}\n\n.customRange_768838850 {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.dateInput_768838850 {\n  width: 150px;\n  flex: 0 0 auto;\n}\n\n.customSep_768838850 {\n  color: var(--dsw-alias-label-tertiary);\n}\n\n/* Keep the remaining toolbar action at the trailing edge. */\n.refresh_768838850 {\n  flex: 0 0 auto;\n  margin-left: auto;\n}\n\n/* ── states ────────────────────────────────────────────────────────────── */\n\n.errorBanner_768838850 {\n  padding: 10px 14px;\n  border: 1px solid var(--dsw-alias-state-warn-primary);\n  border-radius: 8px;\n  background: color-mix(in srgb, var(--dsw-alias-state-warn-primary) 12%, transparent);\n  color: var(--dsw-alias-state-warn-label);\n  font-size: 13px;\n}\n\n.loading_768838850 {\n  padding: 24px;\n  text-align: center;\n  color: var(--dsw-alias-label-tertiary);\n  font-size: 13px;\n}\n\n.empty_768838850 {\n  padding: 24px;\n  text-align: center;\n  color: var(--dsw-alias-label-tertiary);\n  font-size: 13px;\n  border: 1px dashed var(--dsw-alias-border-l2);\n  border-radius: 8px;\n}\n\n/* ── numeric cards ─────────────────────────────────────────────────────── */\n\n/* The two long-valued cards bookend the row — total tokens leads it, the top\n   model closes it — each on a wider track than the four short numerics\n   between them. At the Plugins page's 960px content width that is six columns\n   on one row. */\n.cards_768838850 {\n  display: grid;\n  grid-template-columns: 1.3fr repeat(4, 1fr) 1.3fr;\n  gap: 10px;\n}\n\n/* Below the width where six cards hold their own, the grid folds to four\n   tracks and the two long cards take two each: they keep their extra width\n   instead of degrading to the numerics' size, and each row still fills. */\n@media (max-width: 720px) {\n  .cards_768838850 {\n    grid-template-columns: repeat(4, 1fr);\n  }\n\n  .cards_768838850 > :first-child,\n  .cards_768838850 > :last-child {\n    grid-column: span 2;\n  }\n}\n\n@media (max-width: 430px) {\n  .cards_768838850 {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n\n.card_768838850 {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 12px 14px;\n  border: 1px solid var(--dsw-alias-border-l1);\n  border-radius: 10px;\n  background: var(--dsw-alias-bg-layer-1);\n  min-width: 0;\n}\n\n.cardHead_768838850 {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.cardIcon_768838850 {\n  color: var(--dsw-alias-label-tertiary);\n  flex: 0 0 auto;\n}\n\n.cardLabel_768838850 {\n  color: var(--dsw-alias-label-secondary);\n  font-size: 13px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.cardValue_768838850 {\n  color: var(--dsw-alias-label-primary);\n  font-weight: 600;\n  line-height: 1.15;\n}\n\n.cardValueSm_768838850 {\n  font-size: 14px;\n}\n\n.cardValueWrap_768838850 {\n  word-break: break-word;\n}\n\n/* The \"most used model\" card value: the model name over the provider, the\n   same two-line anatomy as the per-model list rows (modelName/modelProvider\n   classes), instead of the raw \"provider/model\" ref. */\n.cardModelLines_768838850 {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n}\n\n/* A muted second line under a card value (the absolute cached-token volume\n   under the hit-rate percentage). */\n.cardSub_768838850 {\n  color: var(--dsw-alias-label-tertiary);\n  font-size: 11px;\n  line-height: 1.2;\n}\n\n/* ── sections / chart chrome ───────────────────────────────────────────── */\n\n.section_768838850 {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  min-width: 0;\n}\n\n.sectionHead_768838850 {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 10px;\n  flex-wrap: wrap;\n}\n\n.sectionTitle_768838850 {\n  margin: 0;\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--dsw-alias-label-primary);\n}\n\n.trendNote_768838850 {\n  font-size: 13px;\n  color: var(--dsw-alias-label-tertiary);\n}\n\n.chartWrap_768838850 {\n  position: relative;\n  min-width: 0;\n}\n\n/* ── heatmap ───────────────────────────────────────────────────────────── */\n\n.heatWrap_768838850 {\n  position: relative;\n  /* hidden, not auto: the SVG now fills the container exactly, and an\n     auto scrollbar would flash when a fixed tooltip passes over the wrap's\n     right edge. */\n  overflow: hidden;\n  min-width: 0;\n}\n\n.heatmap_768838850 {\n  display: block;\n  /* The 364 cells each keep their own two-layer drop-shadow chain (see\n     `.heatCell_768838850`) — 728 blurs that the compositor would otherwise re-run on\n     every scroll repaint of the tile, which is what made scrolling this panel\n     drop frames while idle was clean (#4). Promoting the SVG onto its own\n     compositing layer takes that rasterization off the scroll path and leaves\n     the painted result untouched, so the cell depth stays as designed. Note\n     that the promotion is what does the work: `contain: paint` on its own\n     measured no better than no mitigation at all. */\n  transform: translateZ(0);\n}\n\n.heatLegend_768838850 {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  font-size: 13px;\n  color: var(--dsw-alias-label-tertiary);\n}\n\n.heatCell_768838850 {\n  display: inline-block;\n  border-radius: 3px;\n  /* No width/height here: the SVG cells carry their size as geometry\n     attributes (x/y/width/height), and a CSS width/height would override\n     those on SVG2 rects — pinning every cell to a fixed px and widening the\n     visual gap. The legend swatches carry the same size inline, so both\n     always match the measured geom.size_768838850. */\n  /* Depth at this size, WITHOUT a per-cell backdrop-filter: the cells are SVG\n     geometry, where backdrop-filter is accepted by the CSSOM but changes\n     nothing on paint (measured on 364 live cells: the screenshot came out\n     byte-identical to no blur at all). What reads as a glass tile instead is\n     the translucent fill below — it lets the panel's own glass bed through —\n     carried by one hairline highlight over one soft under-shadow. */\n  filter:\n    drop-shadow(0 -0.5px 0 var(--dsw-heat-sheen))\n    drop-shadow(0 0.5px 0.8px var(--dsw-heat-shade));\n}\n\n/* The five heat levels use DeepSeek's brand blue (#4D6BFE) as a fixed ramp,\n   light and dark variants below — never the theme accent, which can read\n   near-black against the base surface in dark mode. level0 (no data) is a\n   neutral empty cell. The cells are SVG <rect>s, so the color rides `fill`\n   (background is a no-op on SVG geometry) — but the legend swatches are HTML,\n   so both declarations stay in step.\n   Each level is mixed a little toward transparent so the bed shows through;\n   the amount is deliberately modest, because the ramp is a DATA encoding and\n   washing it out would cost readability. */\n.heatLevel0_768838850 {\n  fill: color-mix(in srgb, var(--dsw-heat-0) 82%, transparent);\n  background: color-mix(in srgb, var(--dsw-heat-0) 82%, transparent);\n}\n\n.heatLevel1_768838850 {\n  fill: color-mix(in srgb, var(--dsw-heat-1) 82%, transparent);\n  background: color-mix(in srgb, var(--dsw-heat-1) 82%, transparent);\n}\n\n.heatLevel2_768838850 {\n  fill: color-mix(in srgb, var(--dsw-heat-2) 82%, transparent);\n  background: color-mix(in srgb, var(--dsw-heat-2) 82%, transparent);\n}\n\n.heatLevel3_768838850 {\n  fill: color-mix(in srgb, var(--dsw-heat-3) 82%, transparent);\n  background: color-mix(in srgb, var(--dsw-heat-3) 82%, transparent);\n}\n\n.heatLevel4_768838850 {\n  fill: color-mix(in srgb, var(--dsw-heat-4) 82%, transparent);\n  background: color-mix(in srgb, var(--dsw-heat-4) 82%, transparent);\n}\n\n.heatLevel5_768838850 {\n  fill: color-mix(in srgb, var(--dsw-heat-5) 82%, transparent);\n  background: color-mix(in srgb, var(--dsw-heat-5) 82%, transparent);\n}\n\n/* ── daily trend ───────────────────────────────────────────────────────── */\n\n.chart_768838850 {\n  display: block;\n}\n\n.grid_768838850 {\n  stroke: var(--dsw-alias-border-l1);\n  stroke-width: 1;\n}\n\n.axis_768838850 {\n  fill: var(--dsw-alias-label-tertiary);\n  font-size: 10px;\n}\n\n.axisRate_768838850 {\n  fill: var(--dsw-alias-label-tertiary);\n}\n\n.bar_768838850 {\n  transition: opacity 0.12s ease;\n  /* The hover scaleX must pivot on the bar's own centre: SVG geometry\n     transforms around the SVG origin unless transform-box anchors it to the\n     element's fill box. Without this the scaled bar slides sideways and\n     looks like it vanishes. */\n  transform-box: fill-box;\n  transform-origin: center;\n}\n\n.barDim_768838850 {\n  opacity: 0.35;\n}\n\n.barHit_768838850 {\n  fill: transparent;\n  pointer-events: all;\n}\n\n/* cache hit-rate trend curve: DeepSeek's brand blue (#4D6BFE, the same hue\n   family as the heatmap ramp) — a fixed brand ramp instead of the theme\n   accent, which can read near-black in some themes. */\n.trend_768838850 {\n  stroke: var(--dsw-trend-line);\n  stroke-width: 2;\n  opacity: 0.9;\n  pointer-events: none;\n}\n\n.trendDot_768838850 {\n  fill: var(--dsw-trend-line);\n  stroke: var(--dsw-alias-bg-layer-1);\n  stroke-width: 2;\n  pointer-events: none;\n}\n\n.legend_768838850 {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n  font-size: 13px;\n  color: var(--dsw-alias-label-secondary);\n}\n\n.legendItem_768838850 {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  cursor: default;\n}\n\n.legendSwatch_768838850 {\n  display: inline-block;\n  width: 10px;\n  height: 10px;\n  border-radius: 2px;\n}\n\n.legendTrend_768838850 {\n  background: var(--dsw-trend-line);\n  width: 14px;\n  height: 3px;\n  border-radius: 2px;\n}\n\n/* ── per-model / per-provider chart + list ─────────────────────────────── */\n\n/* The ring is centred against the list beside it. The list's height is never\n   tied to the chart, so expanding a row cannot stretch anything. */\n.models_768838850 {\n  display: flex;\n  gap: 16px;\n  align-items: center;\n  flex-wrap: wrap;\n  min-width: 0;\n}\n\n/* The ring's own wrapper. Its diameter comes from the measured row width (see\n   Donut.tsx_768838850), so it must never flex. */\n.donutWrap_768838850 {\n  position: relative;\n  flex: 0 0 auto;\n}\n\n.donut_768838850 {\n  display: block;\n}\n\n.donutTrack_768838850 {\n  stroke: var(--dsw-alias-bg-mask-1);\n}\n\n.donutSeg_768838850 {\n  transition: stroke-width 0.12s ease, opacity 0.12s ease;\n}\n\n.donutDim_768838850 {\n  opacity: 0.35;\n}\n\n.donutCenter_768838850 {\n  fill: var(--dsw-alias-label-primary);\n  font-size: 18px;\n  font-weight: 600;\n}\n\n.donutLabel_768838850 {\n  fill: var(--dsw-alias-label-tertiary);\n  font-size: 11px;\n}\n\n.modelList_768838850 {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  flex: 1 1 260px;\n  min-width: 0;\n  border: 1px solid var(--dsw-alias-border-l1);\n  border-radius: 10px;\n  background: var(--dsw-alias-bg-layer-1);\n  overflow: hidden;\n}\n\n/* Position column: the row's rank inside its section. The Other bucket holds\n   no single rank, so it renders an empty (but equally wide) cell. */\n.modelRank_768838850 {\n  flex: 0 0 auto;\n  min-width: 14px;\n  color: var(--dsw-alias-label-tertiary);\n  font-size: 12px;\n  font-variant-numeric: tabular-nums;\n  text-align: right;\n}\n\n.modelRow_768838850 {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  font-size: 13px;\n  border-bottom: 1px solid var(--dsw-alias-border-l1);\n}\n\n.modelRow_768838850:last-child {\n  border-bottom: none;\n}\n\n/* \"Other\" aggregate row: the entire row is clickable to expand/collapse the\n   detail list. The chevron button inside it stops propagation so\n   double-firing is avoided. */\n.modelRowExpandable_768838850 {\n  cursor: pointer;\n}\n\n/* \"Other\" row toggle (chevron) that expands the aggregated tail models. */\n.modelToggle_768838850 {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  margin-right: 4px;\n  border: none;\n  background: none;\n  color: var(--dsw-alias-label-tertiary);\n  cursor: pointer;\n  vertical-align: middle;\n}\n\n/* Expanded detail rows: indented, slightly recessed. */\n.modelRowSub_768838850 {\n  padding-left: 28px;\n  background: color-mix(in srgb, var(--dsw-alias-bg-layer-2) 55%, transparent);\n  font-size: 13px;\n}\n\n/* Second-level indent: a model row inside a provider that is itself folded\n   into the Other bucket. Wider than .modelRowSub_768838850 so the nesting stays\n   readable. Declared after it — same specificity, so this one wins. */\n.modelRowDeep_768838850 {\n  padding-left: 48px;\n}\n\n/* \"Other\" details expand with an accordion: the wrapper is a grid whose\n   single track animates 0fr → 1fr. */\n.modelOtherWrap_768838850 {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows 0.25s ease;\n}\n\n.modelOtherOpen_768838850 {\n  grid-template-rows: 1fr;\n}\n\n.modelOtherList_768838850 {\n  overflow: hidden;\n  min-height: 0;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/* Two-line row anatomy: [swatch] [name / provider] ……… [tokens / share].\n   The name block takes the free width; the values block hugs the right. */\n.modelId_768838850 {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  flex: 1 1 auto;\n  min-width: 0;\n}\n\n.modelValues_768838850 {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  gap: 1px;\n  flex: 0 0 auto;\n}\n\n.modelName_768838850 {\n  color: var(--dsw-alias-label-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  min-width: 0;\n}\n\n.modelProvider_768838850 {\n  color: var(--dsw-alias-label-tertiary);\n  font-size: 11px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.modelTokens_768838850 {\n  color: var(--dsw-alias-label-secondary);\n  font-variant-numeric: tabular-nums;\n}\n\n.modelPct_768838850 {\n  color: var(--dsw-alias-label-tertiary);\n  font-size: 11px;\n  font-variant-numeric: tabular-nums;\n}\n\n/* ── tooltips ──────────────────────────────────────────────────────────── */\n\n/* Tooltips render as fixed-position portals on document.body_768838850 (see ChartTip),\n   so they escape every ancestor's clipping and never overflow the settings\n   panel: ChartTip clamps each tip inside the panel bounds and flips it above\n   the hovered element when there is no room below. The plate follows the\n   active theme: the DSH overlay token is a light gray in light mode and a\n   dark gray under body[data-ds-dark-theme], so the tip reads correctly in\n   both instead of staying dark in light mode. */\n.tip_768838850 {\n  position: fixed;\n  /* The tip is portaled to document.body_768838850, so it competes with the settings\n     modal itself (z-index 1000) for the top layer: 100 would sit under the\n     modal and the tip would be invisible. 1100 matches the official\n     toast/portaled-menu layer, which is exactly the \"over a modal\" tier. */\n  z-index: 1100;\n  pointer-events: none;\n  padding: 8px 10px;\n  border-radius: 8px;\n  background: var(--dsw-alias-bg-overlay);\n  border: 1px solid var(--dsw-alias-border-l2);\n  color: var(--dsw-alias-label-primary);\n  font-size: 13px;\n  box-shadow: 0 2px 12px var(--dsw-alias-bg-mask-2);\n  white-space: nowrap;\n}\n\n.tipTitle_768838850 {\n  font-weight: 600;\n  margin-bottom: 4px;\n}\n\n.tipRow_768838850 {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n\n/* Hover tooltip breakdown rows for the \"Other\" aggregate: indented, muted,\n   same gray swatch as the Other step. */\n.tipRowOther_768838850 {\n  padding-left: 8px;\n  color: var(--dsw-alias-label-secondary);\n}\n\n.tipBreakdown_768838850 {\n  border-top: 1px solid var(--dsw-alias-border-l1);\n  margin-top: 4px;\n  padding-top: 4px;\n}\n\n.foot_768838850 {\n  font-size: 13px;\n  color: var(--dsw-alias-label-tertiary);\n}\n\n/* ── chart palette ──────────────────────────────────────────────────────── */\n\n/* Light variant (the theme's default): model colours are the reasonix\n   token-total palette (rank order by token volume + gray Other) with a\n   white veil mixed in (color-mix 30% white) — the raw hues read dark and\n   heavy on the light card surface, and the veil lifts lightness and dulls\n   saturation the way a translucent white overlay would, keeping the hues\n   colourful instead of muddy. The heatmap ramp is DeepSeek's brand blue\n   (#4D6BFE) stepping from a pale tint to the full blue; the hit-rate curve\n   rides the same brand hue.\n   Ranks 6-10 extend the reasonix five to ten (this plugin's addition): each\n   is picked to keep the ten hues apart on both themes. */\n.panel_768838850 {\n  --dsw-heat-0: #ebedf0;\n  --dsw-heat-1: #dbe3ff;\n  --dsw-heat-2: #b7c5ff;\n  --dsw-heat-3: #8ea4ff;\n  --dsw-heat-4: #6884ff;\n  --dsw-heat-5: #4d6bfe;\n  /* Heatmap cell depth: a highlight above, a shade below. Light trays need\n     the stronger pair; the dark tray below lifts the shade instead. */\n  --dsw-heat-sheen: rgb(255 255 255 / 0.55);\n  --dsw-heat-shade: rgb(0 0 0 / 0.20);\n  --dsw-trend-line: #4d6bfe;\n  --dsw-chart-1: color-mix(in srgb, #0576ff 70%, white);\n  --dsw-chart-2: color-mix(in srgb, #2f6f37 70%, white);\n  --dsw-chart-3: color-mix(in srgb, #c46212 70%, white);\n  --dsw-chart-4: color-mix(in srgb, #975bf1 70%, white);\n  --dsw-chart-5: color-mix(in srgb, #d34591 70%, white);\n  --dsw-chart-6: color-mix(in srgb, #0d8a8a 70%, white);\n  --dsw-chart-7: color-mix(in srgb, #b3341f 70%, white);\n  --dsw-chart-8: color-mix(in srgb, #7a9018 70%, white);\n  --dsw-chart-9: color-mix(in srgb, #4b3fd0 70%, white);\n  --dsw-chart-10: color-mix(in srgb, #d4a017 70%, white);\n  --dsw-chart-other: color-mix(in srgb, #576270 70%, white);\n  /* Provider series: a separate five-hue set for the provider section, so a\n     provider never wears a model's colour. */\n  --dsw-provider-1: color-mix(in srgb, #1f7a8c 70%, white);\n  --dsw-provider-2: color-mix(in srgb, #6a8e3a 70%, white);\n  --dsw-provider-3: color-mix(in srgb, #a15c2f 70%, white);\n  --dsw-provider-4: color-mix(in srgb, #7b5ea7 70%, white);\n  --dsw-provider-5: color-mix(in srgb, #b03a5b 70%, white);\n  --dsw-provider-other: color-mix(in srgb, #576270 70%, white);\n}\n\n/* Dark variant: the same reasonix hues under a thicker white veil\n   (35% — dark surfaces need the extra lift), so segments read soft and\n   bright instead of sinking into the background. */\n@media (prefers-color-scheme: dark) {\n  .panel_768838850 {\n    --dsw-heat-0: #21262d;\n    --dsw-heat-1: #2f4bd0;\n    --dsw-heat-2: #4d6bfe;\n    --dsw-heat-3: #6e8bff;\n    --dsw-heat-4: #93aaff;\n    --dsw-heat-5: #c4d0ff;\n    /* Same depth pair, recalibrated: a dark tray swallows a light shade. */\n    --dsw-heat-sheen: rgb(255 255 255 / 0.30);\n    --dsw-heat-shade: rgb(0 0 0 / 0.50);\n    --dsw-trend-line: #7d95ff;\n    --dsw-chart-1: color-mix(in srgb, #0576ff 65%, white);\n    --dsw-chart-2: color-mix(in srgb, #2f6f37 65%, white);\n    --dsw-chart-3: color-mix(in srgb, #c46212 65%, white);\n    --dsw-chart-4: color-mix(in srgb, #975bf1 65%, white);\n    --dsw-chart-5: color-mix(in srgb, #d34591 65%, white);\n    --dsw-chart-6: color-mix(in srgb, #0d8a8a 65%, white);\n    --dsw-chart-7: color-mix(in srgb, #b3341f 65%, white);\n    --dsw-chart-8: color-mix(in srgb, #7a9018 65%, white);\n    --dsw-chart-9: color-mix(in srgb, #4b3fd0 65%, white);\n    --dsw-chart-10: color-mix(in srgb, #d4a017 65%, white);\n    --dsw-chart-other: color-mix(in srgb, #576270 65%, white);\n    --dsw-provider-1: color-mix(in srgb, #1f7a8c 65%, white);\n    --dsw-provider-2: color-mix(in srgb, #6a8e3a 65%, white);\n    --dsw-provider-3: color-mix(in srgb, #a15c2f 65%, white);\n    --dsw-provider-4: color-mix(in srgb, #7b5ea7 65%, white);\n    --dsw-provider-5: color-mix(in srgb, #b03a5b 65%, white);\n    --dsw-provider-other: color-mix(in srgb, #576270 65%, white);\n  }\n}\n";
-		const tagId$1 = "dsh-token-total/TokenTotalPanel.module.css";
-		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=\"" + tagId$1 + "\"]") === null) {
+		const css$2 = "/**\n * Usage statistics panel styles — a DSH-native CSS Module. Every visual\n * value rides the DSH semantic tokens (--dsw-alias-* colors, --dsw-font-*\n * typography, --ds-* motion); no static palette values, no theme selectors.\n * The heatmap's 5 levels come from the brand accent via color-mix; model\n * colours are the fixed --dsw-chart-1..5 series (rank order by token\n * volume) plus the gray --dsw-chart-other step — the reasonix token-total\n * palette, with a lifted dark variant defined below.\n */\n\n/* The panel as a standalone main panel. It gets the same 960px content column\n   the Plugins page gives it — the declarations below mirror the Plugins page's\n   own `.page_768838850` so both entries render identically. Without the cap the charts\n   would stretch to whatever the centre column happens to be.\n\n   One deliberate difference from that page: its 28px top inset is NOT part of\n   this container. A main panel starts at the window's top-left corner, so an\n   inset painted by this scrolling container is a strip above the content that\n   no window-drag region covers; `.backRow_768838850` below owns the inset instead, which\n   is the shape the shipped page plugins use for the same reason\n   (`ui-plugin-manager`'s `.pageHead_768838850`/`.detailTop_768838850` and `ui-schedule`'s page\n   head). The rendered position is unchanged. */\n.page_768838850 {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  box-sizing: border-box;\n  height: 100%;\n  overflow: auto;\n  padding: 0 clamp(24px, 4vw, 48px) 48px;\n  color: var(--dsw-alias-label-primary);\n}\n\n.page_768838850 > * {\n  width: 100%;\n  max-width: 960px;\n}\n\n/* The standalone panel's back control. Only the main panel renders this seat —\n   the Plugins page entry already sits inside the page's own chrome, which\n   draws its own crumb back to the bundle list. The spacing matches the gap the\n   panel keeps between its own sections.\n\n   The row also carries the panel's former 28px top inset: it starts at the\n   window's top edge, so the whole strip above the back control drags the\n   window (Electron app-regions are geometry, not stacking, so a strip owned by\n   the scrolling container would subtract itself from the drag row beneath\n   it). */\n.backRow_768838850 {\n  display: flex;\n  box-sizing: border-box;\n  padding-top: 28px;\n  margin-bottom: 18px;\n}\n\n.back_768838850 {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.panel_768838850 {\n  display: flex;\n  flex-direction: column;\n  gap: 18px;\n  min-width: 0;\n}\n\n/* ── toolbar ───────────────────────────────────────────────────────────── */\n\n.toolbar_768838850 {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 10px;\n}\n\n/* Each picker (time range) lives in a framed group. */\n.group_768838850 {\n  display: inline-flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 2px;\n  padding: 3px;\n  border: 1px solid var(--dsw-alias-border-l2);\n  border-radius: 8px;\n  background: var(--dsw-alias-bg-layer-1);\n}\n\n/* A range-preset chip: ghost Button inside the group, active state tinted\n   with the interactive-active fill. */\n.segItem_768838850 {\n  border-radius: 6px;\n}\n\n.segItem_768838850:hover:not(:disabled) {\n  background: var(--dsw-alias-interactive-bg-hover);\n}\n\n.segActive_768838850,\n.segActive_768838850:hover:not(:disabled) {\n  background: var(--dsw-alias-interactive-bg-active);\n  color: var(--dsw-alias-label-primary);\n}\n\n.customRange_768838850 {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.dateInput_768838850 {\n  width: 150px;\n  flex: 0 0 auto;\n}\n\n.customSep_768838850 {\n  color: var(--dsw-alias-label-tertiary);\n}\n\n/* Keep the remaining toolbar action at the trailing edge. */\n.refresh_768838850 {\n  flex: 0 0 auto;\n  margin-left: auto;\n}\n\n/* ── states ────────────────────────────────────────────────────────────── */\n\n.errorBanner_768838850 {\n  padding: 10px 14px;\n  border: 1px solid var(--dsw-alias-state-warn-primary);\n  border-radius: 8px;\n  background: color-mix(in srgb, var(--dsw-alias-state-warn-primary) 12%, transparent);\n  color: var(--dsw-alias-state-warn-label);\n  font-size: 13px;\n}\n\n.loading_768838850 {\n  padding: 24px;\n  text-align: center;\n  color: var(--dsw-alias-label-tertiary);\n  font-size: 13px;\n}\n\n.empty_768838850 {\n  padding: 24px;\n  text-align: center;\n  color: var(--dsw-alias-label-tertiary);\n  font-size: 13px;\n  border: 1px dashed var(--dsw-alias-border-l2);\n  border-radius: 8px;\n}\n\n/* ── numeric cards ─────────────────────────────────────────────────────── */\n\n/* The two long-valued cards bookend the row — total tokens leads it, the top\n   model closes it — each on a wider track than the four short numerics\n   between them. At the Plugins page's 960px content width that is six columns\n   on one row. */\n.cards_768838850 {\n  display: grid;\n  grid-template-columns: 1.3fr repeat(4, 1fr) 1.3fr;\n  gap: 10px;\n}\n\n/* Below the width where six cards hold their own, the grid folds to four\n   tracks and the two long cards take two each: they keep their extra width\n   instead of degrading to the numerics' size, and each row still fills. */\n@media (max-width: 720px) {\n  .cards_768838850 {\n    grid-template-columns: repeat(4, 1fr);\n  }\n\n  .cards_768838850 > :first-child,\n  .cards_768838850 > :last-child {\n    grid-column: span 2;\n  }\n}\n\n@media (max-width: 430px) {\n  .cards_768838850 {\n    grid-template-columns: repeat(2, 1fr);\n  }\n}\n\n.card_768838850 {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 12px 14px;\n  border: 1px solid var(--dsw-alias-border-l1);\n  border-radius: 10px;\n  background: var(--dsw-alias-bg-layer-1);\n  min-width: 0;\n}\n\n.cardHead_768838850 {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.cardIcon_768838850 {\n  color: var(--dsw-alias-label-tertiary);\n  flex: 0 0 auto;\n}\n\n.cardLabel_768838850 {\n  color: var(--dsw-alias-label-secondary);\n  font-size: 13px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.cardValue_768838850 {\n  color: var(--dsw-alias-label-primary);\n  font-weight: 600;\n  line-height: 1.15;\n}\n\n.cardValueSm_768838850 {\n  font-size: 14px;\n}\n\n.cardValueWrap_768838850 {\n  word-break: break-word;\n}\n\n/* The \"most used model\" card value: the model name over the provider, the\n   same two-line anatomy as the per-model list rows (modelName/modelProvider\n   classes), instead of the raw \"provider/model\" ref. */\n.cardModelLines_768838850 {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n}\n\n/* A muted second line under a card value (the absolute cached-token volume\n   under the hit-rate percentage). */\n.cardSub_768838850 {\n  color: var(--dsw-alias-label-tertiary);\n  font-size: 11px;\n  line-height: 1.2;\n}\n\n/* ── sections / chart chrome ───────────────────────────────────────────── */\n\n.section_768838850 {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  min-width: 0;\n}\n\n.sectionHead_768838850 {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 10px;\n  flex-wrap: wrap;\n}\n\n.sectionTitle_768838850 {\n  margin: 0;\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--dsw-alias-label-primary);\n}\n\n.trendNote_768838850 {\n  font-size: 13px;\n  color: var(--dsw-alias-label-tertiary);\n}\n\n.chartWrap_768838850 {\n  position: relative;\n  min-width: 0;\n}\n\n/* ── heatmap ───────────────────────────────────────────────────────────── */\n\n.heatWrap_768838850 {\n  position: relative;\n  /* hidden, not auto: the SVG now fills the container exactly, and an\n     auto scrollbar would flash when a fixed tooltip passes over the wrap's\n     right edge. */\n  overflow: hidden;\n  min-width: 0;\n}\n\n.heatmap_768838850 {\n  display: block;\n  /* The 364 cells each keep their own two-layer drop-shadow chain (see\n     `.heatCell_768838850`) — 728 blurs that the compositor would otherwise re-run on\n     every scroll repaint of the tile, which is what made scrolling this panel\n     drop frames while idle was clean (#4). Promoting the SVG onto its own\n     compositing layer takes that rasterization off the scroll path and leaves\n     the painted result untouched, so the cell depth stays as designed. Note\n     that the promotion is what does the work: `contain: paint` on its own\n     measured no better than no mitigation at all. */\n  transform: translateZ(0);\n}\n\n.heatLegend_768838850 {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  font-size: 13px;\n  color: var(--dsw-alias-label-tertiary);\n}\n\n.heatCell_768838850 {\n  display: inline-block;\n  border-radius: 3px;\n  /* No width/height here: the SVG cells carry their size as geometry\n     attributes (x/y/width/height), and a CSS width/height would override\n     those on SVG2 rects — pinning every cell to a fixed px and widening the\n     visual gap. The legend swatches carry the same size inline, so both\n     always match the measured geom.size_768838850. */\n  /* Depth at this size, WITHOUT a per-cell backdrop-filter: the cells are SVG\n     geometry, where backdrop-filter is accepted by the CSSOM but changes\n     nothing on paint (measured on 364 live cells: the screenshot came out\n     byte-identical to no blur at all). What reads as a glass tile instead is\n     the translucent fill below — it lets the panel's own glass bed through —\n     carried by one hairline highlight over one soft under-shadow. */\n  filter:\n    drop-shadow(0 -0.5px 0 var(--dsw-heat-sheen))\n    drop-shadow(0 0.5px 0.8px var(--dsw-heat-shade));\n}\n\n/* The five heat levels use DeepSeek's brand blue (#4D6BFE) as a fixed ramp,\n   light and dark variants below — never the theme accent, which can read\n   near-black against the base surface in dark mode. level0 (no data) is a\n   neutral empty cell. The cells are SVG <rect>s, so the color rides `fill`\n   (background is a no-op on SVG geometry) — but the legend swatches are HTML,\n   so both declarations stay in step.\n   Each level is mixed a little toward transparent so the bed shows through;\n   the amount is deliberately modest, because the ramp is a DATA encoding and\n   washing it out would cost readability. */\n.heatLevel0_768838850 {\n  fill: color-mix(in srgb, var(--dsw-heat-0) 82%, transparent);\n  background: color-mix(in srgb, var(--dsw-heat-0) 82%, transparent);\n}\n\n.heatLevel1_768838850 {\n  fill: color-mix(in srgb, var(--dsw-heat-1) 82%, transparent);\n  background: color-mix(in srgb, var(--dsw-heat-1) 82%, transparent);\n}\n\n.heatLevel2_768838850 {\n  fill: color-mix(in srgb, var(--dsw-heat-2) 82%, transparent);\n  background: color-mix(in srgb, var(--dsw-heat-2) 82%, transparent);\n}\n\n.heatLevel3_768838850 {\n  fill: color-mix(in srgb, var(--dsw-heat-3) 82%, transparent);\n  background: color-mix(in srgb, var(--dsw-heat-3) 82%, transparent);\n}\n\n.heatLevel4_768838850 {\n  fill: color-mix(in srgb, var(--dsw-heat-4) 82%, transparent);\n  background: color-mix(in srgb, var(--dsw-heat-4) 82%, transparent);\n}\n\n.heatLevel5_768838850 {\n  fill: color-mix(in srgb, var(--dsw-heat-5) 82%, transparent);\n  background: color-mix(in srgb, var(--dsw-heat-5) 82%, transparent);\n}\n\n/* ── daily trend ───────────────────────────────────────────────────────── */\n\n.chart_768838850 {\n  display: block;\n}\n\n.grid_768838850 {\n  stroke: var(--dsw-alias-border-l1);\n  stroke-width: 1;\n}\n\n.axis_768838850 {\n  fill: var(--dsw-alias-label-tertiary);\n  font-size: 10px;\n}\n\n.axisRate_768838850 {\n  fill: var(--dsw-alias-label-tertiary);\n}\n\n.bar_768838850 {\n  transition: opacity 0.12s ease;\n  /* The hover scaleX must pivot on the bar's own centre: SVG geometry\n     transforms around the SVG origin unless transform-box anchors it to the\n     element's fill box. Without this the scaled bar slides sideways and\n     looks like it vanishes. */\n  transform-box: fill-box;\n  transform-origin: center;\n}\n\n.barDim_768838850 {\n  opacity: 0.35;\n}\n\n.barHit_768838850 {\n  fill: transparent;\n  pointer-events: all;\n}\n\n/* cache hit-rate trend curve: DeepSeek's brand blue (#4D6BFE, the same hue\n   family as the heatmap ramp) — a fixed brand ramp instead of the theme\n   accent, which can read near-black in some themes. */\n.trend_768838850 {\n  stroke: var(--dsw-trend-line);\n  stroke-width: 2;\n  opacity: 0.9;\n  pointer-events: none;\n}\n\n.trendDot_768838850 {\n  fill: var(--dsw-trend-line);\n  stroke: var(--dsw-alias-bg-layer-1);\n  stroke-width: 2;\n  pointer-events: none;\n}\n\n.legend_768838850 {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 10px;\n  font-size: 13px;\n  color: var(--dsw-alias-label-secondary);\n}\n\n.legendItem_768838850 {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  cursor: default;\n}\n\n.legendSwatch_768838850 {\n  display: inline-block;\n  width: 10px;\n  height: 10px;\n  border-radius: 2px;\n}\n\n.legendTrend_768838850 {\n  background: var(--dsw-trend-line);\n  width: 14px;\n  height: 3px;\n  border-radius: 2px;\n}\n\n/* ── per-model / per-provider chart + list ─────────────────────────────── */\n\n/* The ring is centred against the list beside it. The list's height is never\n   tied to the chart, so expanding a row cannot stretch anything. */\n.models_768838850 {\n  display: flex;\n  gap: 16px;\n  align-items: center;\n  flex-wrap: wrap;\n  min-width: 0;\n}\n\n/* The ring's own wrapper. Its diameter comes from the measured row width (see\n   Donut.tsx_768838850), so it must never flex. */\n.donutWrap_768838850 {\n  position: relative;\n  flex: 0 0 auto;\n}\n\n.donut_768838850 {\n  display: block;\n}\n\n.donutTrack_768838850 {\n  stroke: var(--dsw-alias-bg-mask-1);\n}\n\n.donutSeg_768838850 {\n  transition: stroke-width 0.12s ease, opacity 0.12s ease;\n}\n\n.donutDim_768838850 {\n  opacity: 0.35;\n}\n\n.donutCenter_768838850 {\n  fill: var(--dsw-alias-label-primary);\n  font-size: 18px;\n  font-weight: 600;\n}\n\n.donutLabel_768838850 {\n  fill: var(--dsw-alias-label-tertiary);\n  font-size: 11px;\n}\n\n/* Two ranking cards, side by side: MODELS left, PROVIDERS right. Both are\n   always on screen (no lens/tab switch), so they share one row grid and\n   stretch to a common height; a narrow pane stacks them instead. */\n.rankCards_768838850 {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: 12px;\n}\n\n@media (max-width: 720px) {\n  .rankCards_768838850 {\n    grid-template-columns: minmax(0, 1fr);\n  }\n}\n\n/* Each card is the bordered surface its rows live in; the title is a recessed\n   header strip, so the two rankings read as two equal panels. */\n.rankCard_768838850 {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n  border: 1px solid var(--dsw-alias-border-l1);\n  border-radius: 10px;\n  background: var(--dsw-alias-bg-layer-1);\n  overflow: hidden;\n}\n\n.rankCardTitle_768838850 {\n  padding: 8px 12px;\n  border-bottom: 1px solid var(--dsw-alias-border-l1);\n  background: color-mix(in srgb, var(--dsw-alias-bg-layer-2) 55%, transparent);\n  color: var(--dsw-alias-label-secondary);\n  font-size: 12px;\n  font-weight: 600;\n}\n\n.rankList_768838850 {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  flex: 1 1 auto;\n  min-width: 0;\n}\n\n/* Every row opens a hover tip (the cross-dimension detail), so it carries the\n   same hover affordance as the chart marks. */\n.modelRow_768838850:hover {\n  background: color-mix(in srgb, var(--dsw-alias-bg-layer-2) 60%, transparent);\n}\n\n/* Position column: the row's rank inside its section. The Other bucket holds\n   no single rank, so it renders an empty (but equally wide) cell. */\n.modelRank_768838850 {\n  flex: 0 0 auto;\n  min-width: 14px;\n  color: var(--dsw-alias-label-tertiary);\n  font-size: 12px;\n  font-variant-numeric: tabular-nums;\n  text-align: right;\n}\n\n.modelRow_768838850 {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  font-size: 13px;\n  border-bottom: 1px solid var(--dsw-alias-border-l1);\n}\n\n.modelRow_768838850:last-child {\n  border-bottom: none;\n}\n\n/* \"Other\" aggregate row: the entire row is clickable to expand/collapse the\n   detail list. The chevron button inside it stops propagation so\n   double-firing is avoided. */\n.modelRowExpandable_768838850 {\n  cursor: pointer;\n}\n\n/* \"Other\" row toggle (chevron) that expands the aggregated tail models. */\n.modelToggle_768838850 {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0;\n  margin-right: 4px;\n  border: none;\n  background: none;\n  color: var(--dsw-alias-label-tertiary);\n  cursor: pointer;\n  vertical-align: middle;\n}\n\n/* Expanded detail rows: indented, slightly recessed. */\n.modelRowSub_768838850 {\n  padding-left: 28px;\n  background: color-mix(in srgb, var(--dsw-alias-bg-layer-2) 55%, transparent);\n  font-size: 13px;\n}\n\n/* Second-level indent: a model row inside a provider that is itself folded\n   into the Other bucket. Wider than .modelRowSub_768838850 so the nesting stays\n   readable. Declared after it — same specificity, so this one wins. */\n.modelRowDeep_768838850 {\n  padding-left: 48px;\n}\n\n/* \"Other\" details expand with an accordion: the wrapper is a grid whose\n   single track animates 0fr → 1fr. */\n.modelOtherWrap_768838850 {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows 0.25s ease;\n}\n\n.modelOtherOpen_768838850 {\n  grid-template-rows: 1fr;\n}\n\n.modelOtherList_768838850 {\n  overflow: hidden;\n  min-height: 0;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/* Two-line row anatomy: [swatch] [name / provider] ……… [tokens / share].\n   The name block takes the free width; the values block hugs the right. */\n.modelId_768838850 {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  flex: 1 1 auto;\n  min-width: 0;\n}\n\n.modelValues_768838850 {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  gap: 1px;\n  flex: 0 0 auto;\n}\n\n.modelName_768838850 {\n  color: var(--dsw-alias-label-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  min-width: 0;\n}\n\n.modelProvider_768838850 {\n  color: var(--dsw-alias-label-tertiary);\n  font-size: 11px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.modelTokens_768838850 {\n  color: var(--dsw-alias-label-secondary);\n  font-variant-numeric: tabular-nums;\n}\n\n.modelPct_768838850 {\n  color: var(--dsw-alias-label-tertiary);\n  font-size: 11px;\n  font-variant-numeric: tabular-nums;\n}\n\n/* ── tooltips ──────────────────────────────────────────────────────────── */\n\n/* Tooltips render as fixed-position portals on document.body_768838850 (see ChartTip),\n   so they escape every ancestor's clipping and never overflow the settings\n   panel: ChartTip clamps each tip inside the panel bounds and flips it above\n   the hovered element when there is no room below. The plate follows the\n   active theme: the DSH overlay token is a light gray in light mode and a\n   dark gray under body[data-ds-dark-theme], so the tip reads correctly in\n   both instead of staying dark in light mode. */\n.tip_768838850 {\n  position: fixed;\n  /* The tip is portaled to document.body_768838850, so it competes with the settings\n     modal itself (z-index 1000) for the top layer: 100 would sit under the\n     modal and the tip would be invisible. 1100 matches the official\n     toast/portaled-menu layer, which is exactly the \"over a modal\" tier. */\n  z-index: 1100;\n  pointer-events: none;\n  padding: 8px 10px;\n  border-radius: 8px;\n  background: var(--dsw-alias-bg-overlay);\n  border: 1px solid var(--dsw-alias-border-l2);\n  color: var(--dsw-alias-label-primary);\n  font-size: 13px;\n  box-shadow: 0 2px 12px var(--dsw-alias-bg-mask-2);\n  white-space: nowrap;\n}\n\n.tipTitle_768838850 {\n  font-weight: 600;\n  margin-bottom: 4px;\n}\n\n/* A provider row's raw route id, kept out of the row label but reachable on\n   hover (the row shows the display name). */\n.tipSubtitle_768838850 {\n  margin: -2px 0 4px;\n  color: var(--dsw-alias-label-tertiary);\n  font-size: 12px;\n}\n\n/* Breakdown heading inside a row tip: names the cross-dimension list under it\n   (\"By provider\" under a model, \"By model\" under a provider). */\n.tipLabel_768838850 {\n  margin-bottom: 2px;\n  color: var(--dsw-alias-label-tertiary);\n  font-size: 12px;\n}\n\n/* The breakdown line pushes its volume to the right edge of the plate. */\n.tipName_768838850 {\n  flex: 1 1 auto;\n  min-width: 0;\n}\n\n.tipValue_768838850 {\n  margin-left: auto;\n  padding-left: 12px;\n  color: var(--dsw-alias-label-secondary);\n  font-variant-numeric: tabular-nums;\n}\n\n.tipRow_768838850 {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n\n/* Hover tooltip breakdown rows for the \"Other\" aggregate: indented, muted,\n   same gray swatch as the Other step. */\n.tipRowOther_768838850 {\n  padding-left: 8px;\n  color: var(--dsw-alias-label-secondary);\n}\n\n.tipBreakdown_768838850 {\n  border-top: 1px solid var(--dsw-alias-border-l1);\n  margin-top: 4px;\n  padding-top: 4px;\n}\n\n.foot_768838850 {\n  font-size: 13px;\n  color: var(--dsw-alias-label-tertiary);\n}\n\n/* ── chart palette ──────────────────────────────────────────────────────── */\n\n/* Light variant (the theme's default): model colours are the reasonix\n   token-total palette (rank order by token volume + gray Other) with a\n   white veil mixed in (color-mix 30% white) — the raw hues read dark and\n   heavy on the light card surface, and the veil lifts lightness and dulls\n   saturation the way a translucent white overlay would, keeping the hues\n   colourful instead of muddy. The heatmap ramp is DeepSeek's brand blue\n   (#4D6BFE) stepping from a pale tint to the full blue; the hit-rate curve\n   rides the same brand hue.\n   Ranks 6-10 extend the reasonix five to ten (this plugin's addition): each\n   is picked to keep the ten hues apart on both themes. */\n.panel_768838850 {\n  --dsw-heat-0: #ebedf0;\n  --dsw-heat-1: #dbe3ff;\n  --dsw-heat-2: #b7c5ff;\n  --dsw-heat-3: #8ea4ff;\n  --dsw-heat-4: #6884ff;\n  --dsw-heat-5: #4d6bfe;\n  /* Heatmap cell depth: a highlight above, a shade below. Light trays need\n     the stronger pair; the dark tray below lifts the shade instead. */\n  --dsw-heat-sheen: rgb(255 255 255 / 0.55);\n  --dsw-heat-shade: rgb(0 0 0 / 0.20);\n  --dsw-trend-line: #4d6bfe;\n  --dsw-chart-1: color-mix(in srgb, #0576ff 70%, white);\n  --dsw-chart-2: color-mix(in srgb, #2f6f37 70%, white);\n  --dsw-chart-3: color-mix(in srgb, #c46212 70%, white);\n  --dsw-chart-4: color-mix(in srgb, #975bf1 70%, white);\n  --dsw-chart-5: color-mix(in srgb, #d34591 70%, white);\n  --dsw-chart-6: color-mix(in srgb, #0d8a8a 70%, white);\n  --dsw-chart-7: color-mix(in srgb, #b3341f 70%, white);\n  --dsw-chart-8: color-mix(in srgb, #7a9018 70%, white);\n  --dsw-chart-9: color-mix(in srgb, #4b3fd0 70%, white);\n  --dsw-chart-10: color-mix(in srgb, #d4a017 70%, white);\n  --dsw-chart-other: color-mix(in srgb, #576270 70%, white);\n  /* Provider series: a separate five-hue set for the provider section, so a\n     provider never wears a model's colour. */\n  --dsw-provider-1: color-mix(in srgb, #1f7a8c 70%, white);\n  --dsw-provider-2: color-mix(in srgb, #6a8e3a 70%, white);\n  --dsw-provider-3: color-mix(in srgb, #a15c2f 70%, white);\n  --dsw-provider-4: color-mix(in srgb, #7b5ea7 70%, white);\n  --dsw-provider-5: color-mix(in srgb, #b03a5b 70%, white);\n  --dsw-provider-other: color-mix(in srgb, #576270 70%, white);\n}\n\n/* Dark variant: the same reasonix hues under a thicker white veil\n   (35% — dark surfaces need the extra lift), so segments read soft and\n   bright instead of sinking into the background. */\n@media (prefers-color-scheme: dark) {\n  .panel_768838850 {\n    --dsw-heat-0: #21262d;\n    --dsw-heat-1: #2f4bd0;\n    --dsw-heat-2: #4d6bfe;\n    --dsw-heat-3: #6e8bff;\n    --dsw-heat-4: #93aaff;\n    --dsw-heat-5: #c4d0ff;\n    /* Same depth pair, recalibrated: a dark tray swallows a light shade. */\n    --dsw-heat-sheen: rgb(255 255 255 / 0.30);\n    --dsw-heat-shade: rgb(0 0 0 / 0.50);\n    --dsw-trend-line: #7d95ff;\n    --dsw-chart-1: color-mix(in srgb, #0576ff 65%, white);\n    --dsw-chart-2: color-mix(in srgb, #2f6f37 65%, white);\n    --dsw-chart-3: color-mix(in srgb, #c46212 65%, white);\n    --dsw-chart-4: color-mix(in srgb, #975bf1 65%, white);\n    --dsw-chart-5: color-mix(in srgb, #d34591 65%, white);\n    --dsw-chart-6: color-mix(in srgb, #0d8a8a 65%, white);\n    --dsw-chart-7: color-mix(in srgb, #b3341f 65%, white);\n    --dsw-chart-8: color-mix(in srgb, #7a9018 65%, white);\n    --dsw-chart-9: color-mix(in srgb, #4b3fd0 65%, white);\n    --dsw-chart-10: color-mix(in srgb, #d4a017 65%, white);\n    --dsw-chart-other: color-mix(in srgb, #576270 65%, white);\n    --dsw-provider-1: color-mix(in srgb, #1f7a8c 65%, white);\n    --dsw-provider-2: color-mix(in srgb, #6a8e3a 65%, white);\n    --dsw-provider-3: color-mix(in srgb, #a15c2f 65%, white);\n    --dsw-provider-4: color-mix(in srgb, #7b5ea7 65%, white);\n    --dsw-provider-5: color-mix(in srgb, #b03a5b 65%, white);\n    --dsw-provider-other: color-mix(in srgb, #576270 65%, white);\n  }\n}\n";
+		const tagId$2 = "dsh-token-total/TokenTotalPanel.module.css";
+		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=\"" + tagId$2 + "\"]") === null) {
 			const tag = document.createElement("style");
 			tag.dataset.plugin = "dsh-token-total";
-			tag.dataset.pluginCss = tagId$1;
-			tag.textContent = css$1;
+			tag.dataset.pluginCss = tagId$2;
+			tag.textContent = css$2;
 			document.head.appendChild(tag);
 		}
 		var TokenTotalPanel_module_default = {
@@ -29481,9 +29481,12 @@ window.__ModuleLoader__.load({
 			"donutDim": "donutDim_768838850",
 			"donutCenter": "donutCenter_768838850",
 			"donutLabel": "donutLabel_768838850",
-			"modelList": "modelList_768838850",
-			"modelRank": "modelRank_768838850",
+			"rankCards": "rankCards_768838850",
+			"rankCard": "rankCard_768838850",
+			"rankCardTitle": "rankCardTitle_768838850",
+			"rankList": "rankList_768838850",
 			"modelRow": "modelRow_768838850",
+			"modelRank": "modelRank_768838850",
 			"modelRowExpandable": "modelRowExpandable_768838850",
 			"modelToggle": "modelToggle_768838850",
 			"modelRowSub": "modelRowSub_768838850",
@@ -29500,6 +29503,10 @@ window.__ModuleLoader__.load({
 			"body": "body_768838850",
 			"tip": "tip_768838850",
 			"tipTitle": "tipTitle_768838850",
+			"tipSubtitle": "tipSubtitle_768838850",
+			"tipLabel": "tipLabel_768838850",
+			"tipName": "tipName_768838850",
+			"tipValue": "tipValue_768838850",
 			"tipRow": "tipRow_768838850",
 			"tipRowOther": "tipRowOther_768838850",
 			"tipBreakdown": "tipBreakdown_768838850",
@@ -29736,8 +29743,8 @@ window.__ModuleLoader__.load({
 		const TOP_MODELS = 10;
 		const OTHER_MODEL = "\0other";
 		const OTHER_COLOR = "var(--dsw-chart-other)";
-		/** How many rows each bottom breakdown tab lists (requirement 下部: 展示前 5). */
-		const TOP_BREAKDOWN = 5;
+		/** How many rows each ranking card lists (扩展到 8 个排行). */
+		const TOP_BREAKDOWN = 8;
 		function TokenTotalPanel({ t }) {
 			const [range, setRange] = (0, react.useState)("today");
 			const [customFrom, setCustomFrom] = (0, react.useState)("");
@@ -29936,7 +29943,9 @@ window.__ModuleLoader__.load({
 							models: stats.models,
 							providers: stats.providers,
 							total: stats.tokens,
-							t
+							providerNames: stats.providerNames,
+							t,
+							panelRef
 						}),
 						stats.to && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: TokenTotalPanel_module_default.foot,
@@ -29958,7 +29967,7 @@ window.__ModuleLoader__.load({
 		*  (zero input/output but real cache hits) or a failed-call day (requests
 		*  but no tokens) both carry real usage and must not read as "no data". */
 		function isEmptyRange(stats) {
-			return stats.tokens === 0 && stats.cacheHit === 0 && stats.requests === 0 && stats.turns === 0;
+			return stats.tokens === 0 && stats.cacheHit === 0 && stats.requests === 0 && stats.failures === 0 && stats.turns === 0;
 		}
 		function StatCards({ stats, t }) {
 			const cards = [
@@ -29997,7 +30006,8 @@ window.__ModuleLoader__.load({
 				{
 					icon: import_lucide_react.MessagesSquare,
 					label: t("requests"),
-					value: String(stats.requests)
+					value: String(stats.requests),
+					sub: stats.failures > 0 ? `${t("requestsFailed")} ${stats.failures} · ${formatPercent(stats.failures / Math.max(stats.requests, 1) * 100)}` : void 0
 				}
 			];
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -30486,8 +30496,22 @@ window.__ModuleLoader__.load({
 				})]
 			});
 		}
-		function UsageBreakdown({ models, providers, total, t }) {
-			const [tab, setTab] = (0, react.useState)("model");
+		/** Provider hues run 1..5 then the gray tail (a provider beyond the palette is
+		*  rare: the card lists 8 rows, the palette names 5). */
+		function providerColor(index) {
+			return index < 5 ? `var(--dsw-provider-${index + 1})` : "var(--dsw-provider-other)";
+		}
+		/** Model hues run 1..10 then the gray Other step (mirrors colorForModel). */
+		function modelColor(index) {
+			return index < TOP_MODELS ? `var(--dsw-chart-${index + 1})` : OTHER_COLOR;
+		}
+		function UsageBreakdown({ models, providers, total, providerNames, t, panelRef }) {
+			const [tip, setTip] = (0, react.useState)(null);
+			const providerLabel = (0, react.useCallback)((provider) => {
+				const named = providerNames?.[provider];
+				return typeof named === "string" && named.trim() !== "" ? named : provider;
+			}, [providerNames]);
+			const shareText = (n) => total > 0 ? formatPercent(n / total * 100) : "—";
 			const modelRows = (0, react.useMemo)(() => {
 				const byName = /* @__PURE__ */ new Map();
 				for (const m of models) {
@@ -30496,73 +30520,184 @@ window.__ModuleLoader__.load({
 						tokens: 0,
 						cacheHit: 0,
 						cacheMiss: 0,
-						providers: /* @__PURE__ */ new Set()
+						split: /* @__PURE__ */ new Map(),
+						sources: /* @__PURE__ */ new Set()
 					};
 					acc.tokens += m.tokens;
 					acc.cacheHit += m.cacheHit;
 					acc.cacheMiss += m.cacheMiss;
-					for (const provider of m.providers ?? [m.provider]) acc.providers.add(provider);
+					for (const item of m.providerTokens ?? []) acc.split.set(item.provider, (acc.split.get(item.provider) ?? 0) + item.tokens);
+					for (const provider of m.providers ?? (m.provider === "" ? [] : [m.provider])) acc.sources.add(provider);
 					byName.set(name, acc);
 				}
-				return [...byName.entries()].sort((a, b) => b[1].tokens - a[1].tokens).slice(0, TOP_BREAKDOWN).map(([name, acc], i) => ({
-					key: name,
-					name,
-					detail: acc.providers.size > 1 ? [...acc.providers].join(", ") : void 0,
-					tokens: acc.tokens,
-					cacheHit: acc.cacheHit,
-					cacheMiss: acc.cacheMiss,
-					color: `var(--dsw-chart-${i + 1})`
-				}));
-			}, [models]);
+				return [...byName.entries()].sort((a, b) => b[1].tokens - a[1].tokens).slice(0, TOP_BREAKDOWN).map(([name, acc], i) => {
+					const split = [...acc.split.entries()].sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0])).map(([provider, tokens], j) => ({
+						key: provider,
+						name: providerLabel(provider),
+						tokens,
+						color: providerColor(j)
+					}));
+					const known = new Set(split.map((child) => child.key));
+					const named = [...acc.sources].filter((provider) => !known.has(provider)).sort().map((provider, j) => ({
+						key: provider,
+						name: providerLabel(provider),
+						tokens: null,
+						color: providerColor(split.length + j)
+					}));
+					return {
+						key: name,
+						name,
+						tokens: acc.tokens,
+						cacheHit: acc.cacheHit,
+						cacheMiss: acc.cacheMiss,
+						color: modelColor(i),
+						breakdownLabel: t("byProvider"),
+						breakdown: [...split, ...named]
+					};
+				});
+			}, [
+				models,
+				providerLabel,
+				t
+			]);
 			const providerRows = (0, react.useMemo)(() => {
-				return [...providers].filter((p) => p.tokens > 0).sort((a, b) => b.tokens - a.tokens).slice(0, TOP_BREAKDOWN).map((p, i) => ({
-					key: p.provider,
-					name: p.provider,
-					tokens: p.tokens,
-					cacheHit: p.cacheHit,
-					cacheMiss: p.cacheMiss,
-					color: `var(--dsw-provider-${i + 1})`
-				}));
-			}, [providers]);
-			const rows = tab === "model" ? modelRows : providerRows;
-			const share = (n) => total > 0 ? formatPercent(n / total * 100) : "—";
+				return [...providers].filter((p) => p.tokens > 0).sort((a, b) => b.tokens - a.tokens).slice(0, TOP_BREAKDOWN).map((p, i) => {
+					const label = providerLabel(p.provider);
+					return {
+						key: p.provider,
+						name: label,
+						subtitle: label === p.provider ? void 0 : p.provider,
+						tokens: p.tokens,
+						cacheHit: p.cacheHit,
+						cacheMiss: p.cacheMiss,
+						color: providerColor(i),
+						breakdownLabel: t("byModel"),
+						breakdown: [...p.modelTokens ?? []].sort((a, b) => b.tokens - a.tokens || a.model.localeCompare(b.model)).map((m, j) => ({
+							key: m.model,
+							name: m.model,
+							tokens: m.tokens,
+							color: modelColor(j)
+						}))
+					};
+				});
+			}, [
+				providers,
+				providerLabel,
+				t
+			]);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 				className: TokenTotalPanel_module_default.section,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: TokenTotalPanel_module_default.sectionHead,
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-						className: TokenTotalPanel_module_default.sectionTitle,
-						children: t("usageRanking")
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: TokenTotalPanel_module_default.group,
-						role: "tablist",
-						"aria-label": t("usageRanking"),
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
-							size: "sm",
-							variant: "ghost",
-							role: "tab",
-							"aria-selected": tab === "model",
-							className: clsx(TokenTotalPanel_module_default.segItem, tab === "model" && TokenTotalPanel_module_default.segActive),
-							onClick: () => setTab("model"),
-							children: t("byModel")
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
-							size: "sm",
-							variant: "ghost",
-							role: "tab",
-							"aria-selected": tab === "provider",
-							className: clsx(TokenTotalPanel_module_default.segItem, tab === "provider" && TokenTotalPanel_module_default.segActive),
-							onClick: () => setTab("provider"),
-							children: t("byProvider")
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: TokenTotalPanel_module_default.sectionHead,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+							className: TokenTotalPanel_module_default.sectionTitle,
+							children: t("usageRanking")
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: TokenTotalPanel_module_default.rankCards,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RankCard, {
+							title: t("byModel"),
+							rows: modelRows,
+							total,
+							t,
+							onTip: setTip
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RankCard, {
+							title: t("byProvider"),
+							rows: providerRows,
+							total,
+							t,
+							onTip: setTip
 						})]
-					})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChartTip, {
+						anchor: tip?.anchor ?? null,
+						panelRef,
+						children: tip && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: TokenTotalPanel_module_default.tipTitle,
+								children: tip.title
+							}),
+							tip.subtitle !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: TokenTotalPanel_module_default.tipSubtitle,
+								children: tip.subtitle
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: TokenTotalPanel_module_default.tipRow,
+								children: [
+									t("total"),
+									" ",
+									formatTokens(tip.tokens),
+									" · ",
+									shareText(tip.tokens)
+								]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: TokenTotalPanel_module_default.tipRow,
+								children: [
+									t("cacheRateColumn"),
+									" ",
+									cacheRateText(tip.cacheHit, tip.cacheMiss)
+								]
+							}),
+							tip.breakdown.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: TokenTotalPanel_module_default.tipBreakdown,
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: TokenTotalPanel_module_default.tipLabel,
+									children: tip.breakdownLabel
+								}), tip.breakdown.map((child) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: TokenTotalPanel_module_default.tipRow,
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", {
+											className: TokenTotalPanel_module_default.legendSwatch,
+											style: { background: child.color }
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: TokenTotalPanel_module_default.tipName,
+											children: child.name
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											className: TokenTotalPanel_module_default.tipValue,
+											children: child.tokens === null ? "" : `${formatCompact(child.tokens)} · ${shareText(child.tokens)}`
+										})
+									]
+								}, child.key))]
+							})
+						] })
+					})
+				]
+			});
+		}
+		/** One ranking card: a titled list whose rows explain themselves on hover.
+		*  The tip is owned by UsageBreakdown (one open tip at a time), so a row only
+		*  reports which row it is, never where to draw. */
+		function RankCard({ title, rows, total, t, onTip }) {
+			const share = (n) => total > 0 ? formatPercent(n / total * 100) : "—";
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: TokenTotalPanel_module_default.rankCard,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: TokenTotalPanel_module_default.rankCardTitle,
+					children: title
 				}), rows.length === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: TokenTotalPanel_module_default.empty,
 					children: t("empty")
 				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
-					className: TokenTotalPanel_module_default.modelList,
+					className: TokenTotalPanel_module_default.rankList,
 					"data-dsh-usage-glass": "list",
 					children: rows.map((r, rank) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
 						className: TokenTotalPanel_module_default.modelRow,
+						onMouseEnter: (e) => onTip({
+							anchor: e.currentTarget,
+							title: r.name,
+							subtitle: r.subtitle,
+							tokens: r.tokens,
+							cacheHit: r.cacheHit,
+							cacheMiss: r.cacheMiss,
+							breakdownLabel: r.breakdownLabel,
+							breakdown: r.breakdown
+						}),
+						onMouseLeave: () => onTip(null),
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 								className: TokenTotalPanel_module_default.modelRank,
@@ -30580,7 +30715,7 @@ window.__ModuleLoader__.load({
 									children: r.name
 								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 									className: TokenTotalPanel_module_default.modelProvider,
-									children: r.detail ?? share(r.tokens)
+									children: share(r.tokens)
 								})]
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -31064,94 +31199,85 @@ window.__ModuleLoader__.load({
 			return Math.min(MAX_MEASURED_SCALE, Math.max(MIN_MEASURED_SCALE, actual / prior));
 		}
 		//#endregion
-		//#region src/client/use-session-usage.ts
-		/**
-		* The composer row's window onto the WHOLE session tree.
-		*
-		* dsh's native `tokenUsage` projection is the main agent of the current
-		* session only: a session that delegates to subagents (each subagent is its
-		* own persisted session, linked by `header.parentSession`) shows a fraction of
-		* what it actually spent, and nothing in the shipped UI shows the rest. The
-		* host half answers that question over `/token-total/api/session`, replaying
-		* the root log plus every descendant's log; this hook is the browser end.
-		*
-		* Refresh policy: the request is cheap on the host (its tree cache is
-		* invalidated by live events), and the native usage figure moves exactly when
-		* a call settles — so a change in the native signature is the trigger to
-		* re-ask. There is no timer: an idle session costs nothing.
-		*
-		* Failure policy: the pill must never break the composer, so a failed request
-		* keeps the last good answer and simply does not retry until the next trigger.
-		*/
-		function add(into, from) {
+		//#region src/client/session-usage-core.ts
+		const ZERO = {
+			uncachedInputTokens: 0,
+			outputTokens: 0,
+			cacheReadTokens: 0,
+			cacheWriteTokens: 0
+		};
+		/** Add the root and descendants once; tree.total is already that sum. */
+		function combinedTotals(tree, self = tree.self) {
 			return {
-				uncachedInputTokens: into.uncachedInputTokens + from.uncachedInputTokens,
-				outputTokens: into.outputTokens + from.outputTokens,
-				cacheReadTokens: into.cacheReadTokens + from.cacheReadTokens,
-				cacheWriteTokens: into.cacheWriteTokens + from.cacheWriteTokens
+				uncachedInputTokens: self.uncachedInputTokens + tree.subagents.uncachedInputTokens,
+				outputTokens: self.outputTokens + tree.subagents.outputTokens,
+				cacheReadTokens: self.cacheReadTokens + tree.subagents.cacheReadTokens,
+				cacheWriteTokens: self.cacheWriteTokens + tree.subagents.cacheWriteTokens
 			};
 		}
-		/** Fold a tree into the flat shape the pill's dialog renders. */
-		function combinedTotals(tree) {
-			return add(tree.self, tree.subagents);
+		/** One consistent split for the pill, cache hit rate and every dialog row. */
+		function sessionUsageForDisplay(native, tree) {
+			const self = tree?.self ?? native ?? { ...ZERO };
+			return {
+				self,
+				subagents: tree?.subagents ?? { ...ZERO },
+				total: tree === null ? self : combinedTotals(tree, self),
+				subagentSessions: tree?.subagentSessions ?? 0
+			};
 		}
-		/** Whether a totals record carries any billable token at all. */
 		function hasAnyTokens(totals) {
-			if (totals === void 0) return false;
-			return totals.uncachedInputTokens + totals.outputTokens + totals.cacheReadTokens + totals.cacheWriteTokens > 0;
+			return totals !== void 0 && billedTotal(totals) > 0;
 		}
-		/** Total billed tokens of a flat totals record (prompt side + completion). */
 		function billedTotal(totals) {
 			return totals.uncachedInputTokens + totals.cacheReadTokens + totals.cacheWriteTokens + totals.outputTokens;
 		}
-		/** How often a session that HAS subagents re-asks. The native figure only moves
-		*  when the main agent's own call settles, so without this a subagent still
-		*  working (or one that just finished) would not update the pill. A session
-		*  with no subagents never polls: nothing exists to miss. */
-		const SUBAGENT_POLL_MS = 4e3;
-		/**
-		* Subscribe to one session's whole-tree usage.
-		*
-		* `signature` is any string that changes when the native usage figure moves;
-		* passing it in keeps this hook out of the projection seat and lets the caller
-		* decide what "a new call settled" means for its own pill. A session that turns
-		* out to have subagents additionally re-asks on a slow beat, because subagent
-		* spend lands in a different session log and no native figure moves for it.
-		*/
+		//#endregion
+		//#region src/client/use-session-usage.ts
+		/** The composer row's window onto the whole session tree. The native usage
+		* projection only moves for main-agent calls, so poll the displayed session
+		* even before its first child appears. Requests are serialized and late answers
+		* from a previous session are discarded. Failures keep the last good reading. */
+		const SESSION_POLL_MS = 4e3;
 		function useSessionUsage(sessionId, signature) {
-			const [tree, setTree] = (0, react.useState)(null);
-			const latest = (0, react.useRef)("");
-			const [beat, setBeat] = (0, react.useState)(0);
-			const hasSubagents = (tree?.subagentSessions ?? 0) > 0;
+			const [reading, setReading] = (0, react.useState)(null);
+			const refresh = (0, react.useRef)(null);
 			(0, react.useEffect)(() => {
-				if (!hasSubagents) return;
-				const handle = setInterval(() => {
-					setBeat(Date.now());
-				}, SUBAGENT_POLL_MS);
+				if (typeof sessionId !== "string" || sessionId === "") return;
+				let active = true;
+				let pending = false;
+				let again = false;
+				const request = () => {
+					if (!active) return;
+					if (pending) {
+						again = true;
+						return;
+					}
+					pending = true;
+					fetchSessionUsage(sessionId).then((tree) => {
+						if (active) setReading({
+							sessionId,
+							tree
+						});
+					}).catch(() => {}).finally(() => {
+						pending = false;
+						if (active && again) {
+							again = false;
+							request();
+						}
+					});
+				};
+				refresh.current = request;
+				const handle = setInterval(request, SESSION_POLL_MS);
 				return () => {
+					active = false;
+					refresh.current = null;
 					clearInterval(handle);
 				};
-			}, [hasSubagents]);
+			}, [sessionId]);
 			(0, react.useEffect)(() => {
-				if (typeof sessionId !== "string" || sessionId === "") return;
-				const key = `${sessionId}|${signature}|${beat}`;
-				if (latest.current === key) return;
-				latest.current = key;
-				let cancelled = false;
-				fetchSessionUsage(sessionId).then((value) => {
-					if (cancelled) return;
-					setTree(value);
-				}).catch(() => {
-					latest.current = "";
-				});
-				return () => {
-					cancelled = true;
-				};
-			}, [
-				sessionId,
-				signature,
-				beat
-			]);
+				refresh.current?.();
+			}, [sessionId, signature]);
+			const tree = reading !== null && reading.sessionId === sessionId ? reading.tree : null;
 			return {
 				tree,
 				totals: tree === null ? null : combinedTotals(tree)
@@ -31159,13 +31285,13 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region \0token-total-css:/home/runner/work/dsh-token-total/dsh-token-total/src/client/StatsLineEnhanced.module.css?inline
-		const css = "/* Session stats pills under the composer (shadow of the official StatsPills):\n   a gauge pill (counts + output speed, click opens the time dialog) and a\n   database pill (total tokens + cache hit, click opens the usage dialog).\n   Replicated from the official StatsPills.module_348665330.css_348665330 + stat-dialog.module_348665330.css_348665330\n   (13/20 tertiary tier, hover-pill affordance, shared dialog skin).\n\n   Host contract: the row serves two containers at once, and picks between them\n   at attach time — the component marks which one it landed in (see\n   StatsLineEnhanced's `markDockContainer`):\n   - through 0.1.6-alpha.1 the dock slot renders straight into InputBar's own\n     column, and this row owns the content-width clamp, its side gutters and\n     its 4px top pad — the official StatsPills.module_348665330.css_348665330 of that line;\n   - 0.1.6-alpha.2 renders it inside InputBar's flex `.dock_348665330` beside the resident\n     ContextMeter, which took all three jobs over, so the row only has to\n     shrink inside it (the official stylesheet's current form).\n   Both forms are kept side by side because one published build has to render\n   correctly on either host line. */\n\n.root_348665330 {\n  display: flex;\n  justify-content: center;\n  gap: 12px;\n  box-sizing: border-box;\n  /* <= 0.1.6-alpha.1: this row is the composer column's content-width box. */\n  width: 100%;\n  max-width: var(--dsh-chat-content-width);\n  margin: 0 auto;\n  padding: 4px calc(var(--dsh-composer-side-clearance) + 16px) 0px;\n  font-size: var(--dsh-content-font-size-secondary, 13px);\n  line-height: calc(20px + var(--dsh-content-font-delta-secondary, 0px));\n}\n\n/* 0.1.6-alpha.2+: InputBar's `.dock_348665330` owns the centring, the 12px gap, the top\n   pad and the side clearance. */\n.root_348665330[data-dock-row] {\n  width: auto;\n  min-width: 0;\n  max-width: 100%;\n  margin: 0;\n  padding: 0;\n}\n\n/* Dialog anchor: shrink-wraps its pill so the panel clamp measures the pill. */\n.anchor_348665330 {\n  display: inline-flex;\n  min-width: 0;\n}\n\n/* Split-mode anchor (DSH >= 0.2.1-alpha.1). The host split the single `stats`\n   dock entry into one entry per pill and let its own `.dock_348665330` flex row own the\n   layout, so the anchor IS the entry root and carries the text tier `.root_348665330`\n   used to set — the official StatsPills.module_348665330.css_348665330 moved exactly this pair of\n   declarations from `.root_348665330` onto `.anchor_348665330`. The tier stays off the plain\n   `.anchor_348665330` because the pre-split row must keep its own `.root_348665330` tier. */\n.dockAnchor_348665330 {\n  font-size: calc(var(--dsh-content-font-size-secondary, 13px) - 1px);\n  line-height: calc(20px + var(--dsh-content-font-delta-secondary, 0px));\n}\n\n.pill_348665330 {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  box-sizing: border-box;\n  max-width: 100%;\n  padding: 1px 8px;\n  border: none;\n  border-radius: 24px;\n  background: transparent;\n  color: var(--dsw-alias-label-tertiary);\n  font: inherit;\n  font-variant-numeric: tabular-nums;\n  line-height: inherit;\n  white-space: nowrap;\n}\n\n.pill_348665330 svg {\n  width: 14px;\n  height: 14px;\n  flex: none;\n}\n\n/* Only the button form (a pill with dialog rows to open) invites interaction;\n   the static span form keeps the resting tertiary reading. */\nbutton.pill_348665330 {\n  cursor: pointer;\n}\n\nbutton.pill_348665330:hover,\nbutton.pill_348665330[aria-expanded='true'] {\n  background: var(--dsw-alias-interactive-bg-hover);\n  color: var(--dsw-alias-label-secondary);\n}\n\n.label_348665330 {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sep_348665330 {\n  color: var(--dsw-alias-separator-primary);\n  margin: 0 6px;\n}\n\n/* Reserved slot for the speed figure: the official pill's figure only changes\n   when a step settles, but the live reading refreshes on every beat. A width\n   that tracked the digits would reflow the centred row on each of them and drag\n   the counts pill beside it along; 10ch covers \"1200 tok/s\", the widest shape\n   formatTokensPerSecond can produce. */\n.speed_348665330 {\n  display: inline-block;\n  min-width: 10ch;\n}\n\n/* Marks a usage figure that now includes subagent spend. Deliberately quiet:\n   it rides inside the official pill's label and must not read as a badge or\n   compete with the token count beside it. */\n.subagentMark_348665330 {\n  color: var(--dsw-alias-label-tertiary);\n  font-variant-numeric: tabular-nums;\n}\n\n/* Portal dialog surface: fixed in the viewport, left/top supplied inline from\n   the anchored-position clamp (12px viewport margin, layers above overlays).\n   Material = the official stat-dialog PAIRING, which dsh 0.1.7's menu\n   redesign made mandatory: `--dsw-specific-menu` is translucent there\n   (rgba 58%/45%), so the blur token must ride along — the 0.1.5-era recipe\n   this file copied was a single opaque line, and a fill-only copy reads as\n   bare transparency over the page (issue #6). */\n.dialogPanel_348665330 {\n  position: fixed;\n  z-index: 1100;\n  box-sizing: border-box;\n  width: max-content;\n  min-width: min(300px, calc(100vw - 24px));\n  max-width: min(440px, calc(100vw - 24px));\n  padding: 16px;\n  border: 0;\n  border-radius: 12px;\n  background: var(--dsw-specific-menu);\n  backdrop-filter: var(--dsw-menu-backdrop-filter);\n  --dsw-elevation-stroke-color: var(--dsw-alias-border-l1);\n  box-shadow: var(--dsw-elevation-prominent);\n  font-size: 12px;\n  line-height: 18px;\n  color: var(--dsw-alias-label-secondary);\n  cursor: default;\n}\n\n/* Dialog heading row: the section name left, the headline value right. */\n.dialogTitle_348665330 {\n  display: flex;\n  justify-content: space-between;\n  gap: 16px;\n  margin-bottom: 8px;\n  color: var(--dsw-alias-label-primary);\n  font-weight: 500;\n}\n\n/* Rule under the heading, above its rows. */\n.dialogTitleRule_348665330 {\n  margin-bottom: 10px;\n  border-top: 0.5px solid var(--dsw-alias-border-l2);\n}\n\n.dialogTitleValue_348665330 {\n  font-variant-numeric: tabular-nums;\n}\n\n/* Heading glyph seated left of the section name. */\n.dialogTitleLabel_348665330 {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  min-width: 0;\n}\n\n.dialogTitleLabel_348665330 svg {\n  width: 14px;\n  height: 14px;\n  flex: none;\n}\n\n.dialogDetails_348665330 {\n  display: grid;\n  grid-template-columns: minmax(76px, auto) minmax(0, 1fr);\n  gap: 6px 16px;\n  margin: 0;\n  color: var(--dsw-alias-label-tertiary);\n}\n\n.dialogDetails_348665330 dt,\n.dialogDetails_348665330 dd {\n  min-width: 0;\n  margin: 0;\n}\n\n.dialogDetails_348665330 dd {\n  color: var(--dsw-alias-label-secondary);\n  font-variant-numeric: tabular-nums;\n  text-align: right;\n}\n";
-		const tagId = "dsh-token-total/StatsLineEnhanced.module.css";
-		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=\"" + tagId + "\"]") === null) {
+		const css$1 = "/* Session stats pills under the composer (shadow of the official StatsPills):\n   a gauge pill (counts + output speed, click opens the time dialog) and a\n   database pill (total tokens + cache hit, click opens the usage dialog).\n   Replicated from the official StatsPills.module_348665330.css_348665330 + stat-dialog.module_348665330.css_348665330\n   (13/20 tertiary tier, hover-pill affordance, shared dialog skin).\n\n   Host contract: the row serves two containers at once, and picks between them\n   at attach time — the component marks which one it landed in (see\n   StatsLineEnhanced's `markDockContainer`):\n   - through 0.1.6-alpha.1 the dock slot renders straight into InputBar's own\n     column, and this row owns the content-width clamp, its side gutters and\n     its 4px top pad — the official StatsPills.module_348665330.css_348665330 of that line;\n   - 0.1.6-alpha.2 renders it inside InputBar's flex `.dock_348665330` beside the resident\n     ContextMeter, which took all three jobs over, so the row only has to\n     shrink inside it (the official stylesheet's current form).\n   Both forms are kept side by side because one published build has to render\n   correctly on either host line. */\n\n.root_348665330 {\n  display: flex;\n  justify-content: center;\n  gap: 12px;\n  box-sizing: border-box;\n  /* <= 0.1.6-alpha.1: this row is the composer column's content-width box. */\n  width: 100%;\n  max-width: var(--dsh-chat-content-width);\n  margin: 0 auto;\n  padding: 4px calc(var(--dsh-composer-side-clearance) + 16px) 0px;\n  font-size: var(--dsh-content-font-size-secondary, 13px);\n  line-height: calc(20px + var(--dsh-content-font-delta-secondary, 0px));\n}\n\n/* 0.1.6-alpha.2+: InputBar's `.dock_348665330` owns the centring, the 12px gap, the top\n   pad and the side clearance. */\n.root_348665330[data-dock-row] {\n  width: auto;\n  min-width: 0;\n  max-width: 100%;\n  margin: 0;\n  padding: 0;\n}\n\n/* Dialog anchor: shrink-wraps its pill so the panel clamp measures the pill. */\n.anchor_348665330 {\n  display: inline-flex;\n  min-width: 0;\n}\n\n/* Split-mode anchor (DSH >= 0.2.1-alpha.1). The host split the single `stats`\n   dock entry into one entry per pill and let its own `.dock_348665330` flex row own the\n   layout, so the anchor IS the entry root and carries the text tier `.root_348665330`\n   used to set — the official StatsPills.module_348665330.css_348665330 moved exactly this pair of\n   declarations from `.root_348665330` onto `.anchor_348665330`. The tier stays off the plain\n   `.anchor_348665330` because the pre-split row must keep its own `.root_348665330` tier. */\n.dockAnchor_348665330 {\n  font-size: calc(var(--dsh-content-font-size-secondary, 13px) - 1px);\n  line-height: calc(20px + var(--dsh-content-font-delta-secondary, 0px));\n}\n\n.pill_348665330 {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  box-sizing: border-box;\n  max-width: 100%;\n  padding: 1px 8px;\n  border: none;\n  border-radius: 24px;\n  background: transparent;\n  color: var(--dsw-alias-label-tertiary);\n  font: inherit;\n  font-variant-numeric: tabular-nums;\n  line-height: inherit;\n  white-space: nowrap;\n}\n\n.pill_348665330 svg {\n  width: 14px;\n  height: 14px;\n  flex: none;\n}\n\n/* Only the button form (a pill with dialog rows to open) invites interaction;\n   the static span form keeps the resting tertiary reading. */\nbutton.pill_348665330 {\n  cursor: pointer;\n}\n\nbutton.pill_348665330:hover,\nbutton.pill_348665330[aria-expanded='true'] {\n  background: var(--dsw-alias-interactive-bg-hover);\n  color: var(--dsw-alias-label-secondary);\n}\n\n.label_348665330 {\n  min-width: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.sep_348665330 {\n  color: var(--dsw-alias-separator-primary);\n  margin: 0 6px;\n}\n\n/* Reserved slot for the speed figure: the official pill's figure only changes\n   when a step settles, but the live reading refreshes on every beat. A width\n   that tracked the digits would reflow the centred row on each of them and drag\n   the counts pill beside it along; 10ch covers \"1200 tok/s\", the widest shape\n   formatTokensPerSecond can produce. */\n.speed_348665330 {\n  display: inline-block;\n  min-width: 10ch;\n}\n\n/* Marks a usage figure that now includes subagent spend. Deliberately quiet:\n   it rides inside the official pill's label and must not read as a badge or\n   compete with the token count beside it. */\n.subagentMark_348665330 {\n  color: var(--dsw-alias-label-tertiary);\n  font-variant-numeric: tabular-nums;\n}\n\n/* Portal dialog surface: fixed in the viewport, left/top supplied inline from\n   the anchored-position clamp (12px viewport margin, layers above overlays).\n   Material = the official stat-dialog PAIRING, which dsh 0.1.7's menu\n   redesign made mandatory: `--dsw-specific-menu` is translucent there\n   (rgba 58%/45%), so the blur token must ride along — the 0.1.5-era recipe\n   this file copied was a single opaque line, and a fill-only copy reads as\n   bare transparency over the page (issue #6). */\n.dialogPanel_348665330 {\n  position: fixed;\n  z-index: 1100;\n  box-sizing: border-box;\n  width: max-content;\n  min-width: min(300px, calc(100vw - 24px));\n  max-width: min(440px, calc(100vw - 24px));\n  padding: 16px;\n  border: 0;\n  border-radius: 12px;\n  background: var(--dsw-specific-menu);\n  backdrop-filter: var(--dsw-menu-backdrop-filter);\n  --dsw-elevation-stroke-color: var(--dsw-alias-border-l1);\n  box-shadow: var(--dsw-elevation-prominent);\n  font-size: 12px;\n  line-height: 18px;\n  color: var(--dsw-alias-label-secondary);\n  cursor: default;\n}\n\n/* Dialog heading row: the section name left, the headline value right. */\n.dialogTitle_348665330 {\n  display: flex;\n  justify-content: space-between;\n  gap: 16px;\n  margin-bottom: 8px;\n  color: var(--dsw-alias-label-primary);\n  font-weight: 500;\n}\n\n/* Rule under the heading, above its rows. */\n.dialogTitleRule_348665330 {\n  margin-bottom: 10px;\n  border-top: 0.5px solid var(--dsw-alias-border-l2);\n}\n\n.dialogTitleValue_348665330 {\n  font-variant-numeric: tabular-nums;\n}\n\n/* Heading glyph seated left of the section name. */\n.dialogTitleLabel_348665330 {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  min-width: 0;\n}\n\n.dialogTitleLabel_348665330 svg {\n  width: 14px;\n  height: 14px;\n  flex: none;\n}\n\n.dialogDetails_348665330 {\n  display: grid;\n  grid-template-columns: minmax(76px, auto) minmax(0, 1fr);\n  gap: 6px 16px;\n  margin: 0;\n  color: var(--dsw-alias-label-tertiary);\n}\n\n.dialogDetails_348665330 dt,\n.dialogDetails_348665330 dd {\n  min-width: 0;\n  margin: 0;\n}\n\n.dialogDetails_348665330 dd {\n  color: var(--dsw-alias-label-secondary);\n  font-variant-numeric: tabular-nums;\n  text-align: right;\n}\n";
+		const tagId$1 = "dsh-token-total/StatsLineEnhanced.module.css";
+		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=\"" + tagId$1 + "\"]") === null) {
 			const tag = document.createElement("style");
 			tag.dataset.plugin = "dsh-token-total";
-			tag.dataset.pluginCss = tagId;
-			tag.textContent = css;
+			tag.dataset.pluginCss = tagId$1;
+			tag.textContent = css$1;
 			document.head.appendChild(tag);
 		}
 		var StatsLineEnhanced_module_default = {
@@ -31401,6 +31527,7 @@ window.__ModuleLoader__.load({
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 				ref: rootRef,
 				className: anchorClass(dock),
+				"data-dsh-token-total-stat": true,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 					type: "button",
 					className: StatsLineEnhanced_module_default.pill,
@@ -31446,16 +31573,10 @@ window.__ModuleLoader__.load({
 		}
 		function UsagePill({ usage, tree, t, dialog, dock }) {
 			const { open, setOpen, rootRef, panelRef, pos } = useStatDialog(dialog);
-			const nativeTotals = {
-				uncachedInputTokens: usage.uncachedInputTokens,
-				outputTokens: usage.outputTokens,
-				cacheReadTokens: usage.cacheReadTokens,
-				cacheWriteTokens: usage.cacheWriteTokens
-			};
-			const treeTotals = tree?.totals ?? null;
-			const subagentTotals = tree?.tree?.subagents;
-			const showSubagents = subagentTotals !== void 0 && hasAnyTokens(subagentTotals);
-			const billed = showSubagents && treeTotals !== null ? treeTotals : nativeTotals;
+			const display = sessionUsageForDisplay(usage, tree?.tree ?? null);
+			const subagentTotals = display.subagents;
+			const showSubagents = display.subagentSessions > 0;
+			const billed = display.total;
 			const total = billedTotal(billed);
 			const totalText = t("message.turnUsage.count", { count: formatTokensCompact(total) });
 			const cacheHit = cacheHitPercentPrecise(billed);
@@ -31464,6 +31585,7 @@ window.__ModuleLoader__.load({
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 				ref: rootRef,
 				className: anchorClass(dock),
+				"data-dsh-token-total-stat": true,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 					type: "button",
 					className: StatsLineEnhanced_module_default.pill,
@@ -31531,9 +31653,9 @@ window.__ModuleLoader__.load({
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", { children: exactCount(tokenBreakdown(billed).cacheMiss) }),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", { children: t("message.turnUsage.output") }),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", { children: exactCount(billed.outputTokens) }),
-								showSubagents && treeTotals !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+								showSubagents && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", { children: t("stats.dialog.main") }),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", { children: exactCount(billedTotal(nativeTotals)) }),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", { children: exactCount(billedTotal(display.self)) }),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", { children: t("stats.dialog.subagents") }),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("dd", { children: [
 										exactCount(billedTotal(subagentTotals)),
@@ -31541,7 +31663,7 @@ window.__ModuleLoader__.load({
 										t("stats.dialog.subagentCount", { count: tree?.tree?.subagentSessions ?? 0 })
 									] }),
 									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", { children: t("stats.dialog.treeTotal") }),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", { children: exactCount(billedTotal(treeTotals)) })
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", { children: exactCount(billedTotal(billed)) })
 								] })
 							]
 						})
@@ -31563,7 +31685,7 @@ window.__ModuleLoader__.load({
 			const stats = (0, react.useMemo)(() => projected ?? deriveStats(settledNodes ?? []), [projected, settledNodes]);
 			const tokenScale = (0, react.useMemo)(() => measuredTokenScale(settledNodes ?? []) ?? 1, [settledNodes]);
 			const tree = useSessionUsage(sessionId, usageSignature(usage, stats.steps));
-			const hasTokens = usage !== void 0 && (billedInputTokens(usage) > 0 || usage.outputTokens > 0);
+			const hasTokens = hasAnyTokens(sessionUsageForDisplay(usage, tree.tree).total);
 			if (stats.steps === 0 && !hasTokens) return null;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				ref: markDockContainer,
@@ -31629,7 +31751,7 @@ window.__ModuleLoader__.load({
 		const StatsUsageEntry = (0, react.memo)(function StatsUsageEntry({ useProjection, t, sessionId }) {
 			const usage = useProjection("tokenUsage");
 			const tree = useSessionUsage(sessionId, usageSignature(usage, usage === void 0 ? 0 : 1));
-			if (!(usage !== void 0 && (billedInputTokens(usage) > 0 || usage.outputTokens > 0))) return null;
+			if (!hasAnyTokens(sessionUsageForDisplay(usage, tree.tree).total)) return null;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsagePill, {
 				usage,
 				tree,
@@ -31638,6 +31760,269 @@ window.__ModuleLoader__.load({
 			});
 		});
 		//#endregion
+		//#region src/client/context-meter-core.ts
+		/** Mirrors the host meter's occupancy calculation exactly. */
+		function contextOccupancy(pressure) {
+			const usedTokens = pressure?.projectedTokens ?? pressure?.pressureTokens;
+			if (usedTokens === void 0 || pressure?.contextWindow === void 0) return null;
+			return {
+				percent: Math.min(100, Math.round(usedTokens / pressure.contextWindow * 100)),
+				usedTokens,
+				contextWindow: pressure.contextWindow
+			};
+		}
+		function contextBreakdownTotal(breakdown) {
+			return breakdown === void 0 ? 0 : breakdown.systemTokens + breakdown.toolsTokens + breakdown.messageTokens;
+		}
+		function contextBreakdownSegments(percent, breakdown) {
+			const total = contextBreakdownTotal(breakdown);
+			if (breakdown === void 0 || total === 0) return [{
+				key: "total",
+				width: percent
+			}];
+			return [
+				{
+					key: "systemTokens",
+					width: percent * breakdown.systemTokens / total
+				},
+				{
+					key: "toolsTokens",
+					width: percent * breakdown.toolsTokens / total
+				},
+				{
+					key: "messageTokens",
+					width: percent * breakdown.messageTokens / total
+				}
+			].filter((segment) => segment.width > 0);
+		}
+		function formatContextTokens(value, units) {
+			const scaled = (candidate) => candidate >= 100 ? String(Math.round(candidate)) : String(Math.round(candidate * 10) / 10);
+			if (value < 1e3) return String(value);
+			if (value < 1e6) return units.thousand.replace("{value}", scaled(value / 1e3));
+			return units.million.replace("{value}", scaled(value / 1e6));
+		}
+		//#endregion
+		//#region \0token-total-css:/home/runner/work/dsh-token-total/dsh-token-total/src/client/ContextUsageEntry.module.css?inline
+		const css = ".root_1877794043 { display: inline-flex; align-items: center; min-width: 0; font: inherit; font-variant-numeric: tabular-nums; line-height: inherit; }\n.trigger_1877794043 { display: inline-flex; align-items: center; gap: 6px; box-sizing: border-box; max-width: 100%; padding: 1px 8px; border: 0; border-radius: 24px; background: transparent; color: var(--dsw-alias-label-tertiary); font: inherit; line-height: inherit; white-space: nowrap; cursor: pointer; }\n.trigger_1877794043 svg { flex: none; }\n.track_1877794043 { fill: none; stroke: var(--dsw-alias-separator-primary); stroke-width: 1.5; }\n.fill_1877794043 { fill: none; stroke: var(--dsw-alias-label-tertiary); stroke-width: 2; stroke-linecap: round; }\n.trigger_1877794043:hover, .trigger_1877794043[aria-expanded='true'] { background: var(--dsw-alias-interactive-bg-hover); color: var(--dsw-alias-label-secondary); }\n.panel_1877794043 { position: fixed; z-index: 1100; box-sizing: border-box; width: max-content; min-width: min(300px, calc(100vw - 24px)); max-width: min(440px, calc(100vw - 24px)); padding: 16px; border-radius: 12px; background: var(--dsw-specific-menu); backdrop-filter: var(--dsw-menu-backdrop-filter); box-shadow: var(--dsw-elevation-prominent); color: var(--dsw-alias-label-secondary); font-size: 12px; line-height: 18px; }\n.header_1877794043 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--dsw-alias-label-primary); font-weight: 500; }\n.percent_1877794043 { font-variant-numeric: tabular-nums; }\n.figures_1877794043 { margin-left: auto; color: var(--dsw-alias-label-tertiary); font-variant-numeric: tabular-nums; white-space: nowrap; }\n.bar_1877794043 { display: flex; width: 100%; height: 8px; overflow: hidden; border-radius: 4px; background: var(--dsw-alias-separator-primary); }\n.segment_1877794043 { height: 100%; }\n.systemTokens_1877794043 { background: var(--dsw-alias-label-primary); }\n.toolsTokens_1877794043 { background: var(--dsw-alias-label-secondary); }\n.messageTokens_1877794043 { background: var(--dsw-alias-label-tertiary); }\n.rows_1877794043 { display: grid; gap: 6px; margin: 12px 0 0; color: var(--dsw-alias-label-tertiary); }\n.row_1877794043 { display: flex; align-items: center; justify-content: space-between; gap: 16px; }\n.row_1877794043 dt { display: flex; align-items: center; gap: 8px; }\n.row_1877794043 dd { margin: 0; color: var(--dsw-alias-label-secondary); font-variant-numeric: tabular-nums; }\n.swatch_1877794043 { width: 8px; height: 8px; border-radius: 2px; }\n";
+		const tagId = "dsh-token-total/ContextUsageEntry.module.css";
+		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=\"" + tagId + "\"]") === null) {
+			const tag = document.createElement("style");
+			tag.dataset.plugin = "dsh-token-total";
+			tag.dataset.pluginCss = tagId;
+			tag.textContent = css;
+			document.head.appendChild(tag);
+		}
+		var ContextUsageEntry_module_default = {
+			"root": "root_1877794043",
+			"trigger": "trigger_1877794043",
+			"track": "track_1877794043",
+			"fill": "fill_1877794043",
+			"panel": "panel_1877794043",
+			"header": "header_1877794043",
+			"percent": "percent_1877794043",
+			"figures": "figures_1877794043",
+			"bar": "bar_1877794043",
+			"segment": "segment_1877794043",
+			"systemTokens": "systemTokens_1877794043",
+			"toolsTokens": "toolsTokens_1877794043",
+			"messageTokens": "messageTokens_1877794043",
+			"rows": "rows_1877794043",
+			"row": "row_1877794043",
+			"swatch": "swatch_1877794043"
+		};
+		//#endregion
+		//#region src/client/ContextUsageEntry.tsx
+		const CONTEXT_LOCALE_NS = "tokenTotalContext";
+		const CONTEXT_LOCALES = {
+			zh: {
+				label: "上下文",
+				used: "已用上下文",
+				system: "系统提示词",
+				tools: "工具",
+				messages: "对话",
+				aria: "上下文占用 {percent}",
+				thousand: "{value}千",
+				million: "{value}百万"
+			},
+			en: {
+				label: "Context",
+				used: "Context used",
+				system: "System",
+				tools: "Tools",
+				messages: "Conversation",
+				aria: "Context usage {percent}",
+				thousand: "{value}K",
+				million: "{value}M"
+			},
+			"zh-TW": {
+				label: "上下文",
+				used: "已用上下文",
+				system: "系統提示詞",
+				tools: "工具",
+				messages: "對話",
+				aria: "上下文使用量 {percent}",
+				thousand: "{value}千",
+				million: "{value}百萬"
+			}
+		};
+		function ContextUsageEntry({ useProjection, t, installContextTakeover }) {
+			const pressure = useProjection("contextPressure");
+			const breakdown = useProjection("contextBreakdown");
+			const context = contextOccupancy(pressure);
+			const [open, setOpen] = (0, react.useState)(false);
+			const rootRef = (0, react.useRef)(null);
+			const panelRef = (0, react.useRef)(null);
+			const position = (0, _deepseek_ai_dsh_client_ui_primitives.useAnchoredPosition)({
+				open: open && context !== null,
+				anchorRef: rootRef,
+				panelRef,
+				side: "top",
+				gap: 8,
+				margin: 12
+			});
+			(0, _deepseek_ai_dsh_client_ui_primitives.useDismissOnOutsidePointer)(rootRef, open && context !== null, setOpen, panelRef);
+			(0, react.useLayoutEffect)(() => {
+				const anchor = rootRef.current;
+				if (anchor === null || context === null || installContextTakeover === void 0) return;
+				return installContextTakeover(anchor);
+			}, [context !== null, installContextTakeover]);
+			(0, react.useEffect)(() => {
+				if (context === null && open) setOpen(false);
+			}, [context, open]);
+			(0, react.useEffect)(() => {
+				if (!open || context === null) return;
+				const onKeyDown = (event) => {
+					if (event.key === "Escape") setOpen(false);
+				};
+				document.addEventListener("keydown", onKeyDown);
+				return () => document.removeEventListener("keydown", onKeyDown);
+			}, [context, open]);
+			if (context === null) return null;
+			const percent = context.percent;
+			const reading = `${percent}%`;
+			const total = breakdown === void 0 ? 0 : breakdown.systemTokens + breakdown.toolsTokens + breakdown.messageTokens;
+			const segments = contextBreakdownSegments(percent, breakdown);
+			const format = (value) => formatContextTokens(value, {
+				thousand: t("thousand"),
+				million: t("million")
+			});
+			const label = (part) => t(part);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				ref: rootRef,
+				className: ContextUsageEntry_module_default.root,
+				"data-dsh-token-total-stat": "context",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					className: ContextUsageEntry_module_default.trigger,
+					"aria-label": t("aria", { percent: reading }),
+					"aria-haspopup": "dialog",
+					"aria-expanded": open,
+					onClick: () => setOpen(!open),
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+						viewBox: "0 0 14 14",
+						width: "14",
+						height: "14",
+						"aria-hidden": "true",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+							className: ContextUsageEntry_module_default.track,
+							cx: "7",
+							cy: "7",
+							r: "5.5"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+							className: ContextUsageEntry_module_default.fill,
+							cx: "7",
+							cy: "7",
+							r: "5.5",
+							strokeDasharray: `${2 * Math.PI * 5.5 * percent / 100} ${2 * Math.PI * 5.5}`,
+							transform: "rotate(-90 7 7)"
+						})]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: reading })]
+				}), open && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					ref: panelRef,
+					className: ContextUsageEntry_module_default.panel,
+					style: position ?? MEASURE_STYLE,
+					role: "dialog",
+					"aria-label": t("used"),
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: ContextUsageEntry_module_default.header,
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("used") }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: ContextUsageEntry_module_default.percent,
+									children: reading
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: ContextUsageEntry_module_default.figures,
+									children: `~${format(context.usedTokens)} / ${format(context.contextWindow)}`
+								})
+							]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: ContextUsageEntry_module_default.bar,
+							children: segments.map((segment) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: `${ContextUsageEntry_module_default.segment} ${ContextUsageEntry_module_default[segment.key] ?? ""}`,
+								style: { width: `${segment.width}%` }
+							}, segment.key))
+						}),
+						breakdown !== void 0 && total > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dl", {
+							className: ContextUsageEntry_module_default.rows,
+							children: [
+								"systemTokens",
+								"toolsTokens",
+								"messageTokens"
+							].map((key, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: ContextUsageEntry_module_default.row,
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("dt", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: `${ContextUsageEntry_module_default.swatch} ${ContextUsageEntry_module_default[key]}` }), label([
+									"system",
+									"tools",
+									"messages"
+								][index])] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", { children: `~${format(breakdown[key])}` })]
+							}, key))
+						})
+					]
+				}), document.body)]
+			});
+		}
+		//#endregion
+		//#region src/client/context-takeover.ts
+		/** The host ContextMeter is hard-coded beside composer.dock, not a slot.
+		* Suppress only that recognizable sibling while our replacement is mounted;
+		* never hide a whole dock, slot wrapper, or another plugin's readout. */
+		function installContextTakeover(anchor) {
+			const dock = anchor.closest("[data-composer-dock]");
+			const view = anchor.ownerDocument.defaultView;
+			if (dock === null || view === null) return () => {};
+			const hidden = /* @__PURE__ */ new Map();
+			const reconcile = () => {
+				for (const sibling of Array.from(dock.children)) {
+					if (!(sibling instanceof view.HTMLElement) || sibling.tagName !== "SPAN" || sibling.contains(anchor) || sibling.hasAttribute("data-slot-entry") || sibling.hasAttribute("data-dsh-token-total-stat") || hidden.has(sibling)) continue;
+					if (sibling.querySelector("button[aria-haspopup=\"dialog\"] svg[viewBox=\"0 0 14 14\"] circle[cx=\"7\"][cy=\"7\"][r=\"5.5\"]") === null) continue;
+					hidden.set(sibling, {
+						display: sibling.style.getPropertyValue("display"),
+						priority: sibling.style.getPropertyPriority("display")
+					});
+					sibling.setAttribute("data-dsh-token-total-native-context", "");
+					sibling.style.setProperty("display", "none", "important");
+				}
+			};
+			reconcile();
+			const observer = new view.MutationObserver(reconcile);
+			observer.observe(dock, {
+				childList: true,
+				subtree: true
+			});
+			return () => {
+				observer.disconnect();
+				for (const [element, previous] of hidden) {
+					element.removeAttribute("data-dsh-token-total-native-context");
+					if (previous.display === "") element.style.removeProperty("display");
+					else element.style.setProperty("display", previous.display, previous.priority);
+				}
+				hidden.clear();
+			};
+		}
+		//#endregion
 		//#region src/client/locales.ts
 		/**
 		* Usage panel dictionaries, registered into the DSH locale service. The keys
@@ -31670,6 +32055,7 @@ window.__ModuleLoader__.load({
 			cachedTokens: "cached",
 			sessions: "Sessions",
 			requests: "Requests",
+			requestsFailed: "Failed",
 			activeDays: "Active days",
 			cacheRate: "Avg cache hit rate",
 			cacheRateHint: "Cached input tokens as a share of all input tokens in the range",
@@ -31738,6 +32124,7 @@ window.__ModuleLoader__.load({
 			cachedTokens: "缓存命中",
 			sessions: "会话数量",
 			requests: "请求数量",
+			requestsFailed: "失败",
 			activeDays: "活跃天数",
 			cacheRate: "缓存命中率",
 			cacheRateHint: "时间段内缓存命中 token 占输入 token 的比例",
@@ -31806,6 +32193,7 @@ window.__ModuleLoader__.load({
 			cachedTokens: "快取命中",
 			sessions: "會話數量",
 			requests: "請求數量",
+			requestsFailed: "失敗",
 			activeDays: "活躍天數",
 			cacheRate: "快取命中率",
 			cacheRateHint: "時間範圍內快取命中 token 佔輸入 token 的比例",
@@ -31968,14 +32356,29 @@ window.__ModuleLoader__.load({
 		const COMPOSER_DOCK = "conversation.composer.dock";
 		/** The pre-split takeover: ONE entry at the official 'stats' id, rendering the
 		*  whole row (DSH <= 0.2.0-rc.2). */
-		function installStatsRowEntry(ctx) {
+		function installContextEntry(ctx) {
 			return ctx.slots.register({
+				name: COMPOSER_DOCK,
+				id: "token-total-context",
+				order: 2,
+				priority: -1,
+				locale: CONTEXT_LOCALE_NS,
+				inject: () => ({ installContextTakeover })
+			}, ContextUsageEntry);
+		}
+		function installStatsRowEntry(ctx) {
+			const offStats = ctx.slots.register({
 				name: COMPOSER_DOCK,
 				id: "stats",
 				order: 0,
 				priority: -1,
 				locale: LOCALE_NS
 			}, StatsLineEnhanced);
+			const offContext = installContextEntry(ctx);
+			return () => {
+				offContext();
+				offStats();
+			};
 		}
 		/** The split takeover: one entry per official pill, each shadowed at its own
 		*  id (DSH >= 0.2.1-alpha.1). */
@@ -31994,7 +32397,9 @@ window.__ModuleLoader__.load({
 				priority: -1,
 				locale: LOCALE_NS
 			}, StatsUsageEntry);
+			const offContext = installContextEntry(ctx);
 			return () => {
+				offContext();
 				offUsage();
 				offActivity();
 			};
@@ -32004,10 +32409,12 @@ window.__ModuleLoader__.load({
 				const offZh = ctx.locale.register(LOCALE_NS, "zh", zh);
 				const offEn = ctx.locale.register(LOCALE_NS, "en", en);
 				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));
 				return () => {
 					offZh();
 					offEn();
 					offZhTw();
+					for (const off of offContext) off();
 				};
 			}, "dsh-token-total: dictionaries");
 			ctx.effect(() => {