@adecore/agents-react 0.21.1 → 0.21.2

package/dist/chat/ui/composer/keys.js

@@ -30,24 +30,32 @@ export function enterAction(keys, { inOpenFence, list, column }) {
     }
     return list.empty ? 'leave-list' : 'continue-list';
 }
-/* Whether `pos` sits inside a fenced code block that has an opening fence and no closing one yet. */
-export function inOpenFence(tree, pos) {
+/* The innermost fenced code block around `pos`, if any. */
+function enclosingFence(tree, pos) {
     for (let node = tree.resolveInner(pos, -1); node !== null; node = node.parent) {
         if (node.name === 'FencedCode') {
-            return pos > node.from && node.getChildren('CodeMark').length < 2;
+            return node;
         }
     }
-    return false;
+    return null;
+}
+/* A fence nobody has closed yet has its opening mark only. */
+function isOpenFence(fence) {
+    return fence.getChildren('CodeMark').length < 2;
+}
+/* Whether `pos` sits inside a fenced code block that has an opening fence and no closing one yet. */
+export function inOpenFence(tree, pos) {
+    const fence = enclosingFence(tree, pos);
+    return fence !== null && pos > fence.from && isOpenFence(fence);
 }
 /* Whether `pos` sits in the body of a fenced code block, open or closed: below its opening line and before its end. */
 export function inFenceBody(tree, text, pos) {
-    for (let node = tree.resolveInner(pos, -1); node !== null; node = node.parent) {
-        if (node.name === 'FencedCode') {
-            const openingEnd = text.indexOf('\n', node.from);
-            return openingEnd !== -1 && pos > openingEnd && (pos < node.to || node.getChildren('CodeMark').length < 2);
-        }
+    const fence = enclosingFence(tree, pos);
+    if (fence === null) {
+        return false;
     }
-    return false;
+    const openingEnd = text.indexOf('\n', fence.from);
+    return openingEnd !== -1 && pos > openingEnd && (pos < fence.to || isOpenFence(fence));
 }
 /* The spaces Tab inserts at `column`, up to the next stop of four, the way a code editor lines up. */
 export function tabSpaces(column) {
@@ -63,7 +71,7 @@ export function inCode(tree, text, pos) {
     let blockFrom = null;
     for (let node = tree.resolveInner(pos, -1); node !== null; node = node.parent) {
         if (node.name === 'FencedCode') {
-            return pos > node.from && (pos < node.to || node.getChildren('CodeMark').length < 2);
+            return pos > node.from && (pos < node.to || isOpenFence(node));
         }
         if (node.name === 'InlineCode' && pos > node.from && pos < node.to) {
             return true;

package/dist/chat/ui/intelligent-ui/render-context.d.ts

@@ -1,7 +1,7 @@
 import { type ReactNode } from 'react';
 import type { UiComponentName, UiProps, UiViewNode } from '@adecore/intelligent-ui';
-export type { UiLinkTarget } from '@adecore/intelligent-ui/links';
 import type { UiLinkTarget } from '@adecore/intelligent-ui/links';
+export type { UiLinkTarget };
 export interface UiLink {
     state: 'chip' | 'plain';
     label?: string;

package/dist/chat/ui/rows/MessageRows.js

@@ -186,9 +186,8 @@ function OpenChatButton({ chatId }) {
     return (_jsx("button", { className: "text-text-muted hover:text-text", onClick: place.go, children: t('rows.note.openFork') }));
 }
 /*
- * The header of a turn the agent started itself, in place of the message of the person that is
- * missing. It is one line: what the sub-agent came back with lives on that agent's own row, behind
- * "Show result". When the CLI named the sub-agent it woke up about, the header opens that row.
+ * The header of a turn the agent started itself, in place of a message of the person. What the
+ * sub-agent came back with lives on its own row, which the header opens when the CLI named it.
  */
 export function AgentTurnRow({ label, onOpen }) {
     const line = 'mb-0.5 flex h-7 w-full items-center gap-2 text-left text-xs text-text-muted';

package/dist/chat/ui/rows/WorkRows.d.ts

@@ -1,20 +1,21 @@
+import { type ReactNode } from 'react';
 import type { ChatCheckpointDiff, ChatToolItem, ChatTurnItem } from '@adecore/agent-contracts';
 export declare function ToggleLine({ icon, label, detail, open, onToggle, failed, live, trailing, className }: {
-    icon: React.ReactNode;
+    icon: ReactNode;
     label: string;
     detail?: string;
     open: boolean;
     onToggle(): void;
     failed?: boolean;
     live?: boolean;
-    trailing?: React.ReactNode;
+    trailing?: ReactNode;
     className?: string;
 }): import("react").JSX.Element;
 export declare function WorkRow({ tool, nested, detail, icon, label, failed }: {
     tool: ChatToolItem;
     nested?: boolean;
     detail?: string;
-    icon?: React.ReactNode;
+    icon?: ReactNode;
     label?: string;
     failed?: boolean;
 }): import("react").JSX.Element;

package/dist/chat/ui/rows/WorkRows.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Suspense, useEffect, useState } from 'react';
 import clsx from 'clsx';
 import i18next from 'i18next';
@@ -30,15 +30,24 @@ export function ToggleLine({ icon, label, detail, open, onToggle, failed, live,
         // Fix the width so long commands reach the truncation inside the negative margins.
         '-mx-1 mb-0.5 flex h-7 w-[calc(100%+8px)] items-center gap-2 rounded-md px-1 text-left text-xs text-text-muted hover:bg-surface-hover', failed && 'text-status-error', className), onClick: onToggle, children: [_jsx("span", { className: clsx(ROW_GUTTER, live && 'text-accent'), children: icon }), _jsx("span", { className: clsx('shrink-0', live && 'chat-live-text'), children: label }), detail && (_jsx("span", { "data-find-field": "summary", className: "min-w-0 truncate font-mono text-text-faint", children: detail })), _jsx("span", { className: "grow" }), trailing, failed && _jsx(Icon, { icon: X, size: 12, className: "shrink-0" }), _jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('shrink-0 text-text-faint transition-transform', open && 'rotate-90') })] }));
 }
-function ToolBody({ tool }) {
+/* The diff renderers load lazily, so a diff waits on them under a line that says so. */
+function DiffSuspense({ children }) {
     const { t } = useTranslation('agent-chat');
+    return _jsx(Suspense, { fallback: _jsx("div", { className: "px-3 py-2 text-xs text-text-faint", children: t('work.loadingDiff') }), children: children });
+}
+/* A file in a changed files card, which opens its diff under it. */
+function ChangedFileLine({ path, open, onToggle, trailing, children }) {
+    return (_jsxs("div", { className: "border-t border-border", children: [_jsxs("button", { className: "flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-text-muted hover:bg-surface-hover", "data-file-path": path, onClick: onToggle, children: [_jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('shrink-0 text-text-faint transition-transform', open && 'rotate-90') }), _jsx("span", { className: "min-w-0 truncate font-mono text-text", children: path }), _jsx("span", { className: "grow" }), trailing] }), open && _jsx("div", { className: "border-t border-border", children: children })] }));
+}
+function ToolBody({ tool }) {
     const patches = unifiedChanges(tool);
     const changes = patches.length > 0 ? [] : fileChanges(tool.name, tool.input);
-    return (_jsxs("div", { className: "mt-1.5 mb-2 ml-6 overflow-hidden rounded-md border border-border bg-surface-raised", children: [patches.length > 0 ? (_jsx(Suspense, { fallback: _jsx("div", { className: "px-3 py-2 text-xs text-text-faint", children: t('work.loadingDiff') }), children: patches.map((change, index) => (_jsx(UnifiedDiff, { change: change }, index))) })) : changes.length > 0 ? (_jsx(Suspense, { fallback: _jsx("div", { className: "px-3 py-2 text-xs text-text-faint", children: t('work.loadingDiff') }), children: changes.map((change, index) => (_jsx(EditDiff, { change: change }, index))) })) : (_jsx("pre", { className: "max-h-64 overflow-auto px-3 py-2 font-mono text-code text-text-muted select-text", children: clip(JSON.stringify(tool.input, null, 2) ?? '') })), tool.output !== null && tool.output !== '' && patches.length === 0 && (_jsx("pre", { "data-find-field": "output", className: clsx('max-h-64 overflow-auto whitespace-pre-wrap border-t border-border px-3 py-2 font-mono text-code select-text', tool.state === 'error' ? 'text-chat-removed' : 'text-chat-output'), children: _jsx(AnsiOutput, { text: tool.output, limit: OUTPUT_LIMIT }) }))] }));
+    return (_jsxs("div", { className: "mt-1.5 mb-2 ml-6 overflow-hidden rounded-md border border-border bg-surface-raised", children: [patches.length > 0 ? (_jsx(DiffSuspense, { children: patches.map((change, index) => (_jsx(UnifiedDiff, { change: change }, index))) })) : changes.length > 0 ? (_jsx(DiffSuspense, { children: changes.map((change, index) => (_jsx(EditDiff, { change: change }, index))) })) : (_jsx("pre", { className: "max-h-64 overflow-auto px-3 py-2 font-mono text-code text-text-muted select-text", children: clip(JSON.stringify(tool.input, null, 2) ?? '') })), tool.output !== null && tool.output !== '' && patches.length === 0 && (_jsx("pre", { "data-find-field": "output", className: clsx('max-h-64 overflow-auto whitespace-pre-wrap border-t border-border px-3 py-2 font-mono text-code select-text', tool.state === 'error' ? 'text-chat-removed' : 'text-chat-output'), children: _jsx(AnsiOutput, { text: tool.output, limit: OUTPUT_LIMIT }) }))] }));
 }
-/* One settled tool call: a line, and its input and output behind it. An image the call looked at
-   is drawn under the line, because a picture says more about that read than its path does.
-   `icon`, `label` and `failed` let a row that knows the call better name it in its own words. */
+/*
+ * One settled tool call: a line, and its input and output behind it. An image the call looked at is
+ * drawn under the line. `icon`, `label` and `failed` let a row that knows the call better name it.
+ */
 export function WorkRow({ tool, nested, detail, icon, label, failed }) {
     const [open, setOpen] = useState(false);
     const image = tool.state === 'done' ? readImagePath(tool.name, tool.input) : null;
@@ -76,17 +85,16 @@ function omittedLabel(reason) {
 }
 /* One file of a turn's checkpoint diff: its patch, or the reason there is none. */
 function CheckpointFileBody({ file }) {
-    const { t } = useTranslation('agent-chat');
     if (file.omitted) {
         return _jsx("div", { className: "px-3 py-2 text-xs text-text-faint", children: omittedLabel(file.omitted) });
     }
-    return (_jsx(Suspense, { fallback: _jsx("div", { className: "px-3 py-2 text-xs text-text-faint", children: t('work.loadingDiff') }), children: _jsx(UnifiedDiff, { change: file }) }));
+    return (_jsx(DiffSuspense, { children: _jsx(UnifiedDiff, { change: file }) }));
 }
 /* The frame of a changed files card: a header that folds the list of files away. */
 function ChangedFilesCard({ count, truncated, added, deleted, revealNonce = 0, children }) {
     const { t } = useTranslation('agent-chat');
     const [expanded, setExpanded] = useState(false);
-    // A jump from outside opens the card, also when the jump put the row on screen and so mounted it; the flash is gone by the time the row is scrolled to again.
+    // A jump opens the card, also one that mounted it by scrolling it on screen; the flash is gone by the next visit.
     const [seenReveal, setSeenReveal] = useState(0);
     if (revealNonce > 0 && revealNonce !== seenReveal) {
         setSeenReveal(revealNonce);
@@ -127,7 +135,7 @@ export function ChangedFilesRow({ tools, diff, checkpoint, chatId, turnId }) {
     const revealNonce = flash !== null && flash.opens && flash.key === keyOf(chatId) && flash.rowId === `files-${turnId}` ? flash.nonce : 0;
     if (checkpointDiff !== null && checkpointDiff.files.length > 0) {
         const files = checkpointDiff.files;
-        return (_jsx(ChangedFilesCard, { revealNonce: revealNonce, count: files.length, truncated: checkpointDiff.truncated, added: files.reduce((sum, file) => sum + file.added, 0), deleted: files.reduce((sum, file) => sum + file.deleted, 0), children: files.map((file) => (_jsxs("div", { className: "border-t border-border", children: [_jsxs("button", { className: "flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-text-muted hover:bg-surface-hover", "data-file-path": file.path, onClick: () => setOpen((o) => ({ ...o, [file.path]: !o[file.path] })), children: [_jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('shrink-0 text-text-faint transition-transform', open[file.path] && 'rotate-90') }), _jsx("span", { className: "min-w-0 truncate font-mono text-text", children: file.path }), _jsx("span", { className: "grow" }), _jsxs("span", { className: "text-chat-added tabular-nums", children: ["+", file.added] }), _jsxs("span", { className: "text-chat-removed tabular-nums", children: ["-", file.deleted] })] }), open[file.path] && (_jsx("div", { className: "border-t border-border", children: _jsx(CheckpointFileBody, { file: file }) }))] }, file.path))) }));
+        return (_jsx(ChangedFilesCard, { revealNonce: revealNonce, count: files.length, truncated: checkpointDiff.truncated, added: files.reduce((sum, file) => sum + file.added, 0), deleted: files.reduce((sum, file) => sum + file.deleted, 0), children: files.map((file) => (_jsx(ChangedFileLine, { path: file.path, open: open[file.path] === true, onToggle: () => setOpen((o) => ({ ...o, [file.path]: !o[file.path] })), trailing: _jsxs(_Fragment, { children: [_jsxs("span", { className: "text-chat-added tabular-nums", children: ["+", file.added] }), _jsxs("span", { className: "text-chat-removed tabular-nums", children: ["-", file.deleted] })] }), children: _jsx(CheckpointFileBody, { file: file }) }, file.path))) }));
     }
     return _jsx(ProviderChangedFiles, { tools: tools, open: open, setOpen: setOpen, revealNonce: revealNonce });
 }
@@ -156,10 +164,7 @@ function ProviderChangedFiles({ tools, open, setOpen, revealNonce }) {
             entryFor(change.path || tool.id).edits.push(change);
         }
     }
-    return (_jsx(ChangedFilesCard, { count: byPath.size, revealNonce: revealNonce, children: [...byPath].map(([path, entry]) => {
-            const count = entry.edits.length + entry.patches.length;
-            return (_jsxs("div", { className: "border-t border-border", children: [_jsxs("button", { className: "flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-text-muted hover:bg-surface-hover", "data-file-path": path, onClick: () => setOpen((o) => ({ ...o, [path]: !o[path] })), children: [_jsx(Icon, { icon: ChevronRight, size: 12, className: clsx('shrink-0 text-text-faint transition-transform', open[path] && 'rotate-90') }), _jsx("span", { className: "min-w-0 truncate font-mono text-text", children: path }), _jsx("span", { className: "grow" }), _jsx("span", { className: "text-text-faint", children: t('work.edits', { count }) })] }), open[path] && (_jsx("div", { className: "border-t border-border", children: _jsxs(Suspense, { fallback: _jsx("div", { className: "px-3 py-2 text-xs text-text-faint", children: t('work.loadingDiff') }), children: [entry.patches.map((change, index) => (_jsx(UnifiedDiff, { change: change }, `patch-${index}`))), entry.edits.map((change, index) => (_jsx(EditDiff, { change: change }, `edit-${index}`)))] }) }))] }, path));
-        }) }));
+    return (_jsx(ChangedFilesCard, { count: byPath.size, revealNonce: revealNonce, children: [...byPath].map(([path, entry]) => (_jsx(ChangedFileLine, { path: path, open: open[path] === true, onToggle: () => setOpen((o) => ({ ...o, [path]: !o[path] })), trailing: _jsx("span", { className: "text-text-faint", children: t('work.edits', { count: entry.edits.length + entry.patches.length }) }), children: _jsxs(DiffSuspense, { children: [entry.patches.map((change, index) => (_jsx(UnifiedDiff, { change: change }, `patch-${index}`))), entry.edits.map((change, index) => (_jsx(EditDiff, { change: change }, `edit-${index}`)))] }) }, path))) }));
 }
 /* "Working for 00:14". */
 export function WorkingRow({ startedAt }) {

package/dist/chat/visual-viewport.d.ts

@@ -1,6 +1,5 @@
 import type { VisualScrollRequest } from '@adecore/agent-contracts/visual';
 import type { VisualBridge } from './visual-bridge.js';
-/** Keeps one small frame in a full-height timeline row, without rendering React on scroll. */
 export declare class VisualViewportController {
     private readonly box;
     private readonly viewport;
@@ -18,5 +17,6 @@ export declare class VisualViewportController {
     refresh(): void;
     scroll(request: VisualScrollRequest): void;
     dispose(): void;
+    private offsetInScroller;
     private schedule;
 }

package/dist/chat/visual-viewport.js

@@ -1,5 +1,5 @@
 import { visualViewportGeometry } from './logic/visual-viewport.js';
-/** Keeps one small frame in a full-height timeline row, without rendering React on scroll. */
+/* Keeps one small frame in a full-height timeline row, without rendering React on scroll. */
 export class VisualViewportController {
     box;
     viewport;
@@ -35,11 +35,7 @@ export class VisualViewportController {
         if (this.disposed) {
             return;
         }
-        const outer = this.scroller.getBoundingClientRect();
-        const box = this.box.getBoundingClientRect();
-        // A chat on a canvas can be scaled; messages inside its frame use unscaled CSS pixels.
-        const scale = outer.height / this.scroller.offsetHeight || 1;
-        const top = (box.top - outer.top) / scale - this.scroller.clientTop;
+        const top = this.offsetInScroller(this.scroller.getBoundingClientRect(), this.box.getBoundingClientRect());
         const available = this.scroller.clientHeight;
         const geometry = visualViewportGeometry(this.box.offsetHeight, available, top);
         this.viewport.style.height = `${geometry.height}px`;
@@ -61,8 +57,7 @@ export class VisualViewportController {
             return;
         }
         this.pendingDelta = 0;
-        const scale = outer.height / this.scroller.offsetHeight || 1;
-        const start = this.scroller.scrollTop + (box.top - outer.top) / scale - this.scroller.clientTop;
+        const start = this.scroller.scrollTop + this.offsetInScroller(outer, box);
         const top = 'to' in request ? start + request.to : request.edge === 'start' ? 0 : this.scroller.scrollHeight;
         this.scroller.scrollTo({ top, behavior: 'instant' });
         this.refresh();
@@ -75,6 +70,12 @@ export class VisualViewportController {
         this.scroller.removeEventListener('scroll', this.onScroll);
         this.bridge.setViewport(null);
     }
+    /* The box's top below the scroller's visible top, in the scroller's own pixels. */
+    offsetInScroller(outer, box) {
+        // A chat on a canvas can be scaled; messages inside its frame use unscaled CSS pixels.
+        const scale = outer.height / this.scroller.offsetHeight || 1;
+        return (box.top - outer.top) / scale - this.scroller.clientTop;
+    }
     schedule() {
         if (this.frame || this.disposed) {
             return;

package/dist/port-transport.js

@@ -93,15 +93,11 @@ export function portTransport(port) {
             return promise;
         },
         on(event, handler) {
-            let handlers = eventHandlers.get(event);
-            if (!handlers) {
-                handlers = new Set();
-                eventHandlers.set(event, handlers);
-            }
-            const set = handlers;
-            set.add(handler);
+            const handlers = eventHandlers.get(event) ?? new Set();
+            eventHandlers.set(event, handlers);
+            handlers.add(handler);
             return () => {
-                set.delete(handler);
+                handlers.delete(handler);
             };
         },
         subscribeStatus(handler) {

package/dist/state/chats.js

@@ -113,6 +113,14 @@ export function applyEvent(state, event) {
             return stateOf(event.info, event.items);
     }
 }
+/* Fields of a held chat that are not part of its thread; a chat this client does not hold stays as it is. */
+function withFields(store, key, fields) {
+    const current = store.byKey[key];
+    if (!current) {
+        return {};
+    }
+    return { byKey: { ...store.byKey, [key]: { ...current, ...fields } } };
+}
 export const useChats = create((set) => ({
     byKey: {},
     statusByKey: {},
@@ -166,22 +174,10 @@ export const useChats = create((set) => ({
         });
     },
     bookmarks(key, bookmarks) {
-        set((s) => {
-            const current = s.byKey[key];
-            if (!current) {
-                return {};
-            }
-            return { byKey: { ...s.byKey, [key]: { ...current, bookmarks } } };
-        });
+        set((s) => withFields(s, key, { bookmarks }));
     },
     visuals(key, visuals) {
-        set((s) => {
-            const current = s.byKey[key];
-            if (!current) {
-                return {};
-            }
-            return { byKey: { ...s.byKey, [key]: { ...current, visuals } } };
-        });
+        set((s) => withFields(s, key, { visuals }));
     },
     forget(key) {
         set((s) => {

package/dist/state/usage.js

@@ -32,12 +32,6 @@ function parsePreferences(raw) {
     }
 }
 const storage = persistedJson(storageKey, parsePreferences, DEFAULTS, () => chatStorageLegacyKeys('usage'));
-function readPreferences() {
-    return storage.read();
-}
-function persist(preferences) {
-    storage.write(preferences);
-}
 /* The three stored choices out of the store, so a setter writes the other two back unchanged. */
 function chosen(state) {
     return { period: state.period, metric: state.metric, currency: state.currency };
@@ -49,10 +43,7 @@ function pad(value) {
 export function dayOf(date) {
     return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
 }
-/*
- * What a period asks for. Today counts from local midnight in hours, the way the commit log already
- * groups days, so every other period reads as one bar per calendar day.
- */
+/* What a period asks for: today in hours from local midnight, every other period a bar per calendar day. */
 export function windowFor(period, now = new Date()) {
     const days = USAGE_PERIODS.find((entry) => entry.id === period)?.days ?? 7;
     const from = new Date(now.getFullYear(), now.getMonth(), now.getDate() - (days - 1));
@@ -75,46 +66,50 @@ export function askedKey(payload) {
 const EMPTY = { asked: null, summary: null, loading: false, failed: false, limits: null };
 /* Reads the period, metric and currency again, once another window of the same origin wrote them. */
 export function reloadUsagePreferences() {
-    useUsageStore.setState(readPreferences());
+    useUsageStore.setState(storage.read());
 }
-export const useUsageStore = createChatStore((set, get) => ({
-    ...DEFAULTS,
-    byScope: {},
-    chosen: null,
-    choose(scopeId) {
-        set({ chosen: scopeId });
-    },
-    setPeriod(period) {
-        persist({ ...chosen(get()), period });
-        set({ period });
-    },
-    setMetric(metric) {
-        persist({ ...chosen(get()), metric });
-        set({ metric });
-    },
-    setCurrency(currency) {
-        persist({ ...chosen(get()), currency });
-        set({ currency });
-    },
-    setLoading(scopeId, loading) {
-        set({ byScope: { ...get().byScope, [scopeId]: { ...(get().byScope[scopeId] ?? EMPTY), loading } } });
-    },
-    receive(scopeId, asked, summary) {
-        set({
-            byScope: { ...get().byScope, [scopeId]: { ...(get().byScope[scopeId] ?? EMPTY), asked, summary, loading: false, failed: false } }
-        });
-    },
-    fail(scopeId) {
-        set({ byScope: { ...get().byScope, [scopeId]: { ...(get().byScope[scopeId] ?? EMPTY), loading: false, failed: true } } });
-    },
-    setLimits(scopeId, limits) {
-        set({ byScope: { ...get().byScope, [scopeId]: { ...(get().byScope[scopeId] ?? EMPTY), limits } } });
-    },
-    forget(scopeId) {
-        const { [scopeId]: _gone, ...rest } = get().byScope;
-        set({ byScope: rest });
-    }
-}), (store) => store.setState(readPreferences()));
+export const useUsageStore = createChatStore((set, get) => {
+    const choosePreference = (change) => {
+        storage.write({ ...chosen(get()), ...change });
+        set(change);
+    };
+    const patchRow = (scopeId, change) => {
+        set({ byScope: { ...get().byScope, [scopeId]: { ...(get().byScope[scopeId] ?? EMPTY), ...change } } });
+    };
+    return {
+        ...DEFAULTS,
+        byScope: {},
+        chosen: null,
+        choose(scopeId) {
+            set({ chosen: scopeId });
+        },
+        setPeriod(period) {
+            choosePreference({ period });
+        },
+        setMetric(metric) {
+            choosePreference({ metric });
+        },
+        setCurrency(currency) {
+            choosePreference({ currency });
+        },
+        setLoading(scopeId, loading) {
+            patchRow(scopeId, { loading });
+        },
+        receive(scopeId, asked, summary) {
+            patchRow(scopeId, { asked, summary, loading: false, failed: false });
+        },
+        fail(scopeId) {
+            patchRow(scopeId, { loading: false, failed: true });
+        },
+        setLimits(scopeId, limits) {
+            patchRow(scopeId, { limits });
+        },
+        forget(scopeId) {
+            const { [scopeId]: _gone, ...rest } = get().byScope;
+            set({ byScope: rest });
+        }
+    };
+}, (store) => store.setState(storage.read()));
 export function useUsage(select) {
     const { id } = useChatScope();
     return useUsageStore((s) => select({ period: s.period, metric: s.metric, currency: s.currency, ...(s.byScope[id] ?? EMPTY) }));

package/dist/storage.js

@@ -64,25 +64,25 @@ export function createChatStore(initial, hydrate) {
         hydrate(store);
     };
     hydrators.push(hydrateOnce);
-    const useStore = ((...args) => {
+    const ready = () => {
         hydrateChatStorage();
         hydrateOnce();
+    };
+    const useStore = ((...args) => {
+        ready();
         return store(...args);
     });
     Object.assign(useStore, store);
     useStore.getState = () => {
-        hydrateChatStorage();
-        hydrateOnce();
+        ready();
         return store.getState();
     };
     useStore.subscribe = (...args) => {
-        hydrateChatStorage();
-        hydrateOnce();
+        ready();
         return store.subscribe(...args);
     };
     useStore.setState = ((...args) => {
-        hydrateChatStorage();
-        hydrateOnce();
+        ready();
         store.setState(...args);
     });
     return useStore;

package/dist/theme.css

@@ -76,8 +76,6 @@
 }
 
 @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
@@ -160,18 +158,12 @@
 }
 
 /*
- * 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.
+ * Markdown, outside every layer on purpose: the typography plugin registers `.prose` as a utility,
+ * and only unlayered styles are sure to land on top of it.
+ *
+ * Every `Markdown` 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. The semantic tokens flip with the theme on
+ * their own, so the prose variables read from them and `prose-invert` is not needed.
  */
 .prose.chat-markdown {
     --tw-prose-body: var(--text);

package/dist/usage/LimitsList.js

@@ -9,8 +9,7 @@ import { formatClock, formatWeekdayClock, isSameDay, formatCountdown, formatPerc
 import { ProviderLogo } from '../agents/ProviderLogo.js';
 import { PROVIDER_COLORS, PROVIDER_LABELS } from './format.js';
 import { accountNote, explain, isSignedOut, nextReset } from './limit-groups.js';
-/* 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. */
+/* Red where a window is nearly spent, amber where it is worth knowing; room to spare is not news and takes the text color. */
 function toneOf(used) {
     return used >= 0.9 ? 'bg-status-error' : used >= 0.7 ? 'bg-status-needs-you' : 'bg-text';
 }

package/dist/usage/UsageBreakdown.js

@@ -12,11 +12,9 @@ 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. */
+/* The table pulls the padding that gives a row's hover room back off, so its first column lines up with 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. */

package/dist/usage/UsageDialog.js

@@ -2,10 +2,8 @@ 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.
+ * The frame of the usage page, wider than the settings for the chart and the breakdown. What goes in
+ * it mounts only while it is open, so nothing is scanned behind a closed dialog.
  */
 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/format.js

@@ -1,7 +1,6 @@
 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. */
+/* Read in the region of the machine looking at it: `$5,480.96` in the US, `$ 5.480,96` in the Netherlands. */
 export function formatCount(value) {
     return formatNumber(value);
 }
@@ -23,8 +22,10 @@ export function moneyFormat(currency, rate) {
 }
 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. */
+/*
+ * 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)));
 }
@@ -47,8 +48,7 @@ export function slotAxisLabel(slot) {
 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. */
+/* Enough of a path's tail to tell two checkouts of the same repository apart, under a row that already carries the name. */
 export function shortPath(path) {
     const parts = path.split('/').filter(Boolean);
     return parts.length <= 3 ? path : `…/${parts.slice(-3).join('/')}`;

package/dist/usage/money.js

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

package/dist/usage/summary.js

@@ -74,10 +74,8 @@ export function deriveUsage(summary, metric) {
     };
 }
 /*
- * The same buckets the chart draws, written out as a table of calendar days, newest first. Today is
- * drawn per hour but read per day, so an hour slot is folded onto the date it names. A day nothing
- * happened in is left out, since the chart already shows the gap, and a quiet fortnight would otherwise
- * be fourteen rows of zeroes between the days worth reading.
+ * The chart's buckets as a table of calendar days, newest first; an hour slot folds onto the date it
+ * names. A day nothing happened in is left out, since the chart already shows the gap.
  */
 export function deriveDays(summary) {
     const rows = new Map();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/agents-react",
-  "version": "0.21.1",
+  "version": "0.21.2",
   "description": "React agent chat threads, composers, approvals, provider accounts and usage views.",
   "type": "module",
   "exports": {
@@ -1011,8 +1011,8 @@
     "test:visuals": "bun --config=integration.bunfig.toml --conditions=source test ./src/chat/visual-viewport.integration.test.ts"
   },
   "dependencies": {
-    "@adecore/agent-contracts": "0.21.1",
-    "@adecore/intelligent-ui": "0.21.1",
+    "@adecore/agent-contracts": "0.21.2",
+    "@adecore/intelligent-ui": "0.21.2",
     "@codemirror/commands": "^6.11.1",
     "@codemirror/language": "^6.12.4",
     "@codemirror/state": "^6.7.6",
@@ -1033,7 +1033,7 @@
     "zustand": "^5.0.15"
   },
   "peerDependencies": {
-    "@adecore/ui": "^0.21.1",
+    "@adecore/ui": "^0.21.2",
     "i18next": "^26.4.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",