@ruimte/agents-react 0.0.0 → 0.7.0

package/dist/usage/UsagePage.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from 'react';
+interface UsagePageProps {
+    pickers?: ReactNode;
+    notice?(stale: boolean): ReactNode;
+}
+export declare function UsagePage({ pickers, notice }: UsagePageProps): import("react").JSX.Element;
+export {};

package/dist/usage/UsagePage.js

@@ -0,0 +1,161 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState, useSyncExternalStore } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { Dialog } from '@base-ui-components/react/dialog';
+import { ChartNoAxesColumn, RefreshCw } from 'lucide-react';
+import { USAGE_PROVIDERS } from '@ruimte/agent-contracts';
+import { Button } from '@ruimte/ui/Button';
+import { FORM_ERROR } from '@ruimte/ui/classes';
+import { CloseButton } from '@ruimte/ui/CloseButton';
+import { Segmented, Skeleton } from '@ruimte/ui/controls';
+import { EmptyState } from '@ruimte/ui/EmptyState';
+import { Icon } from '@ruimte/ui/Icon';
+import { Select } from '@ruimte/ui/Select';
+import { Tooltip } from '@ruimte/ui/Tooltip';
+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 } from '../state/usage';
+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 = ['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. */
+const useAnswering = (transport) => useSyncExternalStore(useCallback((onChange) => 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 (_jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx("p", { className: "text-xs text-text-muted", children: installed.length === 0 ? t('agents.none') : t('agents.installed', { list: installed.map((provider) => provider.name).join(', ') }) }), _jsx(Button, { size: "sm", variant: "secondary", onClick: () => chatHost().openSettings('agents'), children: t('agents.settings') })] }));
+}
+/*
+ * 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.
+ */
+const useSummary = (scopeId, transport, period, account) => {
+    useEffect(() => {
+        const subscribe = () => 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(() => {
+        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 (_jsx("p", { className: `${FORM_ERROR} mt-auto text-center`, role: "alert", children: t('provenance.failed') }));
+    }
+    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 (_jsxs("p", { className: "mt-auto text-center text-xs text-text-muted", children: [t('provenance.scanned', { count: summary.scan.files, time: formatClock(summary.scan.at), files: formatCount(summary.scan.files) }), " \u00B7 ", prices, rate !== null && ` · ${rate}`] }));
+}
+function LoadingBody() {
+    return (_jsxs("div", { className: "flex flex-col gap-6", children: [_jsxs("div", { className: "grid gap-6 lg:grid-cols-[18rem_1fr]", children: [_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(Skeleton, { className: "h-10 w-40" }), _jsx(Skeleton, { className: "w-56" }), _jsx(Skeleton, { className: "w-48" })] }), _jsx(Skeleton, { className: "h-56 w-full" })] }), _jsx("div", { className: "grid grid-cols-2 gap-2 md:grid-cols-6", children: [0, 1, 2, 3, 4, 5].map((tile) => (_jsx(Skeleton, { className: "h-16 w-full rounded-xl" }, tile))) })] }));
+}
+/*
+ * 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 }) {
+    const { t } = useTranslation('agent-usage');
+    if (!USAGE_PROVIDERS.some((kind) => accounts.filter((account) => account.kind === kind).length > 1)) {
+        return null;
+    }
+    return (_jsx(Select, { value: value ?? ALL_ACCOUNTS, items: [
+            { value: ALL_ACCOUNTS, label: t('dialog.accounts.all') },
+            ...accounts.map((account) => ({
+                value: account.id,
+                label: account.label,
+                icon: _jsx(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" }));
+}
+/*
+ * 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 }) {
+    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(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 (_jsxs("div", { className: "flex min-h-0 grow flex-col", children: [_jsxs("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", children: [_jsx(Dialog.Title, { className: "text-base font-semibold text-text", children: t('dialog.title') }), _jsxs("div", { className: "ml-auto flex flex-wrap items-center gap-2", children: [pickers, _jsx(AccountPicker, { accounts: summary?.accounts ?? [], value: account, onChange: setAccount }), _jsx(Segmented, { value: period, options: USAGE_PERIODS.map((entry) => ({ id: entry.id, label: t(`dialog.periods.${entry.id}`) })), onChange: (id) => useUsageStore.getState().setPeriod(id), label: t('dialog.period') }), _jsx(Segmented, { value: metric, options: METRICS.map((id) => ({ id, label: t(`dialog.metrics.${id}`) })), onChange: (id) => useUsageStore.getState().setMetric(id), label: t('dialog.metric') }), _jsx(Tooltip, { label: t('dialog.rescan'), name: true, children: _jsx("button", { className: "icon-btn", onClick: reload, disabled: loading || !answering, children: _jsx(Icon, { icon: RefreshCw, size: 16, className: clsx(loading && 'animate-spin') }) }) }), _jsx(CloseButton, { label: t('dialog.close'), dialog: true })] })] }), _jsxs("div", { className: "flex min-h-0 grow flex-col gap-6 overflow-y-auto px-6 pt-4 pb-6 max-[960px]:px-4", children: [notice?.(shown !== null), noRoots && (_jsx(EmptyState, { className: DIALOG_CENTER, icon: ChartNoAxesColumn, action: _jsx(HostAgents, {}), children: t('empty.noTranscripts') })), shown === null && answering && _jsx(LoadingBody, {}), shown === null && !answering && (_jsx(EmptyState, { className: DIALOG_CENTER, icon: ChartNoAxesColumn, action: _jsx(HostAgents, {}), children: t('empty.noUsage') })), shown !== null && derived !== null && !noRoots && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "grid gap-6 lg:grid-cols-[18rem_1fr]", children: [_jsx(UsageSummary, { metric: metric, costUsd: derived.costUsd, totals: derived.totals, sessions: shown.sessions, providers: derived.providers }), _jsx(UsageChart, { slots: derived.slots, providers: derived.active, format: value, labelEvery: labelEveryFor(derived.slots.length) })] }), _jsx(UsageTiles, { totals: derived.totals, cacheSavingsUsd: derived.cacheSavingsUsd }), _jsx(UsageBreakdown, { summary: shown, metric: metric, providers: derived.active }), _jsx(UsageLimits, {})] })), _jsx(Provenance, {})] })] }));
+}

package/dist/usage/UsagePane.d.ts

@@ -0,0 +1,3 @@
+export declare function UsagePane({ onOpenPage }: {
+    onOpenPage(): void;
+}): import("react").JSX.Element;

package/dist/usage/UsagePane.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChartNoAxesColumn } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { SettingsRow } from '@ruimte/ui/settings/SettingsRow';
+import { SettingsSection } from '@ruimte/ui/settings/SettingsSection';
+import { Segmented } from '@ruimte/ui/controls';
+import { useUsage, useUsageStore } from '../state/usage';
+import { Button } from '@ruimte/ui/Button';
+import { Icon } from '@ruimte/ui/Icon';
+const CURRENCIES = ['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 }) {
+    const { t } = useTranslation('agent-usage');
+    const currency = useUsage((s) => s.currency);
+    const rate = useUsage((s) => s.summary?.rate ?? null);
+    return (_jsxs(SettingsSection, { children: [_jsx(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: _jsx(Segmented, { value: currency, options: CURRENCIES.map((id) => ({ id, label: t(`settings.currency.options.${id}`) })), onChange: (id) => useUsageStore.getState().setCurrency(id), label: t('settings.currency.label') }) }), _jsx(SettingsRow, { searchId: "usage.page", label: t('settings.page.label'), description: t('settings.page.description'), control: _jsxs(Button, { variant: "secondary", onClick: onOpenPage, children: [_jsx(Icon, { icon: ChartNoAxesColumn, size: 14 }), " ", t('settings.page.open')] }) })] }));
+}

package/dist/usage/UsageSummary.d.ts

@@ -0,0 +1,12 @@
+import type { UsageTotals } from '@ruimte/agent-contracts';
+import type { UsageMetric } from '../state/usage';
+import type { ProviderTotal } from './summary';
+interface UsageSummaryProps {
+    metric: UsageMetric;
+    costUsd: number;
+    totals: UsageTotals;
+    sessions: number;
+    providers: readonly ProviderTotal[];
+}
+export declare function UsageSummary({ metric, costUsd, totals, sessions, providers }: UsageSummaryProps): import("react").JSX.Element;
+export {};

package/dist/usage/UsageSummary.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { ProviderLogo } from '../agents/ProviderLogo';
+import { totalTokensOf } from '@ruimte/agent-contracts';
+import { formatCount, formatTokens, PROVIDER_COLORS, PROVIDER_LABELS } from './format';
+import { useMoney } from './money';
+/*
+ * 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 }) {
+    const { t } = useTranslation('agent-usage');
+    const money = useMoney();
+    return (_jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("div", { children: [_jsx("p", { className: "text-4xl font-semibold tabular-nums", children: metric === 'cost' ? money(costUsd) : formatTokens(totalTokensOf(totals)) }), _jsxs("p", { className: "mt-1 text-xs text-text-muted", children: [t('summary.sessions', { count: sessions, sessions: formatCount(sessions) }), " \u00B7", ' ', t('summary.calls', { count: totals.calls, calls: formatCount(totals.calls) }), " \u00B7 ", t('summary.apiRates')] })] }), _jsx("div", { className: "flex flex-col gap-2", children: providers.map((provider) => (_jsxs("div", { className: "flex items-center gap-2 text-xs", children: [_jsx("span", { style: { color: PROVIDER_COLORS[provider.provider] }, children: _jsx(ProviderLogo, { provider: provider.provider }) }), _jsx("span", { className: "text-text", children: PROVIDER_LABELS[provider.provider] }), _jsxs("span", { className: "ml-auto tabular-nums text-text-muted", children: [money(provider.costUsd), " \u00B7 ", formatTokens(totalTokensOf(provider.totals))] })] }, provider.provider))) })] }));
+}

package/dist/usage/UsageTiles.d.ts

@@ -0,0 +1,7 @@
+import type { UsageTotals } from '@ruimte/agent-contracts';
+interface UsageTilesProps {
+    totals: UsageTotals;
+    cacheSavingsUsd: number;
+}
+export declare function UsageTiles({ totals, cacheSavingsUsd }: UsageTilesProps): import("react").JSX.Element;
+export {};

package/dist/usage/UsageTiles.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { totalTokensOf } from '@ruimte/agent-contracts';
+import { formatTokens } from './format';
+import { useMoney } from './money';
+/* What the period moved, split by the kinds of token that are priced differently. */
+export function UsageTiles({ totals, cacheSavingsUsd }) {
+    const { t } = useTranslation('agent-usage');
+    const money = useMoney();
+    const tiles = [
+        { 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 (_jsx("div", { className: "grid grid-cols-2 gap-2 md:grid-cols-6", children: tiles.map((tile) => (_jsxs("div", { className: "rounded-xl border border-border bg-surface px-4 py-3", children: [_jsx("p", { className: "text-xs text-text-muted", children: t(`tiles.${tile.id}`) }), _jsx("p", { className: "mt-0.5 text-base font-medium tabular-nums", children: tile.value })] }, tile.id))) }));
+}

package/dist/usage/format.d.ts

@@ -0,0 +1,14 @@
+import type { UsageProvider, UsageRate } from '@ruimte/agent-contracts';
+import { formatTokens } from '@ruimte/ui/format/number';
+export type UsageCurrency = 'USD' | 'EUR';
+export declare const formatCount: (value: number) => string;
+export { formatTokens };
+export declare const moneyFormat: (currency: UsageCurrency, rate: UsageRate | null) => ((usd: number) => string);
+export declare const formatUsd: (usd: number) => string;
+export declare const PROVIDER_LABELS: Record<UsageProvider, string>;
+export declare const PROVIDER_COLORS: Record<UsageProvider, string>;
+export declare const slotLabel: (slot: string) => string;
+export declare const slotAxisLabel: (slot: string) => string;
+export { formatClock } from '@ruimte/ui/format/datetime';
+export declare const formatDate: (at: number) => string;
+export declare const shortPath: (path: string) => string;

package/dist/usage/format.js

@@ -0,0 +1,50 @@
+import { formatDay, formatHour, formatWeekdayDay } from '@ruimte/ui/format/datetime';
+import { formatMoney, formatNumber, formatTokens } from '@ruimte/ui/format/number';
+/* 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 const formatCount = (value) => 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 const moneyFormat = (currency, rate) => {
+    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);
+    };
+};
+/* The dollar amounts of a page that has no summary yet, and of a tooltip that prices nothing. */
+export const formatUsd = moneyFormat('USD', null);
+export const PROVIDER_LABELS = { claude: 'Claude Code', codex: 'Codex' };
+export const PROVIDER_COLORS = { 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. */
+const dateOfSlot = (slot) => new Date(Number(slot.slice(0, 4)), Number(slot.slice(5, 7)) - 1, Number(slot.slice(8, 10)));
+const hourOfSlot = (slot) => (slot.length > 10 ? Number(slot.slice(11, 13)) : null);
+const atHour = (slot, hour) => {
+    const day = dateOfSlot(slot);
+    day.setHours(hour);
+    return day;
+};
+export const slotLabel = (slot) => {
+    const hour = hourOfSlot(slot);
+    return hour === null ? formatWeekdayDay(dateOfSlot(slot)) : formatHour(atHour(slot, hour));
+};
+export const slotAxisLabel = (slot) => {
+    const hour = hourOfSlot(slot);
+    return hour === null ? formatDay(dateOfSlot(slot)) : formatHour(atHour(slot, hour));
+};
+export { formatClock } from '@ruimte/ui/format/datetime';
+export const formatDate = (at) => 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 const shortPath = (path) => {
+    const parts = path.split('/').filter(Boolean);
+    return parts.length <= 3 ? path : `…/${parts.slice(-3).join('/')}`;
+};

package/dist/usage/limit-groups.d.ts

@@ -0,0 +1,22 @@
+import { type ProviderAccounts, type ProviderAccountStatus, type UsageLimitsProvider, type UsageLimitsSnapshot, type UsageProvider, type UsageWindow } from '@ruimte/agent-contracts';
+export interface LimitAccount {
+    id: string;
+    kind: UsageProvider;
+    name: string;
+    color: string | undefined;
+    entry: UsageLimitsProvider | null;
+    status: ProviderAccountStatus | null;
+}
+export interface LimitGroup {
+    kind: UsageProvider;
+    accounts: LimitAccount[];
+}
+export declare const limitGroups: (snapshot: UsageLimitsSnapshot, accounts: ProviderAccounts | null) => LimitGroup[];
+export declare const hasSeveralAccounts: (groups: readonly LimitGroup[]) => boolean;
+export declare const isSignedOut: (account: LimitAccount) => boolean;
+export declare const nextReset: (windows: readonly UsageWindow[], now: number) => (UsageWindow & {
+    resetsAt: number;
+}) | null;
+export declare const checkedLabel: (entry: UsageLimitsProvider, now: number) => string | null;
+export declare const explain: (provider: UsageLimitsProvider) => string | null;
+export declare const accountNote: (account: LimitAccount) => string | null;

package/dist/usage/limit-groups.js

@@ -0,0 +1,78 @@
+import i18next from 'i18next';
+import { USAGE_PROVIDERS } from '@ruimte/agent-contracts';
+import { limitsAccountId } from '../agents/account-limits';
+import { accountName, accountsOfKind, accountStatusLine } from '../agents/accounts';
+import { formatDuration } from '@ruimte/ui/format/duration';
+import { PROVIDER_LABELS } from './format';
+const MINUTE = 60_000;
+/*
+ * The plan numbers per CLI, one row per account. The machine only reads an account that is signed in,
+ * so an account that is on but signed out comes from the account list, where it can say why it has
+ * no numbers. An account that is off is left out, unless the machine still reads it (a CLI's default).
+ */
+export const limitGroups = (snapshot, accounts) => USAGE_PROVIDERS.flatMap((kind) => {
+    const known = accountsOfKind(accounts, kind);
+    const read = snapshot.providers
+        .filter((entry) => entry.kind === kind)
+        .map((entry) => {
+        const id = limitsAccountId(entry);
+        const account = known.find((each) => each.id === id);
+        return {
+            id,
+            kind,
+            name: account === undefined ? (entry.account?.label ?? PROVIDER_LABELS[kind]) : accountName(account, PROVIDER_LABELS[kind]),
+            color: account === undefined ? entry.account?.color : account.account.color,
+            entry,
+            status: account?.status ?? null
+        };
+    });
+    const unread = known
+        .filter((account) => account.account.enabled !== false && !read.some((row) => row.id === account.id))
+        .map((account) => ({
+        id: account.id,
+        kind,
+        name: accountName(account, PROVIDER_LABELS[kind]),
+        color: account.account.color,
+        entry: null,
+        status: account.status
+    }));
+    const rows = [...read, ...unread];
+    return rows.length === 0 ? [] : [{ kind, accounts: rows }];
+});
+/* Whether any CLI has more than one account, which is when the limits name the account of every row. */
+export const hasSeveralAccounts = (groups) => groups.some((group) => group.accounts.length > 1);
+export const isSignedOut = (account) => account.status?.state === 'signed-out';
+/* The window that resets first from now, the one reset a line per window has no room to repeat. */
+export const nextReset = (windows, now) => {
+    let next = 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;
+};
+/* When the numbers came in and from where: a read of the machine's own, or a turn that reported them. Null before the first read. */
+export const checkedLabel = (entry, now) => {
+    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;
+};
+/* Why a read account has no bars, or null when it has them. */
+export const explain = (provider) => {
+    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') {
+        return i18next.t('agent-usage:limits.noSubscription');
+    }
+    return provider.unavailable.message ?? i18next.t('agent-usage:limits.unreachable');
+};
+/* Why an account has no bars, or null when it has them. An account the machine does not read says what its login is doing. */
+export const accountNote = (account) => account.entry === null ? accountStatusLine(account.status, true).text : explain(account.entry);

package/dist/usage/limits.d.ts

@@ -0,0 +1,4 @@
+import type { UsageLimitsSnapshot } from '@ruimte/agent-contracts';
+import { type LimitGroup } from './limit-groups';
+export declare const useUsageLimits: () => UsageLimitsSnapshot | null;
+export declare const useLimitGroups: (limits: UsageLimitsSnapshot | null) => LimitGroup[];

package/dist/usage/limits.js

@@ -0,0 +1,58 @@
+import { useEffect, useMemo } from 'react';
+import { useChatScope } from '../scope';
+import { useProviderAccountsStore } from '../state/provider-accounts';
+import { useUsage, useUsageStore } from '../state/usage';
+import { limitGroups } from './limit-groups';
+/* Asking the CLIs is expensive, so everything that shows the windows shares one read per host. */
+const holds = new Map();
+/* On the scope's transport as it stands: reading the windows never makes the host connect, so they fill once it is connected for another reason. */
+const hold = (scope) => {
+    const link = scope.transport;
+    const scopeId = scope.id;
+    const ask = () => {
+        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: () => {
+            offChanged();
+            offStatus();
+        }
+    };
+};
+/* The snapshot of the host in scope, kept fresh for as long as anything shows it. */
+export const useUsageLimits = () => {
+    const limits = useUsage((s) => s.limits);
+    const scope = useChatScope();
+    useEffect(() => {
+        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);
+            }
+        };
+    }, [scope]);
+    return limits;
+};
+/* The snapshot per CLI and account, with the accounts of the same host it is read from. */
+export const useLimitGroups = (limits) => {
+    const { id } = useChatScope();
+    const accounts = useProviderAccountsStore((s) => s.byScope[id]?.accounts ?? null);
+    return useMemo(() => (limits === null ? [] : limitGroups(limits, accounts)), [limits, accounts]);
+};

package/dist/usage/money.d.ts

@@ -0,0 +1 @@
+export declare const useMoney: () => ((usd: number) => string);

package/dist/usage/money.js

@@ -0,0 +1,13 @@
+import { useMemo } from 'react';
+import { useUsage } from '../state/usage';
+import { moneyFormat } from './format';
+/*
+ * The formatter every amount on the page goes through: the currency that was chosen, at the rate
+ * the summary on screen carries. It is a hook rather than a prop because every row wants it and
+ * none of them wants to know where the rate came from.
+ */
+export const useMoney = () => {
+    const currency = useUsage((s) => s.currency);
+    const rate = useUsage((s) => s.summary?.rate ?? null);
+    return useMemo(() => moneyFormat(currency, rate), [currency, rate]);
+};

package/dist/usage/summary.d.ts

@@ -0,0 +1,34 @@
+import type { UsageProvider, UsageSummaryResult, UsageTotals } from '@ruimte/agent-contracts';
+import type { UsageMetric } from '../state/usage';
+export interface ChartSlot {
+    slot: string;
+    byProvider: Partial<Record<UsageProvider, number>>;
+    total: number;
+}
+export interface ProviderTotal {
+    provider: UsageProvider;
+    costUsd: number;
+    totals: UsageTotals;
+}
+export declare const niceScale: (max: number, ticks?: number) => {
+    max: number;
+    step: number;
+};
+export interface DerivedUsage {
+    slots: ChartSlot[];
+    providers: ProviderTotal[];
+    active: UsageProvider[];
+    totals: UsageTotals;
+    costUsd: number;
+    cacheSavingsUsd: number;
+}
+export declare const enumerateSlots: (summary: Pick<UsageSummaryResult, 'from' | 'to' | 'resolution'>) => string[];
+export declare const labelEveryFor: (slots: number) => number;
+export declare const deriveUsage: (summary: UsageSummaryResult, metric: UsageMetric) => DerivedUsage;
+export interface UsageDay {
+    slot: string;
+    costByProvider: Partial<Record<UsageProvider, number>>;
+    costUsd: number;
+    tokens: number;
+}
+export declare const deriveDays: (summary: UsageSummaryResult) => UsageDay[];

package/dist/usage/summary.js

@@ -0,0 +1,90 @@
+import { EMPTY_TOTALS, USAGE_PROVIDERS, addTotals, totalTokensOf } from '@ruimte/agent-contracts';
+/* Three or four round numbers up the side. The one piece of arithmetic a chart library would bring. */
+export const niceScale = (max, ticks = 4) => {
+    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 };
+};
+const pad = (value) => 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 const enumerateSlots = (summary) => {
+    if (summary.resolution === 'hour') {
+        return Array.from({ length: 24 }, (_, hour) => `${summary.to}T${pad(hour)}`);
+    }
+    const slots = [];
+    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())}`);
+        at.setDate(at.getDate() + 1);
+    }
+    return slots;
+};
+/* How often an x label fits: every third hour, every day, every week, every fortnight. */
+export const labelEveryFor = (slots) => (slots <= 10 ? 1 : slots <= 24 ? 3 : slots <= 31 ? 7 : 15);
+/*
+ * The buckets folded into what the page draws. The daemon sends one bucket per slot, provider and
+ * model, which is the smallest thing every part of the page can be summed out of.
+ */
+export const deriveUsage = (summary, metric) => {
+    const bySlot = new Map();
+    for (const slot of enumerateSlots(summary)) {
+        bySlot.set(slot, { slot, byProvider: {}, total: 0 });
+    }
+    const byProvider = new Map();
+    let totals = EMPTY_TOTALS;
+    let costUsd = 0;
+    let cacheSavingsUsd = 0;
+    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);
+        byProvider.set(bucket.provider, provider);
+        totals = addTotals(totals, bucket.totals);
+        costUsd += bucket.costUsd ?? 0;
+        cacheSavingsUsd += bucket.cacheSavingsUsd;
+    }
+    const providers = [...byProvider.values()].sort((a, b) => b.costUsd - a.costUsd);
+    return {
+        slots: [...bySlot.values()],
+        providers,
+        active: USAGE_PROVIDERS.filter((provider) => byProvider.has(provider)),
+        totals,
+        costUsd,
+        cacheSavingsUsd
+    };
+};
+/*
+ * The same buckets the chart draws, written out as a table of calendar days, newest first. Today is
+ * drawn per hour but read per day, so an hour slot is folded onto the date it names. A day nothing
+ * happened in is left out, since the chart already shows the gap, and a quiet fortnight would otherwise
+ * be fourteen rows of zeroes between the days worth reading.
+ */
+export const deriveDays = (summary) => {
+    const rows = new Map();
+    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 };
+        const cost = bucket.costUsd ?? 0;
+        row.costByProvider[bucket.provider] = (row.costByProvider[bucket.provider] ?? 0) + cost;
+        row.costUsd += cost;
+        row.tokens += totalTokensOf(bucket.totals);
+        rows.set(day, row);
+    }
+    return [...rows.values()].sort((a, b) => b.slot.localeCompare(a.slot));
+};