-
- {t('ov.kpi.sessions')}
- {kpi.sessions}
- {t('ov.kpi.ofTotal', { n: kpi.listed })}
-
-
- {t('ov.kpi.tokens')}
- {fmt(kpi.tokens)}
- {t('stats.turns')} {fmt(kpi.turns)}
-
-
- {t('stats.cost')}
- {kpi.cost === null ? '—' : formatCost(kpi.cost, currency)}
- {t('ov.kpi.pricedSub', { n: kpi.costSessions, total: kpi.sessions })}
-
-
- {t('stats.cacheHit')}
- {kpi.cacheHit === null ? '—' : kpi.cacheHit + '%'}
- {t('ov.kpi.sessionsSub', { n: kpi.usageSessions })}
-
-
- {t('stats.toolCalls')}
- {fmt(kpi.toolCalls)}
- {t('ov.kpi.toolSub', { dur: fmtDuration(kpi.toolsMs) })}
-
-
-
{t('timing.total')}
-
{fmtDuration(kpi.wallMs)}
-
{t('ov.kpi.wallSub', { n: fmt(kpi.calls) })}
+ {/* The panel's first row: a 1:1 column pair — the KPI metrics
+ band (the range's six figures, three per row) beside the
+ last-7-days usage chart (per-day tokens + cost bars off the
+ merged ledger; the range selector does not scope it). */}
+
+
+
+ {t('ov.kpi.sessions')}
+ {kpi.sessions}
+ {t('ov.kpi.ofTotal', { n: kpi.listed })}
+
+
+ {t('ov.kpi.tokens')}
+ {fmt(kpi.tokens)}
+ {t('stats.turns')} {fmt(kpi.turns)}
+
+
+ {t('stats.cost')}
+ {kpi.cost === null ? '—' : formatCost(kpi.cost, currency)}
+ {t('ov.kpi.pricedSub', { n: kpi.costSessions, total: kpi.sessions })}
+
+
+ {t('stats.cacheHit')}
+ {kpi.cacheHit === null ? '—' : kpi.cacheHit + '%'}
+ {t('ov.kpi.sessionsSub', { n: kpi.usageSessions })}
+
+
+ {t('stats.toolCalls')}
+ {fmt(kpi.toolCalls)}
+ {t('ov.kpi.toolSub', { dur: fmtDuration(kpi.toolsMs) })}
+
+
+ {t('timing.total')}
+ {fmtDuration(kpi.wallMs)}
+ {t('ov.kpi.wallSub', { n: fmt(kpi.calls) })}
+
+
{/* The aggregate stats row: the range's Token Stats and Timing
Stats, folded over the KPI band's own scope (the composition
diff --git a/src/client/components/overviewUsage.tsx b/src/client/components/overviewUsage.tsx
new file mode 100644
index 0000000..1c1d0c2
--- /dev/null
+++ b/src/client/components/overviewUsage.tsx
@@ -0,0 +1,144 @@
+/**
+ * The Context Insights panel's first-row usage chart — the RIGHT half of the
+ * KPI row. Seven day columns ending today, each pairing two bars priced off
+ * the merged daily ledger (overview.ts aggregateDays): billed TOKENS (the
+ * heatmap's own blue) and the day's estimated COST (green). The fee rides
+ * the same per-day pricing records the host fold books at each turn's
+ * initiation, priced by the same book and estimator as the KPI band's cost
+ * cell — never a whole session's spend dumped on the day it was last
+ * active. The two series scale on their OWN window maxima (a $2 week must
+ * not flatten under a 169M-token week), so each bar reads as a share of its
+ * series' peak; the tooltip carries the exact figures. The window is fixed
+ * to the last 7 days — the range selector above scopes the KPI figures, not
+ * this calendar.
+ *
+ * The plot is framed like a chart: hairline gridlines at 0/25/50/75/100% of
+ * each series' own peak, a solid baseline at 0, and a tick rail on each
+ * side — TOKENS on the left, COST on the right, computed from the same
+ * maxima the bars scale to. The cost rail reads '—' until some day actually
+ * prices.
+ */
+
+import { Tooltip } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { ReactElement } from 'react'
+import { formatCost, type CostCurrency } from '../cost'
+import { type DayTotals } from '../overview'
+import { shiftDayKey } from '../../shared/days'
+import type { ViewKit } from '../viewkit'
+
+export interface OverviewUsageProps {
+ /** The merged daily ledger (day key → that day's figures). */
+ days: Record
+ /** The display currency the day fees were priced in. */
+ currency: CostCurrency
+ /** The local today key (injected so specs pin the calendar). */
+ today: string
+}
+
+/** The chart's window: today and the six days before it, oldest first. */
+export function usageWindowOf(today: string): string[] {
+ const columns: string[] = []
+ for (let d = -6; d <= 0; d++) {
+ const key = shiftDayKey(today, d)
+ if (key === null) return []
+ columns.push(key)
+ }
+ return columns
+}
+
+/** The shared gridline/tick positions, in percent of each series' peak. */
+const TICKS: readonly number[] = [0, 25, 50, 75, 100]
+
+export function makeOverviewUsage(kit: ViewKit): (props: OverviewUsageProps) => ReactElement {
+ const { t, fmt } = kit
+ return function OverviewUsage(props: OverviewUsageProps): ReactElement {
+ const window = usageWindowOf(props.today)
+ // Widened honestly: a Record index read can miss at runtime.
+ const byKey: Record = props.days
+ const columns = window.map(key => ({ key, entry: byKey[key] }))
+ const empty = columns.every(c => c.entry === undefined || (c.entry.tokens <= 0 && c.entry.cost === null))
+ let maxTokens = 0
+ let maxCost = 0
+ for (const c of columns) {
+ if (c.entry === undefined) continue
+ if (c.entry.tokens > maxTokens) maxTokens = c.entry.tokens
+ if (c.entry.cost !== null && c.entry.cost > maxCost) maxCost = c.entry.cost
+ }
+ const heightOf = (value: number, max: number): string => (max <= 0 || value <= 0 ? '0%' : `${Math.max(4, Math.round((value / max) * 100))}%`)
+ const tickOf = (percent: number): string => fmt(Math.round((maxTokens * percent) / 100))
+ // '—' while nothing prices (an all-zero rail would read as free); the 0
+ // tick reads bare — formatCost's toPrecision renders the floor as the
+ // odd "¥0.0".
+ const costTickOf = (percent: number): string => {
+ if (maxCost <= 0) return '—'
+ return percent === 0 ? '0' : formatCost((maxCost * percent) / 100, props.currency)
+ }
+ return (
+
+
+ {t('ov.usage.title')}
+
+ {empty || window.length === 0
+ ?
{t('ov.usage.empty')}
+ : (
+ <>
+
+
+ {TICKS.map(p => {tickOf(p)})}
+
+
+ {TICKS.map(p => (
+
+ ))}
+
+ {columns.map((c) => {
+ const tokens = c.entry?.tokens ?? 0
+ const cost = c.entry?.cost ?? null
+ // The tooltip line reads the BARE label — the legend's
+ // qualifier ("仅含支持计价映射的模型") stays off the bubble.
+ const label = `${c.key}\n${t('ov.usage.tokens')} ${fmt(tokens)}\n${t('ov.usage.costTip')} ${cost === null ? '—' : formatCost(cost, props.currency)}`
+ return (
+
+
+
+ )
+ })}
+
+
+
+ {TICKS.map(p => {costTickOf(p)})}
+
+
+ {/* The day strip mirrors the columns' flex geometry (same flex
+ basis, same gap), so every label sits under its column. */}
+
+ {columns.map(c => {c.key.slice(5)})}
+
+
+ )}
+
+
+ {t('ov.usage.tokens')}
+
+ {t('ov.usage.cost')}
+
+