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

package/dist/usage/UsageBreakdown.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import clsx from 'clsx';
+import { CircleHelp, Folder, Info } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { EmptyState, Icon, SectionLabel, Segmented, Tooltip } from '@adecore/ui';
+import { useChatScope } from '../scope.js';
+import { chatHost } from '../host.js';
+import { ProviderLogo } from '../agents/ProviderLogo.js';
+import { USAGE_PROVIDERS, totalTokensOf } from '@adecore/agent-contracts';
+import { modelNameFromSlug } from '../agents/model-name.js';
+import { formatCount, formatTokens, PROVIDER_COLORS, PROVIDER_LABELS, shortPath, slotLabel } from './format.js';
+import { useMoney } from './money.js';
+import { deriveDays } from './summary.js';
+/* 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 = ['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, top) {
+    return value <= 0 || top <= 0 ? 0 : Math.max(1, Math.round((value / top) * 100));
+}
+function ProviderMark({ provider }) {
+    return (_jsx(Tooltip, { label: PROVIDER_LABELS[provider], children: _jsx("span", { style: { color: PROVIDER_COLORS[provider] }, children: _jsx(ProviderLogo, { provider: provider }) }) }));
+}
+function ModelRows({ models, metric, total }) {
+    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 (_jsxs("div", { className: TABLE, children: [_jsxs("div", { className: HEAD, children: [_jsx("span", { className: "grow", children: t('breakdown.models.model') }), _jsx("span", { className: "w-16 text-right", children: t('breakdown.models.calls') }), _jsx("span", { className: "w-16 text-right", children: t('breakdown.models.input') }), _jsx("span", { className: "w-16 text-right", children: t('breakdown.models.output') }), _jsx("span", { className: "w-24 text-right", children: t('breakdown.models.cache') }), _jsx("span", { className: "w-20 text-right", children: t('breakdown.models.cost') }), _jsx("span", { className: "w-12 text-right", children: t('breakdown.models.share') })] }), sorted.map((model) => (_jsxs("div", { className: ROW, children: [_jsx(ProviderMark, { provider: model.provider }), _jsx("span", { className: "truncate", children: modelNameFromSlug(model.model) }), model.priceBasis === 'family' && model.pricedAs !== null && (_jsx(Tooltip, { label: t('breakdown.models.pricedAs', { model: modelNameFromSlug(model.pricedAs) }), children: _jsx("span", { className: "text-text-faint", children: _jsx(Icon, { icon: Info, size: 12 }) }) })), _jsx("span", { className: "ml-auto w-16 text-right tabular-nums text-text-muted", children: formatCount(model.totals.calls) }), _jsx("span", { className: "w-16 text-right tabular-nums text-text-muted", children: formatTokens(model.totals.input) }), _jsx("span", { className: "w-16 text-right tabular-nums text-text-muted", children: formatTokens(model.totals.output) }), _jsxs("span", { className: "w-24 text-right tabular-nums text-text-muted", children: [formatTokens(model.totals.cacheRead), " / ", formatTokens(model.totals.cacheWrite)] }), _jsx("span", { className: "w-20 text-right tabular-nums", children: model.costUsd === null ? (_jsx(Tooltip, { label: t('breakdown.models.noPrice'), children: _jsxs("span", { className: "inline-flex items-center gap-1 text-text-faint", children: [_jsx(Icon, { icon: CircleHelp, size: 12 }), "?"] }) })) : (money(model.costUsd)) }), _jsx("span", { className: "w-12 text-right tabular-nums text-text-muted", children: model.costUsd === null || total <= 0 ? '' : `${Math.round((model.costUsd / total) * 100)}%` })] }, `${model.provider} ${model.model}`)))] }));
+}
+/* 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 }) {
+    // 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 (_jsxs("div", { className: `${ROW} h-auto items-start py-1.5`, children: [_jsx("span", { className: "mt-px flex", children: look?.mark ?? (_jsx("span", { className: "text-text-faint", children: _jsx(Icon, { icon: Folder, size: 16 }) })) }), _jsxs("span", { className: "flex min-w-0 grow flex-col", children: [_jsx("span", { className: "truncate", children: look?.name ?? project.name }), _jsx("span", { className: "truncate text-text-faint", children: shortPath(project.folder) })] }), _jsx("span", { className: "mt-1 flex h-[9px] w-32 shrink-0 overflow-hidden rounded-full bg-surface-sunken", children: USAGE_PROVIDERS.map((provider) => {
+                    const share = project.byProvider[provider];
+                    const width = barWidth(share?.costUsd ?? 0, top);
+                    return width === 0 ? null : _jsx("span", { style: { width: `${width}%`, background: PROVIDER_COLORS[provider] } }, provider);
+                }) }), _jsx("span", { className: "w-20 text-right tabular-nums", children: money(project.costUsd) }), _jsx("span", { className: "w-16 text-right tabular-nums text-text-muted", children: formatTokens(totalTokensOf(project.totals)) })] }));
+}
+function ProjectRows({ projects }) {
+    const money = useMoney();
+    const top = Math.max(...projects.map((project) => project.costUsd), 0);
+    return (_jsx("div", { className: clsx(TABLE, 'gap-1'), children: projects.map((project) => (_jsx(ProjectRow, { project: project, top: top, money: money }, project.folder))) }));
+}
+/* The chart written out per calendar day, a column per provider that did anything in the period. */
+function DayRows({ summary, providers }) {
+    const { t } = useTranslation('agent-usage');
+    const money = useMoney();
+    const rows = deriveDays(summary);
+    if (rows.length === 0) {
+        return _jsx(EmptyState, { children: t('breakdown.days.empty') });
+    }
+    return (_jsxs("div", { className: TABLE, children: [_jsxs("div", { className: HEAD, children: [_jsx("span", { className: "grow", children: t('breakdown.days.day') }), providers.map((provider) => (_jsx("span", { className: "w-20 text-right", children: PROVIDER_LABELS[provider] }, provider))), _jsx("span", { className: "w-20 text-right", children: t('breakdown.days.total') }), _jsx("span", { className: "w-16 text-right", children: t('breakdown.days.tokens') })] }), rows.map((row) => (_jsxs("div", { className: ROW, children: [_jsx("span", { className: "grow truncate", children: slotLabel(row.slot) }), providers.map((provider) => (_jsx("span", { className: "w-20 text-right tabular-nums text-text-muted", children: row.costByProvider[provider] === undefined ? '' : money(row.costByProvider[provider]) }, provider))), _jsx("span", { className: "w-20 text-right tabular-nums", children: money(row.costUsd) }), _jsx("span", { className: "w-16 text-right tabular-nums text-text-muted", children: formatTokens(row.tokens) })] }, row.slot)))] }));
+}
+/* The same period cut three ways: which model, which checkout, and which day it went on. */
+export function UsageBreakdown({ summary, metric, providers }) {
+    const { t } = useTranslation('agent-usage');
+    const [tab, setTab] = useState('models');
+    const total = summary.models.reduce((sum, model) => sum + (model.costUsd ?? 0), 0);
+    return (_jsxs("section", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(SectionLabel, { render: _jsx("h2", {}), children: t('breakdown.title') }), _jsx("div", { className: "ml-auto", children: _jsx(Segmented, { value: tab, options: TABS.map((id) => ({ id, label: t(`breakdown.tabs.${id}`) })), onValueChange: (id) => setTab(id), label: t('breakdown.title') }) })] }), tab === 'models' && _jsx(ModelRows, { models: summary.models, metric: metric, total: total }), tab === 'projects' && _jsx(ProjectRows, { projects: summary.projects }), tab === 'day' && _jsx(DayRows, { summary: summary, providers: providers })] }));
+}

package/dist/usage/UsageChart.d.ts

@@ -0,0 +1,10 @@
+import type { UsageProvider } from '@adecore/agent-contracts';
+import { type ChartSlot } from './summary.js';
+interface UsageChartProps {
+    slots: readonly ChartSlot[];
+    providers: readonly UsageProvider[];
+    format(value: number): string;
+    labelEvery: number;
+}
+export declare function UsageChart({ slots, providers, format, labelEvery }: UsageChartProps): import("react").JSX.Element;
+export {};

package/dist/usage/UsageChart.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Surface, useMeasuredWidth } from '@adecore/ui';
+import { PROVIDER_COLORS, PROVIDER_LABELS, slotAxisLabel, slotLabel } from './format.js';
+import { niceScale } from './summary.js';
+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 }) {
+    const { t } = useTranslation('agent-usage');
+    const [measure, width] = useMeasuredWidth();
+    const [hovered, setHovered] = useState(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) => {
+        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 (_jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { ref: measure, className: "relative", style: { height: HEIGHT }, onPointerMove: onPointerMove, onPointerLeave: () => setHovered(null), children: [_jsxs("svg", { width: width, height: HEIGHT, role: "presentation", children: [ticks.map((tick) => {
+                                const y = Math.round(HEIGHT - (tick / scale.max) * HEIGHT) + 0.5;
+                                return _jsx("line", { x1: 0, x2: width, y1: y, y2: y, stroke: "var(--border)", strokeWidth: 1 }, tick);
+                            }), slots.map((slot, index) => {
+                                const left = Math.round(index * band + (band - barWidth) / 2);
+                                let bottom = HEIGHT;
+                                return (_jsx("g", { opacity: hovered === null || hovered === index ? 1 : DIMMED, children: 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 _jsx("rect", { x: left, y: bottom, width: barWidth, height: height, fill: PROVIDER_COLORS[provider] }, provider);
+                                    }) }, slot.slot));
+                            }), hovered !== null && (_jsx("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 }))] }), active && (_jsxs(Surface, { className: "pointer-events-none absolute top-2 rounded-lg p-2 text-xs", style: { left: tooltipLeft, width: TOOLTIP_WIDTH }, children: [_jsx("p", { className: "mb-1 font-medium", children: slotLabel(active.slot) }), providers.map((provider) => (_jsxs("p", { className: "flex items-center gap-1.5 text-text-muted", children: [_jsx("span", { className: "size-2 shrink-0 rounded-full", style: { background: PROVIDER_COLORS[provider] } }), PROVIDER_LABELS[provider], _jsx("span", { className: "ml-auto tabular-nums text-text", children: format(active.byProvider[provider] ?? 0) })] }, provider))), _jsxs("p", { className: "mt-1 flex items-center gap-1.5 border-t border-border pt-1 font-medium", children: [t('chart.total'), _jsx("span", { className: "ml-auto tabular-nums", children: format(active.total) })] })] }))] }), _jsx("div", { className: "relative mt-2 h-4", children: slots.map((slot, index) => index % labelEvery === 0 ? (_jsx("span", { className: "absolute -translate-x-1/2 text-xs whitespace-nowrap text-text-faint", style: { left: Math.round(index * band + band / 2) }, children: slotAxisLabel(slot.slot) }, slot.slot)) : null) })] }));
+}

package/dist/usage/UsageDialog.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+export declare function UsageDialog({ open, onOpenChange, children }: {
+    open: boolean;
+    onOpenChange(open: boolean): void;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/usage/UsageDialog.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 }) {
+    return (_jsx(Dialog.Root, { open: open, onOpenChange: onOpenChange, children: _jsxs(Dialog.Popup, { className: "flex h-[820px] w-[1080px] flex-col", children: [children, _jsx(Dialog.Description, { className: "sr-only", children: i18next.t('agent-usage:dialog.description') })] }) }));
+}

package/dist/usage/UsageLimits.d.ts

@@ -0,0 +1 @@
+export declare function UsageLimits(): import("react").JSX.Element | null;

package/dist/usage/UsageLimits.js

@@ -0,0 +1,57 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { LogIn } from 'lucide-react';
+import { AccountDot } from '../agents/AccountDot.js';
+import { Button, Icon, SectionLabel, Segmented, Tooltip, useNow } from '@adecore/ui';
+import { chatHost } from '../host.js';
+import { PROVIDER_COLORS, PROVIDER_LABELS } from './format.js';
+import { accountNote, checkedLabel, hasSeveralAccounts, isSignedOut } from './limit-groups.js';
+import { WindowBar } from './LimitsList.js';
+import { useLimitGroups, useUsageLimits } from './limits.js';
+import { useProviderAccountsStore } from '../state/provider-accounts.js';
+import { useChatScope } from '../scope.js';
+import { ProviderLogo } from '../agents/ProviderLogo.js';
+const MINUTE_MS = 60_000;
+function LoginButton({ account, login }) {
+    const { t } = useTranslation('agent-usage');
+    const button = (_jsxs(Button, { variant: "secondary", size: "sm", className: login.blocked === null ? 'self-start' : undefined, disabled: login.blocked !== null, onClick: () => login.open(account), children: [_jsx(Icon, { icon: LogIn, size: 14 }), t('limits.logIn')] }));
+    return login.blocked === null ? (button) : (_jsx(Tooltip, { label: login.blocked, children: _jsx("span", { className: "inline-flex self-start", children: button }) }));
+}
+/* One account: where its numbers come from, then a bar per window, or why there are none. */
+function LimitCard({ account, named, now, login }) {
+    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 (_jsxs("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", children: [_jsxs("p", { className: "flex min-w-0 items-center gap-2 text-xs font-medium", children: [_jsx("span", { className: "shrink-0", style: { color: PROVIDER_COLORS[account.kind] }, children: _jsx(ProviderLogo, { provider: account.kind }) }), _jsx("span", { className: "shrink-0", children: PROVIDER_LABELS[account.kind] }), named && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-text-faint", children: "\u00B7" }), _jsx(AccountDot, { color: account.color }), _jsx("span", { className: "truncate", children: account.name })] })), plan && _jsxs("span", { className: "shrink-0 font-normal text-text-muted", children: ["\u00B7 ", plan] }), checked !== null && _jsx("span", { className: "ml-auto shrink-0 pl-2 font-normal text-text-faint", children: checked })] }), signedOut ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-xs text-text-faint", children: t('limits.signedOutDetail') }), login !== null && _jsx(LoginButton, { account: account, login: login })] })) : note !== null ? (_jsx("p", { className: "text-xs text-text-faint", children: note })) : (_jsx("div", { className: "flex flex-col gap-4", children: account.entry?.windows.map((window) => (_jsx(WindowBar, { window: window, now: now, compact: false }, window.id))) }))] }));
+}
+/*
+ * 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('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) => openLogin === null || loginCommands?.[kind] === undefined
+        ? null
+        : { blocked, open: (account) => void openLogin(scopeId, kind, account.id, account.name) };
+    return (_jsxs("section", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex min-h-8 items-center gap-3", children: [_jsx(SectionLabel, { render: _jsx("h2", {}), className: "grow", children: t('limits.title') }), filterable && (_jsx(Segmented, { 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') }))] }), _jsx("p", { className: "text-xs text-text-muted", children: t('limits.explain') }), _jsx("div", { className: "grid grid-cols-2 gap-3", children: shown.flatMap((group) => group.accounts.map((account) => (_jsx(LimitCard, { account: account, named: group.accounts.length > 1, now: now, login: loginFor(group.kind) }, account.id)))) })] }));
+}

package/dist/usage/UsageLimitsCard.d.ts

@@ -0,0 +1,4 @@
+import { type ReactElement } from 'react';
+export declare function UsageLimitsCard({ children }: {
+    children: ReactElement<Record<string, unknown>>;
+}): import("react").JSX.Element;

package/dist/usage/UsageLimitsCard.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import i18next from 'i18next';
+import { useState } from 'react';
+import { hasSeveralAccounts } from './limit-groups.js';
+import { AccountLimitsList, LimitsList } from './LimitsList.js';
+import { useLimitGroups, useUsageLimits } from './limits.js';
+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 _jsx("p", { className: "text-xs text-text-faint", children: i18next.t('agent-usage:limits.loading') });
+    }
+    return hasSeveralAccounts(groups) ? _jsx(AccountLimitsList, { groups: groups, now: now }) : _jsx(LimitsList, { limits: limits, now: now, compact: true });
+}
+/*
+ * 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 }) {
+    const [opened, setOpened] = useState(false);
+    return (_jsxs(PreviewCard.Root, { onOpenChange: (open) => open && setOpened(true), children: [_jsx(PreviewCard.Trigger, { render: children, delay: 500 }), _jsx(PreviewCard.Popup, { side: "top", align: "end", className: "w-64 p-3", children: opened && _jsx(CardBody, {}) })] }));
+}

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,154 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState, useSyncExternalStore } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ChartNoAxesColumn, RefreshCw } from 'lucide-react';
+import { USAGE_PROVIDERS } from '@adecore/agent-contracts';
+import { Button, CloseButton, Dialog, EmptyState, FormError, IconButton, Segmented, Select, Skeleton } from '@adecore/ui';
+import { AccountDot } from '../agents/AccountDot.js';
+import { chatHost } from '../host.js';
+import { useChatScope } from '../scope.js';
+import { useProvidersStore } from '../state/providers.js';
+import { askedKey, summaryPayload, USAGE_PERIODS, useUsage, useUsageStore } from '../state/usage.js';
+import { formatClock, formatCount, formatDate, formatTokens, PROVIDER_LABELS } from './format.js';
+import { useMoney } from './money.js';
+import { deriveUsage, labelEveryFor } from './summary.js';
+import { UsageBreakdown } from './UsageBreakdown.js';
+import { UsageChart } from './UsageChart.js';
+import { UsageLimits } from './UsageLimits.js';
+import { UsageSummary } from './UsageSummary.js';
+import { UsageTiles } from './UsageTiles.js';
+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. */
+function useAnswering(transport) {
+    return 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.
+ */
+function 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(FormError, { className: "mt-auto text-center", 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, { 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}`) })), onValueChange: (id) => useUsageStore.getState().setPeriod(id), label: t('dialog.period') }), _jsx(Segmented, { value: metric, options: METRICS.map((id) => ({ id, label: t(`dialog.metrics.${id}`) })), onValueChange: (id) => useUsageStore.getState().setMetric(id), label: t('dialog.metric') }), _jsx(IconButton, { icon: RefreshCw, label: t('dialog.rescan'), busy: loading, onClick: reload, disabled: loading || !answering }), _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,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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.js';
+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}`) })), onValueChange: (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 '@adecore/agent-contracts';
+import type { UsageMetric } from '../state/usage.js';
+import type { ProviderTotal } from './summary.js';
+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.js';
+import { totalTokensOf } from '@adecore/agent-contracts';
+import { formatCount, formatTokens, PROVIDER_COLORS, PROVIDER_LABELS } from './format.js';
+import { useMoney } from './money.js';
+/*
+ * 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 '@adecore/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 '@adecore/agent-contracts';
+import { formatTokens } from './format.js';
+import { useMoney } from './money.js';
+/* 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,13 @@
+import type { UsageProvider, UsageRate } from '@adecore/agent-contracts';
+import { formatTokens } from '@adecore/ui/format';
+export { formatClock } from '@adecore/ui/format';
+export type UsageCurrency = 'USD' | 'EUR';
+export declare function formatCount(value: number): string;
+export { formatTokens };
+export declare function moneyFormat(currency: UsageCurrency, rate: UsageRate | null): (usd: number) => string;
+export declare const PROVIDER_LABELS: Record<UsageProvider, string>;
+export declare const PROVIDER_COLORS: Record<UsageProvider, string>;
+export declare function slotLabel(slot: string): string;
+export declare function slotAxisLabel(slot: string): string;
+export declare function formatDate(at: number): string;
+export declare function shortPath(path: string): string;

package/dist/usage/format.js

@@ -0,0 +1,55 @@
+import { formatDay, formatHour, formatWeekdayDay, formatMoney, formatNumber, formatTokens } from '@adecore/ui/format';
+export { formatClock } from '@adecore/ui/format';
+/* 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) {
+    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, 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);
+    };
+}
+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. */
+function dateOfSlot(slot) {
+    return new Date(Number(slot.slice(0, 4)), Number(slot.slice(5, 7)) - 1, Number(slot.slice(8, 10)));
+}
+function hourOfSlot(slot) {
+    return slot.length > 10 ? Number(slot.slice(11, 13)) : null;
+}
+function atHour(slot, hour) {
+    const day = dateOfSlot(slot);
+    day.setHours(hour);
+    return day;
+}
+export function slotLabel(slot) {
+    const hour = hourOfSlot(slot);
+    return hour === null ? formatWeekdayDay(dateOfSlot(slot)) : formatHour(atHour(slot, hour));
+}
+export function slotAxisLabel(slot) {
+    const hour = hourOfSlot(slot);
+    return hour === null ? formatDay(dateOfSlot(slot)) : formatHour(atHour(slot, hour));
+}
+export function formatDate(at) {
+    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) {
+    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 '@adecore/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 function limitGroups(snapshot: UsageLimitsSnapshot, accounts: ProviderAccounts | null): LimitGroup[];
+export declare function hasSeveralAccounts(groups: readonly LimitGroup[]): boolean;
+export declare function isSignedOut(account: LimitAccount): boolean;
+export declare function nextReset(windows: readonly UsageWindow[], now: number): (UsageWindow & {
+    resetsAt: number;
+}) | null;
+export declare function checkedLabel(entry: UsageLimitsProvider, now: number): string | null;
+export declare function explain(provider: UsageLimitsProvider): string | null;
+export declare function accountNote(account: LimitAccount): string | null;