@adecore/agents-react 0.39.0 → 0.40.1

package/src/state/chats.ts

@@ -21,10 +21,8 @@ export interface ChatState {
     historyPending?: boolean;
     items: Record<string, ChatItem>;
     /*
-     * The items as the timeline groups them: the same map as `items`, except that a delta growing a
-     * reply or a thought that already has text, or the output of a running call, leaves it as it was.
-     * The rows are derived from this, so a word arriving touches the row that draws it and not the
-     * whole thread; that row reads its text from `items` with `useCurrentItem`.
+     * `items`, except that a delta growing a reply or thought that has text, or a running call's output,
+     * leaves it as it was. The rows derive from this, so a word redraws only its row (`useCurrentItem`).
      */
     structure: Record<string, ChatItem>;
     order: string[];
@@ -100,21 +98,25 @@ interface ChatsStore {
     forgetWhere(matches: (key: string) => boolean): void;
 }
 
-function isWaiting(item: ChatItem | undefined): item is ChatApprovalItem | ChatQuestionItem {
+export function isWaiting(item: ChatItem | undefined): item is ChatApprovalItem | ChatQuestionItem {
     return (item?.kind === 'approval' && item.decision === 'pending') || (item?.kind === 'question' && item.state === 'pending');
 }
 
 function stateOf(info: ChatInfo, items: ChatItem[], page?: ChatPage): ChatState {
     const byId = Object.fromEntries(items.map((item) => [item.id, item]));
     const order = items.map((item) => item.id);
+
     if (page === undefined || page.history.cursor === null) {
         return { info, items: byId, structure: byId, order };
     }
+
     const before = page.pending.filter((item) => !(item.id in byId));
     const subagents = (page.subagents ?? []).filter((item) => !(item.id in byId));
+
     for (const item of [...before, ...subagents]) {
         byId[item.id] = item;
     }
+
     return {
         info,
         items: byId,
@@ -137,13 +139,17 @@ type ItemWriter = (state: ChatState, item: ChatItem, structural?: boolean) => Ch
 function withEarlierItem(state: ChatState, item: ChatItem, write: ItemWriter): ChatState {
     if (item.kind === 'subagent') {
         const subagents = state.subagentsBefore ?? [];
+
         return { ...write(state, item), subagentsBefore: subagents.includes(item.id) ? subagents : [...subagents, item.id] };
     }
+
     const waiting = state.waitingBefore ?? [];
     const held = waiting.includes(item.id);
+
     if (isWaiting(item)) {
         return { ...write(state, item), waitingBefore: held ? waiting : [...waiting, item.id] };
     }
+
     return held ? { ...write(state, item), waitingBefore: waiting.filter((id) => id !== item.id) } : state;
 }
 
@@ -152,22 +158,29 @@ export function prependPage(state: ChatState, cursor: string, page: ChatHistoryR
     if (state.history?.cursor !== cursor) {
         return state;
     }
+
     const { historyPending: _historyPending, ...loaded } = state;
     const held = new Set(state.order);
     const older = page.items.filter((item) => !held.has(item.id));
     const olderIds = new Set(older.map((item) => item.id));
     const items = { ...state.items };
+
     for (const item of older) {
         // A request from before the page that this client already holds came in live, which is never older than the page.
         items[item.id] = state.items[item.id] ?? item;
     }
+
     const order = [...olderIds, ...state.order];
+
     if (page.history.cursor === null) {
         const { history: _history, waitingBefore: _waitingBefore, subagentsBefore: _subagentsBefore, ...rest } = loaded;
+
         return { ...rest, items, structure: items, order };
     }
+
     const waitingBefore = (state.waitingBefore ?? []).filter((id) => !olderIds.has(id));
     const subagentsBefore = (state.subagentsBefore ?? []).filter((id) => !olderIds.has(id));
+
     return { ...loaded, items, structure: items, order, history: page.history, waitingBefore, subagentsBefore };
 }
 
@@ -178,6 +191,7 @@ export function waitingRequestsOf(chat: Pick<ChatState, 'structure' | 'order' |
 
 function withItem(state: ChatState, item: ChatItem, structural = true): ChatState {
     const items = { ...state.items, [item.id]: item };
+
     return structural ? { ...state, items, structure: items } : { ...state, items };
 }
 
@@ -201,18 +215,23 @@ export function applyEvent(state: ChatState, event: ChatEvent): ChatState {
 
 function replayEvents(state: ChatState, events: readonly ChatEvent[]): ChatState {
     let draft: Record<string, ChatItem> | undefined;
+
     const write: ItemWriter = (current, item, structural = true) => {
         // A text delta must leave the last structural snapshot intact, including within this replay.
         if (draft !== current.items || (!structural && draft === current.structure)) {
             draft = { ...current.items };
         }
+
         // Item ids may be __proto__, so this must define an own data property.
         Object.defineProperty(draft, item.id, { value: item, enumerable: true, configurable: true, writable: true });
+
         return structural ? { ...current, items: draft, structure: draft } : { ...current, items: draft };
     };
+
     for (const event of events) {
         state = applyUpdate(state, event, write);
     }
+
     return state;
 }
 
@@ -222,37 +241,44 @@ function applyUpdate(state: ChatState, event: ChatEvent, write: ItemWriter): Cha
             if (isBeforePage(state, event.historyIndex)) {
                 return withEarlierItem(state, event.item, write);
             }
+
             const known = event.item.id in state.items;
+
             return { ...write(state, event.item), order: known ? state.order : [...state.order, event.item.id] };
         }
         case 'delta': {
             const item = state.items[event.itemId];
+
             if (event.uiQueries && item?.kind === 'assistant') {
                 // The text first, as the daemon's thread applies it, then the metadata on what it grew into.
                 const { uiQueries, ...text } = event;
                 const grown = event.text === '' ? state : applyUpdate(state, text, write);
                 const reply = grown.items[event.itemId] ?? item;
+
                 return write(grown, { ...reply, uiQueries } as ChatItem, false);
             }
+
             if (event.ui !== undefined && event.text === '') {
                 if (item?.kind === 'assistant' && item.streaming && event.textLength === item.text.length) {
                     return write(state, { ...item, ui: event.ui }, false);
                 }
+
                 return state;
             }
+
             if (item?.kind === 'assistant' || item?.kind === 'thinking') {
                 const grown = { ...item, text: item.text + event.text };
+
                 // The first text is structure after all, since an empty reply that is not streaming has no row.
-                if (item.text === '') {
-                    return write(state, grown);
-                }
-                return write(state, grown, false);
+                return write(state, grown, item.text === '');
             }
+
             if (item?.kind === 'tool' && item.state === 'running') {
                 const progress = item.progress ?? { startedAt: null, description: null, output: null };
-                const grown = { ...item, progress: { ...progress, output: appendToolOutput(progress.output, event.text) } };
-                return write(state, grown, false);
+
+                return write(state, { ...item, progress: { ...progress, output: appendToolOutput(progress.output, event.text) } }, false);
             }
+
             return state;
         }
         case 'info':
@@ -265,9 +291,11 @@ function applyUpdate(state: ChatState, event: ChatEvent, write: ItemWriter): Cha
 /* 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: ChatsStore, key: string, fields: Pick<ChatState, 'bookmarks' | 'visuals'>): Partial<ChatsStore> {
     const current = store.byKey[key];
+
     if (!current) {
         return {};
     }
+
     return { byKey: { ...store.byKey, [key]: { ...current, ...fields } } };
 }
 
@@ -279,6 +307,7 @@ export const useChats = create<ChatsStore>((set) => ({
             // The bookmarks and the visuals are not part of the thread; they come in on their own and outlive a reset of it.
             const { bookmarks, visuals } = s.byKey[key] ?? {};
             const next = { ...stateOf(info, items, page), ...(bookmarks === undefined ? {} : { bookmarks }), ...(visuals === undefined ? {} : { visuals }) };
+
             return {
                 byKey: { ...s.byKey, [key]: next },
                 statusByKey: withStatus(s.statusByKey, key, info)
@@ -288,48 +317,59 @@ export const useChats = create<ChatsStore>((set) => ({
     prepend(key, cursor, page) {
         set((s) => {
             const current = s.byKey[key];
+
             if (!current) {
                 return {};
             }
+
             const next = prependPage(current, cursor, page);
+
             return next === current ? {} : { byKey: { ...s.byKey, [key]: next } };
         });
     },
     apply(key, event) {
         set((s) => {
             const current = s.byKey[key];
+
             if (!current) {
                 return {};
             }
+
             const next = applyEvent(current, event);
+
             return { byKey: { ...s.byKey, [key]: next }, statusByKey: withStatus(s.statusByKey, key, next.info) };
         });
     },
     replay(key, events) {
         set((store) => {
             const current = store.byKey[key];
+
             if (!current || events.length === 0) {
                 return store;
             }
+
             const next = replayEvents(current, events);
+
             return next === current ? store : { byKey: { ...store.byKey, [key]: next }, statusByKey: withStatus(store.statusByKey, key, next.info) };
         });
     },
     /*
-     * The status of a chat this window is not reading, which the host sends for every chat it has
-     * loaded. The thread stays empty until somebody attaches, since this is what a header, a list and
-     * the counters need, and they ask the info and never the items.
+     * The host sends this for every chat it has loaded. The thread stays empty until somebody attaches,
+     * since a header, a list and the counters read the info and never the items.
      */
     status(key, info) {
         set((s) => {
             const current = s.byKey[key];
+
             if (!current) {
                 return { byKey: { ...s.byKey, [key]: { ...stateOf(info, []), historyPending: true } }, statusByKey: withStatus(s.statusByKey, key, info) };
             }
+
             // An attached client already had this on `chat.event`; writing it again would redraw the thread.
             if (sameInfo(current.info, info)) {
                 return {};
             }
+
             return { byKey: { ...s.byKey, [key]: { ...current, info } }, statusByKey: withStatus(s.statusByKey, key, info) };
         });
     },
@@ -345,6 +385,7 @@ export const useChats = create<ChatsStore>((set) => ({
             delete next[key];
             const statuses = { ...s.statusByKey };
             delete statuses[key];
+
             return { byKey: next, statusByKey: statuses };
         });
     },
@@ -371,6 +412,7 @@ export function chatSink(keyOf: (chatId: string) => string): ChatSink {
 /* One chat's thread in the scope this is rendered in. The selector keeps a render tied to the field it reads. */
 export function useChatRow<T>(chatId: string, select: (row: ChatState | undefined) => T): T {
     const { keyOf } = useChatScope();
+
     return useChats((s) => select(s.byKey[keyOf(chatId)]));
 }
 
@@ -380,15 +422,19 @@ export function useChatRow<T>(chatId: string, select: (row: ChatState | undefine
  */
 export function useReportedModels(provider: AgentKind): ReadonlySet<string> {
     const scope = useContext(ChatScopeContext);
+
     const joined = useChats((s) => {
         const names = new Set<string>();
+
         for (const [key, state] of Object.entries(s.statusByKey)) {
             if (scope?.owns(key) === true && state.info.provider === provider && state.info.model !== null) {
                 names.add(state.info.model);
             }
         }
+
         return [...names].sort().join('\n');
     });
+
     return new Set(joined === '' ? [] : joined.split('\n'));
 }
 
@@ -401,6 +447,7 @@ export function useAwaitsApproval(chatId: string, toolUseId: string): boolean {
 export function useCurrentItem<T extends ChatItem>(chatId: string, derived: T): T {
     return useChatRow(chatId, (row) => {
         const item = row?.items[derived.id];
+
         return item?.kind === derived.kind ? (item as T) : derived;
     });
 }

package/src/state/index.ts

@@ -12,6 +12,7 @@ export {
     type ChatHistoryPage,
     type ChatPage
 } from './chats';
+
 export {
     useProviderAccountsStore,
     useProviderAccounts,
@@ -20,5 +21,6 @@ export {
     watchProviderAccounts,
     type ProviderAccountsRow
 } from './provider-accounts';
+
 export { useProvidersStore, useProviders, providersOf, providerSinkFor, type ProvidersRow } from './providers';
 export { type UsageMetric, USAGE_PREFERENCES_KEY, dayOf, windowFor, reloadUsagePreferences, useUsageStore, type UsagePeriod, type UsageView } from './usage';

package/src/state/provider-accounts.ts

@@ -1,7 +1,7 @@
 import { create } from 'zustand';
 import type { ProviderAccounts } from '@adecore/agent-contracts';
 import { useChatScope } from '../scope';
-import type { ChatTransport } from '../transport';
+import { whenOpen, type ChatTransport } from '../transport';
 
 export interface ProviderAccountsRow {
     /* Null until the host answered, and for a host too old to keep accounts. */
@@ -33,6 +33,7 @@ export const useProviderAccountsStore = create<ProviderAccountsStore>((set, get)
 /* The accounts of the host in scope, like `useProviders`. */
 export function useProviderAccounts<T>(select: (row: ProviderAccountsRow) => T): T {
     const { id } = useChatScope();
+
     return useProviderAccountsStore((s) => select(s.byScope[id] ?? NONE));
 }
 
@@ -53,8 +54,10 @@ export function watchProviderAccounts(scopeId: string, transport: ChatTransport)
     const store = useProviderAccountsStore.getState();
     // A list asked for before a change arrived is older than that change, so it is dropped.
     let changes = 0;
+
     const load = (): void => {
         const asked = changes;
+
         transport
             .request('accounts.list', {})
             .then((accounts) => {
@@ -69,19 +72,14 @@ export function watchProviderAccounts(scopeId: string, transport: ChatTransport)
                 }
             });
     };
+
     const off = [
         transport.on('accounts.changed', (accounts) => {
             changes += 1;
             store.set(scopeId, accounts);
         }),
-        transport.subscribeStatus((status) => {
-            if (status === 'open') {
-                load();
-            }
-        })
+        whenOpen(transport, load)
     ];
-    if (transport.status === 'open') {
-        load();
-    }
+
     return () => off.forEach((stop) => stop());
 }

package/src/state/providers.ts

@@ -34,6 +34,7 @@ export const useProvidersStore = create<ProvidersStore>((set, get) => ({
  */
 export function useProviders<T>(select: (row: ProvidersRow) => T): T {
     const { id } = useChatScope();
+
     return useProvidersStore((s) => select(s.byScope[id] ?? NONE));
 }
 

package/src/state/usage.ts

@@ -19,6 +19,7 @@ export const USAGE_PERIODS: readonly { id: UsagePeriod; days: number }[] = [
 const storageKey = (): string => chatStorageKey('usage');
 
 export let USAGE_PREFERENCES_KEY = storageKey();
+
 onChatStorageConfiguration(() => {
     USAGE_PREFERENCES_KEY = storageKey();
 });
@@ -35,6 +36,7 @@ const DEFAULTS: Preferences = { period: '7d', metric: 'cost', currency: 'USD' };
 function parsePreferences(raw: string | null): Preferences {
     try {
         const stored = JSON.parse(raw ?? '{}') as Partial<Preferences>;
+
         return {
             period: USAGE_PERIODS.some((period) => period.id === stored.period) ? stored.period! : DEFAULTS.period,
             metric: stored.metric === 'tokens' || stored.metric === 'cost' ? stored.metric : DEFAULTS.metric,
@@ -65,6 +67,7 @@ export function dayOf(date: Date): string {
 export function windowFor(period: UsagePeriod, now = new Date()): UsageSummaryPayload {
     const days = USAGE_PERIODS.find((entry) => entry.id === period)?.days ?? 7;
     const from = new Date(now.getFullYear(), now.getMonth(), now.getDate() - (days - 1));
+
     return {
         from: dayOf(from),
         to: dayOf(now),
@@ -129,9 +132,11 @@ export const useUsageStore = createChatStore<UsageStore>(
             storage.write({ ...chosen(get()), ...change });
             set(change);
         };
+
         const patchRow = (scopeId: string, change: Partial<UsageRow>): void => {
             set({ byScope: { ...get().byScope, [scopeId]: { ...(get().byScope[scopeId] ?? EMPTY), ...change } } });
         };
+
         return {
             ...DEFAULTS,
             byScope: {},
@@ -177,5 +182,6 @@ export type UsageView = Preferences & UsageRow;
 
 export function useUsage<T>(select: (view: UsageView) => T): T {
     const { id } = useChatScope();
+
     return useUsageStore((s) => select({ period: s.period, metric: s.metric, currency: s.currency, ...(s.byScope[id] ?? EMPTY) }));
 }

package/src/storage.ts

@@ -37,12 +37,14 @@ export function configureChatStorage(configuration: ChatStorageOptions): void {
     if (hydrated) {
         throw new Error('Configure chat storage before using chat stores');
     }
+
     options = {
         ...configuration,
         keys: { ...configuration.keys },
         legacyNamespaces: [...(configuration.legacyNamespaces ?? [])],
         legacyKeys: Object.fromEntries(Object.entries(configuration.legacyKeys ?? {}).map(([key, values]) => [key, [...values]]))
     };
+
     for (const listener of configurationListeners) {
         listener();
     }
@@ -60,6 +62,7 @@ export function chatStorageAdapter(): ChatStorageAdapter | null {
     if (options.storage !== undefined) {
         return options.storage;
     }
+
     try {
         return globalThis.localStorage;
     } catch {
@@ -71,7 +74,9 @@ export function hydrateChatStorage(): void {
     if (hydrated) {
         return;
     }
+
     hydrated = true;
+
     for (const hydrate of hydrators) {
         hydrate();
     }
@@ -80,34 +85,47 @@ export function hydrateChatStorage(): void {
 export function createChatStore<T>(initial: StateCreator<T>, hydrate: (store: StoreApi<T>) => void): UseBoundStore<StoreApi<T>> {
     const store = create<T>(initial);
     let initialized = false;
+
     const hydrateOnce = (): void => {
         if (initialized) {
             return;
         }
+
         initialized = true;
         hydrate(store);
     };
+
     hydrators.push(hydrateOnce);
+
     const ready = (): void => {
         hydrateChatStorage();
         hydrateOnce();
     };
+
     const useStore = ((...args: Parameters<typeof store>) => {
         ready();
+
         return store(...args);
     }) as typeof store;
+
     Object.assign(useStore, store);
+
     useStore.getState = () => {
         ready();
+
         return store.getState();
     };
+
     useStore.subscribe = (...args) => {
         ready();
+
         return store.subscribe(...args);
     };
+
     useStore.setState = ((...args: Parameters<typeof store.setState>) => {
         ready();
         store.setState(...args);
     }) as typeof store.setState;
+
     return useStore;
 }

package/src/testing/prompts.ts

@@ -11,6 +11,7 @@ const endpoints: ChatQuestion = {
         { label: 'Only chat and files', description: 'Keep terminal retries separate' }
     ]
 };
+
 const checks: ChatQuestion = {
     id: 'checks',
     header: 'Validation',
@@ -22,10 +23,13 @@ const checks: ChatQuestion = {
         { label: 'Build', description: 'Verify the production bundle' }
     ]
 };
+
 const notes: ChatQuestion = { id: 'notes', header: 'Instructions', question: 'What else should the agent keep in mind?', multiSelect: false, choices: [] };
+
 function base(id: string) {
     return { id: `preview-${id}`, requestId: `preview-${id}`, createdAt: 0, turnId: null };
 }
+
 function question(id: string, questions: ChatQuestion[], async = false): ChatQuestionItem {
     return {
         ...base(id),
@@ -36,6 +40,7 @@ function question(id: string, questions: ChatQuestion[], async = false): ChatQue
         async
     };
 }
+
 function approval(long = false): ChatApprovalItem {
     return {
         ...base(long ? 'long' : 'edit'),

package/src/transport.ts

@@ -43,8 +43,26 @@ export function errorCode(error: unknown): string | null {
     return typeof error === 'object' && error !== null && 'code' in error && typeof error.code === 'string' ? error.code : null;
 }
 
+/* Runs `run` now while the link is up and again each time it comes back; answers the function that stops it. */
+export function whenOpen(transport: ChatTransport, run: () => void): () => void {
+    if (transport.status === 'open') {
+        run();
+    }
+
+    return transport.subscribeStatus((status) => {
+        if (status === 'open') {
+            run();
+        }
+    });
+}
+
+export function errorMessage(error: unknown): string {
+    return error instanceof Error ? error.message : String(error);
+}
+
 /* Whether a request failed because the link was down rather than because the host refused it; the reconnect asks again. */
 export function isConnectionError(error: unknown): boolean {
     const code = errorCode(error);
+
     return code === 'not-connected' || code === 'disconnected';
 }

package/src/usage/ChartLogo.tsx

@@ -0,0 +1,12 @@
+import type { UsageProvider } from '@adecore/agent-contracts';
+import { ProviderLogo } from '../agents/ProviderLogo';
+import { PROVIDER_COLORS } from './format';
+
+/* A provider's logo in its color of the chart, so it reads as the series it names. */
+export function ChartLogo({ provider, className }: { provider: UsageProvider; className?: string }) {
+    return (
+        <span className={className} style={{ color: PROVIDER_COLORS[provider] }}>
+            <ProviderLogo provider={provider} />
+        </span>
+    );
+}

package/src/usage/LimitsList.tsx

@@ -6,8 +6,8 @@ import { limitsAccountId } from '../agents/account-limits';
 import { AccountDot } from '../agents/AccountDot';
 import { Tooltip } from '@adecore/ui';
 import { formatClock, formatWeekdayClock, isSameDay, formatCountdown, formatPercent } from '@adecore/ui/format';
-import { ProviderLogo } from '../agents/ProviderLogo';
-import { PROVIDER_COLORS, PROVIDER_LABELS } from './format';
+import { ChartLogo } from './ChartLogo';
+import { PROVIDER_LABELS } from './format';
 import { accountNote, evenPace, explain, isSignedOut, nextReset, paceText, type LimitAccount, type LimitGroup, type PaceStanding } from './limit-groups';
 
 /* Red where a window is nearly spent, amber where it is worth knowing; room to spare is not news and takes the text color. */
@@ -115,12 +115,11 @@ export function LimitsList({ limits, now, compact = false }: LimitsListProps) {
         <div className={clsx('flex flex-col', compact ? 'gap-4' : 'gap-6')}>
             {limits.providers.map((provider) => {
                 const note = explain(provider);
+
                 return (
                     <div key={limitsAccountId(provider)} className="flex flex-col gap-2">
                         <p className="flex items-center gap-2 text-xs font-medium">
-                            <span style={{ color: PROVIDER_COLORS[provider.kind] }}>
-                                <ProviderLogo provider={provider.kind} />
-                            </span>
+                            <ChartLogo provider={provider.kind} />
                             {PROVIDER_LABELS[provider.kind]}
                             {provider.plan !== null && <span className="text-text-muted">· {provider.plan}</span>}
                         </p>
@@ -145,6 +144,7 @@ function WindowLine({ window, now }: { window: UsageWindow; now: number }) {
     const { t } = useTranslation('agent-usage');
     const percent = Math.round(window.used * 100);
     const mark = evenPace(window, now)?.percent ?? null;
+
     return (
         <>
             <span className="text-text-muted">{window.label}</span>
@@ -179,6 +179,7 @@ function AccountLines({ account, now }: { account: LimitAccount; now: number })
     const windows = signedOut || note !== null ? [] : (account.entry?.windows ?? []);
     const next = nextReset(windows, now);
     const resetsIn = next === null ? null : resetInLabel(next.resetsAt, now);
+
     return (
         <>
             <p className="col-span-full mt-2 flex min-w-0 items-center gap-2">
@@ -214,9 +215,7 @@ export function AccountLimitsList({ groups, now }: { groups: readonly LimitGroup
             {groups.map((group) => (
                 <Fragment key={group.kind}>
                     <p className="col-span-full mt-3 flex items-center gap-2 font-medium first:mt-0">
-                        <span style={{ color: PROVIDER_COLORS[group.kind] }}>
-                            <ProviderLogo provider={group.kind} />
-                        </span>
+                        <ChartLogo provider={group.kind} />
                         {PROVIDER_LABELS[group.kind]}
                     </p>
                     {group.accounts.map((account) => (