@ruimte/agents-react 0.0.0 → 0.7.0

package/dist/theme.css

@@ -0,0 +1,186 @@
+/*
+ * The chat of @ruimte/agents-react, its providers and its usage: the tokens only they read and the
+ * rules they draw with. Imported right after `@ruimte/ui/theme.css`; the app scans the package with
+ * `@source` and loads `@tailwindcss/typography`, which the markdown of a thread builds on.
+ */
+:root, [data-theme="light"] {
+    /* Skills read as a second kind of token next to a file mention, so they get their own hue. */
+    --skill: #9333ea;
+    --skill-soft: #f7eeff;
+    /* One color per agent CLI, so a bar, a dot and a legend row all name the same provider. Apple's
+       system orange and teal; Gemini and Copilot are reserved for the day their transcripts are read. */
+    --chart-claude: #ff9500;
+    --chart-codex: #30b0c7;
+    --chart-gemini: #3b82f6;
+    --chart-copilot: #64748b;
+    /* What a chat's context holds, one color per part; the rest is the system's and stays gray. */
+    --chart-context-tools: #4d7ce6;
+    --chart-context-files: #9a63e0;
+    --chart-context-conversation: #2f9e5a;
+    --chart-context-system: var(--text-faint);
+}
+
+[data-theme="dark"] {
+    --skill: #c084fc;
+    --skill-soft: #2f2350;
+    --chart-claude: #ff9f0a;
+    --chart-codex: #40c8e0;
+    --chart-gemini: #60a5fa;
+    --chart-copilot: #94a3b8;
+    --chart-context-tools: #8aa7f5;
+    --chart-context-files: #b98af3;
+    --chart-context-conversation: #6dd08b;
+    --chart-context-system: var(--text-faint);
+}
+
+@theme inline {
+    --color-skill: var(--skill);
+    --color-skill-soft: var(--skill-soft);
+    --color-chart-claude: var(--chart-claude);
+    --color-chart-codex: var(--chart-codex);
+    --color-chart-gemini: var(--chart-gemini);
+    --color-chart-copilot: var(--chart-copilot);
+    --color-chart-context-tools: var(--chart-context-tools);
+    --color-chart-context-files: var(--chart-context-files);
+    --color-chart-context-conversation: var(--chart-context-conversation);
+    --color-chart-context-system: var(--chart-context-system);
+}
+
+@layer components {
+    /* ---------------------------------------------------------------- Chat */
+
+    /* Text in a chat is there to be read and copied, so the thread selects even though the app does
+       not. Its chrome stays out of it: a drag on a fold header or a chip would select the row.
+       The pretty wrap from `body` would be recomputed on the growing paragraph every frame a reply
+       streams, so the thread wraps the plain way.
+       The gaps are the air a thread needs to read as turns: the step from a question to its answer,
+       and the wider step from the end of one turn to the next question. A view of its own gets more
+       of both, the way its type does. The block gap is the step inside a turn, where a run of tool
+       lines meets prose or a card. */
+    .chat-thread { user-select: text; text-wrap-style: auto; --chat-answer-gap: 16px; --chat-turn-gap: 24px; --chat-block-gap: 12px; }
+    .chat-column .chat-thread { --chat-answer-gap: 20px; --chat-turn-gap: 32px; --chat-block-gap: 16px; }
+    .chat-thread button, .chat-thread kbd { user-select: none; }
+
+    /*
+     * A chat that is a view of its own reads in a column. The scroller keeps the full width of the
+     * main column, so its scrollbar sits at that column's right edge and nothing jumps when the
+     * thread grows past a screenful; only the rows and the composer inside it are centered.
+     */
+    .chat-column .chat-column-content { margin-inline: auto; max-width: 768px; }
+    /* Wider by the input's inset (`.composer-input .cm-content` padding plus the card's border), so what is typed lines up with the thread. */
+    .chat-column .chat-composer-content { margin-inline: auto; max-width: calc(768px + 2 * 21px); }
+
+    /* A diff inside a chat tool block; the library paints its own colors inside a shadow root and
+       takes the face it draws them in through these variables. */
+    .chat-diff { font-size: var(--text-code); --diffs-font-size: var(--text-code); --diffs-font-family: var(--font-mono); }
+    .chat-diff + .chat-diff { border-top: 1px solid var(--border); }
+
+    /* Live tool rows shine once across; a paused animation costs nothing. */
+    .chat-live-text {
+        background: linear-gradient(90deg, var(--text-muted) 0%, var(--text) 50%, var(--text-muted) 100%);
+        background-size: 200% 100%;
+        -webkit-background-clip: text;
+        background-clip: text;
+        color: transparent;
+        animation: chat-shine 1.6s linear infinite;
+    }
+    @keyframes chat-shine { from { background-position: 200% 0; } to { background-position: -200% 0; } }
+
+    /* A word of a reply that just arrived. The duration is REVEAL_FADE_MS in chat/ui/reveal.ts, which
+       keeps the spans until it is over; ease-in-out, because ease-out jumps up and then trails. */
+    .chat-fade { animation: chat-fade 300ms ease-in-out both; }
+    /* A whole reply that was written out of sight. */
+    .chat-fade-whole { animation: chat-fade 220ms ease-out both; }
+    /* A block of a reply streamed a block at a time, faded in when it is inserted and never when a
+       finished thread opens, which carries no `data-arriving`. */
+    .chat-markdown[data-arriving] > * {
+        transition: opacity 300ms ease-in-out;
+        @starting-style { opacity: 0; }
+    }
+    @keyframes chat-fade { from { opacity: 0; } to { opacity: 1; } }
+}
+
+/*
+ * Markdown, outside every layer on purpose. The typography plugin registers `.prose` as a utility,
+ * and a later layer beats an earlier one whatever the specificity, so a rule that has to outrank
+ * prose cannot live in `components`. Unlayered styles win over every layer, which is the one
+ * place the app's tokens and scale are sure to land on top of the plugin's.
+ */
+/*
+ * Markdown anywhere in the app: the chat timeline, a note node and the file preview all render
+ * the same `Markdown` component, which carries `prose prose-sm max-w-none text-sm` next to this
+ * class. Prose brings the rhythm; everything here is what the app decides instead of the plugin.
+ * The semantic tokens flip with the theme on their own, so the prose variables read from them
+ * and `prose-invert` is a second source of truth the app does not need. The size comes from the
+ * `text-sm` utility, which a node, a view and the file preview each move.
+ */
+.prose.chat-markdown {
+    --tw-prose-body: var(--text);
+    --tw-prose-headings: var(--text);
+    --tw-prose-lead: var(--text-muted);
+    --tw-prose-links: var(--accent);
+    --tw-prose-bold: var(--text);
+    --tw-prose-counters: var(--text-faint);
+    --tw-prose-bullets: var(--text-faint);
+    --tw-prose-hr: var(--border);
+    --tw-prose-quotes: var(--text);
+    --tw-prose-quote-borders: var(--border);
+    --tw-prose-captions: var(--text-muted);
+    --tw-prose-kbd: var(--text);
+    --tw-prose-code: var(--text);
+    --tw-prose-pre-code: var(--text);
+    --tw-prose-pre-bg: var(--surface-sunken);
+    --tw-prose-th-borders: var(--border);
+    --tw-prose-td-borders: var(--border);
+}
+/* Headings stay on the app's scale, which is flatter than the one prose brings. */
+.chat-markdown :is(h1, h2, h3, h4) { font-weight: 600; line-height: round(1.3em, 1px); }
+.chat-markdown h1 { font-size: var(--text-lg); }
+.chat-markdown h2 { font-size: var(--text-base); }
+.chat-markdown :is(h3, h4) { font-size: var(--text-sm); }
+.chat-markdown a { text-underline-offset: 2px; }
+/* Code is the app's own: `--text-code` at every depth, and none of the quotes prose puts around
+   inline code, since the chip the component draws already says what it is. */
+.chat-markdown code { font-size: var(--text-code); font-weight: 400; }
+.chat-markdown code::before, .chat-markdown code::after { content: none; }
+/* A checked box is the marker; prose would put a bullet next to it. */
+.chat-markdown li:has(> input[type="checkbox"]) { list-style: none; }
+.chat-markdown input[type="checkbox"] { margin-right: 6px; accent-color: var(--accent); }
+/* A wide table scrolls in its own wrapper instead of stretching the column it sits in. The
+   wrapper is a scroll container, so the air around the table has to sit on it, not inside it. */
+.chat-table { overflow-x: auto; margin-block: 2em; }
+.chat-markdown table { margin: 0; border-collapse: collapse; font-size: var(--text-xs); }
+.chat-markdown :is(th, td) { border: 1px solid var(--tw-prose-td-borders); padding: 4px 8px; text-align: left; }
+
+/* A code block is shiki's own `<pre>`, which brings a background of its own to override. */
+.chat-code { border-radius: 8px; border: 1px solid var(--border); background: var(--term-bg); overflow: auto; }
+.chat-code pre { margin: 0; padding: round(0.625rem, 1px) round(0.75rem, 1px); background: transparent !important; font-family: var(--font-mono); font-size: var(--text-code); line-height: var(--text-code--line-height); }
+.chat-code code { font-family: inherit; }
+
+/* The chat composer is a CodeMirror editor, whose base theme lands in an unlayered style tag at
+   mount. These rules stay unlayered too, and carry one class more than the theme's selectors. */
+.composer-input .cm-editor { max-height: 200px; }
+.composer-input .cm-editor.cm-focused { outline: none; }
+.composer-input .cm-editor .cm-scroller { overflow: auto; font-family: inherit; line-height: inherit; }
+.composer-input .cm-editor .cm-scroller .cm-content { padding: 18px 14px 6px 20px; caret-color: var(--text); }
+.composer-input .cm-scroller .cm-content .cm-line { padding: 0; }
+.composer-input .cm-scroller .cm-content .cm-placeholder { color: var(--text-faint); }
+.composer-hints, .composer-hints-extra { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
+/* The joiner starts with its own comma, so it sits against the lead without the gap. */
+.composer-hints-extra { margin-left: -8px; }
+.composer-hints kbd { padding: 0 6px; border-radius: 5px; background: var(--surface-active); color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-code); line-height: var(--text-code--line-height); }
+/* The widths of Tailwind's `@md` container variant, which the rest of the composer narrows at. */
+@container composer (width < 28rem) {
+    .composer-input .cm-editor .cm-scroller .cm-content { padding: 14px 12px 4px 14px; }
+    .composer-hints-extra { display: none; }
+}
+/* Markdown stays source while you type: the markers stay put and dim, and what they wrap takes its look. */
+.composer-input .cm-md-mark { color: var(--text-faint); }
+.composer-input .cm-md-strong, .composer-input .cm-md-heading { font-weight: 600; }
+.composer-input .cm-md-emphasis { font-style: italic; }
+.composer-input .cm-md-strike { text-decoration: line-through; }
+.composer-input .cm-md-link { color: var(--accent); text-decoration: underline; }
+.composer-input .cm-md-code { padding: 1px 2px; border-radius: 4px; background: var(--surface-sunken); font-family: var(--font-mono); font-size: var(--text-code); }
+.composer-input .cm-content .cm-line.cm-md-fence { padding: 0 8px; background: var(--surface-sunken); font-family: var(--font-mono); font-size: var(--text-code); }
+.composer-input .cm-content .cm-line.cm-md-fence-start { padding-top: 4px; border-top-left-radius: 6px; border-top-right-radius: 6px; }
+.composer-input .cm-content .cm-line.cm-md-fence-end { padding-bottom: 4px; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; }

package/dist/transport.d.ts

@@ -0,0 +1,24 @@
+import type { z } from 'zod';
+import type { AGENT_EVENT_SCHEMAS, AGENT_REQUEST_SCHEMAS, AgentEventType, AgentRequestType } from '@ruimte/agent-contracts/protocol';
+export type ChatRequestMap = {
+    [T in AgentRequestType]: {
+        payload: z.infer<(typeof AGENT_REQUEST_SCHEMAS)[T]['payload']>;
+        result: z.infer<(typeof AGENT_REQUEST_SCHEMAS)[T]['result']>;
+    };
+};
+export type ChatEventMap = {
+    [E in AgentEventType]: z.infer<(typeof AGENT_EVENT_SCHEMAS)[E]>;
+};
+export type ChatTransportStatus = 'connecting' | 'open' | 'closed';
+export interface ChatTransport {
+    request<T extends AgentRequestType>(type: T, payload: ChatRequestMap[T]['payload']): Promise<ChatRequestMap[T]['result']>;
+    on<E extends AgentEventType>(event: E, handler: (payload: ChatEventMap[E]) => void): () => void;
+    readonly status: ChatTransportStatus;
+    subscribeStatus(handler: (status: ChatTransportStatus) => void): () => void;
+}
+export declare class ChatTransportError extends Error {
+    readonly code: string;
+    constructor(code: string, message: string);
+}
+export declare const errorCode: (error: unknown) => string | null;
+export declare const isConnectionError: (error: unknown) => boolean;

package/dist/transport.js

@@ -0,0 +1,16 @@
+/* A refused request always carries a code, so a caller branches on it instead of on the message. */
+export class ChatTransportError extends Error {
+    code;
+    constructor(code, message) {
+        super(message);
+        this.name = 'ChatTransportError';
+        this.code = code;
+    }
+}
+/* The code of a refusal from any transport, this package's or the app's own: every one of them carries it the same way. */
+export const errorCode = (error) => typeof error === 'object' && error !== null && 'code' in error && typeof error.code === 'string' ? error.code : null;
+/* Whether a request failed because the link was down rather than because the host refused it; the reconnect asks again. */
+export const isConnectionError = (error) => {
+    const code = errorCode(error);
+    return code === 'not-connected' || code === 'disconnected';
+};

package/dist/ui/PlainTextarea.d.ts

@@ -0,0 +1,2 @@
+import type { TextareaProps } from '../host';
+export declare function PlainTextarea({ buttonClassName: _buttonClassName, ...props }: TextareaProps): import("react").JSX.Element;

package/dist/ui/PlainTextarea.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* The field a written answer goes in when the app brings no dictation of its own. */
+export function PlainTextarea({ buttonClassName: _buttonClassName, ...props }) {
+    return _jsx("textarea", { ...props });
+}

package/dist/usage/LimitsList.d.ts

@@ -0,0 +1,18 @@
+import type { UsageLimitsSnapshot, UsageWindow } from '@ruimte/agent-contracts';
+import { type LimitGroup } from './limit-groups';
+export declare function WindowBar({ window, now, compact }: {
+    window: UsageWindow;
+    now: number;
+    compact: boolean;
+}): import("react").JSX.Element;
+interface LimitsListProps {
+    limits: UsageLimitsSnapshot;
+    now: number;
+    compact?: boolean;
+}
+export declare function LimitsList({ limits, now, compact }: LimitsListProps): import("react").JSX.Element;
+export declare function AccountLimitsList({ groups, now }: {
+    groups: readonly LimitGroup[];
+    now: number;
+}): import("react").JSX.Element;
+export {};

package/dist/usage/LimitsList.js

@@ -0,0 +1,69 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { limitsAccountId } from '../agents/account-limits';
+import { AccountDot } from '../agents/AccountDot';
+import { Tooltip } from '@ruimte/ui/Tooltip';
+import { ProviderLogo } from '../agents/ProviderLogo';
+import { formatClock, formatWeekdayClock, isSameDay } from '@ruimte/ui/format/datetime';
+import { formatCountdown } from '@ruimte/ui/format/duration';
+import { formatPercent } from '@ruimte/ui/format/number';
+import { PROVIDER_COLORS, PROVIDER_LABELS } from './format';
+import { accountNote, explain, isSignedOut, nextReset } 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. */
+const toneOf = (used) => (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. */
+const resetAtLabel = (resetsAt, now) => (isSameDay(resetsAt, now) ? formatClock(resetsAt) : formatWeekdayClock(resetsAt));
+/* How long the window still has, or nothing once it has run out. */
+const resetInLabel = (resetsAt, now) => (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. */
+const elapsedShare = (window, now) => {
+    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 }) {
+    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 = (_jsxs("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'), children: [_jsx("div", { className: clsx('absolute inset-x-0 rounded-full bg-surface-sunken', compact ? 'inset-y-1' : 'inset-y-1.5') }), _jsx("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)}%` } }), mark !== null && (_jsx("span", { "aria-hidden": true, className: clsx('absolute inset-y-0.5 w-px -translate-x-1/2', mark <= percent ? 'bg-surface' : 'bg-text-muted'), style: { left: `${mark}%` } }))] }));
+    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsxs("div", { className: "flex items-baseline gap-2 text-xs", children: [_jsx("span", { className: "text-text", children: window.label }), _jsx("span", { className: "ml-auto tabular-nums text-text-muted", children: t('limits.used', { percent }) })] }), compact ? (bar) : (_jsx(Tooltip, { label: _jsxs("span", { className: "flex flex-col gap-0.5", children: [_jsxs("span", { children: [t('limits.used', { percent }), mark !== null && ` · ${t('limits.windowPassed', { percent: mark })}`] }), mark !== null && _jsx("span", { className: "text-text-muted", children: mark <= percent ? t('limits.faster') : t('limits.slower') })] }), children: bar })), resetsAt !== null && (_jsxs("p", { className: "text-xs whitespace-nowrap text-text-faint", children: [t('limits.resets', { at: resetsAt }), resetsIn !== null && ` · ${resetsIn}`] }))] }));
+}
+/* Every provider with what its plan has left, shared by the usage page and the sidebar card. */
+export function LimitsList({ limits, now, compact = false }) {
+    return (_jsx("div", { className: clsx('flex flex-col', compact ? 'gap-4' : 'gap-6'), children: limits.providers.map((provider) => {
+            const note = explain(provider);
+            return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("p", { className: "flex items-center gap-2 text-xs font-medium", children: [_jsx("span", { style: { color: PROVIDER_COLORS[provider.kind] }, children: _jsx(ProviderLogo, { provider: provider.kind }) }), PROVIDER_LABELS[provider.kind], provider.plan !== null && _jsxs("span", { className: "text-text-muted", children: ["\u00B7 ", provider.plan] })] }), note === null ? (_jsx("div", { className: clsx('flex flex-col', compact ? 'gap-3' : 'gap-4'), children: provider.windows.map((window) => (_jsx(WindowBar, { window: window, now: now, compact: compact }, window.id))) })) : (_jsx("p", { className: "text-xs text-text-faint", children: note }))] }, limitsAccountId(provider)));
+        }) }));
+}
+/* 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 }) {
+    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 (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-text-muted", children: window.label }), _jsxs("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", children: [_jsx("div", { className: clsx('absolute inset-y-0 left-0 rounded-full', toneOf(window.used)), style: { width: `${Math.min(100, percent)}%` } }), mark !== null && (_jsx("span", { "aria-hidden": true, className: clsx('absolute -inset-y-0.5 w-px -translate-x-1/2', mark <= percent ? 'bg-surface-raised' : 'bg-text-muted'), style: { left: `${mark}%` } }))] }), _jsx("span", { className: clsx('text-right tabular-nums', window.used >= 0.9 ? 'text-status-error' : 'text-text'), children: formatPercent(percent) })] }));
+}
+function AccountLines({ account, now }) {
+    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 (_jsxs(_Fragment, { children: [_jsxs("p", { className: "col-span-full mt-2 flex min-w-0 items-center gap-2", children: [_jsx(AccountDot, { color: account.color }), _jsx("span", { className: "truncate", children: account.name }), signedOut ? (_jsxs("span", { className: "shrink-0 text-text-faint", children: ["\u00B7 ", t('limits.signedOut')] })) : (account.entry?.plan && _jsxs("span", { className: "shrink-0 text-text-muted", children: ["\u00B7 ", account.entry.plan] }))] }), note !== null && _jsx("p", { className: "col-span-full text-text-faint", children: note }), windows.map((window) => (_jsx(WindowLine, { window: window, now: now }, window.id))), next !== null && (_jsxs("p", { className: "col-span-full whitespace-nowrap text-text-faint", children: [t('limits.nextReset', { window: next.label, at: resetAtLabel(next.resetsAt, now) }), resetsIn !== null && ` · ${resetsIn}`] }))] }));
+}
+/*
+ * 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 }) {
+    return (_jsx("div", { className: "grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-x-2 gap-y-1 text-xs", children: groups.map((group) => (_jsxs(Fragment, { children: [_jsxs("p", { className: "col-span-full mt-3 flex items-center gap-2 font-medium first:mt-0", children: [_jsx("span", { style: { color: PROVIDER_COLORS[group.kind] }, children: _jsx(ProviderLogo, { provider: group.kind }) }), PROVIDER_LABELS[group.kind]] }), group.accounts.map((account) => (_jsx(AccountLines, { account: account, now: now }, account.id)))] }, group.kind))) }));
+}

package/dist/usage/UsageBreakdown.d.ts

@@ -0,0 +1,9 @@
+import type { UsageProvider, UsageSummaryResult } from '@ruimte/agent-contracts';
+import type { UsageMetric } from '../state/usage';
+interface UsageBreakdownProps {
+    summary: UsageSummaryResult;
+    metric: UsageMetric;
+    providers: readonly UsageProvider[];
+}
+export declare function UsageBreakdown({ summary, metric, providers }: UsageBreakdownProps): import("react").JSX.Element;
+export {};

package/dist/usage/UsageBreakdown.js

@@ -0,0 +1,69 @@
+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 { Segmented } from '@ruimte/ui/controls';
+import { useChatScope } from '../scope';
+import { chatHost } from '../host';
+import { SECTION_LABEL } from '@ruimte/ui/classes';
+import { EmptyState } from '@ruimte/ui/EmptyState';
+import { Tooltip } from '@ruimte/ui/Tooltip';
+import { Icon } from '@ruimte/ui/Icon';
+import { ProviderLogo } from '../agents/ProviderLogo';
+import { USAGE_PROVIDERS, totalTokensOf } from '@ruimte/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';
+/* 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. */
+const barWidth = (value, top) => (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("h2", { className: SECTION_LABEL, children: t('breakdown.title') }), _jsx("div", { className: "ml-auto", children: _jsx(Segmented, { value: tab, options: TABS.map((id) => ({ id, label: t(`breakdown.tabs.${id}`) })), onChange: (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 '@ruimte/agent-contracts';
+import { type ChartSlot } from './summary';
+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,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+import { FLOAT } from '@ruimte/ui/classes';
+import { useMeasuredWidth } from '@ruimte/ui/useMeasuredWidth';
+import { PROVIDER_COLORS, PROVIDER_LABELS, slotAxisLabel, slotLabel } from './format';
+import { niceScale } from './summary';
+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("div", { className: clsx(FLOAT, '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,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import i18next from 'i18next';
+import { Dialog } from '@base-ui-components/react/dialog';
+import { useDialogLayer } from '@ruimte/ui/dialog-layer';
+/*
+ * 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 }) {
+    const stacked = useDialogLayer(open);
+    return (_jsx(Dialog.Root, { open: open, onOpenChange: onOpenChange, children: _jsxs(Dialog.Portal, { children: [_jsx(Dialog.Backdrop, { className: clsx('dialog-backdrop', stacked && 'dialog-backdrop-nested'), forceRender: stacked }), _jsxs(Dialog.Popup, { className: clsx('dialog-popup flex h-[820px] w-[1080px] flex-col', stacked && 'dialog-popup-nested'), 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,62 @@
+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';
+import { Segmented } from '@ruimte/ui/controls';
+import { chatHost } from '../host';
+import { PROVIDER_COLORS, PROVIDER_LABELS } from './format';
+import { accountNote, checkedLabel, hasSeveralAccounts, isSignedOut } from './limit-groups';
+import { WindowBar } from './LimitsList';
+import { useLimitGroups, useUsageLimits } from './limits';
+import { useProviderAccountsStore } from '../state/provider-accounts';
+import { useChatScope } from '../scope';
+import { Button } from '@ruimte/ui/Button';
+import { SECTION_LABEL } from '@ruimte/ui/classes';
+import { Icon } from '@ruimte/ui/Icon';
+import { ProviderLogo } from '../agents/ProviderLogo';
+import { Tooltip } from '@ruimte/ui/Tooltip';
+import { useNow } from '@ruimte/ui/useNow';
+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("h2", { className: `${SECTION_LABEL} 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] }))
+                        ], onChange: 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,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import i18next from 'i18next';
+import { useState } from 'react';
+import { PreviewCard } from '@base-ui-components/react/preview-card';
+import { hasSeveralAccounts } from './limit-groups';
+import { AccountLimitsList, LimitsList } from './LimitsList';
+import { useLimitGroups, useUsageLimits } from './limits';
+import { useNow } from '@ruimte/ui/useNow';
+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.Portal, { children: _jsx(PreviewCard.Positioner, { side: "top", align: "end", sideOffset: 8, className: "z-(--z-popup)", children: _jsx(PreviewCard.Popup, { className: "menu-popup w-64 p-3", children: opened && _jsx(CardBody, {}) }) }) })] }));
+}