dsh-token-total 1.0.3 → 1.0.4

package/lib/client.js

@@ -29427,7 +29427,7 @@ 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$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 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: 9px;\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 brand accent (same blue as the section bars and the total card). */\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: color-mix(in srgb, var(--dsw-tone-1) 14%, transparent);\n  color: var(--dsw-tone-1);\n  font-weight: 600;\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/* Trailing toolbar edge: the \"as of\" stamp sits immediately left of the\n   refresh action (it stamps the very data that button refreshes). */\n.toolbarEnd_768838850 {\n  margin-left: auto;\n  display: inline-flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.asOf_768838850 {\n  color: var(--dsw-alias-label-tertiary);\n  font-size: 12px;\n  white-space: nowrap;\n}\n\n/* Keep the remaining toolbar action at the trailing edge. */\n.refresh_768838850 {\n  flex: 0 0 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/* Six equal tracks: the overview row is one grid of six identical cards\n   (long value or not), so no card crowds its neighbours. At the Plugins\n   page's 960px content width that is six columns on one row. */\n.cards_768838850 {\n  display: grid;\n  grid-template-columns: repeat(6, minmax(0, 1fr));\n  gap: 10px;\n}\n\n/* Below the width where six cards hold their own, the grid folds to three\n   columns (two rows of three), then to two (three rows of two). */\n@media (max-width: 720px) {\n  .cards_768838850 {\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n}\n\n@media (max-width: 430px) {\n  .cards_768838850 {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n}\n\n/* Each stat card wears one accent hue (tone 1..6 → --dsw-tone-1..6): a 3px\n   accent bar on the left edge, the icon in a tinted badge, and a whisper of\n   the hue washing the top-left corner — the overview row reads in colour\n   instead of one gray register. --card-accent is set by the .cardToneN_768838850 map\n   below; content sits above the wash via a z-index layer. */\n.card_768838850 {\n  --card-accent: var(--dsw-alias-label-tertiary);\n  position: relative;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  padding: 14px 14px 12px 18px;\n  border: 1px solid var(--dsw-alias-border-l1);\n  border-radius: 12px;\n  background: var(--dsw-alias-bg-layer-1);\n  box-shadow: 0 1px 2px var(--dsw-alias-bg-mask-2);\n  min-width: 0;\n}\n\n.card_768838850::before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  top: 12px;\n  bottom: 12px;\n  width: 3px;\n  border-radius: 0 3px 3px 0;\n  background: var(--card-accent);\n}\n\n.card_768838850::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(135deg, color-mix(in srgb, var(--card-accent) 7%, transparent), transparent 60%);\n  pointer-events: none;\n}\n\n/* Content must paint above the corner wash (the ::after pseudo is the last\n   child, so it wins a same-layer paint order). */\n.card_768838850 > * {\n  position: relative;\n  z-index: 1;\n}\n\n.cardTone1_768838850 { --card-accent: var(--dsw-tone-1); }\n.cardTone2_768838850 { --card-accent: var(--dsw-tone-2); }\n.cardTone3_768838850 { --card-accent: var(--dsw-tone-3); }\n.cardTone4_768838850 { --card-accent: var(--dsw-tone-4); }\n.cardTone5_768838850 { --card-accent: var(--dsw-tone-5); }\n.cardTone6_768838850 { --card-accent: var(--dsw-tone-6); }\n\n.cardHead_768838850 {\n  display: flex;\n  align-items: center;\n  gap: 7px;\n}\n\n/* Icon badge: the accent hue at 12% behind its own glyph. */\n.cardIcon_768838850 {\n  box-sizing: border-box;\n  width: 24px;\n  height: 24px;\n  padding: 5px;\n  border-radius: 7px;\n  color: var(--card-accent);\n  background: color-mix(in srgb, var(--card-accent) 12%, transparent);\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/* Values never wrap: a wrapped number defeats FitText's measurement (the\n   wrapped line is exactly as wide as its box) and reads as a layout break.\n   Oversized text shrinks instead — see FitText in TokenTotalPanel.tsx_768838850. */\n.cardValue_768838850 {\n  color: var(--dsw-alias-label-primary);\n  font-weight: 600;\n  line-height: 1.15;\n  white-space: nowrap;\n  overflow: hidden;\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). Same no-wrap rule as the value above. */\n.cardSub_768838850 {\n  color: var(--dsw-alias-label-tertiary);\n  font-size: 11px;\n  line-height: 1.2;\n  white-space: nowrap;\n  overflow: hidden;\n}\n\n/* ── sections / chart chrome ───────────────────────────────────────────── */\n\n.section_768838850 {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  min-width: 0;\n  padding: 14px 16px 16px;\n  border: 1px solid var(--dsw-alias-border-l1);\n  border-radius: 12px;\n  background: var(--dsw-alias-bg-layer-1);\n  box-shadow: 0 1px 2px var(--dsw-alias-bg-mask-2);\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/* Section titles carry the same brand accent bar as the stat cards' tone\n   language, so every card heading is anchored the same way. */\n.sectionTitle_768838850 {\n  margin: 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 15px;\n  font-weight: 600;\n  color: var(--dsw-alias-label-primary);\n}\n\n.sectionTitle_768838850::before {\n  content: \"\";\n  width: 3px;\n  height: 13px;\n  border-radius: 2px;\n  background: var(--dsw-tone-1);\n  flex: 0 0 auto;\n}\n\n/* Header meta cluster right of a section title (trend cap note + curve\n   legend). Kept as one wrap-friendly row on a common baseline. */\n.headMeta_768838850 {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-wrap: wrap;\n  font-size: 12px;\n  color: var(--dsw-alias-label-tertiary);\n}\n\n.trendNote_768838850 {\n  font-size: 13px;\n  color: var(--dsw-alias-label-tertiary);\n}\n\n/* Heatmap and the token trend share ONE row — one card each, left and right.\n   Both columns stretch to a common height; the heatmap centres its SVG in the\n   taller partner. Below 720px the pair folds to a single column. */\n.duo_768838850 {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n  gap: 12px;\n  align-items: stretch;\n}\n\n@media (max-width: 720px) {\n  .duo_768838850 {\n    grid-template-columns: minmax(0, 1fr);\n  }\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  /* In the duo row the heatmap card shares height with the trend card; the\n     grid centres itself in whatever slack the partner leaves. */\n  flex: 1 1 auto;\n  display: flex;\n  align-items: center;\n}\n\n.heatmap_768838850 {\n  display: block;\n  margin: 0 auto;\n  /* The ~364 day cells are flat SVG rects (no per-cell filter), so there is no\n     blur chain left to re-rasterize — but promoting the SVG onto its own\n     compositing layer still keeps the whole grid off the scroll repaint path,\n     which is what made scrolling this panel drop frames while idle was clean\n     (#4). Cheap and invisible, so it stays. Note that the promotion is what\n     does the work: `contain: paint` on its own measured no better than no\n     mitigation at all. */\n  transform: translateZ(0);\n}\n\n.heatLegend_768838850 {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 13px;\n  color: var(--dsw-alias-label-tertiary);\n}\n\n/* Axis labels drawn inside the heatmap SVG: the weekday column on the left and\n   the month strip along the bottom. SVG <text> takes `fill`, not `color`. */\n.heatAxis_768838850 {\n  fill: var(--dsw-alias-label-tertiary);\n  font-size: 11px;\n  font-variant-numeric: tabular-nums;\n}\n\n.heatCell_768838850 {\n  display: inline-block;\n  border-radius: 2px;\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     No filter either: the reference chart paints each tile as a flat, matte\n     rounded square, so a sheen/under-shadow would read as a smudge at this\n     cell size rather than depth. */\n}\n\n/* The five heat levels ride a fixed emerald ramp sampled pixel-for-pixel from\n   the reference chart (a GitHub-style green scale), with a darker variant for\n   dark mode below — never the theme accent, which can read near-black against\n   the base surface in dark mode. level0 (no data) is a neutral empty cell.\n   The fills are fully opaque: the reference tiles are solid, and mixing toward\n   transparent (the previous glass treatment) lightened every step and broke\n   the sampled ramp. 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.heatLevel0_768838850 {\n  fill: var(--dsw-heat-0);\n  background: var(--dsw-heat-0);\n}\n\n.heatLevel1_768838850 {\n  fill: var(--dsw-heat-1);\n  background: var(--dsw-heat-1);\n}\n\n.heatLevel2_768838850 {\n  fill: var(--dsw-heat-2);\n  background: var(--dsw-heat-2);\n}\n\n.heatLevel3_768838850 {\n  fill: var(--dsw-heat-3);\n  background: var(--dsw-heat-3);\n}\n\n.heatLevel4_768838850 {\n  fill: var(--dsw-heat-4);\n  background: var(--dsw-heat-4);\n}\n\n.heatLevel5_768838850 {\n  fill: var(--dsw-heat-5);\n  background: var(--dsw-heat-5);\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: 12px;\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/* Share bar under a rank row's name: the row's slice of the section total,\n   drawn in the row's own colour (a 3px track, like the design mock). */\n.rowTrack_768838850 {\n  height: 3px;\n  margin-top: 2px;\n  border-radius: 2px;\n  background: var(--dsw-alias-border-l1);\n  overflow: hidden;\n}\n\n.rowFill_768838850 {\n  display: block;\n  height: 3px;\n  border-radius: 2px;\n}\n\n/* Top-3 ranks read as a podium: the ordinal takes the warm accent instead of\n   the muted gray the tail ranks keep. */\n.rankList_768838850 > .modelRow_768838850:nth-child(-n + 3) .modelRank_768838850 {\n  color: var(--dsw-rank-top);\n  font-weight: 700;\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/* ── 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 a fixed emerald green\n   scale (GitHub-style activity heatmap), stepping from a near-white tint to\n   a deep green; the hit-rate curve rides the brand blue.\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   The palette must ALSO live on :root: tooltips are fixed portals on\n   document.body_768838850 (see ChartTip), outside the panel subtree, and the inline\n   var(--dsw-chart-N) swatches they carry only resolve from :root. */\n:root, .panel_768838850 {\n  --dsw-heat-0: #f4f5f5;\n  --dsw-heat-1: #daf6ea;\n  --dsw-heat-2: #c7f0df;\n  --dsw-heat-3: #82edc0;\n  --dsw-heat-4: #00b96b;\n  --dsw-heat-5: #00663b;\n  --dsw-trend-line: #4d6bfe;\n  /* Overview-card tone accents (stat cards 1..6) and the podium ordinal.\n     Six hues, each picked to sit apart from both the chart set and the heat\n     ramp, at full strength so 12% badge tints stay visible on white. */\n  --dsw-tone-1: #4d6bfe;\n  --dsw-tone-2: #00b96b;\n  --dsw-tone-3: #e07b39;\n  --dsw-tone-4: #975bf1;\n  --dsw-tone-5: #0d8a8a;\n  --dsw-tone-6: #d34591;\n  --dsw-rank-top: #c46212;\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  :root, .panel_768838850 {\n    --dsw-heat-0: #1b211e;\n    --dsw-heat-1: #123a2a;\n    --dsw-heat-2: #17553a;\n    --dsw-heat-3: #1c7a4e;\n    --dsw-heat-4: #2fbf7c;\n    --dsw-heat-5: #7ef0b4;\n    --dsw-trend-line: #7d95ff;\n    /* Dark tones are lifted versions of the light six: same identity hue,\n       brighter so 16% badge tints and 3px bars read on dark surfaces. */\n    --dsw-tone-1: #7d95ff;\n    --dsw-tone-2: #2fbf7c;\n    --dsw-tone-3: #e89a5c;\n    --dsw-tone-4: #b18cff;\n    --dsw-tone-5: #3bc5c5;\n    --dsw-tone-6: #f076ac;\n    --dsw-rank-top: #e08543;\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  /* Dark surfaces swallow pale tints, so the card accents step up: badge\n     12% → 16%, corner wash 7% → 10%. */\n  .cardIcon_768838850 {\n    background: color-mix(in srgb, var(--card-accent) 16%, transparent);\n  }\n\n  .card_768838850::after {\n    background: linear-gradient(135deg, color-mix(in srgb, var(--card-accent) 10%, transparent), transparent 60%);\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");
@@ -29450,15 +29450,25 @@ window.__ModuleLoader__.load({
 			"customRange": "customRange_768838850",
 			"dateInput": "dateInput_768838850",
 			"customSep": "customSep_768838850",
+			"toolbarEnd": "toolbarEnd_768838850",
+			"asOf": "asOf_768838850",
 			"refresh": "refresh_768838850",
 			"errorBanner": "errorBanner_768838850",
 			"loading": "loading_768838850",
 			"empty": "empty_768838850",
 			"cards": "cards_768838850",
+			"cardToneN": "cardToneN_768838850",
 			"card": "card_768838850",
+			"cardTone1": "cardTone1_768838850",
+			"cardTone2": "cardTone2_768838850",
+			"cardTone3": "cardTone3_768838850",
+			"cardTone4": "cardTone4_768838850",
+			"cardTone5": "cardTone5_768838850",
+			"cardTone6": "cardTone6_768838850",
 			"cardHead": "cardHead_768838850",
 			"cardIcon": "cardIcon_768838850",
 			"cardLabel": "cardLabel_768838850",
+			"tsx": "tsx_768838850",
 			"cardValue": "cardValue_768838850",
 			"cardValueSm": "cardValueSm_768838850",
 			"cardValueWrap": "cardValueWrap_768838850",
@@ -29467,12 +29477,15 @@ window.__ModuleLoader__.load({
 			"section": "section_768838850",
 			"sectionHead": "sectionHead_768838850",
 			"sectionTitle": "sectionTitle_768838850",
+			"headMeta": "headMeta_768838850",
 			"trendNote": "trendNote_768838850",
+			"duo": "duo_768838850",
 			"chartWrap": "chartWrap_768838850",
 			"heatWrap": "heatWrap_768838850",
 			"heatmap": "heatmap_768838850",
-			"heatCell": "heatCell_768838850",
 			"heatLegend": "heatLegend_768838850",
+			"heatAxis": "heatAxis_768838850",
+			"heatCell": "heatCell_768838850",
 			"size": "size_768838850",
 			"heatLevel0": "heatLevel0_768838850",
 			"heatLevel1": "heatLevel1_768838850",
@@ -29494,7 +29507,6 @@ window.__ModuleLoader__.load({
 			"legendSwatch": "legendSwatch_768838850",
 			"legendTrend": "legendTrend_768838850",
 			"models": "models_768838850",
-			"tsx": "tsx_768838850",
 			"donutWrap": "donutWrap_768838850",
 			"donut": "donut_768838850",
 			"donutTrack": "donutTrack_768838850",
@@ -29508,6 +29520,8 @@ window.__ModuleLoader__.load({
 			"rankList": "rankList_768838850",
 			"modelRow": "modelRow_768838850",
 			"modelRank": "modelRank_768838850",
+			"rowTrack": "rowTrack_768838850",
+			"rowFill": "rowFill_768838850",
 			"modelRowExpandable": "modelRowExpandable_768838850",
 			"modelToggle": "modelToggle_768838850",
 			"modelRowSub": "modelRowSub_768838850",
@@ -29530,8 +29544,7 @@ window.__ModuleLoader__.load({
 			"tipValue": "tipValue_768838850",
 			"tipRow": "tipRow_768838850",
 			"tipRowOther": "tipRowOther_768838850",
-			"tipBreakdown": "tipBreakdown_768838850",
-			"foot": "foot_768838850"
+			"tipBreakdown": "tipBreakdown_768838850"
 		};
 		//#endregion
 		//#region src/client/ChartTip.tsx
@@ -29678,13 +29691,15 @@ window.__ModuleLoader__.load({
 			const d = parts[2];
 			return `${Number(m)}/${Number(d)}`;
 		}
-		/** X-axis label for a trend bucket key. Day mode keeps the short date; hour
-		*  mode names the day at 00:00 (so a three-day span keeps its day boundaries
-		*  readable) and the hour everywhere else. */
-		function bucketAxisLabel(key, granularity) {
-			if (granularity === "day") return shortDay(key);
-			const hour = key.slice(11, 13);
-			return hour === "00" ? shortDay(key.slice(0, 10)) : `${hour}:00`;
+		/** X-axis label for a trend bucket key. `mode` is what the axis READS AS,
+		*  chosen by the caller from the window it covers:
+		*  - 'hour' — a single-day hourly span (今日): the date is constant, so the
+		*    axis shows the bare clock ("8:00");
+		*  - 'day' — anything spanning several days (3天 hourly, any daily range):
+		*    the axis shows the short date ("10/22"); on multi-day hourly spans one
+		*    label marks each day. The tooltip still carries the full date + hour. */
+		function bucketAxisLabel(key, mode) {
+			return mode === "hour" ? `${Number(key.slice(11, 13))}:00` : shortDay(key);
 		}
 		/** Tooltip title for a trend bucket key: the date in day mode, date + hour
 		*  in hour mode. */
@@ -29773,6 +29788,7 @@ window.__ModuleLoader__.load({
 			const [stats, setStats] = (0, react.useState)(null);
 			const [loading, setLoading] = (0, react.useState)(true);
 			const [error, setError] = (0, react.useState)("");
+			const [loadedAt, setLoadedAt] = (0, react.useState)(null);
 			const generationRef = (0, react.useRef)(0);
 			const panelRef = (0, react.useRef)(null);
 			const heatWindow = (0, react.useMemo)(() => {
@@ -29812,6 +29828,7 @@ window.__ModuleLoader__.load({
 					const res = await fetchRange(req);
 					if (generationRef.current !== generation) return;
 					setStats(res);
+					setLoadedAt(Date.now());
 					loadHeat();
 				} catch (e) {
 					if (generationRef.current !== generation) return;
@@ -29920,15 +29937,25 @@ window.__ModuleLoader__.load({
 									})
 								]
 							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
-								size: "sm",
-								variant: "outline",
-								className: TokenTotalPanel_module_default.refresh,
-								onClick: () => {
-									load();
-								},
-								disabled: loading,
-								children: t("refresh")
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: TokenTotalPanel_module_default.toolbarEnd,
+								children: [stats && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+									className: TokenTotalPanel_module_default.asOf,
+									children: [
+										t("asOf"),
+										" ",
+										asOfStamp(stats.to, loadedAt)
+									]
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+									size: "sm",
+									variant: "outline",
+									className: TokenTotalPanel_module_default.refresh,
+									onClick: () => {
+										load();
+									},
+									disabled: loading,
+									children: t("refresh")
+								})]
 							})
 						]
 					}),
@@ -29945,20 +29972,22 @@ window.__ModuleLoader__.load({
 							stats,
 							t
 						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Heatmap, {
-							daily: heatDaily,
-							from: heatWindow.from,
-							to: heatWindow.to,
-							t,
-							panelRef
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DailyTrend, {
-							models: trendModels,
-							daily: trendDaily,
-							granularity: stats?.granularity ?? "day",
-							t,
-							colorForModel,
-							panelRef
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: TokenTotalPanel_module_default.duo,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Heatmap, {
+								daily: heatDaily,
+								from: heatWindow.from,
+								to: heatWindow.to,
+								t,
+								panelRef
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DailyTrend, {
+								models: trendModels,
+								daily: trendDaily,
+								granularity: stats?.granularity ?? "day",
+								t,
+								colorForModel,
+								panelRef
+							})]
 						}),
 						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UsageBreakdown, {
 							models: stats.models,
@@ -29966,15 +29995,8 @@ window.__ModuleLoader__.load({
 							total: stats.tokens,
 							providerNames: stats.providerNames,
 							t,
-							panelRef
-						}),
-						stats.to && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-							className: TokenTotalPanel_module_default.foot,
-							children: [
-								t("asOf"),
-								" ",
-								stats.to
-							]
+							panelRef,
+							colorForModel
 						})
 					] }),
 					!error && stats && isEmptyRange(stats) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -29984,6 +30006,14 @@ window.__ModuleLoader__.load({
 				]
 			});
 		}
+		/** "As of" stamp for a loaded range: the fetch clock time when the range
+		*  reaches today (the data is live up to that refresh), else the day's end —
+		*  the wire carries only dates, and a past day's data is complete. */
+		function asOfStamp(to, fetchedAt) {
+			if (to !== localDay(0)) return `${to} 23:59`;
+			const d = new Date(fetchedAt ?? Date.now());
+			return `${to} ${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
+		}
 		/** A range is empty only when NOTHING was recorded in it: a pure-cache day
 		*  (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". */
@@ -29997,44 +30027,50 @@ window.__ModuleLoader__.load({
 					label: t("tokens"),
 					value: formatCompact(stats.tokens),
 					hint: t("tokensHint"),
-					sub: `${formatTokens(stats.tokens)} ${t("tokensUnit")}`
+					sub: `${formatTokens(stats.tokens)} ${t("tokensUnit")}`,
+					tone: 1
 				},
 				{
 					icon: import_lucide_react.ArrowDownToLine,
 					label: t("inputTokens"),
 					value: formatCompact(stats.inputTokens),
-					sub: `${formatTokens(stats.inputTokens)} ${t("tokensUnit")}`
+					sub: `${formatTokens(stats.inputTokens)} ${t("tokensUnit")}`,
+					tone: 2
 				},
 				{
 					icon: import_lucide_react.ArrowUpFromLine,
 					label: t("outputTokens"),
 					value: formatCompact(stats.outputTokens),
-					sub: `${formatTokens(stats.outputTokens)} ${t("tokensUnit")}`
+					sub: `${formatTokens(stats.outputTokens)} ${t("tokensUnit")}`,
+					tone: 3
 				},
 				{
 					icon: import_lucide_react.Database,
 					label: t("cacheTokens"),
 					value: formatCompact(stats.cacheTokens),
-					sub: `${formatTokens(stats.cacheTokens)} ${t("tokensUnit")}`
+					sub: `${formatTokens(stats.cacheTokens)} ${t("tokensUnit")}`,
+					tone: 4
 				},
 				{
 					icon: import_lucide_react.Activity,
 					label: t("cacheRate"),
 					value: cacheRateText(stats.cacheHit, stats.cacheMiss),
 					hint: t("cacheRateHint"),
-					sub: `${formatCompact(stats.cacheHit)} ${t("cachedTokens")}`
+					sub: `${formatCompact(stats.cacheHit)} ${t("cachedTokens")}`,
+					tone: 5
 				},
 				{
 					icon: import_lucide_react.MessagesSquare,
 					label: t("requests"),
 					value: String(stats.requests),
-					sub: stats.failures > 0 ? `${t("requestsFailed")} ${stats.failures} · ${formatPercent(stats.failures / Math.max(stats.requests, 1) * 100)}` : void 0
+					sub: stats.failures > 0 ? `${t("requestsFailed")} ${stats.failures} · ${formatPercent(stats.failures / Math.max(stats.requests, 1) * 100)}` : void 0,
+					tone: 6
 				}
 			];
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: TokenTotalPanel_module_default.cards,
 				children: cards.map((c) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					className: TokenTotalPanel_module_default.card,
+					className: clsx(TokenTotalPanel_module_default.card, TokenTotalPanel_module_default[`cardTone${c.tone}`]),
 					"data-dsh-usage-glass": "card",
 					title: c.hint,
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -30054,9 +30090,11 @@ window.__ModuleLoader__.load({
 							text: c.value,
 							className: TokenTotalPanel_module_default.cardValue,
 							maxSize: 22
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FitText, {
+							text: c.sub,
 							className: TokenTotalPanel_module_default.cardSub,
-							children: c.sub
+							maxSize: 11,
+							minSize: 8
 						})]
 					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FitText, {
 						text: c.value,
@@ -30066,7 +30104,7 @@ window.__ModuleLoader__.load({
 				}, c.label))
 			});
 		}
-		function FitText({ text, className, maxSize }) {
+		function FitText({ text, className, maxSize, minSize = 11 }) {
 			const ref = (0, react.useRef)(null);
 			const [size, setSize] = (0, react.useState)(maxSize);
 			(0, react.useLayoutEffect)(() => {
@@ -30075,7 +30113,7 @@ window.__ModuleLoader__.load({
 				const fit = () => {
 					let s = maxSize;
 					el.style.fontSize = `${s}px`;
-					while (el.scrollWidth > el.clientWidth + 1 && s > 11) {
+					while (el.scrollWidth > el.clientWidth + 1 && s > minSize) {
 						s -= .5;
 						el.style.fontSize = `${s}px`;
 					}
@@ -30085,7 +30123,11 @@ window.__ModuleLoader__.load({
 				const ro = new ResizeObserver(fit);
 				ro.observe(el);
 				return () => ro.disconnect();
-			}, [text, maxSize]);
+			}, [
+				text,
+				maxSize,
+				minSize
+			]);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				ref,
 				className,
@@ -30093,9 +30135,35 @@ window.__ModuleLoader__.load({
 				children: text
 			});
 		}
-		const HEAT_BASE = 14;
-		const HEAT_GAP = 3;
-		const HEAT_RX = 3;
+		const HEAT_BASE = 12;
+		const HEAT_GAP = 4;
+		const HEAT_RX = 2;
+		const HEAT_AXIS_LEFT = 30;
+		const HEAT_AXIS_BOTTOM = 18;
+		/** 0 = Monday … 6 = Sunday: row order of the heatmap, and the label keys. */
+		const DOW_KEYS = [
+			"dow.mon",
+			"dow.tue",
+			"dow.wed",
+			"dow.thu",
+			"dow.fri",
+			"dow.sat",
+			"dow.sun"
+		];
+		const MONTH_KEYS = [
+			"month.jan",
+			"month.feb",
+			"month.mar",
+			"month.apr",
+			"month.may",
+			"month.jun",
+			"month.jul",
+			"month.aug",
+			"month.sep",
+			"month.oct",
+			"month.nov",
+			"month.dec"
+		];
 		/**
 		* Solve the heatmap's geometry for an available width.
 		*
@@ -30121,7 +30189,7 @@ window.__ModuleLoader__.load({
 		*/
 		function heatGeometry(avail, startOffset) {
 			const totalWeeks = Math.ceil((364 + startOffset) / 7);
-			const baseCols = Math.max(1, Math.floor((avail - HEAT_GAP) / 17));
+			const baseCols = Math.max(1, Math.floor((avail - HEAT_GAP) / 16));
 			if (baseCols >= totalWeeks) {
 				const size = (avail - HEAT_GAP) / totalWeeks - HEAT_GAP;
 				if (size >= HEAT_BASE) return {
@@ -30149,12 +30217,12 @@ window.__ModuleLoader__.load({
 			}, [daily]);
 			const [tip, setTip] = (0, react.useState)(null);
 			const wrapRef = (0, react.useRef)(null);
-			const [geom, setGeom] = (0, react.useState)(() => heatGeometry(728, 0));
+			const [geom, setGeom] = (0, react.useState)(() => heatGeometry(624, 0));
 			(0, react.useEffect)(() => {
 				const el = wrapRef.current;
 				if (!el) return;
 				const update = () => {
-					const next = heatGeometry(Math.max(1, el.clientWidth - 2), (indexOfDay(from) + 1) % 7);
+					const next = heatGeometry(Math.max(1, el.clientWidth - 2 - HEAT_AXIS_LEFT), (indexOfDay(from) + 1) % 7);
 					setGeom((prev) => prev.size === next.size && prev.cols === next.cols ? prev : next);
 				};
 				update();
@@ -30169,6 +30237,24 @@ window.__ModuleLoader__.load({
 			const rows = 7;
 			const startOffset = days[0] ? (indexOfDay(days[0]) + 1) % 7 : 0;
 			const weeks = geom.totalWeeks;
+			const monthLabels = [];
+			let lastMonth = -1;
+			for (let i = 0; i < days.length; i++) {
+				const col = Math.floor((i + startOffset) / 7);
+				if ((i + startOffset) % 7 !== 0) continue;
+				const m = (/* @__PURE__ */ new Date(days[i] + "T00:00:00")).getMonth();
+				if (m !== lastMonth) {
+					monthLabels.push({
+						col,
+						month: m
+					});
+					lastMonth = m;
+				}
+			}
+			while (monthLabels.length > 1 && monthLabels[0].month === monthLabels[monthLabels.length - 1].month) monthLabels.pop();
+			const cellW = geom.size + HEAT_GAP;
+			const svgW = HEAT_AXIS_LEFT + weeks * cellW + HEAT_GAP;
+			const svgH = rows * cellW + HEAT_GAP + HEAT_AXIS_BOTTOM;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 				className: TokenTotalPanel_module_default.section,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -30180,6 +30266,13 @@ window.__ModuleLoader__.load({
 						className: TokenTotalPanel_module_default.heatLegend,
 						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("heatLess") }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", {
+								className: clsx(TokenTotalPanel_module_default.heatCell, TokenTotalPanel_module_default.heatLevel0),
+								style: {
+									width: geom.size,
+									height: geom.size
+								}
+							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", {
 								className: clsx(TokenTotalPanel_module_default.heatCell, TokenTotalPanel_module_default.heatLevel1),
 								style: {
@@ -30221,40 +30314,58 @@ window.__ModuleLoader__.load({
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: TokenTotalPanel_module_default.heatWrap,
 					ref: wrapRef,
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 						className: TokenTotalPanel_module_default.heatmap,
-						width: weeks * (geom.size + HEAT_GAP) + HEAT_GAP,
-						height: rows * (geom.size + HEAT_GAP) + HEAT_GAP,
+						width: svgW,
+						height: svgH,
 						role: "img",
 						"aria-label": t("heatmap"),
-						children: days.map((day, i) => {
-							const col = Math.floor((i + startOffset) / 7);
-							const row = (i + startOffset) % 7;
-							const rec = byDay.get(day);
-							const tokens = rec?.total ?? 0;
-							const level = tokens === 0 ? 0 : 1 + Math.floor(tokens / max * 4);
-							const x = HEAT_GAP + col * (geom.size + HEAT_GAP);
-							const y = HEAT_GAP + row * (geom.size + HEAT_GAP);
-							return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
-								className: clsx(TokenTotalPanel_module_default.heatCell, level === 0 && TokenTotalPanel_module_default.heatLevel0, level === 1 && TokenTotalPanel_module_default.heatLevel1, level === 2 && TokenTotalPanel_module_default.heatLevel2, level === 3 && TokenTotalPanel_module_default.heatLevel3, level === 4 && TokenTotalPanel_module_default.heatLevel4, level === 5 && TokenTotalPanel_module_default.heatLevel5),
-								x,
-								y,
-								width: geom.size,
-								height: geom.size,
-								rx: HEAT_RX,
-								onMouseEnter: (e) => {
-									setTip({
-										day,
-										tokens,
-										requests: rec?.requests ?? 0,
-										cacheHit: rec?.cacheHit ?? 0,
-										cacheMiss: rec?.cacheMiss ?? 0,
-										anchor: e.currentTarget
-									});
-								},
-								onMouseLeave: () => setTip(null)
-							}, day);
-						})
+						children: [
+							DOW_KEYS.map((key, row) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+								className: TokenTotalPanel_module_default.heatAxis,
+								x: 22,
+								y: HEAT_GAP + row * cellW + geom.size / 2,
+								textAnchor: "end",
+								dominantBaseline: "central",
+								children: t(key)
+							}, key)),
+							days.map((day, i) => {
+								const col = Math.floor((i + startOffset) / 7);
+								const row = (i + startOffset) % 7;
+								const rec = byDay.get(day);
+								const tokens = rec?.total ?? 0;
+								const level = tokens === 0 ? 0 : 1 + Math.floor(tokens / max * 4);
+								const x = 34 + col * cellW;
+								const y = HEAT_GAP + row * cellW;
+								return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+									className: clsx(TokenTotalPanel_module_default.heatCell, level === 0 && TokenTotalPanel_module_default.heatLevel0, level === 1 && TokenTotalPanel_module_default.heatLevel1, level === 2 && TokenTotalPanel_module_default.heatLevel2, level === 3 && TokenTotalPanel_module_default.heatLevel3, level === 4 && TokenTotalPanel_module_default.heatLevel4, level === 5 && TokenTotalPanel_module_default.heatLevel5),
+									x,
+									y,
+									width: geom.size,
+									height: geom.size,
+									rx: HEAT_RX,
+									onMouseEnter: (e) => {
+										setTip({
+											day,
+											tokens,
+											requests: rec?.requests ?? 0,
+											cacheHit: rec?.cacheHit ?? 0,
+											cacheMiss: rec?.cacheMiss ?? 0,
+											anchor: e.currentTarget
+										});
+									},
+									onMouseLeave: () => setTip(null)
+								}, day);
+							}),
+							monthLabels.map(({ col, month }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+								className: TokenTotalPanel_module_default.heatAxis,
+								x: 34 + col * cellW,
+								y: rows * cellW + HEAT_GAP + 3,
+								textAnchor: "start",
+								dominantBaseline: "hanging",
+								children: t(MONTH_KEYS[month])
+							}, `${col}-${month}`))
+						]
 					}), tip && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ChartTip, {
 						anchor: tip.anchor,
 						panelRef,
@@ -30325,7 +30436,21 @@ window.__ModuleLoader__.load({
 			const plotWUsed = view.avail;
 			const maxTotal = Math.max(1, ...visible.map((d) => d.total));
 			const ticks = niceTicks(maxTotal, 4);
-			const labelEvery = Math.max(1, Math.ceil(46 / step));
+			const dayCount = new Set(visible.map((d) => d.day.slice(0, 10))).size;
+			const multiDayHourly = granularity === "hour" && dayCount > 1;
+			const axisMode = multiDayHourly ? "day" : granularity;
+			const labelCandidates = [];
+			for (let i = 0; i < n; i++) if (!multiDayHourly || i === 0 || visible[i].day.slice(0, 10) !== visible[i - 1].day.slice(0, 10)) labelCandidates.push(i);
+			const labelMinGap = 42;
+			const labeledIdx = /* @__PURE__ */ new Set();
+			let lastLabelX = Number.POSITIVE_INFINITY;
+			for (let k = labelCandidates.length - 1; k >= 0; k--) {
+				const x = padL + barHalf + labelCandidates[k] * step;
+				if (lastLabelX - x >= labelMinGap) {
+					labeledIdx.add(labelCandidates[k]);
+					lastLabelX = x;
+				}
+			}
 			const trendPoints = [];
 			const trendPointByDay = /* @__PURE__ */ new Map();
 			visible.forEach((d, i) => {
@@ -30355,9 +30480,18 @@ window.__ModuleLoader__.load({
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
 						className: TokenTotalPanel_module_default.sectionTitle,
 						children: t(granularity === "hour" ? "hourlyTrend" : "dailyTrend")
-					}), trendCapped && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						className: TokenTotalPanel_module_default.trendNote,
-						children: t("trendLimited").replace("{n}", String(view.trimN))
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: TokenTotalPanel_module_default.headMeta,
+						children: [trendCapped && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: TokenTotalPanel_module_default.trendNote,
+							children: t("trendLimited").replace("{n}", String(view.trimN))
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: TokenTotalPanel_module_default.legendItem,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", {
+								className: TokenTotalPanel_module_default.legendTrend,
+								"aria-hidden": "true"
+							}), t("cacheHitRate")]
+						})]
 					})]
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: TokenTotalPanel_module_default.chartWrap,
@@ -30437,12 +30571,12 @@ window.__ModuleLoader__.load({
 										},
 										onMouseLeave: () => setTip(null)
 									}),
-									(i % labelEvery === 0 || i === n - 1) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
+									labeledIdx.has(i) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("text", {
 										className: TokenTotalPanel_module_default.axis,
 										x: padL + barHalf + i * step,
 										y: 212,
 										textAnchor: "middle",
-										children: bucketAxisLabel(d.day, granularity)
+										children: bucketAxisLabel(d.day, axisMode)
 									})
 								] }, d.day);
 							}),
@@ -30522,17 +30656,17 @@ window.__ModuleLoader__.load({
 		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 }) {
+		function UsageBreakdown({ models, providers, total, providerNames, t, panelRef, colorForModel }) {
 			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 providerColorOf = (0, react.useCallback)((provider) => {
+				const slot = providers.findIndex((p) => p.provider === provider);
+				return slot < 0 ? "var(--dsw-provider-other)" : providerColor(slot);
+			}, [providers]);
 			const modelRows = (0, react.useMemo)(() => {
 				const byName = /* @__PURE__ */ new Map();
 				for (const m of models) {
@@ -30551,19 +30685,19 @@ window.__ModuleLoader__.load({
 					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) => {
-					const split = [...acc.split.entries()].sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0])).map(([provider, tokens], j) => ({
+				return [...byName.entries()].sort((a, b) => b[1].tokens - a[1].tokens).slice(0, TOP_BREAKDOWN).map(([name, acc]) => {
+					const split = [...acc.split.entries()].sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0])).map(([provider, tokens]) => ({
 						key: provider,
 						name: providerLabel(provider),
 						tokens,
-						color: providerColor(j)
+						color: providerColorOf(provider)
 					}));
 					const known = new Set(split.map((child) => child.key));
-					const named = [...acc.sources].filter((provider) => !known.has(provider)).sort().map((provider, j) => ({
+					const named = [...acc.sources].filter((provider) => !known.has(provider)).sort().map((provider) => ({
 						key: provider,
 						name: providerLabel(provider),
 						tokens: null,
-						color: providerColor(split.length + j)
+						color: providerColorOf(provider)
 					}));
 					return {
 						key: name,
@@ -30571,7 +30705,7 @@ window.__ModuleLoader__.load({
 						tokens: acc.tokens,
 						cacheHit: acc.cacheHit,
 						cacheMiss: acc.cacheMiss,
-						color: modelColor(i),
+						color: colorForModel(name),
 						breakdownLabel: t("byProvider"),
 						breakdown: [...split, ...named]
 					};
@@ -30579,10 +30713,12 @@ window.__ModuleLoader__.load({
 			}, [
 				models,
 				providerLabel,
-				t
+				t,
+				colorForModel,
+				providerColorOf
 			]);
 			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) => {
+				return [...providers].filter((p) => p.tokens > 0).sort((a, b) => b.tokens - a.tokens).slice(0, TOP_BREAKDOWN).map((p) => {
 					const label = providerLabel(p.provider);
 					return {
 						key: p.provider,
@@ -30591,20 +30727,22 @@ window.__ModuleLoader__.load({
 						tokens: p.tokens,
 						cacheHit: p.cacheHit,
 						cacheMiss: p.cacheMiss,
-						color: providerColor(i),
+						color: providerColorOf(p.provider),
 						breakdownLabel: t("byModel"),
-						breakdown: [...p.modelTokens ?? []].sort((a, b) => b.tokens - a.tokens || a.model.localeCompare(b.model)).map((m, j) => ({
+						breakdown: [...p.modelTokens ?? []].sort((a, b) => b.tokens - a.tokens || a.model.localeCompare(b.model)).map((m) => ({
 							key: m.model,
 							name: m.model,
 							tokens: m.tokens,
-							color: modelColor(j)
+							color: colorForModel(m.model)
 						}))
 					};
 				});
 			}, [
 				providers,
 				providerLabel,
-				t
+				t,
+				colorForModel,
+				providerColorOf
 			]);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 				className: TokenTotalPanel_module_default.section,
@@ -30731,13 +30869,27 @@ window.__ModuleLoader__.load({
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: TokenTotalPanel_module_default.modelId,
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: TokenTotalPanel_module_default.modelName,
-									children: r.name
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									className: TokenTotalPanel_module_default.modelProvider,
-									children: share(r.tokens)
-								})]
+								children: [
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: TokenTotalPanel_module_default.modelName,
+										children: r.name
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: TokenTotalPanel_module_default.modelProvider,
+										children: share(r.tokens)
+									}),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										className: TokenTotalPanel_module_default.rowTrack,
+										"aria-hidden": "true",
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("i", {
+											className: TokenTotalPanel_module_default.rowFill,
+											style: {
+												width: total > 0 ? `${Math.min(100, r.tokens / total * 100)}%` : "0%",
+												background: r.color
+											}
+										})
+									})
+								]
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: TokenTotalPanel_module_default.modelValues,
@@ -32169,6 +32321,25 @@ window.__ModuleLoader__.load({
 			heatmap: "Activity heatmap",
 			heatLess: "Less",
 			heatMore: "More",
+			"dow.mon": "Mon",
+			"dow.tue": "Tue",
+			"dow.wed": "Wed",
+			"dow.thu": "Thu",
+			"dow.fri": "Fri",
+			"dow.sat": "Sat",
+			"dow.sun": "Sun",
+			"month.jan": "Jan",
+			"month.feb": "Feb",
+			"month.mar": "Mar",
+			"month.apr": "Apr",
+			"month.may": "May",
+			"month.jun": "Jun",
+			"month.jul": "Jul",
+			"month.aug": "Aug",
+			"month.sep": "Sep",
+			"month.oct": "Oct",
+			"month.nov": "Nov",
+			"month.dec": "Dec",
 			dailyTrend: "Daily token trend",
 			hourlyTrend: "Hourly token trend",
 			trendLimited: "Showing the latest {n} days",
@@ -32238,6 +32409,25 @@ window.__ModuleLoader__.load({
 			heatmap: "活跃热力图",
 			heatLess: "较少",
 			heatMore: "较多",
+			"dow.mon": "周一",
+			"dow.tue": "周二",
+			"dow.wed": "周三",
+			"dow.thu": "周四",
+			"dow.fri": "周五",
+			"dow.sat": "周六",
+			"dow.sun": "周日",
+			"month.jan": "1月",
+			"month.feb": "2月",
+			"month.mar": "3月",
+			"month.apr": "4月",
+			"month.may": "5月",
+			"month.jun": "6月",
+			"month.jul": "7月",
+			"month.aug": "8月",
+			"month.sep": "9月",
+			"month.oct": "10月",
+			"month.nov": "11月",
+			"month.dec": "12月",
 			dailyTrend: "按天 Token 趋势",
 			hourlyTrend: "按小时 Token 趋势",
 			trendLimited: "仅显示最近 {n} 天",
@@ -32307,6 +32497,25 @@ window.__ModuleLoader__.load({
 			heatmap: "活躍熱力圖",
 			heatLess: "較少",
 			heatMore: "較多",
+			"dow.mon": "週一",
+			"dow.tue": "週二",
+			"dow.wed": "週三",
+			"dow.thu": "週四",
+			"dow.fri": "週五",
+			"dow.sat": "週六",
+			"dow.sun": "週日",
+			"month.jan": "1月",
+			"month.feb": "2月",
+			"month.mar": "3月",
+			"month.apr": "4月",
+			"month.may": "5月",
+			"month.jun": "6月",
+			"month.jul": "7月",
+			"month.aug": "8月",
+			"month.sep": "9月",
+			"month.oct": "10月",
+			"month.nov": "11月",
+			"month.dec": "12月",
 			dailyTrend: "每日 Token 趨勢",
 			hourlyTrend: "每小時 Token 趨勢",
 			trendLimited: "僅顯示最近 {n} 天",