dsh-token-total 1.0.2 → 1.0.4

package/src/client/TokenTotalPanel.tsx

@@ -73,6 +73,9 @@ export function TokenTotalPanel({ t }: { t: Translator }): JSX.Element {
   const [stats, setStats] = useState<TokenTotalRange | null>(null)
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState('')
+  // When the last successful fetch happened — the "as of" stamp shows a
+  // concrete clock time, not just the range's date.
+  const [loadedAt, setLoadedAt] = useState<number | null>(null)
   const generationRef = useRef(0)
   // The panel bounds the chart tooltips: a tip must never leave the panel
   // even when the hovered cell sits near its edge.
@@ -116,6 +119,7 @@ export function TokenTotalPanel({ t }: { t: Translator }): JSX.Element {
       const res = await fetchRange(req)
       if (generationRef.current !== generation) return // stale response
       setStats(res)
+      setLoadedAt(Date.now())
       // One trigger chain for both surfaces. The heatmap window does not
       // follow `range`, so binding its fetch to the mount effect alone meant a
       // single failed request left the grid blank until the user pressed
@@ -233,15 +237,22 @@ export function TokenTotalPanel({ t }: { t: Translator }): JSX.Element {
             />
           </div>
         )}
-        <Button
-          size="sm"
-          variant="outline"
-          className={css.refresh}
-          onClick={() => { void load() }}
-          disabled={loading}
-        >
-          {t('refresh')}
-        </Button>
+        <div className={css.toolbarEnd}>
+          {stats && (
+            <span className={css.asOf}>
+              {t('asOf')} {asOfStamp(stats.to, loadedAt)}
+            </span>
+          )}
+          <Button
+            size="sm"
+            variant="outline"
+            className={css.refresh}
+            onClick={() => { void load() }}
+            disabled={loading}
+          >
+            {t('refresh')}
+          </Button>
+        </div>
       </div>
 
       {error && <div className={css.errorBanner}>{error}</div>}
@@ -252,8 +263,13 @@ export function TokenTotalPanel({ t }: { t: Translator }): JSX.Element {
       {stats && (
         <>
           <StatCards stats={stats} t={t} />
-          <Heatmap daily={heatDaily} from={heatWindow.from} to={heatWindow.to} t={t} panelRef={panelRef} />
-          <DailyTrend models={trendModels} daily={trendDaily} granularity={stats?.granularity ?? 'day'} t={t} colorForModel={colorForModel} panelRef={panelRef} />
+          {/* Heatmap and the token trend share ONE row —one card each, left
+              and right (热力图左 / 趋势右). The duo grid stretches both cards
+              to a common height and folds to one column on a narrow pane. */}
+          <div className={css.duo}>
+            <Heatmap daily={heatDaily} from={heatWindow.from} to={heatWindow.to} t={t} panelRef={panelRef} />
+            <DailyTrend models={trendModels} daily={trendDaily} granularity={stats?.granularity ?? 'day'} t={t} colorForModel={colorForModel} panelRef={panelRef} />
+          </div>
           <UsageBreakdown
             models={stats.models}
             providers={stats.providers}
@@ -261,12 +277,8 @@ export function TokenTotalPanel({ t }: { t: Translator }): JSX.Element {
             providerNames={stats.providerNames}
             t={t}
             panelRef={panelRef}
+            colorForModel={colorForModel}
           />
-          {stats.to && (
-            <div className={css.foot}>
-              {t('asOf')} {stats.to}
-            </div>
-          )}
         </>
       )}
       {!error && stats && isEmptyRange(stats) && (
@@ -278,6 +290,15 @@ export function TokenTotalPanel({ t }: { t: Translator }): JSX.Element {
 
 // ── Section 2+3: numeric cards ────────────────────────────────────────────
 
+/** "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: string, fetchedAt: number | null): string {
+  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". */
@@ -286,28 +307,31 @@ function isEmptyRange(stats: TokenTotalRange): boolean {
 }
 
 function StatCards({ stats, t }: { stats: TokenTotalRange; t: Translator }) {
-  const cards: Array<{ icon: typeof Coins; label: string; value: string; hint?: string; sub?: string }> = [
+  // Each card wears one accent hue (tone 1..6 → --dsw-tone-1..6): the accent
+  // drives the left bar, the icon badge tint, and the corner wash, so the
+  // overview row reads in colour instead of one gray register.
+  const cards: Array<{ icon: typeof Coins; label: string; value: string; hint?: string; sub?: string; tone: number }> = [
     // 总tokens —the provider-inclusive headline (uncached input + output +
     // cache reads/writes): the number a provider dashboard reports. Compact
     // K/M/B on the headline, the exact count underneath.
-    { icon: Coins, label: t('tokens'), value: formatCompact(stats.tokens), hint: t('tokensHint'), sub: `${formatTokens(stats.tokens)} ${t('tokensUnit')}` },
+    { icon: Coins, label: t('tokens'), value: formatCompact(stats.tokens), hint: t('tokensHint'), sub: `${formatTokens(stats.tokens)} ${t('tokensUnit')}`, tone: 1 },
     // 输入 tokens —uncached prompt tokens the provider billed as new input.
-    { icon: ArrowDownToLine, label: t('inputTokens'), value: formatCompact(stats.inputTokens), sub: `${formatTokens(stats.inputTokens)} ${t('tokensUnit')}` },
+    { icon: ArrowDownToLine, label: t('inputTokens'), value: formatCompact(stats.inputTokens), sub: `${formatTokens(stats.inputTokens)} ${t('tokensUnit')}`, tone: 2 },
     // 输出 tokens —completion tokens.
-    { icon: ArrowUpFromLine, label: t('outputTokens'), value: formatCompact(stats.outputTokens), sub: `${formatTokens(stats.outputTokens)} ${t('tokensUnit')}` },
+    { icon: ArrowUpFromLine, label: t('outputTokens'), value: formatCompact(stats.outputTokens), sub: `${formatTokens(stats.outputTokens)} ${t('tokensUnit')}`, tone: 3 },
     // 缓存 tokens —cached prompt tokens (cache reads + cache writes).
-    { icon: Database, label: t('cacheTokens'), value: formatCompact(stats.cacheTokens), sub: `${formatTokens(stats.cacheTokens)} ${t('tokensUnit')}` },
+    { icon: Database, label: t('cacheTokens'), value: formatCompact(stats.cacheTokens), sub: `${formatTokens(stats.cacheTokens)} ${t('tokensUnit')}`, tone: 4 },
     // 缓存命中率 —cached share of all prompt tokens in the range.
-    { icon: Activity, label: t('cacheRate'), value: cacheRateText(stats.cacheHit, stats.cacheMiss), hint: t('cacheRateHint'), sub: `${formatCompact(stats.cacheHit)} ${t('cachedTokens')}` },
+    { icon: Activity, label: t('cacheRate'), value: cacheRateText(stats.cacheHit, stats.cacheMiss), hint: t('cacheRateHint'), sub: `${formatCompact(stats.cacheHit)} ${t('cachedTokens')}`, tone: 5 },
     // 请求数量 —provider calls (tokens or not). The failed share sits
     // underneath, and only when there were any: a healthy range stays a
     // single line. Failed calls are a SUBSET of requests, never additive.
-    { icon: 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)}` : undefined },
+    { icon: 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)}` : undefined, tone: 6 },
   ]
   return (
     <div className={css.cards}>
       {cards.map((c) => (
-        <div className={css.card} data-dsh-usage-glass="card" key={c.label} title={c.hint}>
+        <div className={clsx(css.card, css[`cardTone${c.tone}`])} data-dsh-usage-glass="card" key={c.label} title={c.hint}>
           <div className={css.cardHead}>
             <c.icon className={css.cardIcon} size={14} strokeWidth={2} aria-hidden="true" />
             <span className={css.cardLabel}>{c.label}</span>
@@ -315,7 +339,9 @@ function StatCards({ stats, t }: { stats: TokenTotalRange; t: Translator }) {
           {c.sub !== undefined ? (
             <div className={clsx(css.cardValue, css.cardModelLines)}>
               <FitText text={c.value} className={css.cardValue} maxSize={22} />
-              <div className={css.cardSub}>{c.sub}</div>
+              {/* The exact-count line is the longest text in the card: fit it
+                  too (down to 8px) instead of letting it clip. */}
+              <FitText text={c.sub} className={css.cardSub} maxSize={11} minSize={8} />
             </div>
           ) : (
             <FitText text={c.value} className={css.cardValue} maxSize={22} />
@@ -327,8 +353,9 @@ function StatCards({ stats, t }: { stats: TokenTotalRange; t: Translator }) {
 }
 
 // FitText renders `text` on a single line, shrinking the font until it fits
-// the card width (long token numbers never overflow or wrap).
-function FitText({ text, className, maxSize }: { text: string; className?: string; maxSize: number }) {
+// the card width (long token numbers never overflow or wrap). `minSize` is
+// the floor: secondary lines may shrink further than headline values.
+function FitText({ text, className, maxSize, minSize = 11 }: { text: string; className?: string; maxSize: number; minSize?: number }) {
   const ref = useRef<HTMLDivElement>(null)
   const [size, setSize] = useState(maxSize)
 
@@ -338,7 +365,7 @@ function FitText({ text, className, maxSize }: { text: string; className?: strin
     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 -= 0.5
         el.style.fontSize = `${s}px`
       }
@@ -348,7 +375,7 @@ function FitText({ text, className, maxSize }: { text: string; className?: strin
     const ro = new ResizeObserver(fit)
     ro.observe(el)
     return () => ro.disconnect()
-  }, [text, maxSize])
+  }, [text, maxSize, minSize])
 
   return (
     <div ref={ref} className={className} style={{ fontSize: size }}>
@@ -359,13 +386,26 @@ function FitText({ text, className, maxSize }: { text: string; className?: strin
 
 // ── Section 4: GitHub-style activity heatmap ──────────────────────────────
 
-// Cell/gap ratio follows reasonix (base 13 / gap 3): a 1px gap against a
-// ~20px grown cell read as tiles touching edge to edge. The gap also equals
-// the legend's own 3px swatch spacing, and the fixed rx matches the legend
-// swatch border-radius, so the key renders at exactly the chart's geometry.
-const HEAT_BASE = 14 // cell size at which column trimming starts
-const HEAT_GAP = 3 // breathing gap between cells; mirrors the legend swatch gap
-const HEAT_RX = 3 // cell corner radius; matches the legend swatch (css .heatCell)
+// Cell/gap ratio follows the reference chart (a GitHub-style green heatmap):
+// roughly a third of the cell in gap, so the tiles read as separate rounded
+// squares instead of a wash. The gap also equals the legend's own swatch
+// spacing, and the fixed rx matches the legend swatch border-radius, so the
+// key renders at exactly the chart's geometry.
+const HEAT_BASE = 12 // cell size at which column trimming starts
+const HEAT_GAP = 4 // breathing gap between cells; mirrors the legend swatch gap
+const HEAT_RX = 2 // cell corner radius; matches the legend swatch (css .heatCell)
+
+// ── heatmap axis gutters ──────────────────────────────────────────────────
+// The chart now carries a weekday column on the left and month labels along
+// the bottom (matching the GitHub-style reference). Both are drawn INSIDE the
+// same SVG so a label sits on the exact cell track it names; the geometry
+// solver only ever sees the width left over after these gutters are reserved.
+const HEAT_AXIS_LEFT = 30 // px reserved left of the first cell column (weekday labels)
+const HEAT_AXIS_BOTTOM = 18 // px reserved under the last row (month labels)
+
+/** 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'] as const
+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'] as const
 
 /** One heatmap frame's geometry. */
 export interface HeatGeometry {
@@ -439,7 +479,9 @@ function Heatmap({ daily, from, to, t, panelRef }: { daily: DailyTokenUsage[]; f
     const el = wrapRef.current
     if (!el) return
     const update = () => {
-      const avail = Math.max(1, el.clientWidth - 2)
+      // Reserve the weekday gutter so the cells solve against the space they
+      // actually get; the SVG width below re-adds it.
+      const avail = Math.max(1, el.clientWidth - 2 - HEAT_AXIS_LEFT)
       const next = heatGeometry(avail, (indexOfDay(from) + 1) % 7)
       // Only commit when the geometry actually changed —the heatmap SVG
       // width follows `geom.size`, and committing an identical value on
@@ -463,12 +505,38 @@ function Heatmap({ daily, from, to, t, panelRef }: { daily: DailyTokenUsage[]; f
   // partial first week, so the SVG width follows it directly.
   const weeks = geom.totalWeeks
 
+  // Month labels: name a column only where its month differs from the
+  // previous column's, so a run of weeks in one month gets a single label
+  // sitting over its first week (the GitHub axis convention). The reading is
+  // taken from the column's own top cell (row 0), which is the earliest day
+  // that column holds.
+  // The window is a whole number of weeks, so it can wrap back into the month
+  // it started in; that trailing label would sit in the last column and be
+  // clipped by the wrap's overflow. Drop it — it repeats the first label.
+  const monthLabels: Array<{ col: number; month: number }> = []
+  let lastMonth = -1
+  for (let i = 0; i < days.length; i++) {
+    const col = Math.floor((i + startOffset) / 7)
+    if ((i + startOffset) % 7 !== 0) continue // only the column's first day
+    const m = 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 (
     <section className={css.section}>
       <div className={css.sectionHead}>
         <h3 className={css.sectionTitle}>{t('heatmap')}</h3>
         <div className={css.heatLegend}>
           <span>{t('heatLess')}</span>
+          <i className={clsx(css.heatCell, css.heatLevel0)} style={{ width: geom.size, height: geom.size }} />
           <i className={clsx(css.heatCell, css.heatLevel1)} style={{ width: geom.size, height: geom.size }} />
           <i className={clsx(css.heatCell, css.heatLevel2)} style={{ width: geom.size, height: geom.size }} />
           <i className={clsx(css.heatCell, css.heatLevel3)} style={{ width: geom.size, height: geom.size }} />
@@ -478,15 +546,28 @@ function Heatmap({ daily, from, to, t, panelRef }: { daily: DailyTokenUsage[]; f
         </div>
       </div>
       <div className={css.heatWrap} ref={wrapRef}>
-        <svg className={css.heatmap} width={weeks * (geom.size + HEAT_GAP) + HEAT_GAP} height={rows * (geom.size + HEAT_GAP) + HEAT_GAP} role="img" aria-label={t('heatmap')}>
+        <svg className={css.heatmap} width={svgW} height={svgH} role="img" aria-label={t('heatmap')}>
+          {/* Weekday gutter: every row is named Mon…Sun so a bar reads by day. */}
+          {DOW_KEYS.map((key, row) => (
+            <text
+              key={key}
+              className={css.heatAxis}
+              x={HEAT_AXIS_LEFT - 8}
+              y={HEAT_GAP + row * cellW + geom.size / 2}
+              textAnchor="end"
+              dominantBaseline="central"
+            >
+              {t(key)}
+            </text>
+          ))}
           {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)
+            const x = HEAT_AXIS_LEFT + HEAT_GAP + col * cellW
+            const y = HEAT_GAP + row * cellW
             return (
               <rect
                 key={day}
@@ -505,6 +586,19 @@ function Heatmap({ daily, from, to, t, panelRef }: { daily: DailyTokenUsage[]; f
               />
             )
           })}
+          {/* Month gutter: one label per month, over the column it starts in. */}
+          {monthLabels.map(({ col, month }) => (
+            <text
+              key={`${col}-${month}`}
+              className={css.heatAxis}
+              x={HEAT_AXIS_LEFT + HEAT_GAP + col * cellW}
+              y={rows * cellW + HEAT_GAP + 3}
+              textAnchor="start"
+              dominantBaseline="hanging"
+            >
+              {t(MONTH_KEYS[month]!)}
+            </text>
+          ))}
         </svg>
         {tip && (
           <ChartTip anchor={tip.anchor} panelRef={panelRef}>
@@ -575,10 +669,34 @@ function DailyTrend({ models, daily, granularity, t, colorForModel, panelRef }:
   const plotWUsed = view.avail
   const maxTotal = Math.max(1, ...visible.map((d) => d.total))
   const ticks = niceTicks(maxTotal, 4)
-  // X labels keep at least ~46px between their columns —a fixed "every Nth
-  // day" count collided when few days stretched across the whole plot
-  // (7/14-day presets labelled every bar).
-  const labelEvery = Math.max(1, Math.ceil(46 / step))
+  // What the X axis reads as depends on the WINDOW, not just the granularity:
+  // a multi-day hourly span (3天) is a DATE axis — one short date per day, at
+  // the day's first bucket, times would be noise across three day-clusters;
+  // a single-day hourly span (今日) is a CLOCK axis — the date is constant and
+  // would only repeat. Daily ranges stay date labels.
+  const dayCount = new Set(visible.map((d) => d.day.slice(0, 10))).size
+  const multiDayHourly = granularity === 'hour' && dayCount > 1
+  const axisMode: 'day' | 'hour' = multiDayHourly ? 'day' : granularity
+  // Label buckets: day starts on multi-day hourly, every bucket otherwise.
+  const labelCandidates: number[] = []
+  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)
+  }
+  // Candidates are then thinned by POSITION, walking from the right edge: the
+  // rightmost candidate always keeps its label, an earlier one is kept only
+  // when it clears the previously kept label by the label width. (A fixed
+  // "every Nth" count plus a forced last label drew two labels on top of
+  // each other — the "18:00/23:00" overlap.) Both label shapes are ~30px.
+  const labelMinGap = 42
+  const labeledIdx = new Set<number>()
+  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: Array<{ x: number; y: number }> = []
   const trendPointByDay = new Map<string, { x: number; y: number }>()
@@ -603,7 +721,10 @@ function DailyTrend({ models, daily, granularity, t, colorForModel, panelRef }:
     <section className={css.section}>
       <div className={css.sectionHead}>
         <h3 className={css.sectionTitle}>{t(granularity === 'hour' ? 'hourlyTrend' : 'dailyTrend')}</h3>
-        {trendCapped && <span className={css.trendNote}>{t('trendLimited').replace('{n}', String(view.trimN))}</span>}
+        <div className={css.headMeta}>
+          {trendCapped && <span className={css.trendNote}>{t('trendLimited').replace('{n}', String(view.trimN))}</span>}
+          <span className={css.legendItem}><i className={css.legendTrend} aria-hidden="true" />{t('cacheHitRate')}</span>
+        </div>
       </div>
       <div className={css.chartWrap} ref={wrapRef}>
         <svg className={css.chart} width="100%" height={H} viewBox={`0 0 ${plotWUsed} ${H}`} onMouseLeave={() => { setTip(null); setHover(null) }}>
@@ -655,8 +776,8 @@ function DailyTrend({ models, daily, granularity, t, colorForModel, panelRef }:
                   }}
                   onMouseLeave={() => setTip(null)}
                 />
-                {(i % labelEvery === 0 || i === n - 1) && (
-                  <text className={css.axis} x={padL + barHalf + i * step} y={H - 8} textAnchor="middle">{bucketAxisLabel(d.day, granularity)}</text>
+                {labeledIdx.has(i) && (
+                  <text className={css.axis} x={padL + barHalf + i * step} y={H - 8} textAnchor="middle">{bucketAxisLabel(d.day, axisMode)}</text>
                 )}
               </g>
             )
@@ -750,18 +871,16 @@ function providerColor(index: number): string {
   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: number): string {
-  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 }: {
   models: ModelTokenUsage[]
   providers: ProviderTokenUsage[]
   total: number
   providerNames?: Record<string, string>
   t: Translator
   panelRef: RefObject<HTMLDivElement | null>
+  /** The trend's model palette (rank in `models`), so a model wears the same
+   *  hue in the bars, the tooltips and both rankings. */
+  colorForModel: (model: string) => string
 }) {
   const [tip, setTip] = useState<RankTip | null>(null)
 
@@ -776,6 +895,15 @@ function UsageBreakdown({ models, providers, total, providerNames, t, panelRef }
 
   const shareText = (n: number): string => (total > 0 ? formatPercent((n / total) * 100) : '—')
 
+  // One provider, one hue EVERYWHERE: the palette indexes the provider
+  // ranking, so a provider keeps its colour as a card row AND as another
+  // row's breakdown child. Per-child ranks used to renumber the same
+  // provider differently in every row.
+  const providerColorOf = useCallback((provider: string): string => {
+    const slot = providers.findIndex((p) => p.provider === provider)
+    return slot < 0 ? 'var(--dsw-provider-other)' : providerColor(slot)
+  }, [providers])
+
   const modelRows = useMemo<BreakdownRow[]>(() => {
     const byName = new Map<string, {
       tokens: number
@@ -801,36 +929,36 @@ function UsageBreakdown({ models, providers, total, providerNames, t, panelRef }
     return [...byName.entries()]
       .sort((a, b) => b[1].tokens - a[1].tokens)
       .slice(0, TOP_BREAKDOWN)
-      .map(([name, acc], i) => {
+      .map(([name, acc]) => {
         const split: RankChild[] = [...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) }))
+          .map(([provider, tokens]) => ({ key: provider, name: providerLabel(provider), tokens, color: providerColorOf(provider) }))
         // A payload from before the split still names its sources; list them
         // without a volume rather than inventing a number.
         const known = new Set(split.map((child) => child.key))
         const named: RankChild[] = [...acc.sources]
           .filter((provider) => !known.has(provider))
           .sort()
-          .map((provider, j) => ({ key: provider, name: providerLabel(provider), tokens: null, color: providerColor(split.length + j) }))
+          .map((provider) => ({ key: provider, name: providerLabel(provider), tokens: null, color: providerColorOf(provider) }))
         return {
           key: name,
           name,
           tokens: acc.tokens,
           cacheHit: acc.cacheHit,
           cacheMiss: acc.cacheMiss,
-          color: modelColor(i),
+          color: colorForModel(name),
           breakdownLabel: t('byProvider'),
           breakdown: [...split, ...named],
         }
       })
-  }, [models, providerLabel, t])
+  }, [models, providerLabel, t, colorForModel, providerColorOf])
 
   const providerRows = useMemo<BreakdownRow[]>(() => {
     return [...providers]
       .filter((p) => p.tokens > 0)
       .sort((a, b) => b.tokens - a.tokens)
       .slice(0, TOP_BREAKDOWN)
-      .map((p, i) => {
+      .map((p) => {
         const label = providerLabel(p.provider)
         return {
           key: p.provider,
@@ -840,14 +968,14 @@ function UsageBreakdown({ models, providers, total, providerNames, t, panelRef }
           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) => ({ key: m.model, name: m.model, tokens: m.tokens, color: modelColor(j) })),
+            .map((m) => ({ key: m.model, name: m.model, tokens: m.tokens, color: colorForModel(m.model) })),
         }
       })
-  }, [providers, providerLabel, t])
+  }, [providers, providerLabel, t, colorForModel, providerColorOf])
 
   return (
     <section className={css.section}>
@@ -929,6 +1057,13 @@ function RankCard({ title, rows, total, t, onTip }: {
                 {/* The share keeps its own line: the hover detail never
                     displaces it (悬浮详情不占用百分比的位置). */}
                 <span className={css.modelProvider}>{share(r.tokens)}</span>
+                {/* Share bar: the row's slice of the total, in its own colour. */}
+                <div className={css.rowTrack} aria-hidden="true">
+                  <i
+                    className={css.rowFill}
+                    style={{ width: total > 0 ? `${Math.min(100, (r.tokens / total) * 100)}%` : '0%', background: r.color }}
+                  />
+                </div>
               </div>
               <div className={css.modelValues}>
                 <span className={css.modelTokens}>{formatCompact(r.tokens)}</span>

package/src/client/format.ts

@@ -68,13 +68,15 @@ export function shortDay(day: string): string {
   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. */
-export function bucketAxisLabel(key: string, granularity: 'day' | 'hour'): string {
-  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. */
+export function bucketAxisLabel(key: string, mode: 'day' | 'hour'): string {
+  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

package/src/client/locales.ts

@@ -43,6 +43,25 @@ export type TokenTotalKey =
   | 'heatmap'
   | 'heatLess'
   | 'heatMore'
+  | 'dow.mon'
+  | 'dow.tue'
+  | 'dow.wed'
+  | 'dow.thu'
+  | 'dow.fri'
+  | 'dow.sat'
+  | 'dow.sun'
+  | 'month.jan'
+  | 'month.feb'
+  | 'month.mar'
+  | 'month.apr'
+  | 'month.may'
+  | 'month.jun'
+  | 'month.jul'
+  | 'month.aug'
+  | 'month.sep'
+  | 'month.oct'
+  | 'month.nov'
+  | 'month.dec'
   | 'dailyTrend'
   | 'hourlyTrend'
   | 'trendLimited'
@@ -112,6 +131,25 @@ export const en: Record<TokenTotalKey, string> = {
   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',
@@ -182,6 +220,25 @@ export const zh: Record<TokenTotalKey, string> = {
   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} 天',
@@ -252,6 +309,25 @@ export const zhTW: Record<TokenTotalKey, string> = {
   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} 天',