@adecore/agents-react 0.21.1 → 0.22.0

package/src/state/chats.ts

@@ -1,6 +1,17 @@
+import { useContext, useMemo } from 'react';
 import { create } from 'zustand';
-import type { ChatApprovalItem, ChatBookmark, ChatEvent, ChatHistoryResult, ChatInfo, ChatItem, ChatQuestionItem, ChatVisual } from '@adecore/agent-contracts';
-import { useChatScope } from '../scope';
+import type {
+    AgentKind,
+    ChatApprovalItem,
+    ChatBookmark,
+    ChatEvent,
+    ChatHistoryResult,
+    ChatInfo,
+    ChatItem,
+    ChatQuestionItem,
+    ChatVisual
+} from '@adecore/agent-contracts';
+import { ChatScopeContext, useChatScope } from '../scope';
 
 export interface ChatState {
     info: ChatInfo;
@@ -194,6 +205,15 @@ export function applyEvent(state: ChatState, event: ChatEvent): ChatState {
     }
 }
 
+/* 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 } } };
+}
+
 export const useChats = create<ChatsStore>((set) => ({
     byKey: {},
     statusByKey: {},
@@ -247,22 +267,10 @@ export const useChats = create<ChatsStore>((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) => {
@@ -297,6 +305,24 @@ export function useChatRow<T>(chatId: string, select: (row: ChatState | undefine
     return useChats((s) => select(s.byKey[keyOf(chatId)]));
 }
 
+/*
+ * The models the CLI of this provider reported running in the chats this client holds of the host.
+ * A model it ran is proof the CLI offers it, whatever the version says. Outside a scope there is none.
+ */
+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 useMemo(() => new Set(joined === '' ? [] : joined.split('\n')), [joined]);
+}
+
 /* The item as the thread holds it now, for a row derived from the structure, which a delta leaves alone. */
 export function useCurrentItem<T extends ChatItem>(chatId: string, derived: T): T {
     return useChatRow(chatId, (row) => {

package/src/state/usage.ts

@@ -51,14 +51,6 @@ function parsePreferences(raw: string | null): Preferences {
 
 const storage = persistedJson(storageKey, parsePreferences, DEFAULTS, () => chatStorageLegacyKeys('usage'));
 
-function readPreferences(): Preferences {
-    return storage.read();
-}
-
-function persist(preferences: Preferences): void {
-    storage.write(preferences);
-}
-
 /* The three stored choices out of the store, so a setter writes the other two back unchanged. */
 function chosen(state: Preferences): Preferences {
     return { period: state.period, metric: state.metric, currency: state.currency };
@@ -73,10 +65,7 @@ export function dayOf(date: Date): string {
     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: 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));
@@ -116,10 +105,8 @@ const EMPTY: UsageRow = { asked: null, summary: null, loading: false, failed: fa
 interface UsageStore extends Preferences {
     byScope: Record<string, UsageRow>;
     /*
-     * The host the usage page is showing, by scope id, or null for the one its surroundings are on.
-     * Deliberately not in `Preferences`, so it is not written to storage: a remembered host outlives
-     * this client's knowledge of it, and the numbers worth opening on are those of the host you work
-     * on. It does survive closing the page, which is what makes browsing two hosts bearable.
+     * The host the usage page shows, by scope id, or null for the one around it. Not stored: a
+     * remembered host outlives this client's knowledge of it. It does survive closing the page.
      */
     chosen: string | null;
     /* Which host's numbers the page shows; null hands it back to the one around it. */
@@ -137,56 +124,58 @@ interface UsageStore extends Preferences {
 
 /* Reads the period, metric and currency again, once another window of the same origin wrote them. */
 export function reloadUsagePreferences(): void {
-    useUsageStore.setState(readPreferences());
+    useUsageStore.setState(storage.read());
 }
 
 export const useUsageStore = createChatStore<UsageStore>(
-    (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())
+    (set, get) => {
+        const choosePreference = (change: Partial<Preferences>): void => {
+            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: {},
+            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())
 );
 
 /*
- * The preferences of the viewer over the numbers of the host in scope, as one thing to select from.
- * The usage page renders the host its picker is on as a scope of its own; everything outside it (the
- * limit bars beside the work) reads the host around it, so browsing another host's spend never
- * moves the bars that say how much of the plan the agents beside you have left.
+ * The viewer's preferences over the numbers of the host in scope. The usage page renders its picked
+ * host as a scope of its own, so browsing another host's spend never moves the limit bars outside it.
  */
 export type UsageView = Preferences & UsageRow;
 

package/src/storage.ts

@@ -88,25 +88,25 @@ export function createChatStore<T>(initial: StateCreator<T>, hydrate: (store: St
         hydrate(store);
     };
     hydrators.push(hydrateOnce);
-    const useStore = ((...args: Parameters<typeof store>) => {
+    const ready = (): void => {
         hydrateChatStorage();
         hydrateOnce();
+    };
+    const useStore = ((...args: Parameters<typeof store>) => {
+        ready();
         return store(...args);
     }) as typeof store;
     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: Parameters<typeof store.setState>) => {
-        hydrateChatStorage();
-        hydrateOnce();
+        ready();
         store.setState(...args);
     }) as typeof store.setState;
     return useStore;

package/src/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/src/usage/LimitsList.tsx

@@ -10,8 +10,7 @@ import { ProviderLogo } from '../agents/ProviderLogo';
 import { PROVIDER_COLORS, PROVIDER_LABELS } from './format';
 import { accountNote, explain, isSignedOut, nextReset, type LimitAccount, type LimitGroup } 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. */
+/* 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: number): string {
     return used >= 0.9 ? 'bg-status-error' : used >= 0.7 ? 'bg-status-needs-you' : 'bg-text';
 }
@@ -93,8 +92,7 @@ export function WindowBar({ window, now, compact }: { window: UsageWindow; now:
                     {bar}
                 </Tooltip>
             )}
-            {/* Under the bar rather than beside the label. A weekday and a countdown are too long to
-                share that line, and a reset that wrapped would read as two of them. */}
+            {/* Under the bar: a weekday and a countdown are too long to share the label's line. */}
             {resetsAt !== null && (
                 <p className="text-xs whitespace-nowrap text-text-faint">
                     {t('limits.resets', { at: resetsAt })}

package/src/usage/UsageBreakdown.tsx

@@ -16,13 +16,11 @@ import { deriveDays } from './summary';
 
 type Breakdown = 'models' | 'projects' | 'day';
 
-/* 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: readonly Breakdown[] = ['models', 'projects', 'day'];
@@ -102,8 +100,7 @@ function ProjectRow({ project, top, money }: { project: UsageProject; top: numbe
     // 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 (
-        /* The mark sits on the title rather than between the two lines, so a column of icons lines
-           up with the names beside it and not with the paths under them. */
+        /* The mark sits on the title rather than between the two lines, so the icons line up with the names. */
         <div className={`${ROW} h-auto items-start py-1.5`}>
             <span className="mt-px flex">
                 {look?.mark ?? (

package/src/usage/UsageDialog.tsx

@@ -3,10 +3,8 @@ 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 }: { open: boolean; onOpenChange(open: boolean): void; children: ReactNode }) {
     return (

package/src/usage/format.ts

@@ -5,8 +5,7 @@ export { formatClock } from '@adecore/ui/format';
 /* Dollars are what a price table is in; euros are what the page can be set to. */
 export type UsageCurrency = 'USD' | 'EUR';
 
-/* 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: number): string {
     return formatNumber(value);
 }
@@ -33,8 +32,10 @@ export const PROVIDER_LABELS: Record<UsageProvider, string> = { claude: 'Claude
 
 export const PROVIDER_COLORS: Record<UsageProvider, string> = { 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: string): Date {
     return new Date(Number(slot.slice(0, 4)), Number(slot.slice(5, 7)) - 1, Number(slot.slice(8, 10)));
 }
@@ -63,8 +64,7 @@ export function formatDate(at: number): string {
     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: string): string {
     const parts = path.split('/').filter(Boolean);
     return parts.length <= 3 ? path : `…/${parts.slice(-3).join('/')}`;

package/src/usage/money.ts

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

package/src/usage/summary.ts

@@ -117,10 +117,8 @@ export interface UsageDay {
 }
 
 /*
- * 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: UsageSummaryResult): UsageDay[] {
     const rows = new Map<string, UsageDay>();