@adecore/agents-react 0.0.1 → 0.17.0-beta.1

package/src/usage/UsageLimits.tsx

@@ -0,0 +1,145 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { LogIn } from 'lucide-react';
+import type { UsageProvider } from '@adecore/agent-contracts';
+import { AccountDot } from '../agents/AccountDot';
+import { Button, Icon, SectionLabel, Segmented, Tooltip, useNow } from '@adecore/ui';
+import { chatHost } from '../host';
+import { PROVIDER_COLORS, 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 { useChatScope } from '../scope';
+import { ProviderLogo } from '../agents/ProviderLogo';
+
+const MINUTE_MS = 60_000;
+
+type Filter = UsageProvider | 'all';
+
+interface Login {
+    /* Why a login cannot open a terminal right now, or null when it can. */
+    blocked: string | null;
+    open: (account: LimitAccount) => void;
+}
+
+function LoginButton({ account, login }: { account: LimitAccount; login: Login }) {
+    const { t } = useTranslation('agent-usage');
+    const button = (
+        <Button
+            variant="secondary"
+            size="sm"
+            className={login.blocked === null ? 'self-start' : undefined}
+            disabled={login.blocked !== null}
+            onClick={() => login.open(account)}
+        >
+            <Icon icon={LogIn} size={14} />
+            {t('limits.logIn')}
+        </Button>
+    );
+    return login.blocked === null ? (
+        button
+    ) : (
+        <Tooltip label={login.blocked}>
+            <span className="inline-flex self-start">{button}</span>
+        </Tooltip>
+    );
+}
+
+/* One account: where its numbers come from, then a bar per window, or why there are none. */
+function LimitCard({ account, named, now, login }: { account: LimitAccount; named: boolean; now: number; login: Login | null }) {
+    const { t } = useTranslation('agent-usage');
+    const signedOut = isSignedOut(account);
+    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>
+                <span className="shrink-0">{PROVIDER_LABELS[account.kind]}</span>
+                {named && (
+                    <>
+                        <span className="text-text-faint">·</span>
+                        <AccountDot color={account.color} />
+                        <span className="truncate">{account.name}</span>
+                    </>
+                )}
+                {plan && <span className="shrink-0 font-normal text-text-muted">· {plan}</span>}
+                {checked !== null && <span className="ml-auto shrink-0 pl-2 font-normal text-text-faint">{checked}</span>}
+            </p>
+            {signedOut ? (
+                <>
+                    <p className="text-xs text-text-faint">{t('limits.signedOutDetail')}</p>
+                    {login !== null && <LoginButton account={account} login={login} />}
+                </>
+            ) : note !== null ? (
+                <p className="text-xs text-text-faint">{note}</p>
+            ) : (
+                <div className="flex flex-col gap-4">
+                    {account.entry?.windows.map((window) => (
+                        <WindowBar key={window.id} window={window} now={now} compact={false} />
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+}
+
+/*
+ * What is left of each plan, asked of the CLIs themselves, a card per account. Nothing here reads a
+ * credential: every CLI holds its own login and answers the question when the daemon starts one and asks.
+ */
+export function UsageLimits() {
+    const { t } = useTranslation('agent-usage');
+    const limits = useUsageLimits();
+    const groups = useLimitGroups(limits);
+    const now = useNow(MINUTE_MS);
+    const scopeId = useChatScope().id;
+    const loginCommands = useProviderAccountsStore((s) => s.byScope[scopeId]?.accounts?.loginCommands);
+    const { openLogin } = chatHost();
+    const blocked = chatHost().useLoginBlocked(scopeId);
+    const [filter, setFilter] = useState<Filter>('all');
+
+    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
+            : { blocked, open: (account) => void openLogin(scopeId, kind, account.id, account.name) };
+
+    return (
+        <section className="flex flex-col gap-3">
+            <div className="flex min-h-8 items-center gap-3">
+                <SectionLabel render={<h2 />} className="grow">
+                    {t('limits.title')}
+                </SectionLabel>
+                {filterable && (
+                    <Segmented<Filter>
+                        value={current}
+                        options={[
+                            { id: 'all', label: t('dialog.accounts.all') },
+                            ...groups.map((group) => ({ id: group.kind, label: PROVIDER_LABELS[group.kind] }))
+                        ]}
+                        onValueChange={setFilter}
+                        label={t('limits.filter')}
+                    />
+                )}
+            </div>
+            <p className="text-xs text-text-muted">{t('limits.explain')}</p>
+            <div className="grid grid-cols-2 gap-3">
+                {shown.flatMap((group) =>
+                    group.accounts.map((account) => (
+                        <LimitCard key={account.id} account={account} named={group.accounts.length > 1} now={now} login={loginFor(group.kind)} />
+                    ))
+                )}
+            </div>
+        </section>
+    );
+}

package/src/usage/UsageLimitsCard.tsx

@@ -0,0 +1,36 @@
+import i18next from 'i18next';
+import { useState, type ReactElement } from 'react';
+import { hasSeveralAccounts } from './limit-groups';
+import { AccountLimitsList, LimitsList } from './LimitsList';
+import { useLimitGroups, useUsageLimits } from './limits';
+import { useNow, PreviewCard } from '@adecore/ui';
+
+const MINUTE_MS = 60_000;
+
+/* Asking the CLIs starts a process each, so the question waits until the card is actually opened. */
+function CardBody() {
+    const limits = useUsageLimits();
+    const groups = useLimitGroups(limits);
+    const now = useNow(MINUTE_MS);
+
+    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 />;
+}
+
+/*
+ * What is left of each plan, without opening the usage dialog. A hover card rather than a tooltip:
+ * the bars take a moment to read, and it stays open while the pointer travels to it.
+ */
+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} />
+            <PreviewCard.Popup side="top" align="end" className="w-64 p-3">
+                {opened && <CardBody />}
+            </PreviewCard.Popup>
+        </PreviewCard.Root>
+    );
+}

package/src/usage/UsagePage.tsx

@@ -0,0 +1,276 @@
+import { useCallback, useEffect, useMemo, useState, useSyncExternalStore, type ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ChartNoAxesColumn, RefreshCw } from 'lucide-react';
+import { USAGE_PROVIDERS, type UsageAccount } from '@adecore/agent-contracts';
+import { Button, CloseButton, Dialog, EmptyState, FormError, IconButton, Segmented, Select, Skeleton } from '@adecore/ui';
+import { AccountDot } from '../agents/AccountDot';
+import { chatHost } 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 { formatClock, formatCount, formatDate, formatTokens, PROVIDER_LABELS } from './format';
+import { useMoney } from './money';
+import { deriveUsage, labelEveryFor } from './summary';
+import { UsageBreakdown } from './UsageBreakdown';
+import { UsageChart } from './UsageChart';
+import { UsageLimits } from './UsageLimits';
+import { UsageSummary } from './UsageSummary';
+import { UsageTiles } from './UsageTiles';
+
+const METRICS: readonly UsageMetric[] = ['cost', 'tokens'];
+
+/* The picker's value for every account, which no account id can be: an id starts with a letter. */
+const ALL_ACCOUNTS = '*';
+
+/* Over the whole popup rather than the body under the header, so an empty state stands in the middle of the dialog. */
+const DIALOG_CENTER = 'pointer-events-none absolute inset-0';
+
+/* Whether the scope's host answers right now, redrawn as its link comes and goes. */
+function useAnswering(transport: ChatTransport): boolean {
+    return useSyncExternalStore(
+        useCallback((onChange: () => void) => transport.subscribeStatus(onChange), [transport]),
+        () => transport.status === 'open'
+    );
+}
+
+/*
+ * Which agent CLIs the host has, under an empty usage page: no usage is what a host without any
+ * agent looks like too, and the way to fix that is the agent settings.
+ */
+function HostAgents() {
+    const { t } = useTranslation('agent-usage');
+    const { id } = useChatScope();
+    const row = useProvidersStore((s) => s.byScope[id]);
+    const installed = useMemo(() => (row?.providers ?? []).filter((provider) => provider.installed), [row]);
+    if (!row?.loaded) {
+        return null;
+    }
+    return (
+        <div className="flex flex-col items-center gap-2">
+            <p className="text-xs text-text-muted">
+                {installed.length === 0 ? t('agents.none') : t('agents.installed', { list: installed.map((provider) => provider.name).join(', ') })}
+            </p>
+            <Button size="sm" variant="secondary" onClick={() => chatHost().openSettings('agents')}>
+                {t('agents.settings')}
+            </Button>
+        </div>
+    );
+}
+
+/*
+ * Asks the host on screen for the period that is up, keeps the answer under the key of the question
+ * it answers, and tells the host to keep scanning while the page is here. A late answer to the period
+ * before this one never lands, because the key it carries is no longer the one being shown.
+ */
+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();
+            }
+        });
+        return () => {
+            off();
+            void transport.request('usage.unsubscribe', {}).catch(() => undefined);
+        };
+    }, [transport]);
+
+    const load = useCallback((): void => {
+        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))
+            .catch(() => useUsageStore.getState().fail(scopeId));
+    }, [transport, scopeId, period, account]);
+
+    useEffect(() => {
+        if (transport.status === 'open') {
+            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();
+        };
+    }, [transport, load]);
+
+    return load;
+}
+
+function Provenance() {
+    const { t } = useTranslation('agent-usage');
+    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}
+            {rate !== null && ` · ${rate}`}
+        </p>
+    );
+}
+
+function LoadingBody() {
+    return (
+        <div className="flex flex-col gap-6">
+            <div className="grid gap-6 lg:grid-cols-[18rem_1fr]">
+                <div className="flex flex-col gap-3">
+                    <Skeleton className="h-10 w-40" />
+                    <Skeleton className="w-56" />
+                    <Skeleton className="w-48" />
+                </div>
+                <Skeleton className="h-56 w-full" />
+            </div>
+            <div className="grid grid-cols-2 gap-2 md:grid-cols-6">
+                {[0, 1, 2, 3, 4, 5].map((tile) => (
+                    <Skeleton key={tile} className="h-16 w-full rounded-xl" />
+                ))}
+            </div>
+        </div>
+    );
+}
+
+/*
+ * Every account of the host, once a CLI has more than one: picking one narrows the page to what that
+ * account spent. The chart keeps its split per CLI, since an account's color is a dot and not a series.
+ */
+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}
+            items={[
+                { value: ALL_ACCOUNTS, label: t('dialog.accounts.all') },
+                ...accounts.map((account) => ({
+                    value: account.id,
+                    label: account.label,
+                    icon: <AccountDot color={account.color} />,
+                    description: account.label === PROVIDER_LABELS[account.kind] ? undefined : PROVIDER_LABELS[account.kind]
+                }))
+            ]}
+            onValueChange={(id) => onChange(id === ALL_ACCOUNTS ? null : id)}
+            label={t('dialog.accounts.label')}
+            align="end"
+        />
+    );
+}
+
+interface UsagePageProps {
+    /* Drawn first among the controls of the header, such as a picker of the host these numbers are of. */
+    pickers?: ReactNode;
+    /* A line over the numbers about the host itself, such as that it does not answer; `stale` is true while older numbers stand under it. */
+    notice?(stale: boolean): ReactNode;
+}
+
+/*
+ * What the CLIs of one host cost and how much of their plans is left: the host of the scope this is
+ * rendered in. It is the body of a dialog (`UsageDialog`); the page remounts per host, so nothing of
+ * one outlives a switch to another.
+ */
+export function UsagePage({ pickers, notice }: UsagePageProps) {
+    const { t } = useTranslation('agent-usage');
+    const scope = useChatScope();
+    const period = useUsage((s) => s.period);
+    const metric = useUsage((s) => s.metric);
+    const summary = useUsage((s) => s.summary);
+    const asked = useUsage((s) => s.asked);
+    const loading = useUsage((s) => s.loading);
+    // Per host, since account ids are a host's own.
+    const [account, setAccount] = useState<string | null>(null);
+    const reload = useSummary(scope.id, scope.transport, period, account);
+    const money = useMoney();
+    const answering = useAnswering(scope.transport);
+
+    const shown = summary !== null && asked === askedKey(summaryPayload(period, account)) ? summary : null;
+    const derived = shown === null ? null : deriveUsage(shown, metric);
+    const value = metric === 'cost' ? money : formatTokens;
+    const noRoots = shown !== null && shown.roots.every((root) => root.status === 'missing');
+
+    return (
+        <div className="flex min-h-0 grow flex-col">
+            <header className="flex shrink-0 flex-wrap items-center gap-3 border-b border-border py-3 pr-3 pl-6 max-[960px]:pl-4">
+                <Dialog.Title>{t('dialog.title')}</Dialog.Title>
+                <div className="ml-auto flex flex-wrap items-center gap-2">
+                    {pickers}
+                    <AccountPicker accounts={summary?.accounts ?? []} value={account} onChange={setAccount} />
+                    <Segmented
+                        value={period}
+                        options={USAGE_PERIODS.map((entry) => ({ id: entry.id, label: t(`dialog.periods.${entry.id}`) }))}
+                        onValueChange={(id) => useUsageStore.getState().setPeriod(id)}
+                        label={t('dialog.period')}
+                    />
+                    <Segmented
+                        value={metric}
+                        options={METRICS.map((id) => ({ id, label: t(`dialog.metrics.${id}`) }))}
+                        onValueChange={(id) => useUsageStore.getState().setMetric(id)}
+                        label={t('dialog.metric')}
+                    />
+                    <IconButton icon={RefreshCw} label={t('dialog.rescan')} busy={loading} onClick={reload} disabled={loading || !answering} />
+                    <CloseButton label={t('dialog.close')} dialog />
+                </div>
+            </header>
+            <div className="flex min-h-0 grow flex-col gap-6 overflow-y-auto px-6 pt-4 pb-6 max-[960px]:px-4">
+                {notice?.(shown !== null)}
+                {noRoots && (
+                    <EmptyState className={DIALOG_CENTER} icon={ChartNoAxesColumn} action={<HostAgents />}>
+                        {t('empty.noTranscripts')}
+                    </EmptyState>
+                )}
+                {/* The skeleton is the wait for an answer; without a link there is no answer on the way. */}
+                {shown === null && answering && <LoadingBody />}
+                {shown === null && !answering && (
+                    <EmptyState className={DIALOG_CENTER} icon={ChartNoAxesColumn} action={<HostAgents />}>
+                        {t('empty.noUsage')}
+                    </EmptyState>
+                )}
+                {shown !== null && derived !== null && !noRoots && (
+                    <>
+                        <div className="grid gap-6 lg:grid-cols-[18rem_1fr]">
+                            <UsageSummary
+                                metric={metric}
+                                costUsd={derived.costUsd}
+                                totals={derived.totals}
+                                sessions={shown.sessions}
+                                providers={derived.providers}
+                            />
+                            <UsageChart slots={derived.slots} providers={derived.active} format={value} labelEvery={labelEveryFor(derived.slots.length)} />
+                        </div>
+                        <UsageTiles totals={derived.totals} cacheSavingsUsd={derived.cacheSavingsUsd} />
+                        <UsageBreakdown summary={shown} metric={metric} providers={derived.active} />
+                        <UsageLimits />
+                    </>
+                )}
+                {/* Last in a column that fills the dialog, so it sits at the bottom even under a short page. */}
+                <Provenance />
+            </div>
+        </div>
+    );
+}

package/src/usage/UsagePane.tsx

@@ -0,0 +1,52 @@
+import { ChartNoAxesColumn } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { SettingsRow, SettingsSection } from '@adecore/ui/settings';
+import { Segmented, Button, Icon } from '@adecore/ui';
+import { useUsage, useUsageStore } from '../state/usage';
+import type { UsageCurrency } from './format';
+
+const CURRENCIES: readonly UsageCurrency[] = ['USD', 'EUR'];
+
+/*
+ * Every price a model has is in dollars, so the only choice here is what to read them in. The usage
+ * page is a dialog of its own, so `onOpenPage` is where the app lets settings step aside for it.
+ */
+export function UsagePane({ onOpenPage }: { onOpenPage(): void }) {
+    const { t } = useTranslation('agent-usage');
+    const currency = useUsage((s) => s.currency);
+    const rate = useUsage((s) => s.summary?.rate ?? null);
+
+    return (
+        <SettingsSection>
+            <SettingsRow
+                searchId="usage.currency"
+                label={t('settings.currency.label')}
+                description={
+                    currency === 'USD'
+                        ? t('settings.currency.dollars')
+                        : rate === null
+                          ? t('settings.currency.noRate')
+                          : t('settings.currency.converted', { date: rate.date })
+                }
+                control={
+                    <Segmented
+                        value={currency}
+                        options={CURRENCIES.map((id) => ({ id, label: t(`settings.currency.options.${id}`) }))}
+                        onValueChange={(id) => useUsageStore.getState().setCurrency(id)}
+                        label={t('settings.currency.label')}
+                    />
+                }
+            />
+            <SettingsRow
+                searchId="usage.page"
+                label={t('settings.page.label')}
+                description={t('settings.page.description')}
+                control={
+                    <Button variant="secondary" onClick={onOpenPage}>
+                        <Icon icon={ChartNoAxesColumn} size={14} /> {t('settings.page.open')}
+                    </Button>
+                }
+            />
+        </SettingsSection>
+    );
+}

package/src/usage/UsageSummary.tsx

@@ -0,0 +1,50 @@
+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 { useMoney } from './money';
+import type { ProviderTotal } from './summary';
+
+interface UsageSummaryProps {
+    metric: UsageMetric;
+    costUsd: number;
+    totals: UsageTotals;
+    sessions: number;
+    providers: readonly ProviderTotal[];
+}
+
+/*
+ * The number the page is about, with a row per provider under it. Those rows double as the chart's
+ * legend, which is why the mark is the same color the bar segment is drawn in.
+ */
+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>
+                <p className="text-4xl font-semibold tabular-nums">{metric === 'cost' ? money(costUsd) : formatTokens(totalTokensOf(totals))}</p>
+                {/* A subscription is not billed per call, so the label spells out that these are API rates. */}
+                <p className="mt-1 text-xs text-text-muted">
+                    {t('summary.sessions', { count: sessions, sessions: formatCount(sessions) })} ·{' '}
+                    {t('summary.calls', { count: totals.calls, calls: formatCount(totals.calls) })} · {t('summary.apiRates')}
+                </p>
+            </div>
+            <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>
+                        <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))}
+                        </span>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}

package/src/usage/UsageTiles.tsx

@@ -0,0 +1,34 @@
+import { useTranslation } from 'react-i18next';
+import type { UsageTotals } from '@adecore/agent-contracts';
+import { totalTokensOf } from '@adecore/agent-contracts';
+import { formatTokens } from './format';
+import { useMoney } from './money';
+
+interface UsageTilesProps {
+    totals: UsageTotals;
+    cacheSavingsUsd: number;
+}
+
+/* What the period moved, split by the kinds of token that are priced differently. */
+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) },
+        { id: 'cachedInput', value: formatTokens(totals.cacheRead) },
+        { id: 'cacheWrites', value: formatTokens(totals.cacheWrite) },
+        { 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) => (
+                <div key={tile.id} className="rounded-xl border border-border bg-surface px-4 py-3">
+                    <p className="text-xs text-text-muted">{t(`tiles.${tile.id}`)}</p>
+                    <p className="mt-0.5 text-base font-medium tabular-nums">{tile.value}</p>
+                </div>
+            ))}
+        </div>
+    );
+}

package/src/usage/format.ts

@@ -0,0 +1,71 @@
+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. */
+export type UsageCurrency = 'USD' | 'EUR';
+
+/* Every number on this page is read in the region of the machine looking at it, as a bank statement
+   would be: `$5,480.96` in the US, `$ 5.480,96` in the Netherlands. The labels stay English. */
+export function formatCount(value: number): string {
+    return formatNumber(value);
+}
+
+export { formatTokens };
+
+/*
+ * What a call cost, in the currency the page is set to. Prices are in dollars, so anything else is
+ * that amount at the day's reference rate; without a rate the page stays in dollars rather than
+ * showing a euro sign in front of a dollar amount.
+ */
+export function moneyFormat(currency: UsageCurrency, rate: UsageRate | null): (usd: number) => string {
+    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);
+    };
+}
+
+export const PROVIDER_LABELS: Record<UsageProvider, string> = { claude: 'Claude Code', codex: 'Codex' };
+
+export const PROVIDER_COLORS: Record<UsageProvider, string> = { claude: 'var(--chart-claude)', codex: 'var(--chart-codex)' };
+
+/* A slot is `2026-09-10` or `2026-09-10T14`, already in the viewer's own zone, so it is read as
+   plain wall clock and never handed to a parser that would shift it back. */
+function dateOfSlot(slot: string): Date {
+    return new Date(Number(slot.slice(0, 4)), Number(slot.slice(5, 7)) - 1, Number(slot.slice(8, 10)));
+}
+
+function hourOfSlot(slot: string): number | null {
+    return slot.length > 10 ? Number(slot.slice(11, 13)) : 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));
+}
+
+export function formatDate(at: number): string {
+    return formatDay(at);
+}
+
+/* A path under a row that already carries the name: enough of the tail to tell two checkouts of the
+   same repository apart, without the home directory nobody needs to read again. */
+export function shortPath(path: string): string {
+    const parts = path.split('/').filter(Boolean);
+    return parts.length <= 3 ? path : `…/${parts.slice(-3).join('/')}`;
+}