dsh-token-total 1.0.3 → 1.0.5

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,40 @@ 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,
+  // centred over that day's bar cluster, 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 groups: on a multi-day hourly axis each DAY is one group whose label
+  // sits at the MIDDLE of that day's bars (centred on the day, not left-
+  // aligned to its first bar); otherwise every bucket is its own group and
+  // the label sits on its bar.
+  const labelGroups: Array<{ start: number; end: number }> = []
+  for (let i = 0; i < n; i++) {
+    const last = labelGroups[labelGroups.length - 1]
+    if (multiDayHourly && last && visible[last.end].day.slice(0, 10) === visible[i].day.slice(0, 10)) last.end = i
+    else labelGroups.push({ start: i, end: i })
+  }
+  // Groups are then thinned by POSITION, walking from the right edge: the
+  // rightmost group 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 labeledGroups = new Set<number>()
+  let lastLabelX = Number.POSITIVE_INFINITY
+  for (let k = labelGroups.length - 1; k >= 0; k--) {
+    const g = labelGroups[k]!
+    const x = padL + barHalf + ((g.start + g.end) / 2) * step
+    if (lastLabelX - x >= labelMinGap) {
+      labeledGroups.add(k)
+      lastLabelX = x
+    }
+  }
 
   const trendPoints: Array<{ x: number; y: number }> = []
   const trendPointByDay = new Map<string, { x: number; y: number }>()
@@ -603,7 +727,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,12 +782,18 @@ 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>
-                )}
               </g>
             )
           })}
+          {labelGroups.map((g, k) => labeledGroups.has(k) && (
+            <text
+              key={`axis-${k}`}
+              className={css.axis}
+              x={padL + barHalf + ((g.start + g.end) / 2) * step}
+              y={H - 8}
+              textAnchor="middle"
+            >{bucketAxisLabel(visible[g.start].day, axisMode)}</text>
+          ))}
           <path className={css.trend} d={trendPath} fill="none" strokeWidth={2} strokeLinejoin="round" strokeLinecap="round" />
           {trendTipPt && (
             <circle className={css.trendDot} cx={trendTipPt.x} cy={trendTipPt.y} r={4} />
@@ -750,18 +883,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 +907,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 +941,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 +980,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 +1069,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/api.ts

@@ -11,7 +11,7 @@
  * prefix-stripping proxy; the host's own route key stays absolute
  * (`/token-total/api` in src/routes.ts), because only the browser half is relative.
  */
-import type { BackfillStatus, SessionUsageTree, TokenTotalRange, TokenTotalRequest } from '../wire.ts'
+import type { BackfillStatus, SessionUsageDetail, SessionUsageTree, TokenTotalRange, TokenTotalRequest } from '../wire.ts'
 
 /** One wire failure. */
 export class UsageApiError extends Error {
@@ -28,13 +28,14 @@ interface WireResponse<T> {
   value: T
 }
 
-async function post<T>(method: string, body: unknown): Promise<T> {
+async function post<T>(method: string, body: unknown, signal?: AbortSignal): Promise<T> {
   let res: Response
   try {
     res = await fetch(`token-total/api/${method}`, {
       method: 'POST',
       headers: { 'content-type': 'application/json' },
       body: body === undefined ? undefined : JSON.stringify(body),
+      signal,
     })
   } catch (err) {
     throw new UsageApiError('network', err instanceof Error ? err.message : String(err))
@@ -73,3 +74,8 @@ export async function rebuildStats(): Promise<BackfillStatus> {
 export async function fetchSessionUsage(sessionId: string): Promise<SessionUsageTree> {
   return post<SessionUsageTree>('session', { sessionId })
 }
+
+/** Log-owned requests and live route states for the per-session Usage view. */
+export async function fetchSessionDetail(sessionId: string, signal?: AbortSignal): Promise<SessionUsageDetail> {
+  return post<SessionUsageDetail>('session-detail', { sessionId }, signal)
+}

package/src/client/format.ts

@@ -10,7 +10,7 @@
 
 // Shared with the host half (src/shared.ts has no Node/DOM types, so the
 // client bundle may import it at runtime).
-export { providerOf, modelNameOf, daysInRange as daysBetween } from '../shared.ts'
+export { providerOf, modelNameOf, normalizeModelName, daysInRange as daysBetween } from '../shared.ts'
 
 /** Exact token counts with thousands separators — no 万/亿/k/M units, the
  *  user reads the precise number (long values shrink to fit via FitText).
@@ -62,19 +62,23 @@ export function indexOfDay(day: string): number {
 }
 
 export function shortDay(day: string): string {
-  const parts = day.split('-')
+  // Bucket keys may carry an hour suffix ("YYYY-MM-DDTHH"); only the date
+  // prefix is a date — Number('22T14') is NaN and used to render "10/NaN".
+  const parts = day.slice(0, 10).split('-')
   const m = parts[1]
   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. */
-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/index.tsx

@@ -38,6 +38,8 @@ import { ContextUsageEntry, CONTEXT_LOCALE_NS, CONTEXT_LOCALES } from './Context
 import { installContextTakeover } from './context-takeover.ts'
 import { LOCALE_NS, en, zh, zhTW, type TokenTotalKey } from './locales.ts'
 import { isCompatibleGlass, whenGlassReady } from './glass.ts'
+import { SessionUsageView } from './SessionUsageView.tsx'
+import { SESSION_USAGE_NS, usageEn, usageZh, usageZhTW, type SessionUsageKey } from './session-usage-locales.ts'
 import css from './TokenTotalPanel.module.css'
 
 /** This bundle's npm package name — the key the Plugins page matches on. */
@@ -77,6 +79,7 @@ export type TokenTotalPanelPageProps = PropsLocale<typeof LOCALE_NS> & {
 declare module '@deepseek-ai/dsh-client-ui-slots' {
   interface LocaleNamespaceMap {
     'tokenTotal': TokenTotalKey
+    'sessionUsage': SessionUsageKey
   }
 }
 
@@ -172,7 +175,12 @@ export function apply(ctx: Context): void {
     const offZhTw = ctx.locale.register(LOCALE_NS, 'zh-TW', zhTW)
     const offContext = Object.entries(CONTEXT_LOCALES).map(([locale, dict]) =>
       ctx.locale.register(CONTEXT_LOCALE_NS, locale, dict as Record<string, string>))
-    return () => { offZh(); offEn(); offZhTw(); for (const off of offContext) off() }
+    const offSession = [
+      ctx.locale.register(SESSION_USAGE_NS, 'zh', usageZh),
+      ctx.locale.register(SESSION_USAGE_NS, 'en', usageEn),
+      ctx.locale.register(SESSION_USAGE_NS, 'zh-TW', usageZhTW),
+    ]
+    return () => { offZh(); offEn(); offZhTw(); for (const off of [...offContext, ...offSession]) off() }
   }, 'dsh-token-total: dictionaries')
 
   // Join the background plugin's frosted-glass sheet when it is installed,
@@ -274,6 +282,17 @@ export function apply(ctx: Context): void {
     locale: LOCALE_NS,
   }, StatsPanelIcon))
 
+  // Native session-scoped View: the host owns its tab, selection and composer.
+  // Waiting for declaration keeps older hosts without this seat harmless.
+  const sessionT = ctx.locale.bind(SESSION_USAGE_NS)
+  ctx.slots.inject('conversation.view', () => ctx.slots.register({
+    name: 'conversation.view',
+    id: 'token-total-usage',
+    order: 20,
+    label: () => sessionT('tab'),
+    locale: SESSION_USAGE_NS,
+  }, SessionUsageView))
+
   // The bottom-bar takeover: shadow the official stats pills (same id, lower
   // priority — the slot's lowest live entry renders) with this plugin's
   // always-on precision, token breakdown and live-speed readouts.