@adecore/agents-react 0.39.0 → 0.40.1

package/src/usage/UsageBreakdown.tsx

@@ -6,8 +6,8 @@ import type { UsageModel, UsageProject, UsageProvider, UsageSummaryResult } from
 import { EmptyState, Icon, SectionLabel, Segmented, Tooltip } from '@adecore/ui';
 import { useChatScope } from '../scope';
 import type { UsageMetric } from '../state/usage';
-import { ProviderLogo } from '../agents/ProviderLogo';
 import { USAGE_PROVIDERS, totalTokensOf } from '@adecore/agent-contracts';
+import { ChartLogo } from './ChartLogo';
 import { useModelName } from '../agents/model-name';
 import { formatCount, formatTokens, PROVIDER_COLORS, PROVIDER_LABELS, shortPath, slotLabel } from './format';
 import { useMoney } from './money';
@@ -33,9 +33,7 @@ function barWidth(value: number, top: number): number {
 function ProviderMark({ provider }: { provider: UsageProvider }) {
     return (
         <Tooltip label={PROVIDER_LABELS[provider]}>
-            <span style={{ color: PROVIDER_COLORS[provider] }}>
-                <ProviderLogo provider={provider} />
-            </span>
+            <ChartLogo provider={provider} />
         </Tooltip>
     );
 }
@@ -47,16 +45,19 @@ function ModelName({ provider, slug }: { provider: UsageProvider; slug: string }
 
 function PricedAs({ provider, slug }: { provider: UsageProvider; slug: string }) {
     const { t } = useTranslation('agent-usage');
+
     return t('breakdown.models.pricedAs', { model: useModelName(provider, slug) });
 }
 
 function ModelRows({ models, metric, total }: { models: readonly UsageModel[]; metric: UsageMetric; total: number }) {
     const { t } = useTranslation('agent-usage');
     const money = useMoney();
+
     /* On the tokens metric the biggest row is the one that moved the most, not the dearest. */
     const sorted = [...models].sort((a, b) =>
         metric === 'tokens' ? totalTokensOf(b.totals) - totalTokensOf(a.totals) : (b.costUsd ?? -1) - (a.costUsd ?? -1)
     );
+
     return (
         <div className={TABLE}>
             <div className={HEAD}>
@@ -111,6 +112,7 @@ function ModelRows({ models, metric, total }: { models: readonly UsageModel[]; m
 function ProjectRow({ project, top, money }: { project: UsageProject; top: number; money(usd: number): string }) {
     // The usage on screen is one host's, so the look of a project is that host's too.
     const look = useHostProjectLook(useChatScope().id, project.projectId);
+
     return (
         /* The mark sits on the title rather than between the two lines, so the icons line up with the names. */
         <div className={`${ROW} h-auto items-start py-1.5`}>
@@ -129,6 +131,7 @@ function ProjectRow({ project, top, money }: { project: UsageProject; top: numbe
                 {USAGE_PROVIDERS.map((provider) => {
                     const share = project.byProvider[provider];
                     const width = barWidth(share?.costUsd ?? 0, top);
+
                     return width === 0 ? null : <span key={provider} style={{ width: `${width}%`, background: PROVIDER_COLORS[provider] }} />;
                 })}
             </span>
@@ -141,6 +144,7 @@ function ProjectRow({ project, top, money }: { project: UsageProject; top: numbe
 function ProjectRows({ projects }: { projects: readonly UsageProject[] }) {
     const money = useMoney();
     const top = Math.max(...projects.map((project) => project.costUsd), 0);
+
     return (
         <div className={clsx(TABLE, 'gap-1')}>
             {projects.map((project) => (
@@ -155,9 +159,11 @@ function DayRows({ summary, providers }: { summary: UsageSummaryResult; provider
     const { t } = useTranslation('agent-usage');
     const money = useMoney();
     const rows = deriveDays(summary);
+
     if (rows.length === 0) {
         return <EmptyState>{t('breakdown.days.empty')}</EmptyState>;
     }
+
     return (
         <div className={TABLE}>
             <div className={HEAD}>
@@ -198,6 +204,7 @@ export function UsageBreakdown({ summary, metric, providers }: UsageBreakdownPro
     const { t } = useTranslation('agent-usage');
     const [tab, setTab] = useState<Breakdown>('models');
     const total = summary.models.reduce((sum, model) => sum + (model.costUsd ?? 0), 0);
+
     return (
         <section className="flex flex-col gap-3">
             <div className="flex items-center gap-3">

package/src/usage/UsageChart.tsx

@@ -48,20 +48,25 @@ export function UsageChart({ slots, providers, format, labelEvery }: UsageChartP
                 <svg width={width} height={HEIGHT} role="presentation">
                     {ticks.map((tick) => {
                         const y = Math.round(HEIGHT - (tick / scale.max) * HEIGHT) + 0.5;
+
                         return <line key={tick} x1={0} x2={width} y1={y} y2={y} stroke="var(--border)" strokeWidth={1} />;
                     })}
                     {slots.map((slot, index) => {
                         const left = Math.round(index * band + (band - barWidth) / 2);
                         let bottom = HEIGHT;
+
                         return (
                             <g key={slot.slot} opacity={hovered === null || hovered === index ? 1 : DIMMED}>
                                 {providers.map((provider) => {
                                     const value = slot.byProvider[provider] ?? 0;
+
                                     if (value <= 0) {
                                         return null;
                                     }
+
                                     const height = Math.max(1, Math.round((value / scale.max) * HEIGHT));
                                     bottom -= height;
+
                                     return <rect key={provider} x={left} y={bottom} width={barWidth} height={height} fill={PROVIDER_COLORS[provider]} />;
                                 })}
                             </g>

package/src/usage/UsageLimits.tsx

@@ -5,13 +5,13 @@ import type { UsageProvider } from '@adecore/agent-contracts';
 import { AccountDot } from '../agents/AccountDot';
 import { Button, Icon, SectionLabel, Segmented, Tooltip, useNow } from '@adecore/ui';
 import { useChatHost } from '../host';
-import { PROVIDER_COLORS, PROVIDER_LABELS } from './format';
+import { ChartLogo } from './ChartLogo';
+import { PROVIDER_LABELS } from './format';
 import { accountNote, checkedLabel, hasSeveralAccounts, isSignedOut, type LimitAccount } from './limit-groups';
 import { WindowBar } from './LimitsList';
 import { useLimitGroups, useUsageLimits } from './limits';
-import { useProviderAccountsStore } from '../state/provider-accounts';
+import { useProviderAccounts } from '../state/provider-accounts';
 import { useChatScope } from '../scope';
-import { ProviderLogo } from '../agents/ProviderLogo';
 import { useHostLoginBlocked } from '../host-hooks';
 
 const MINUTE_MS = 60_000;
@@ -26,6 +26,7 @@ interface Login {
 
 function LoginButton({ account, login }: { account: LimitAccount; login: Login }) {
     const { t } = useTranslation('agent-usage');
+
     const button = (
         <Button
             variant="secondary"
@@ -38,6 +39,7 @@ function LoginButton({ account, login }: { account: LimitAccount; login: Login }
             {t('limits.logIn')}
         </Button>
     );
+
     return login.blocked === null ? (
         button
     ) : (
@@ -54,12 +56,11 @@ function LimitCard({ account, named, now, login }: { account: LimitAccount; name
     const note = signedOut ? null : accountNote(account);
     const plan = signedOut ? null : account.entry?.plan;
     const checked = signedOut || account.entry === null ? null : checkedLabel(account.entry, now);
+
     return (
         <div className="flex min-w-0 flex-col gap-3.5 rounded-xl border border-border bg-surface bg-clip-padding px-4 py-3.5">
             <p className="flex min-w-0 items-center gap-2 text-xs font-medium">
-                <span className="shrink-0" style={{ color: PROVIDER_COLORS[account.kind] }}>
-                    <ProviderLogo provider={account.kind} />
-                </span>
+                <ChartLogo provider={account.kind} className="shrink-0" />
                 <span className="shrink-0">{PROVIDER_LABELS[account.kind]}</span>
                 {named && (
                     <>
@@ -100,7 +101,7 @@ export function UsageLimits() {
     const groups = useLimitGroups(limits);
     const now = useNow(MINUTE_MS);
     const scopeId = useChatScope().id;
-    const loginCommands = useProviderAccountsStore((s) => s.byScope[scopeId]?.accounts?.loginCommands);
+    const loginCommands = useProviderAccounts((row) => row.accounts?.loginCommands);
     const { openLogin } = host;
     const blocked = useHostLoginBlocked(scopeId);
     const [filter, setFilter] = useState<Filter>('all');
@@ -108,9 +109,11 @@ export function UsageLimits() {
     if (limits === null) {
         return null;
     }
+
     const filterable = groups.length > 1 && hasSeveralAccounts(groups);
     const current = filterable && groups.some((group) => group.kind === filter) ? filter : 'all';
     const shown = current === 'all' ? groups : groups.filter((group) => group.kind === current);
+
     const loginFor = (kind: UsageProvider): Login | null =>
         openLogin === null || loginCommands?.[kind] === undefined
             ? null

package/src/usage/UsageLimitsCard.tsx

@@ -16,6 +16,7 @@ function CardBody() {
     if (limits === null) {
         return <p className="text-xs text-text-faint">{i18next.t('agent-usage:limits.loading')}</p>;
     }
+
     return hasSeveralAccounts(groups) ? <AccountLimitsList groups={groups} now={now} /> : <LimitsList limits={limits} now={now} compact />;
 }
 
@@ -25,6 +26,7 @@ function CardBody() {
  */
 export function UsageLimitsCard({ children }: { children: ReactElement<Record<string, unknown>> }) {
     const [opened, setOpened] = useState(false);
+
     return (
         <PreviewCard.Root onOpenChange={(open) => open && setOpened(true)}>
             <PreviewCard.Trigger render={children} delay={500} />

package/src/usage/UsagePage.tsx

@@ -8,7 +8,7 @@ import { useChatHost } from '../host';
 import { useChatScope } from '../scope';
 import { useProvidersStore } from '../state/providers';
 import { askedKey, summaryPayload, USAGE_PERIODS, useUsage, useUsageStore, type UsageMetric, type UsagePeriod } from '../state/usage';
-import type { ChatTransport } from '../transport';
+import { whenOpen, type ChatTransport } from '../transport';
 import { formatClock, formatCount, formatDate, formatTokens, PROVIDER_LABELS } from './format';
 import { useMoney } from './money';
 import { deriveUsage, labelEveryFor } from './summary';
@@ -44,9 +44,11 @@ function HostAgents() {
     const { id } = useChatScope();
     const row = useProvidersStore((s) => s.byScope[id]);
     const installed = (row?.providers ?? []).filter((provider) => provider.installed);
+
     if (!row?.loaded) {
         return null;
     }
+
     return (
         <div className="flex flex-col items-center gap-2">
             <p className="text-xs text-text-muted">
@@ -66,16 +68,9 @@ function HostAgents() {
  */
 function useSummary(scopeId: string, transport: ChatTransport, period: UsagePeriod, account: string | null): () => void {
     useEffect(() => {
-        const subscribe = (): void => void transport.request('usage.subscribe', {}).catch(() => undefined);
-        if (transport.status === 'open') {
-            subscribe();
-        }
         // A host knows its followers per link, so every connection has to be told again, on a reconnect and on a move to another host.
-        const off = transport.subscribeStatus((status) => {
-            if (status === 'open') {
-                subscribe();
-            }
-        });
+        const off = whenOpen(transport, () => void transport.request('usage.subscribe', {}).catch(() => undefined));
+
         return () => {
             off();
             void transport.request('usage.unsubscribe', {}).catch(() => undefined);
@@ -86,6 +81,7 @@ function useSummary(scopeId: string, transport: ChatTransport, period: UsagePeri
         const payload = summaryPayload(period, account);
         const asked = askedKey(payload);
         useUsageStore.getState().setLoading(scopeId, true);
+
         transport
             .request('usage.summary', payload)
             .then((summary) => useUsageStore.getState().receive(scopeId, asked, summary))
@@ -93,17 +89,11 @@ function useSummary(scopeId: string, transport: ChatTransport, period: UsagePeri
     }, [transport, scopeId, period, account]);
 
     useEffect(() => {
-        if (transport.status === 'open') {
-            load();
-        }
+        // Until the other host answers there is nothing to ask, and what is on screen is the host that left.
+        const offStatus = whenOpen(transport, load);
         // A scan that found something is the sign to ask again; nothing else changes the numbers.
         const offChanged = transport.on('usage.changed', load);
-        // Until the other host answers there is nothing to ask, and what is on screen is the host that left.
-        const offStatus = transport.subscribeStatus((status) => {
-            if (status === 'open') {
-                load();
-            }
-        });
+
         return () => {
             offChanged();
             offStatus();
@@ -118,16 +108,21 @@ function Provenance() {
     const summary = useUsage((s) => s.summary);
     const currency = useUsage((s) => s.currency);
     const failed = useUsage((s) => s.failed);
+
     if (failed) {
         return <FormError className="mt-auto text-center">{t('provenance.failed')}</FormError>;
     }
+
     if (summary === null) {
         return null;
     }
+
     const prices =
         summary.pricing.fetchedAt === null ? t('provenance.bundledPrices') : t('provenance.fetchedPrices', { date: formatDate(summary.pricing.fetchedAt) });
+
     // The rate is named only when it is being used, so a page in dollars says nothing about euros.
     const rate = currency === 'USD' || summary.rate === null ? null : t('provenance.rate', { currency: summary.rate.currency, date: summary.rate.date });
+
     return (
         <p className="mt-auto text-center text-xs text-text-muted">
             {t('provenance.scanned', { count: summary.scan.files, time: formatClock(summary.scan.at), files: formatCount(summary.scan.files) })} · {prices}
@@ -162,9 +157,11 @@ function LoadingBody() {
  */
 function AccountPicker({ accounts, value, onChange }: { accounts: readonly UsageAccount[]; value: string | null; onChange(account: string | null): void }) {
     const { t } = useTranslation('agent-usage');
+
     if (!USAGE_PROVIDERS.some((kind) => accounts.filter((account) => account.kind === kind).length > 1)) {
         return null;
     }
+
     return (
         <Select
             value={value ?? ALL_ACCOUNTS}

package/src/usage/UsageSummary.tsx

@@ -1,9 +1,9 @@
 import { useTranslation } from 'react-i18next';
 import type { UsageTotals } from '@adecore/agent-contracts';
 import type { UsageMetric } from '../state/usage';
-import { ProviderLogo } from '../agents/ProviderLogo';
 import { totalTokensOf } from '@adecore/agent-contracts';
-import { formatCount, formatTokens, PROVIDER_COLORS, PROVIDER_LABELS } from './format';
+import { ChartLogo } from './ChartLogo';
+import { formatCount, formatTokens, PROVIDER_LABELS } from './format';
 import { useMoney } from './money';
 import type { ProviderTotal } from './summary';
 
@@ -22,6 +22,7 @@ interface UsageSummaryProps {
 export function UsageSummary({ metric, costUsd, totals, sessions, providers }: UsageSummaryProps) {
     const { t } = useTranslation('agent-usage');
     const money = useMoney();
+
     return (
         <div className="flex flex-col gap-4">
             <div>
@@ -35,9 +36,7 @@ export function UsageSummary({ metric, costUsd, totals, sessions, providers }: U
             <div className="flex flex-col gap-2">
                 {providers.map((provider) => (
                     <div key={provider.provider} className="flex items-center gap-2 text-xs">
-                        <span style={{ color: PROVIDER_COLORS[provider.provider] }}>
-                            <ProviderLogo provider={provider.provider} />
-                        </span>
+                        <ChartLogo provider={provider.provider} />
                         <span className="text-text">{PROVIDER_LABELS[provider.provider]}</span>
                         <span className="ml-auto tabular-nums text-text-muted">
                             {money(provider.costUsd)} · {formatTokens(totalTokensOf(provider.totals))}

package/src/usage/UsageTiles.tsx

@@ -13,6 +13,7 @@ interface UsageTilesProps {
 export function UsageTiles({ totals, cacheSavingsUsd }: UsageTilesProps) {
     const { t } = useTranslation('agent-usage');
     const money = useMoney();
+
     const tiles: { id: string; value: string }[] = [
         { id: 'processed', value: formatTokens(totalTokensOf(totals)) },
         { id: 'uncachedInput', value: formatTokens(totals.input) },
@@ -21,6 +22,7 @@ export function UsageTiles({ totals, cacheSavingsUsd }: UsageTilesProps) {
         { id: 'output', value: formatTokens(totals.output) },
         { id: 'cacheSavings', value: money(cacheSavingsUsd) }
     ];
+
     return (
         <div className="grid grid-cols-2 gap-2 md:grid-cols-6">
             {tiles.map((tile) => (

package/src/usage/format.ts

@@ -1,5 +1,6 @@
 import type { UsageProvider, UsageRate } from '@adecore/agent-contracts';
 import { formatDay, formatHour, formatWeekdayDay, formatMoney, formatNumber, formatTokens } from '@adecore/ui/format';
+
 export { formatClock } from '@adecore/ui/format';
 
 /* Dollars are what a price table is in; euros are what the page can be set to. */
@@ -21,8 +22,10 @@ export function moneyFormat(currency: UsageCurrency, rate: UsageRate | null): (u
     const converts = currency !== 'USD' && rate !== null && rate.currency === currency;
     const factor = converts ? rate.rate : 1;
     const code = converts ? currency : 'USD';
+
     return (usd) => {
         const value = usd * factor;
+
         // Under a cent the two decimals of a currency read as zero, which is the one thing it is not.
         return formatMoney(value, code, value !== 0 && Math.abs(value) < 0.01 ? 4 : undefined);
     };
@@ -61,16 +64,19 @@ function hourOfSlot(slot: string): number | null {
 function atHour(slot: string, hour: number): Date {
     const day = dateOfSlot(slot);
     day.setHours(hour);
+
     return day;
 }
 
 export function slotLabel(slot: string): string {
     const hour = hourOfSlot(slot);
+
     return hour === null ? formatWeekdayDay(dateOfSlot(slot)) : formatHour(atHour(slot, hour));
 }
 
 export function slotAxisLabel(slot: string): string {
     const hour = hourOfSlot(slot);
+
     return hour === null ? formatDay(dateOfSlot(slot)) : formatHour(atHour(slot, hour));
 }
 
@@ -81,5 +87,6 @@ export function formatDate(at: number): string {
 /* Enough of a path's tail to tell two checkouts of the same repository apart, under a row that already carries the name. */
 export function shortPath(path: string): string {
     const parts = path.split('/').filter(Boolean);
+
     return parts.length <= 3 ? path : `…/${parts.slice(-3).join('/')}`;
 }

package/src/usage/limit-groups.ts

@@ -46,12 +46,15 @@ export function limitGroups(snapshot: UsageLimitsSnapshot, accounts: ProviderAcc
         if (!snapshot.providers.some((entry) => entry.kind === kind)) {
             return [];
         }
+
         const known = accountsOfKind(accounts, kind);
+
         const read = snapshot.providers
             .filter((entry) => entry.kind === kind)
             .map((entry): LimitAccount => {
                 const id = limitsAccountId(entry);
                 const account = known.find((each) => each.id === id);
+
                 return {
                     id,
                     kind,
@@ -61,6 +64,7 @@ export function limitGroups(snapshot: UsageLimitsSnapshot, accounts: ProviderAcc
                     status: account?.status ?? null
                 };
             });
+
         const unread = known
             .filter((account) => account.account.enabled !== false && !read.some((row) => row.id === account.id))
             .map((account): LimitAccount => ({
@@ -71,7 +75,9 @@ export function limitGroups(snapshot: UsageLimitsSnapshot, accounts: ProviderAcc
                 entry: null,
                 status: account.status
             }));
+
         const rows = [...read, ...unread];
+
         return rows.length === 0 ? [] : [{ kind, accounts: rows }];
     });
 }
@@ -88,11 +94,13 @@ export function isSignedOut(account: LimitAccount): boolean {
 /* The window that resets first from now, the one reset a line per window has no room to repeat. */
 export function nextReset(windows: readonly UsageWindow[], now: number): (UsageWindow & { resetsAt: number }) | null {
     let next: (UsageWindow & { resetsAt: number }) | null = null;
+
     for (const window of windows) {
         if (window.resetsAt !== null && window.resetsAt > now && (next === null || window.resetsAt < next.resetsAt)) {
             next = { ...window, resetsAt: window.resetsAt };
         }
     }
+
     return next;
 }
 
@@ -100,6 +108,7 @@ export function nextReset(windows: readonly UsageWindow[], now: number): (UsageW
 export function paceText(window: UsageWindow, now: number): string {
     const percent = Math.round(window.used * 100);
     const pace = evenPace(window, now);
+
     return pace === null
         ? i18next.t('agent-usage:limits.used', { percent })
         : i18next.t(`agent-usage:limits.pace.${pace.standing}`, { percent, pace: pace.percent });
@@ -110,8 +119,10 @@ export function checkedLabel(entry: UsageLimitsProvider, now: number): string |
     if (entry.checkedAt <= 0) {
         return null;
     }
+
     const past = now - entry.checkedAt;
     const when = past < MINUTE ? i18next.t('agent-usage:limits.checked.now') : i18next.t('agent-usage:limits.checked.ago', { duration: formatDuration(past) });
+
     return entry.source === 'event' ? i18next.t('agent-usage:limits.checked.fromTurn', { when }) : when;
 }
 
@@ -120,13 +131,16 @@ export function explain(provider: UsageLimitsProvider): string | null {
     if (provider.unavailable === null) {
         return provider.windows.length === 0 ? i18next.t('agent-usage:limits.none') : null;
     }
+
     if (provider.unavailable.reason === 'not-installed') {
         return i18next.t('agent-usage:limits.notInstalled');
     }
+
     if (provider.unavailable.reason === 'no-subscription') {
         // A provider that knows why it has no plan says so; the rest are accounts on an API key.
         return provider.unavailable.message ?? i18next.t('agent-usage:limits.noSubscription');
     }
+
     return provider.unavailable.message ?? i18next.t('agent-usage:limits.unreachable');
 }
 

package/src/usage/limits.ts

@@ -1,8 +1,9 @@
 import { useEffect } from 'react';
 import type { UsageLimitsSnapshot } from '@adecore/agent-contracts';
 import { useChatScope, type ChatScope } from '../scope';
-import { useProviderAccountsStore } from '../state/provider-accounts';
+import { useProviderAccounts } from '../state/provider-accounts';
 import { useUsage, useUsageStore } from '../state/usage';
+import { whenOpen } from '../transport';
 import { limitGroups, type LimitGroup } from './limit-groups';
 
 interface Hold {
@@ -18,21 +19,16 @@ const holds = new Map<string, Hold>();
 function hold(scope: ChatScope): Hold {
     const link = scope.transport;
     const scopeId = scope.id;
-    const ask = (): void => {
+
+    const offStatus = whenOpen(link, () => {
         link.request('usage.limits', {})
             .then((snapshot) => useUsageStore.getState().setLimits(scopeId, snapshot))
             .catch(() => undefined);
-    };
-    if (link.status === 'open') {
-        ask();
-    }
+    });
+
     // A running turn reports its own numbers, which is what keeps a bar moving between reads.
     const offChanged = link.on('usage.limitsChanged', (snapshot) => useUsageStore.getState().setLimits(scopeId, snapshot));
-    const offStatus = link.subscribeStatus((status) => {
-        if (status === 'open') {
-            ask();
-        }
-    });
+
     return {
         readers: 0,
         release: () => {
@@ -51,8 +47,10 @@ export function useUsageLimits(): UsageLimitsSnapshot | null {
         const held = holds.get(scope.id) ?? hold(scope);
         held.readers += 1;
         holds.set(scope.id, held);
+
         return () => {
             held.readers -= 1;
+
             if (held.readers === 0) {
                 held.release();
                 holds.delete(scope.id);
@@ -65,7 +63,7 @@ export function useUsageLimits(): UsageLimitsSnapshot | null {
 
 /* The snapshot per CLI and account, with the accounts of the same host it is read from. */
 export function useLimitGroups(limits: UsageLimitsSnapshot | null): LimitGroup[] {
-    const { id } = useChatScope();
-    const accounts = useProviderAccountsStore((s) => s.byScope[id]?.accounts ?? null);
+    const accounts = useProviderAccounts((row) => row.accounts);
+
     return limits === null ? [] : limitGroups(limits, accounts);
 }

package/src/usage/money.ts

@@ -5,5 +5,6 @@ import { moneyFormat } from './format';
 export function useMoney(): (usd: number) => string {
     const currency = useUsage((s) => s.currency);
     const rate = useUsage((s) => s.summary?.rate ?? null);
+
     return moneyFormat(currency, rate);
 }

package/src/usage/summary.ts

@@ -1,5 +1,5 @@
 import type { UsageProvider, UsageSummaryResult, UsageTotals } from '@adecore/agent-contracts';
-import type { UsageMetric } from '../state/usage';
+import { dayOf, type UsageMetric } from '../state/usage';
 import { EMPTY_TOTALS, USAGE_PROVIDERS, addTotals, totalTokensOf } from '@adecore/agent-contracts';
 
 /* One bar of the chart, what each provider put in this slot, and the height of the stack. */
@@ -21,10 +21,12 @@ export function niceScale(max: number, ticks = 4): { max: number; step: number }
     if (!Number.isFinite(max) || max <= 0) {
         return { max: 1, step: 1 };
     }
+
     const rough = max / ticks;
     const magnitude = 10 ** Math.floor(Math.log10(rough));
     const normalized = rough / magnitude;
     const step = (normalized <= 1 ? 1 : normalized <= 2 ? 2 : normalized <= 5 ? 5 : 10) * magnitude;
+
     return { max: Math.ceil(max / step) * step, step };
 }
 
@@ -38,26 +40,25 @@ export interface DerivedUsage {
     cacheSavingsUsd: number;
 }
 
-function pad(value: number): string {
-    return String(value).padStart(2, '0');
-}
-
 /*
  * Every slot the period has, whether anything happened in it or not: an empty day keeps its place on
  * the axis, so a gap in the work reads as a gap and not as a shorter week.
  */
 export function enumerateSlots(summary: Pick<UsageSummaryResult, 'from' | 'to' | 'resolution'>): string[] {
     if (summary.resolution === 'hour') {
-        return Array.from({ length: 24 }, (_, hour) => `${summary.to}T${pad(hour)}`);
+        return Array.from({ length: 24 }, (_, hour) => `${summary.to}T${String(hour).padStart(2, '0')}`);
     }
+
     const slots: string[] = [];
     const at = new Date(`${summary.from}T00:00:00`);
     const end = new Date(`${summary.to}T00:00:00`);
+
     // A calendar loop rather than adding milliseconds, since a day is 23 or 25 hours long twice a year.
     while (at <= end && slots.length < 400) {
-        slots.push(`${at.getFullYear()}-${pad(at.getMonth() + 1)}-${pad(at.getDate())}`);
+        slots.push(dayOf(at));
         at.setDate(at.getDate() + 1);
     }
+
     return slots;
 }
 
@@ -72,9 +73,11 @@ export function labelEveryFor(slots: number): number {
  */
 export function deriveUsage(summary: UsageSummaryResult, metric: UsageMetric): DerivedUsage {
     const bySlot = new Map<string, ChartSlot>();
+
     for (const slot of enumerateSlots(summary)) {
         bySlot.set(slot, { slot, byProvider: {}, total: 0 });
     }
+
     const byProvider = new Map<UsageProvider, ProviderTotal>();
     let totals = EMPTY_TOTALS;
     let costUsd = 0;
@@ -83,10 +86,12 @@ export function deriveUsage(summary: UsageSummaryResult, metric: UsageMetric): D
     for (const bucket of summary.buckets) {
         const value = metric === 'cost' ? (bucket.costUsd ?? 0) : totalTokensOf(bucket.totals);
         const slot = bySlot.get(bucket.slot);
+
         if (slot !== undefined) {
             slot.byProvider[bucket.provider] = (slot.byProvider[bucket.provider] ?? 0) + value;
             slot.total += value;
         }
+
         const provider = byProvider.get(bucket.provider) ?? { provider: bucket.provider, costUsd: 0, totals: EMPTY_TOTALS };
         provider.costUsd += bucket.costUsd ?? 0;
         provider.totals = addTotals(provider.totals, bucket.totals);
@@ -97,6 +102,7 @@ export function deriveUsage(summary: UsageSummaryResult, metric: UsageMetric): D
     }
 
     const providers = [...byProvider.values()].sort((a, b) => b.costUsd - a.costUsd);
+
     return {
         slots: [...bySlot.values()],
         providers,
@@ -122,6 +128,7 @@ export interface UsageDay {
  */
 export function deriveDays(summary: UsageSummaryResult): UsageDay[] {
     const rows = new Map<string, UsageDay>();
+
     for (const bucket of summary.buckets) {
         const day = bucket.slot.slice(0, 10);
         const row = rows.get(day) ?? { slot: day, costByProvider: {}, costUsd: 0, tokens: 0 };
@@ -131,5 +138,6 @@ export function deriveDays(summary: UsageSummaryResult): UsageDay[] {
         row.tokens += totalTokensOf(bucket.totals);
         rows.set(day, row);
     }
+
     return [...rows.values()].sort((a, b) => b.slot.localeCompare(a.slot));
 }