@adecore/agents-react 0.21.1 → 0.22.0

package/dist/locales/nl/agent-chat.json

@@ -91,7 +91,8 @@
     "user": {
       "heading": "Jij",
       "showAll": "Alles tonen",
-      "showLess": "Minder tonen"
+      "showLess": "Minder tonen",
+      "quoteGone": "Het antwoord waar dit citaat vandaan kwam, staat niet meer in deze chat."
     },
     "report": {
       "heading": "Rapport"
@@ -107,7 +108,8 @@
     "note": {
       "hide": "Verbergen",
       "show": "Tonen",
-      "openFork": "Fork openen"
+      "openFork": "Fork openen",
+      "openWaiting": "Openen om te antwoorden"
     },
     "compaction": {
       "plain": "Context gecomprimeerd",
@@ -165,6 +167,9 @@
     },
     "changedFiles_one": "{{count}} gewijzigd bestand",
     "changedFiles_other": "{{count}} gewijzigde bestanden",
+    "folderChanges_one": "{{count}} wijziging in de map tijdens deze beurt",
+    "folderChanges_other": "{{count}} wijzigingen in de map tijdens deze beurt",
+    "baseMoved": "De branch is tijdens deze beurt verplaatst ({{from}} naar {{to}}), dus dit omvat ook wat daarmee binnenkwam.",
     "andMore": "en meer, afgekapt",
     "edits_one": "{{count}} bewerking",
     "edits_other": "{{count}} bewerkingen",
@@ -249,6 +254,17 @@
   },
   "composer": {
     "slotFailed": "Dit onderdeel kon niet worden getekend",
+    "inputLabel": "Bericht",
+    "menu": {
+      "commands": "Commando's",
+      "skills": "Skills",
+      "mentions": "Vermeldingen"
+    },
+    "held": {
+      "question": "Er wacht een vraag. Die opent zodra je even stopt met typen.",
+      "approval": "Er wacht een goedkeuring. Die opent zodra je even stopt met typen.",
+      "show": "Nu tonen"
+    },
     "commands": {
       "model": "Wissel van model",
       "compact": "Comprimeer de context",
@@ -294,7 +310,8 @@
     },
     "quote": {
       "add": "Citeren",
-      "remove": "Citaat verwijderen"
+      "remove": "Citaat verwijderen",
+      "goToSource": "Naar het antwoord"
     },
     "removeAttachment": "{{name}} verwijderen",
     "attach": "Bestanden toevoegen",
@@ -319,6 +336,9 @@
     "monitors_one": "{{count}} monitor",
     "monitors_other": "{{count}} monitors",
     "pausedUntil": "gepauzeerd tot {{time}}",
+    "progress": "{{done}} van {{total}} sub-agents klaar",
+    "needsYou_one": "{{count}} vraagt aandacht",
+    "needsYou_other": "{{count}} vragen aandacht",
     "took": {
       "done": "klaar in {{duration}}",
       "failed": "mislukt na {{duration}}",
@@ -332,8 +352,10 @@
   "subagents": {
     "stop": {
       "task": "Deze taak stoppen",
+      "native": "Deze sub-agent stoppen",
       "mark": "Markeren als gestopt. De CLI kan een losse sub-agent niet stoppen, dus die werkt mogelijk door tot het proces van de chat eindigt."
     },
+    "stale": "Deze sub-agent hoort bij een proces dat al gestopt is.",
     "title": "Sub-agents",
     "backToMain": "Terug naar de main agent",
     "loading": "Gesprek laden…",
@@ -344,9 +366,7 @@
     "stopFailed": "De sub-agent kon niet worden gestopt",
     "info": {
       "label": "Over deze sub-agent",
-      "tokens": "{{tokens}} tokens",
-      "showTask": "Opdracht tonen",
-      "hideTask": "Opdracht verbergen"
+      "tokens": "{{tokens}} tokens"
     }
   },
   "modes": {
@@ -382,7 +402,10 @@
       "noMatch": "Geen modellen gevonden",
       "legacyGroup_one": "Legacy-modellen ({{count}})",
       "legacyGroup_other": "Legacy-modellen ({{count}})",
-      "legacy": "Legacy"
+      "legacy": "Legacy",
+      "requires": "Vereist {{cli}} {{version}} of nieuwer op {{machine}}",
+      "requiresHere": "Vereist {{cli}} {{version}} of nieuwer",
+      "providerSettings": "Providerinstellingen"
     },
     "stash": {
       "title": "Stashed prompts",

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.d.ts

@@ -1,4 +1,4 @@
-import type { ChatApprovalItem, ChatBookmark, ChatEvent, ChatHistoryResult, ChatInfo, ChatItem, ChatQuestionItem, ChatVisual } from '@adecore/agent-contracts';
+import type { AgentKind, ChatApprovalItem, ChatBookmark, ChatEvent, ChatHistoryResult, ChatInfo, ChatItem, ChatQuestionItem, ChatVisual } from '@adecore/agent-contracts';
 export interface ChatState {
     info: ChatInfo;
     items: Record<string, ChatItem>;
@@ -43,5 +43,6 @@ export declare function applyEvent(state: ChatState, event: ChatEvent): ChatStat
 export declare const useChats: import("zustand").UseBoundStore<import("zustand").StoreApi<ChatsStore>>;
 export declare function chatSink(keyOf: (chatId: string) => string): ChatSink;
 export declare function useChatRow<T>(chatId: string, select: (row: ChatState | undefined) => T): T;
+export declare function useReportedModels(provider: AgentKind): ReadonlySet<string>;
 export declare function useCurrentItem<T extends ChatItem>(chatId: string, derived: T): T;
 export {};

package/dist/state/chats.js

@@ -1,5 +1,6 @@
+import { useContext, useMemo } from 'react';
 import { create } from 'zustand';
-import { useChatScope } from '../scope.js';
+import { ChatScopeContext, useChatScope } from '../scope.js';
 function isWaiting(item) {
     return (item?.kind === 'approval' && item.decision === 'pending') || (item?.kind === 'question' && item.state === 'pending');
 }
@@ -113,6 +114,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 +175,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) => {
@@ -213,6 +210,23 @@ export function useChatRow(chatId, select) {
     const { keyOf } = useChatScope();
     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) {
+    const scope = useContext(ChatScopeContext);
+    const joined = useChats((s) => {
+        const names = new Set();
+        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(chatId, derived) {
     return useChatRow(chatId, (row) => {

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.22.0",
   "description": "React agent chat threads, composers, approvals, provider accounts and usage views.",
   "type": "module",
   "exports": {
@@ -34,6 +34,11 @@
       "types": "./dist/agents/accounts.d.ts",
       "default": "./dist/agents/accounts.js"
     },
+    "./agents/model-requirement": {
+      "source": "./src/agents/model-requirement.ts",
+      "types": "./dist/agents/model-requirement.d.ts",
+      "default": "./dist/agents/model-requirement.js"
+    },
     "./agents/model-name": {
       "source": "./src/agents/model-name.ts",
       "types": "./dist/agents/model-name.d.ts",
@@ -104,6 +109,11 @@
       "types": "./dist/chat/guards.d.ts",
       "default": "./dist/chat/guards.js"
     },
+    "./chat/logic/picker-entries": {
+      "source": "./src/chat/logic/picker-entries.ts",
+      "types": "./dist/chat/logic/picker-entries.d.ts",
+      "default": "./dist/chat/logic/picker-entries.js"
+    },
     "./chat/logic/ansi": {
       "source": "./src/chat/logic/ansi.ts",
       "types": "./dist/chat/logic/ansi.d.ts",
@@ -219,6 +229,11 @@
       "types": "./dist/chat/preferences.d.ts",
       "default": "./dist/chat/preferences.js"
     },
+    "./chat/prompt-hold": {
+      "source": "./src/chat/prompt-hold.ts",
+      "types": "./dist/chat/prompt-hold.d.ts",
+      "default": "./dist/chat/prompt-hold.js"
+    },
     "./chat/quote": {
       "source": "./src/chat/quote.ts",
       "types": "./dist/chat/quote.d.ts",
@@ -494,6 +509,11 @@
       "types": "./dist/chat/ui/composer/keys.d.ts",
       "default": "./dist/chat/ui/composer/keys.js"
     },
+    "./chat/ui/composer/menu-aria": {
+      "source": "./src/chat/ui/composer/menu-aria.ts",
+      "types": "./dist/chat/ui/composer/menu-aria.d.ts",
+      "default": "./dist/chat/ui/composer/menu-aria.js"
+    },
     "./chat/ui/diff-theme": {
       "source": "./src/chat/ui/diff-theme.ts",
       "types": "./dist/chat/ui/diff-theme.d.ts",
@@ -1011,8 +1031,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.22.0",
+    "@adecore/intelligent-ui": "0.22.0",
     "@codemirror/commands": "^6.11.1",
     "@codemirror/language": "^6.12.4",
     "@codemirror/state": "^6.7.6",
@@ -1033,7 +1053,7 @@
     "zustand": "^5.0.15"
   },
   "peerDependencies": {
-    "@adecore/ui": "^0.21.1",
+    "@adecore/ui": "^0.22.0",
     "i18next": "^26.4.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",

package/src/agents/model-requirement.ts

@@ -0,0 +1,36 @@
+import type { ModelInfo, ProviderInfo } from '@adecore/agent-contracts';
+
+export interface ModelRequirement {
+    /* The CLI's name, as the provider list gives it. */
+    cli: string;
+    minVersion: string;
+}
+
+function partsOf(version: string, strict: boolean): number[] | null {
+    const found = (strict ? /^(\d+)\.(\d+)(?:\.(\d+))?$/ : /(\d+)\.(\d+)\.(\d+)/).exec(version);
+    return found === null ? null : [Number(found[1]), Number(found[2]), Number(found[3] ?? 0)];
+}
+
+/* Whether the model's reported name is this model: its slug, the slug with a suffix such as `[1m]`. */
+function isReported(slug: string, reported: ReadonlySet<string>): boolean {
+    return [...reported].some((name) => name === slug || name.startsWith(`${slug}[`));
+}
+
+/*
+ * What a model asks of the CLI that is too old for it, or null when nothing blocks it: no minimum is
+ * known, the CLI's version is not a readable x.y.z (so an unknown version invents no requirement), the
+ * CLI is new enough, or a chat of this provider already reported running the model.
+ */
+export function modelRequirementOf(model: ModelInfo, provider: ProviderInfo, reported: ReadonlySet<string>): ModelRequirement | null {
+    const minimum = model.minCliVersion === undefined ? null : partsOf(model.minCliVersion, true);
+    const installed = provider.version === null ? null : partsOf(provider.version, false);
+    if (minimum === null || installed === null || isReported(model.slug, reported)) {
+        return null;
+    }
+    for (let i = 0; i < 3; i++) {
+        if (installed[i] !== minimum[i]) {
+            return (installed[i] ?? 0) > (minimum[i] ?? 0) ? null : { cli: provider.name, minVersion: model.minCliVersion ?? '' };
+        }
+    }
+    return null;
+}

package/src/agents/status-look.ts

@@ -10,9 +10,8 @@ export interface StatusLook {
 }
 
 /*
- * One state, one mark: an entry in the sub-agent flyout, a task on its node (`TaskMark`), what finished
- * in the toolbar (`StatusSummary`) and work in progress in a toast. A spinner stops under reduced
- * motion with every other animation (`styles.css`).
+ * One state, one mark, wherever work is drawn: a sub-agent entry, a task, a summary or a toast. A
+ * spinner stops under reduced motion with every other animation.
  */
 const LOOKS: Record<StatusWord, StatusLook> = {
     running: { icon: LoaderCircle, tone: 'text-status-running', spins: true },