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

package/src/usage/LimitsList.tsx

@@ -0,0 +1,232 @@
+import { Fragment } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import type { UsageLimitsSnapshot, UsageWindow } from '@adecore/agent-contracts';
+import { limitsAccountId } from '../agents/account-limits';
+import { AccountDot } from '../agents/AccountDot';
+import { Tooltip } from '@adecore/ui';
+import { formatClock, formatWeekdayClock, isSameDay, formatCountdown, formatPercent } from '@adecore/ui/format';
+import { ProviderLogo } from '../agents/ProviderLogo';
+import { PROVIDER_COLORS, PROVIDER_LABELS } from './format';
+import { accountNote, explain, isSignedOut, nextReset, type LimitAccount, type LimitGroup } from './limit-groups';
+
+/* Red where a window is nearly spent, amber where it is worth knowing. A window with room to spare
+   is not news, so it takes the text color rather than a hue that competes with the two that are. */
+function toneOf(used: number): string {
+    return used >= 0.9 ? 'bg-status-error' : used >= 0.7 ? 'bg-status-needs-you' : 'bg-text';
+}
+
+/* A time of day when the reset is today, a weekday and a time when it is not. */
+function resetAtLabel(resetsAt: number, now: number): string {
+    return isSameDay(resetsAt, now) ? formatClock(resetsAt) : formatWeekdayClock(resetsAt);
+}
+
+/* How long the window still has, or nothing once it has run out. */
+function resetInLabel(resetsAt: number, now: number): string | null {
+    return resetsAt <= now ? null : formatCountdown(resetsAt - now);
+}
+
+/* How much of the window has run, or null when the provider named neither a reset nor a length. */
+function elapsedShare(window: UsageWindow, now: number): number | null {
+    if (window.resetsAt === null || window.durationMs === null || window.durationMs <= 0) {
+        return null;
+    }
+    return Math.min(1, Math.max(0, 1 - (window.resetsAt - now) / window.durationMs));
+}
+
+export function WindowBar({ window, now, compact }: { window: UsageWindow; now: number; compact: boolean }) {
+    const { t } = useTranslation('agent-usage');
+    const percent = Math.round(window.used * 100);
+    const elapsed = elapsedShare(window, now);
+    // The bar fills as the quota is spent, so the mark beside it is how much of the window has run.
+    const mark = elapsed === null ? null : Math.round(elapsed * 100);
+    const resetsAt = window.resetsAt === null ? null : resetAtLabel(window.resetsAt, now);
+    const resetsIn = window.resetsAt === null ? null : resetInLabel(window.resetsAt, now);
+
+    const bar = (
+        <div
+            role="progressbar"
+            aria-label={t('limits.bar', { window: window.label, percent })}
+            aria-valuenow={percent}
+            aria-valuemin={0}
+            aria-valuemax={100}
+            className={clsx('relative cursor-default', compact ? 'h-4' : 'h-6')}
+        >
+            <div className={clsx('absolute inset-x-0 rounded-full bg-surface-sunken', compact ? 'inset-y-1' : 'inset-y-1.5')} />
+            {/* Past a hundred there is nothing left to fill, so the bar stops rather than overflows. */}
+            <div
+                className={clsx('absolute left-0 rounded-full', compact ? 'inset-y-1' : 'inset-y-1.5', toneOf(window.used))}
+                style={{ width: `${Math.min(100, percent)}%` }}
+            />
+            {/* Past the mark is spending faster than the window gives back, short of it slower. */}
+            {mark !== null && (
+                // Inside the fill the line has to be cut out of it, outside it drawn on the track.
+                <span
+                    aria-hidden
+                    className={clsx('absolute inset-y-0.5 w-px -translate-x-1/2', mark <= percent ? 'bg-surface' : 'bg-text-muted')}
+                    style={{ left: `${mark}%` }}
+                />
+            )}
+        </div>
+    );
+
+    return (
+        <div className="flex flex-col gap-1">
+            <div className="flex items-baseline gap-2 text-xs">
+                <span className="text-text">{window.label}</span>
+                <span className="ml-auto tabular-nums text-text-muted">{t('limits.used', { percent })}</span>
+            </div>
+            {compact ? (
+                bar
+            ) : (
+                <Tooltip
+                    label={
+                        <span className="flex flex-col gap-0.5">
+                            <span>
+                                {t('limits.used', { percent })}
+                                {mark !== null && ` · ${t('limits.windowPassed', { percent: mark })}`}
+                            </span>
+                            {mark !== null && <span className="text-text-muted">{mark <= percent ? t('limits.faster') : t('limits.slower')}</span>}
+                        </span>
+                    }
+                >
+                    {bar}
+                </Tooltip>
+            )}
+            {/* Under the bar rather than beside the label. A weekday and a countdown are too long to
+                share that line, and a reset that wrapped would read as two of them. */}
+            {resetsAt !== null && (
+                <p className="text-xs whitespace-nowrap text-text-faint">
+                    {t('limits.resets', { at: resetsAt })}
+                    {resetsIn !== null && ` · ${resetsIn}`}
+                </p>
+            )}
+        </div>
+    );
+}
+
+interface LimitsListProps {
+    limits: UsageLimitsSnapshot;
+    now: number;
+    /* Shorter bars, and no tooltip of their own, what a list that is itself a hover card needs. */
+    compact?: boolean;
+}
+
+/* Every provider with what its plan has left, shared by the usage page and the sidebar card. */
+export function LimitsList({ limits, now, compact = false }: LimitsListProps) {
+    return (
+        <div className={clsx('flex flex-col', compact ? 'gap-4' : 'gap-6')}>
+            {limits.providers.map((provider) => {
+                const note = explain(provider);
+                return (
+                    <div key={limitsAccountId(provider)} className="flex flex-col gap-2">
+                        <p className="flex items-center gap-2 text-xs font-medium">
+                            <span style={{ color: PROVIDER_COLORS[provider.kind] }}>
+                                <ProviderLogo provider={provider.kind} />
+                            </span>
+                            {PROVIDER_LABELS[provider.kind]}
+                            {provider.plan !== null && <span className="text-text-muted">· {provider.plan}</span>}
+                        </p>
+                        {note === null ? (
+                            <div className={clsx('flex flex-col', compact ? 'gap-3' : 'gap-4')}>
+                                {provider.windows.map((window) => (
+                                    <WindowBar key={window.id} window={window} now={now} compact={compact} />
+                                ))}
+                            </div>
+                        ) : (
+                            <p className="text-xs text-text-faint">{note}</p>
+                        )}
+                    </div>
+                );
+            })}
+        </div>
+    );
+}
+
+/* One window on one line, for a card that holds several accounts: the label, a thin bar with the elapsed mark, the percent. */
+function WindowLine({ window, now }: { window: UsageWindow; now: number }) {
+    const { t } = useTranslation('agent-usage');
+    const percent = Math.round(window.used * 100);
+    const elapsed = elapsedShare(window, now);
+    const mark = elapsed === null ? null : Math.round(elapsed * 100);
+    return (
+        <>
+            <span className="text-text-muted">{window.label}</span>
+            <div
+                role="progressbar"
+                aria-label={t('limits.bar', { window: window.label, percent })}
+                aria-valuenow={percent}
+                aria-valuemin={0}
+                aria-valuemax={100}
+                className="relative h-1.5 rounded-full bg-surface-sunken"
+            >
+                <div className={clsx('absolute inset-y-0 left-0 rounded-full', toneOf(window.used))} style={{ width: `${Math.min(100, percent)}%` }} />
+                {mark !== null && (
+                    // Cut out of the fill in the popup's own color, drawn on the track past it.
+                    <span
+                        aria-hidden
+                        className={clsx('absolute -inset-y-0.5 w-px -translate-x-1/2', mark <= percent ? 'bg-surface-raised' : 'bg-text-muted')}
+                        style={{ left: `${mark}%` }}
+                    />
+                )}
+            </div>
+            <span className={clsx('text-right tabular-nums', window.used >= 0.9 ? 'text-status-error' : 'text-text')}>{formatPercent(percent)}</span>
+        </>
+    );
+}
+
+function AccountLines({ account, now }: { account: LimitAccount; now: number }) {
+    const { t } = useTranslation('agent-usage');
+    const signedOut = isSignedOut(account);
+    const note = signedOut ? null : accountNote(account);
+    const windows = signedOut || note !== null ? [] : (account.entry?.windows ?? []);
+    const next = nextReset(windows, now);
+    const resetsIn = next === null ? null : resetInLabel(next.resetsAt, now);
+    return (
+        <>
+            <p className="col-span-full mt-2 flex min-w-0 items-center gap-2">
+                <AccountDot color={account.color} />
+                <span className="truncate">{account.name}</span>
+                {signedOut ? (
+                    <span className="shrink-0 text-text-faint">· {t('limits.signedOut')}</span>
+                ) : (
+                    account.entry?.plan && <span className="shrink-0 text-text-muted">· {account.entry.plan}</span>
+                )}
+            </p>
+            {note !== null && <p className="col-span-full text-text-faint">{note}</p>}
+            {windows.map((window) => (
+                <WindowLine key={window.id} window={window} now={now} />
+            ))}
+            {next !== null && (
+                <p className="col-span-full whitespace-nowrap text-text-faint">
+                    {t('limits.nextReset', { window: next.label, at: resetAtLabel(next.resetsAt, now) })}
+                    {resetsIn !== null && ` · ${resetsIn}`}
+                </p>
+            )}
+        </>
+    );
+}
+
+/*
+ * The hover card once a CLI has several accounts: a block per account, a line per window. One grid over
+ * the whole card, so the bars of every account start and end at the same place whatever their labels.
+ */
+export function AccountLimitsList({ groups, now }: { groups: readonly LimitGroup[]; now: number }) {
+    return (
+        <div className="grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-x-2 gap-y-1 text-xs">
+            {groups.map((group) => (
+                <Fragment key={group.kind}>
+                    <p className="col-span-full mt-3 flex items-center gap-2 font-medium first:mt-0">
+                        <span style={{ color: PROVIDER_COLORS[group.kind] }}>
+                            <ProviderLogo provider={group.kind} />
+                        </span>
+                        {PROVIDER_LABELS[group.kind]}
+                    </p>
+                    {group.accounts.map((account) => (
+                        <AccountLines key={account.id} account={account} now={now} />
+                    ))}
+                </Fragment>
+            ))}
+        </div>
+    );
+}

package/src/usage/UsageBreakdown.tsx

@@ -0,0 +1,210 @@
+import { useState } from 'react';
+import clsx from 'clsx';
+import { CircleHelp, Folder, Info } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import type { UsageModel, UsageProject, UsageProvider, UsageSummaryResult } from '@adecore/agent-contracts';
+import { EmptyState, Icon, SectionLabel, Segmented, Tooltip } from '@adecore/ui';
+import { useChatScope } from '../scope';
+import { chatHost } from '../host';
+import type { UsageMetric } from '../state/usage';
+import { ProviderLogo } from '../agents/ProviderLogo';
+import { USAGE_PROVIDERS, totalTokensOf } from '@adecore/agent-contracts';
+import { modelNameFromSlug } from '../agents/model-name';
+import { formatCount, formatTokens, PROVIDER_COLORS, PROVIDER_LABELS, shortPath, slotLabel } from './format';
+import { useMoney } from './money';
+import { deriveDays } from './summary';
+
+type Breakdown = 'models' | 'projects' | 'day';
+
+/* The row of every table, the same height and the same hover as a commit row in the git panel. */
+const ROW = 'flex h-8 items-center gap-2 rounded-md px-2 text-xs hover:bg-surface-hover';
+
+const HEAD = 'flex h-6 items-center gap-2 px-2 text-xs text-text-faint';
+
+/* A row is padded so its hover has room around the text, and the table pulls that padding back off
+   again. The first column then starts on the same line as every other section of the page. */
+const TABLE = '-mx-2 flex flex-col';
+
+const TABS: readonly Breakdown[] = ['models', 'projects', 'day'];
+
+/* A share of the biggest row, never under one pixel. A row that did something has to be visible. */
+function barWidth(value: number, top: number): number {
+    return value <= 0 || top <= 0 ? 0 : Math.max(1, Math.round((value / top) * 100));
+}
+
+function ProviderMark({ provider }: { provider: UsageProvider }) {
+    return (
+        <Tooltip label={PROVIDER_LABELS[provider]}>
+            <span style={{ color: PROVIDER_COLORS[provider] }}>
+                <ProviderLogo provider={provider} />
+            </span>
+        </Tooltip>
+    );
+}
+
+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}>
+                <span className="grow">{t('breakdown.models.model')}</span>
+                <span className="w-16 text-right">{t('breakdown.models.calls')}</span>
+                <span className="w-16 text-right">{t('breakdown.models.input')}</span>
+                <span className="w-16 text-right">{t('breakdown.models.output')}</span>
+                <span className="w-24 text-right">{t('breakdown.models.cache')}</span>
+                <span className="w-20 text-right">{t('breakdown.models.cost')}</span>
+                <span className="w-12 text-right">{t('breakdown.models.share')}</span>
+            </div>
+            {sorted.map((model) => (
+                <div key={`${model.provider} ${model.model}`} className={ROW}>
+                    <ProviderMark provider={model.provider} />
+                    <span className="truncate">{modelNameFromSlug(model.model)}</span>
+                    {model.priceBasis === 'family' && model.pricedAs !== null && (
+                        <Tooltip label={t('breakdown.models.pricedAs', { model: modelNameFromSlug(model.pricedAs) })}>
+                            <span className="text-text-faint">
+                                <Icon icon={Info} size={12} />
+                            </span>
+                        </Tooltip>
+                    )}
+                    <span className="ml-auto w-16 text-right tabular-nums text-text-muted">{formatCount(model.totals.calls)}</span>
+                    <span className="w-16 text-right tabular-nums text-text-muted">{formatTokens(model.totals.input)}</span>
+                    <span className="w-16 text-right tabular-nums text-text-muted">{formatTokens(model.totals.output)}</span>
+                    <span className="w-24 text-right tabular-nums text-text-muted">
+                        {formatTokens(model.totals.cacheRead)} / {formatTokens(model.totals.cacheWrite)}
+                    </span>
+                    <span className="w-20 text-right tabular-nums">
+                        {model.costUsd === null ? (
+                            <Tooltip label={t('breakdown.models.noPrice')}>
+                                <span className="inline-flex items-center gap-1 text-text-faint">
+                                    <Icon icon={CircleHelp} size={12} />?
+                                </span>
+                            </Tooltip>
+                        ) : (
+                            money(model.costUsd)
+                        )}
+                    </span>
+                    <span className="w-12 text-right tabular-nums text-text-muted">
+                        {model.costUsd === null || total <= 0 ? '' : `${Math.round((model.costUsd / total) * 100)}%`}
+                    </span>
+                </div>
+            ))}
+        </div>
+    );
+}
+
+/* One project's row, under the name and the mark its host gives it, or its folder's own under a folder. */
+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 = chatHost().useProjectLook(useChatScope().id, project.projectId);
+    return (
+        /* The mark sits on the title rather than between the two lines, so a column of icons lines
+           up with the names beside it and not with the paths under them. */
+        <div className={`${ROW} h-auto items-start py-1.5`}>
+            <span className="mt-px flex">
+                {look?.mark ?? (
+                    <span className="text-text-faint">
+                        <Icon icon={Folder} size={16} />
+                    </span>
+                )}
+            </span>
+            <span className="flex min-w-0 grow flex-col">
+                <span className="truncate">{look?.name ?? project.name}</span>
+                <span className="truncate text-text-faint">{shortPath(project.folder)}</span>
+            </span>
+            <span className="mt-1 flex h-[9px] w-32 shrink-0 overflow-hidden rounded-full bg-surface-sunken">
+                {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>
+            <span className="w-20 text-right tabular-nums">{money(project.costUsd)}</span>
+            <span className="w-16 text-right tabular-nums text-text-muted">{formatTokens(totalTokensOf(project.totals))}</span>
+        </div>
+    );
+}
+
+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) => (
+                <ProjectRow key={project.folder} project={project} top={top} money={money} />
+            ))}
+        </div>
+    );
+}
+
+/* The chart written out per calendar day, a column per provider that did anything in the period. */
+function DayRows({ summary, providers }: { summary: UsageSummaryResult; providers: readonly UsageProvider[] }) {
+    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}>
+                <span className="grow">{t('breakdown.days.day')}</span>
+                {providers.map((provider) => (
+                    <span key={provider} className="w-20 text-right">
+                        {PROVIDER_LABELS[provider]}
+                    </span>
+                ))}
+                <span className="w-20 text-right">{t('breakdown.days.total')}</span>
+                <span className="w-16 text-right">{t('breakdown.days.tokens')}</span>
+            </div>
+            {rows.map((row) => (
+                <div key={row.slot} className={ROW}>
+                    <span className="grow truncate">{slotLabel(row.slot)}</span>
+                    {providers.map((provider) => (
+                        <span key={provider} className="w-20 text-right tabular-nums text-text-muted">
+                            {row.costByProvider[provider] === undefined ? '' : money(row.costByProvider[provider]!)}
+                        </span>
+                    ))}
+                    <span className="w-20 text-right tabular-nums">{money(row.costUsd)}</span>
+                    <span className="w-16 text-right tabular-nums text-text-muted">{formatTokens(row.tokens)}</span>
+                </div>
+            ))}
+        </div>
+    );
+}
+
+interface UsageBreakdownProps {
+    summary: UsageSummaryResult;
+    metric: UsageMetric;
+    /* The providers that did anything, in the order the chart stacks them. */
+    providers: readonly UsageProvider[];
+}
+
+/* The same period cut three ways: which model, which checkout, and which day it went on. */
+export function UsageBreakdown({ summary, metric, providers }: UsageBreakdownProps) {
+    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">
+                <SectionLabel render={<h2 />}>{t('breakdown.title')}</SectionLabel>
+                <div className="ml-auto">
+                    <Segmented
+                        value={tab}
+                        options={TABS.map((id) => ({ id, label: t(`breakdown.tabs.${id}`) }))}
+                        onValueChange={(id) => setTab(id)}
+                        label={t('breakdown.title')}
+                    />
+                </div>
+            </div>
+            {tab === 'models' && <ModelRows models={summary.models} metric={metric} total={total} />}
+            {tab === 'projects' && <ProjectRows projects={summary.projects} />}
+            {tab === 'day' && <DayRows summary={summary} providers={providers} />}
+        </section>
+    );
+}

package/src/usage/UsageChart.tsx

@@ -0,0 +1,113 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { UsageProvider } from '@adecore/agent-contracts';
+import { Surface, useMeasuredWidth } from '@adecore/ui';
+import { PROVIDER_COLORS, PROVIDER_LABELS, slotAxisLabel, slotLabel } from './format';
+import { niceScale, type ChartSlot } from './summary';
+
+interface UsageChartProps {
+    slots: readonly ChartSlot[];
+    providers: readonly UsageProvider[];
+    format(value: number): string;
+    /* Which x labels to draw, every nth slot, so 24 hours and 90 days both stay readable. */
+    labelEvery: number;
+}
+
+const HEIGHT = 224;
+const TOOLTIP_WIDTH = 168;
+/* A bar that is dimmed still has to read as its own color, so the rest keeps well over half of it. */
+const DIMMED = 0.55;
+
+/*
+ * One stacked bar per slot, a segment per provider. Stacked rather than layered areas, since the total
+ * of a day is the height of its bar, and the smaller provider never disappears under the larger one.
+ */
+export function UsageChart({ slots, providers, format, labelEvery }: UsageChartProps) {
+    const { t } = useTranslation('agent-usage');
+    const [measure, width] = useMeasuredWidth();
+    const [hovered, setHovered] = useState<number | null>(null);
+    const scale = niceScale(Math.max(...slots.map((slot) => slot.total), 0));
+    const band = slots.length === 0 ? 0 : width / slots.length;
+    const barWidth = Math.max(1, Math.round(band * 0.62));
+    const ticks = Array.from({ length: Math.round(scale.max / scale.step) + 1 }, (_, index) => index * scale.step);
+    const active = hovered === null ? null : slots[hovered];
+
+    const onPointerMove = (e: React.PointerEvent<HTMLDivElement>): void => {
+        const bounds = e.currentTarget.getBoundingClientRect();
+        const index = band === 0 ? -1 : Math.floor((e.clientX - bounds.left) / band);
+        setHovered(index >= 0 && index < slots.length ? index : null);
+    };
+
+    /* Near the right edge the card would run off the column, so it hangs from the other side. */
+    const tooltipLeft =
+        hovered === null ? 0 : Math.round(Math.min(Math.max(0, hovered * band + band / 2 - TOOLTIP_WIDTH / 2), Math.max(0, width - TOOLTIP_WIDTH)));
+
+    return (
+        <div className="flex flex-col">
+            <div ref={measure} className="relative" style={{ height: HEIGHT }} onPointerMove={onPointerMove} onPointerLeave={() => setHovered(null)}>
+                <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>
+                        );
+                    })}
+                    {hovered !== null && (
+                        <line
+                            x1={Math.round(hovered * band + band / 2) + 0.5}
+                            x2={Math.round(hovered * band + band / 2) + 0.5}
+                            y1={0}
+                            y2={HEIGHT}
+                            stroke="var(--border-strong)"
+                            strokeWidth={1}
+                        />
+                    )}
+                </svg>
+                {active && (
+                    <Surface className="pointer-events-none absolute top-2 rounded-lg p-2 text-xs" style={{ left: tooltipLeft, width: TOOLTIP_WIDTH }}>
+                        <p className="mb-1 font-medium">{slotLabel(active.slot)}</p>
+                        {providers.map((provider) => (
+                            <p key={provider} className="flex items-center gap-1.5 text-text-muted">
+                                <span className="size-2 shrink-0 rounded-full" style={{ background: PROVIDER_COLORS[provider] }} />
+                                {PROVIDER_LABELS[provider]}
+                                <span className="ml-auto tabular-nums text-text">{format(active.byProvider[provider] ?? 0)}</span>
+                            </p>
+                        ))}
+                        <p className="mt-1 flex items-center gap-1.5 border-t border-border pt-1 font-medium">
+                            {t('chart.total')}
+                            <span className="ml-auto tabular-nums">{format(active.total)}</span>
+                        </p>
+                    </Surface>
+                )}
+            </div>
+            <div className="relative mt-2 h-4">
+                {slots.map((slot, index) =>
+                    index % labelEvery === 0 ? (
+                        <span
+                            key={slot.slot}
+                            className="absolute -translate-x-1/2 text-xs whitespace-nowrap text-text-faint"
+                            style={{ left: Math.round(index * band + band / 2) }}
+                        >
+                            {slotAxisLabel(slot.slot)}
+                        </span>
+                    ) : null
+                )}
+            </div>
+        </div>
+    );
+}

package/src/usage/UsageDialog.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+import i18next from 'i18next';
+import { Dialog } from '@adecore/ui';
+
+/*
+ * The frame of the usage page: larger than the settings, since the chart and the breakdown need the
+ * width. What goes in it (`UsagePage`, in an `ErrorBoundary` of the app's) mounts only while it is
+ * open, so nothing is scanned behind a closed dialog. It is a dialog and not a view, since none of it
+ * belongs to one project.
+ */
+export function UsageDialog({ open, onOpenChange, children }: { open: boolean; onOpenChange(open: boolean): void; children: ReactNode }) {
+    return (
+        <Dialog.Root open={open} onOpenChange={onOpenChange}>
+            <Dialog.Popup className="flex h-[820px] w-[1080px] flex-col">
+                {children}
+                <Dialog.Description className="sr-only">{i18next.t('agent-usage:dialog.description')}</Dialog.Description>
+            </Dialog.Popup>
+        </Dialog.Root>
+    );
+}