@adecore/agents-react 0.0.1 → 0.17.0-beta.2

package/LICENSE

@@ -0,0 +1,110 @@
+# Functional Source License, Version 1.1, MIT Future License
+
+## Abbreviation
+
+FSL-1.1-MIT
+
+## Notice
+
+Copyright 2026 - present Bas Milius
+
+## Terms and Conditions
+
+### Licensor ("We")
+
+The party offering the Software under these Terms and Conditions.
+
+### The Software
+
+The "Software" is each version of the software that we make available under
+these Terms and Conditions, as indicated by our inclusion of these Terms and
+Conditions with the Software.
+
+### License Grant
+
+Subject to your compliance with this License Grant and the Patents,
+Redistribution and Trademark clauses below, we hereby grant you the right to
+use, copy, modify, create derivative works, publicly perform, publicly display
+and redistribute the Software for any Permitted Purpose identified below.
+
+### Permitted Purpose
+
+A Permitted Purpose is any purpose other than a Competing Use. A Competing Use
+means making the Software available to others in a commercial product or
+service that:
+
+1. substitutes for the Software;
+
+2. substitutes for any other product or service we offer using the Software
+   that exists as of the date we make the Software available; or
+
+3. offers the same or substantially similar functionality as the Software.
+
+Permitted Purposes specifically include using the Software:
+
+1. for your internal use and access;
+
+2. for non-commercial education;
+
+3. for non-commercial research; and
+
+4. in connection with professional services that you provide to a licensee
+   using the Software in accordance with these Terms and Conditions.
+
+### Patents
+
+To the extent your use for a Permitted Purpose would necessarily infringe our
+patents, the license grant above includes a license under our patents. If you
+make a claim against any party that the Software infringes or contributes to
+the infringement of any patent, then your patent license to the Software ends
+immediately.
+
+### Redistribution
+
+The Terms and Conditions apply to all copies, modifications and derivatives of
+the Software.
+
+If you redistribute any copies, modifications or derivatives of the Software,
+you must include a copy of or a link to these Terms and Conditions and not
+remove any copyright notices provided in or with the Software.
+
+### Disclaimer
+
+THE SOFTWARE IS PROVIDED "AS IS" AND WITHOUT WARRANTIES OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING WITHOUT LIMITATION WARRANTIES OF FITNESS FOR A PARTICULAR
+PURPOSE, MERCHANTABILITY, TITLE OR NON-INFRINGEMENT.
+
+IN NO EVENT WILL WE HAVE ANY LIABILITY TO YOU ARISING OUT OF OR RELATED TO THE
+SOFTWARE, INCLUDING INDIRECT, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES,
+EVEN IF WE HAVE BEEN INFORMED OF THEIR POSSIBILITY IN ADVANCE.
+
+### Trademarks
+
+Except for displaying the License Details and identifying us as the origin of
+the Software, you have no right under these Terms and Conditions to use our
+trademarks, trade names, service marks or product names.
+
+## Grant of Future License
+
+We hereby irrevocably grant you an additional license to use the Software under
+the MIT license that is effective on the second anniversary of the date we make
+the Software available. On or after that date, you may use the Software under
+the MIT license, in which case the following will apply:
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,61 @@
+# @adecore/agents-react
+
+[![npm](https://img.shields.io/npm/v/@adecore/agents-react)](https://www.npmjs.com/package/@adecore/agents-react)
+[![Docs](https://img.shields.io/badge/docs-adecore.dev-blue)](https://adecore.dev/agents-react/)
+
+React views for agent chats: the thread, the composer, approvals and questions, the agent CLIs and their accounts, and what they cost. They talk to a host of chats, such as [`@adecore/agents`](https://adecore.dev/agents/), over the requests of [`@adecore/agent-contracts`](https://adecore.dev/agent-contracts/). Built on React 19, [`@adecore/ui`](https://adecore.dev/ui/) and Tailwind 4.
+
+**[Documentation with live demos](https://adecore.dev/agents-react/)**
+
+## Install
+
+```sh
+bun add @adecore/agents-react @adecore/agent-contracts
+```
+
+`@adecore/ui`, React 19, `react-dom`, `i18next` and `react-i18next` are peer dependencies.
+
+## Set up
+
+Import the theme after the one of `@adecore/ui`, let Tailwind scan the package, and load the typography plugin. The `@source` path is relative to the CSS file.
+
+```css
+@import "tailwindcss";
+@import "@adecore/ui/theme.css";
+@import "@adecore/agents-react/theme.css";
+@plugin "@tailwindcss/typography";
+@source "../node_modules/@adecore/agents-react/dist";
+```
+
+Add the words of `AGENTS_LOCALES` to your i18next, call `setChatHost` once, and render the views in a `ChatScopeContext`:
+
+```tsx
+import { Composer } from '@adecore/agents-react/chat/ui/Composer';
+import { Timeline } from '@adecore/agents-react/chat/ui/Timeline';
+import { ChatScopeContext } from '@adecore/agents-react/scope';
+
+<ChatScopeContext.Provider value={scope}>
+    <Timeline chatId={chatId} composer={<Composer chatId={chatId} info={info} {...composerProps} />} />
+</ChatScopeContext.Provider>;
+```
+
+[Getting started](https://adecore.dev/agents-react/guide/getting-started) covers the words, the host, the scope and its transport.
+
+Every module has its own subpath, `@adecore/agents-react/<path>`; there is no root import.
+
+## Documentation
+
+| Page | What it covers |
+|---|---|
+| [Getting started](https://adecore.dev/agents-react/guide/getting-started) | Install, CSS, words, the host and a first chat |
+| [Host adapters](https://adecore.dev/agents-react/guide/host) | Everything `setChatHost` takes |
+| [Chat client and state](https://adecore.dev/agents-react/guide/chat-client) | The transport, `ChatClient` and the stores |
+| [Persistence](https://adecore.dev/agents-react/guide/persistence) | Drafts, preferences and their storage keys |
+| [Chat](https://adecore.dev/agents-react/chat/timeline) | The timeline, the composer, prompts and their parts, each with a live demo |
+| [Providers](https://adecore.dev/agents-react/providers/providers-pane) | The settings of the CLIs and their accounts |
+| [Usage](https://adecore.dev/agents-react/usage/usage-page) | Cost, charts and plan limits |
+| [Modules](https://adecore.dev/agents-react/reference) | Every subpath and its exports |
+
+## License
+
+FSL-1.1-MIT. See [LICENSE](./LICENSE).

package/dist/agents/AccountDot.d.ts

@@ -0,0 +1,4 @@
+export declare function AccountDot({ color, className }: {
+    color: string | undefined;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/agents/AccountDot.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { accountColor } from './accounts.js';
+/* The color an account wears, or the app's accent while it wears none of the accents. */
+export function AccountDot({ color, className }) {
+    const paint = accountColor(color);
+    return (_jsx("span", { "aria-hidden": true, className: clsx('shrink-0 rounded-full', paint === undefined && 'bg-accent', className ?? 'size-2'), style: paint === undefined ? undefined : { background: paint } }));
+}

package/dist/agents/AgentIcon.d.ts

@@ -0,0 +1,6 @@
+import type { AgentKind } from '@adecore/agent-contracts';
+export declare function AgentIcon({ kind, size, className }: {
+    kind: AgentKind;
+    size?: number;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/agents/AgentIcon.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { Bot } from 'lucide-react';
+import { siClaude, siGithubcopilot, siGooglegemini } from 'simple-icons';
+import { Icon } from '@adecore/ui';
+import { PROVIDER_PATHS } from './provider-paths.js';
+// simple-icons removed OpenAI's mark at its request, so Codex reuses the usage page's path.
+const MARKS = {
+    claude: siClaude,
+    codex: { title: 'Codex', path: PROVIDER_PATHS.codex },
+    gemini: siGooglegemini,
+    copilot: siGithubcopilot
+};
+export function AgentIcon({ kind, size = 14, className }) {
+    const mark = MARKS[kind];
+    if (!mark) {
+        return _jsx(Icon, { icon: Bot, size: size, className: className });
+    }
+    return (_jsx("svg", { role: "img", "aria-label": mark.title, viewBox: "0 0 24 24", width: size, height: size, fill: "currentColor", className: clsx('align-middle', className), children: _jsx("path", { d: mark.path }) }));
+}

package/dist/agents/ModelOptionControl.d.ts

@@ -0,0 +1,15 @@
+import type { ModelOptionDescriptor, ModelSelection } from '@adecore/agent-contracts';
+type ModelOptionControlProps = {
+    option: ModelOptionDescriptor;
+    options: ModelSelection['options'];
+    layout?: 'compact' | 'row';
+    disabled?: boolean;
+} & ({
+    defaultLabel?: undefined;
+    onChange(value: string | boolean): void;
+} | {
+    defaultLabel: string;
+    onChange(value: string | boolean | undefined): void;
+});
+export declare function ModelOptionControl(props: ModelOptionControlProps): import("react").JSX.Element;
+export {};

package/dist/agents/ModelOptionControl.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Segmented, Switch, Select } from '@adecore/ui';
+import { optionValue } from './model-options.js';
+// Up to this many choices read at a glance side by side; more go into a menu.
+const MAX_SEGMENTS = 3;
+// The item `defaultLabel` adds; a choice id is never empty.
+const MODEL_DEFAULT = '';
+/*
+ * One of a model's own knobs outside a chat, such as effort in a form. The composer draws the same
+ * descriptors as menu items (`RunSettings`), since there they sit in a menu.
+ */
+export function ModelOptionControl(props) {
+    const { option, options, layout = 'compact', disabled } = props;
+    if (option.type === 'boolean') {
+        return _jsx(Switch, { checked: optionValue(option, options) === true, label: option.label, disabled: disabled, onCheckedChange: props.onChange });
+    }
+    const picked = props.defaultLabel !== undefined && options[option.id] === undefined ? MODEL_DEFAULT : String(optionValue(option, options));
+    const choices = [
+        ...(props.defaultLabel !== undefined ? [{ id: MODEL_DEFAULT, label: props.defaultLabel, description: undefined }] : []),
+        ...option.choices
+    ];
+    const choose = (id) => {
+        if (props.defaultLabel !== undefined) {
+            props.onChange(id === MODEL_DEFAULT ? undefined : id);
+            return;
+        }
+        props.onChange(id);
+    };
+    if (layout === 'row' && choices.length <= MAX_SEGMENTS) {
+        return (_jsx(Segmented, { value: picked, label: option.label, disabled: disabled, options: choices.map((choice) => ({ id: choice.id, label: choice.label })), onValueChange: choose }));
+    }
+    return (_jsx(Select, { value: picked, label: option.label, size: layout === 'compact' ? 'sm' : 'md', variant: layout === 'compact' ? 'ghost' : 'outlined', align: layout === 'row' ? 'end' : 'start', disabled: disabled, items: choices.map((choice) => ({ value: choice.id, label: choice.label, description: choice.description })), onValueChange: choose }));
+}

package/dist/agents/ProviderLogo.d.ts

@@ -0,0 +1,8 @@
+import type { UsageProvider } from '@adecore/agent-contracts';
+interface ProviderLogoProps {
+    provider: UsageProvider;
+    size?: number;
+    className?: string;
+}
+export declare function ProviderLogo({ provider, size, className }: ProviderLogoProps): import("react").JSX.Element;
+export {};

package/dist/agents/ProviderLogo.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { PROVIDER_PATHS } from './provider-paths.js';
+/* The 24 by 24 box both marks are drawn in, so one size renders them at the same weight. */
+const VIEW_BOX = '0 0 24 24';
+export function ProviderLogo({ provider, size = 14, className }) {
+    return (_jsx("svg", { "aria-hidden": true, viewBox: VIEW_BOX, width: size, height: size, fill: "currentColor", className: clsx('shrink-0', className), children: _jsx("path", { d: PROVIDER_PATHS[provider] }) }));
+}

package/dist/agents/account-limits.d.ts

@@ -0,0 +1,7 @@
+import type { AgentKind, ProviderAccounts, UsageLimitsProvider, UsageLimitsSnapshot, UsageWindow } from '@adecore/agent-contracts';
+import { type AccountEntry } from './accounts.js';
+export declare function limitsAccountId(entry: UsageLimitsProvider): string;
+export declare function limitsOfAccount(snapshot: UsageLimitsSnapshot | null, id: string): UsageLimitsProvider | null;
+export declare function sessionWindow(entry: UsageLimitsProvider | null): UsageWindow | null;
+export declare function continueTarget(accounts: ProviderAccounts | null, snapshot: UsageLimitsSnapshot | null, kind: AgentKind, current: string | undefined): AccountEntry | null;
+export declare function hasUnreadAccount(accounts: ProviderAccounts | null, snapshot: UsageLimitsSnapshot | null, kind: AgentKind, current: string | undefined): boolean;

package/dist/agents/account-limits.js

@@ -0,0 +1,40 @@
+import { accountsOfKind } from './accounts.js';
+/* The account a plan entry is of; an entry from a machine before accounts is its CLI's default account. */
+export function limitsAccountId(entry) {
+    return entry.account?.id ?? entry.kind;
+}
+export function limitsOfAccount(snapshot, id) {
+    return snapshot?.providers.find((entry) => limitsAccountId(entry) === id) ?? null;
+}
+export function sessionWindow(entry) {
+    return entry?.windows.find((window) => window.kind === 'session') ?? null;
+}
+/* The numbers were read, and no window of the plan is spent. An account never read has no known room. */
+function hasRoom(entry) {
+    return entry !== null && entry.checkedAt > 0 && entry.unavailable === null && entry.windows.length > 0 && entry.windows.every((window) => window.used < 1);
+}
+/* What a turn of this account would run into first: its session window, else its fullest one. */
+function pressure(entry) {
+    return sessionWindow(entry)?.used ?? Math.max(...entry.windows.map((window) => window.used));
+}
+/* The other accounts of the CLI a chat could go on under right now: on, and signed in. */
+function others(accounts, kind, current) {
+    return accountsOfKind(accounts, kind).filter((entry) => entry.id !== (current ?? kind) && entry.account.enabled !== false && entry.status?.state === 'ready');
+}
+/*
+ * The account a chat that stopped on a limit could go on under: another one of its CLI that is on,
+ * signed in and has room, the one with the least of its session spent. Null when none has room, or
+ * none was read yet; the choice is only ever offered, never made.
+ */
+export function continueTarget(accounts, snapshot, kind, current) {
+    const roomy = others(accounts, kind, current).flatMap((entry) => {
+        const limits = limitsOfAccount(snapshot, entry.id);
+        return hasRoom(limits) ? [{ entry, pressure: pressure(limits) }] : [];
+    });
+    roomy.sort((a, b) => a.pressure - b.pressure);
+    return roomy[0]?.entry ?? null;
+}
+/* Whether another account a chat could go on under has no numbers yet, since the machine only reads one in use by itself. */
+export function hasUnreadAccount(accounts, snapshot, kind, current) {
+    return others(accounts, kind, current).some((entry) => (limitsOfAccount(snapshot, entry.id)?.checkedAt ?? 0) === 0);
+}

package/dist/agents/accounts.d.ts

@@ -0,0 +1,22 @@
+import type { AgentKind, ProviderAccount, ProviderAccounts, ProviderAccountStatus } from '@adecore/agent-contracts';
+export declare function accountColor(color: string | undefined): string | undefined;
+export declare const FOLDER_VARIABLES: Partial<Record<AgentKind, string>>;
+export interface AccountEntry {
+    id: string;
+    account: ProviderAccount;
+    status: ProviderAccountStatus | null;
+    isDefault: boolean;
+}
+export declare function accountsOfKind(accounts: ProviderAccounts | null, kind: AgentKind): AccountEntry[];
+export declare function accountName(entry: Pick<AccountEntry, 'id' | 'account' | 'isDefault'>, providerName: string): string;
+export type AccountTone = 'muted' | 'needs-you' | 'error';
+export declare const ACCOUNT_TONE_CLASSES: Record<AccountTone, string>;
+export declare function accountStatusLine(status: ProviderAccountStatus | null, canLogIn: boolean): {
+    text: string;
+    tone: AccountTone;
+};
+export declare function mintAccountId(kind: AgentKind, label: string, taken: ReadonlySet<string>): string;
+export declare function freeAccountColor(entries: readonly AccountEntry[], fallback: string): string;
+export declare function offeredAccounts(entries: readonly AccountEntry[], current: string | undefined): AccountEntry[];
+export declare function hasAccountChoice(entries: readonly AccountEntry[]): boolean;
+export declare function canContinueOn(accounts: ProviderAccounts | null, kind: AgentKind, from: string | undefined, to: string | undefined): boolean;

package/dist/agents/accounts.js

@@ -0,0 +1,113 @@
+import i18next from 'i18next';
+import { chatHost } from '../host.js';
+/*
+ * An account wears one of the host's accents, so the app paints from one palette. A color that is none
+ * of them (an older name, or one written by hand) reads as undefined, and the dot takes the accent.
+ */
+export function accountColor(color) {
+    return chatHost().accents.all.find((entry) => entry.id === color)?.color;
+}
+/*
+ * The variable each CLI reads its config folder from, as the host's providers name them. Only for
+ * the sentence under the folder; a CLI missing here still works, the sentence just does not name it.
+ */
+export const FOLDER_VARIABLES = { claude: 'CLAUDE_CONFIG_DIR', codex: 'CODEX_HOME' };
+/* The accounts of one CLI, its default one first and the others in the order the machine keeps them. */
+export function accountsOfKind(accounts, kind) {
+    if (accounts === null) {
+        return [];
+    }
+    const statuses = new Map(accounts.statuses.map((status) => [status.id, status]));
+    return Object.entries(accounts.accounts)
+        .filter(([, account]) => account.kind === kind)
+        .map(([id, account]) => ({ id, account, status: statuses.get(id) ?? null, isDefault: id === kind }))
+        .sort((a, b) => Number(b.isDefault) - Number(a.isDefault));
+}
+/* A default account nobody named goes by its CLI's name. */
+export function accountName(entry, providerName) {
+    return entry.account.label ?? (entry.isDefault ? providerName : entry.id);
+}
+export const ACCOUNT_TONE_CLASSES = {
+    muted: 'text-text-muted',
+    'needs-you': 'text-status-needs-you',
+    error: 'text-status-error'
+};
+/*
+ * What an account's row says about it, in a few words. `canLogIn` is false for a CLI without a config
+ * folder: it has no login of its own to report, so being there is all a ready one says.
+ */
+export function accountStatusLine(status, canLogIn) {
+    const words = (key, values) => i18next.t(`agent-providers:status.${key}`, values);
+    switch (status?.state ?? 'checking') {
+        case 'checking':
+            return { text: words('checking'), tone: 'muted' };
+        case 'disabled':
+            return { text: words('disabled'), tone: 'muted' };
+        case 'not-found':
+            return { text: words('notFound'), tone: 'muted' };
+        case 'signed-out':
+            return { text: words('signedOut'), tone: 'needs-you' };
+        case 'ready':
+            if (!canLogIn) {
+                return { text: words('available'), tone: 'muted' };
+            }
+            return { text: status?.plan ? words('readyPlan', { plan: status.plan }) : words('ready'), tone: 'muted' };
+        case 'folder-missing':
+            return { text: words('folderMissing'), tone: 'error' };
+        case 'unavailable':
+            return { text: words('unavailable'), tone: 'muted' };
+        case 'failed':
+            return { text: words('failed'), tone: 'error' };
+    }
+}
+/* The part of a name an id can hold, the way the machine makes one: `Work (EU)` becomes `work-eu`. */
+function slugOf(label) {
+    return label
+        .normalize('NFKD')
+        .replace(/[̀-ͯ]/g, '')
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-+|-+$/g, '');
+}
+/* A free id for an account a person links to a folder of their own; one the machine makes gets its id from the machine. */
+export function mintAccountId(kind, label, taken) {
+    const base = `${kind}_${slugOf(label) || 'account'}`.slice(0, 60).replace(/-+$/, '');
+    let id = base;
+    for (let suffix = 2; taken.has(id); suffix += 1) {
+        id = `${base}-${suffix}`;
+    }
+    return id;
+}
+/*
+ * The first featured accent no account of the CLI wears yet, then any other, so a new one stands apart.
+ * An account without a color of its own wears `fallback`, the accent the app is painted in.
+ */
+export function freeAccountColor(entries, fallback) {
+    const { all, featured } = chatHost().accents;
+    const worn = new Set(entries.map((entry) => (accountColor(entry.account.color) === undefined ? fallback : entry.account.color)));
+    const choices = [...featured, ...all.map((entry) => entry.id).filter((id) => !featured.includes(id))];
+    return choices.find((id) => !worn.has(id)) ?? featured[entries.length % featured.length] ?? fallback;
+}
+/* The accounts of a CLI a picker offers: every one that is on, and the one in use even while it is off. */
+export function offeredAccounts(entries, current) {
+    return entries.filter((entry) => entry.account.enabled !== false || entry.id === current);
+}
+/* Whether a person has a choice of account for this CLI at all, which is when a chat shows its account. */
+export function hasAccountChoice(entries) {
+    return entries.filter((entry) => entry.account.enabled !== false).length >= 2;
+}
+/*
+ * Whether a chat of one account can go on under another, the way the machine decides it: the same
+ * account, or two of the chat's CLI that write their conversations to one folder. A machine that does
+ * not say where an account writes them answers no, so the person forks instead of being refused.
+ */
+export function canContinueOn(accounts, kind, from, to) {
+    const fromId = from ?? kind;
+    const toId = to ?? kind;
+    if (fromId === toId) {
+        return true;
+    }
+    const folderOf = (id) => accounts?.accounts[id]?.kind === kind ? accounts.statuses.find((status) => status.id === id)?.transcripts : undefined;
+    const folder = folderOf(fromId);
+    return folder !== undefined && folder !== '' && folder === folderOf(toId);
+}

package/dist/agents/model-name.d.ts

@@ -0,0 +1,12 @@
+import type { AgentKind, ModelInfo, ProviderInfo } from '@adecore/agent-contracts';
+export declare function modelNameFromSlug(slug: string): string;
+export declare function modelName(slug: string, models: readonly ModelInfo[] | undefined): string;
+export interface AgentChip {
+    readonly mark: 'logo' | 'icon';
+    readonly name: string;
+    readonly model: string;
+}
+export declare function agentChipOf(providers: readonly ProviderInfo[], provider: AgentKind, model: string): AgentChip;
+export declare function useModelName(provider: AgentKind | undefined, slug: string): string;
+export declare function sharedModelPrefix(models: readonly ModelInfo[]): string;
+export declare function shortModelName(name: string, models: readonly ModelInfo[] | undefined): string;

package/dist/agents/model-name.js

@@ -0,0 +1,56 @@
+import { useProviders } from '../state/providers.js';
+/*
+ * A model id as a person reads it, for a model no catalog names: without its vendor prefix and its
+ * date, and with the version number put back together (`claude-opus-4-5` is one 4.5, not a 4 and a
+ * 5).
+ */
+export function modelNameFromSlug(slug) {
+    const bare = slug.slice(slug.lastIndexOf('/') + 1).replace(/-\d{6,8}$/, '');
+    const words = [];
+    for (const word of bare.split('-')) {
+        const previous = words.at(-1);
+        if (previous !== undefined && /^\d+$/.test(word) && /\d$/.test(previous)) {
+            words[words.length - 1] = `${previous}.${word}`;
+            continue;
+        }
+        words.push(word);
+    }
+    return words.map((word) => (word === 'gpt' ? 'GPT' : word.charAt(0).toUpperCase() + word.slice(1))).join(' ');
+}
+/* What the CLI calls the model, so every surface says the same thing; a slug it no longer offers is read as one. */
+export function modelName(slug, models) {
+    return models?.find((entry) => entry.slug === slug)?.name ?? modelNameFromSlug(slug);
+}
+export function agentChipOf(providers, provider, model) {
+    const owner = providers.find((entry) => entry.kind === provider);
+    return {
+        mark: provider === 'claude' || provider === 'codex' ? 'logo' : 'icon',
+        name: owner?.name ?? provider,
+        model: modelName(model, owner?.models)
+    };
+}
+/* The same answer for the machine in scope, whose catalog is the only one that can name the slug. */
+export function useModelName(provider, slug) {
+    return useProviders((state) => modelName(slug, state.providers.find((entry) => entry.kind === provider)?.models));
+}
+/*
+ * The leading words every model of a catalog shares, so a tight spot can say `Opus 5.5` where the
+ * CLI says `Claude Opus 5.5`. Whole words only, so `GPT-6` never loses its `GPT-`, and never all of a name.
+ */
+export function sharedModelPrefix(models) {
+    const names = models.map((entry) => entry.name.split(' '));
+    const first = names[0];
+    if (first === undefined || names.length < 2) {
+        return '';
+    }
+    let count = 0;
+    while (names.every((words) => words.length > count + 1 && words[count] === first[count])) {
+        count++;
+    }
+    return count === 0 ? '' : `${first.slice(0, count).join(' ')} `;
+}
+/* A model's name without the words its whole catalog shares. */
+export function shortModelName(name, models) {
+    const prefix = sharedModelPrefix(models ?? []);
+    return prefix !== '' && name.startsWith(prefix) ? name.slice(prefix.length) : name;
+}

package/dist/agents/model-options.d.ts

@@ -0,0 +1,5 @@
+import type { ModelInfo, ModelOptionDescriptor, ModelSelection } from '@adecore/agent-contracts';
+type OptionValues = ModelSelection['options'];
+export declare function optionValue(option: ModelOptionDescriptor, options: OptionValues): string | boolean;
+export declare function carryOptions(options: OptionValues, model: ModelInfo | undefined): OptionValues;
+export {};

package/dist/agents/model-options.js

@@ -0,0 +1,15 @@
+function fits(option, value) {
+    return option.type === 'boolean' ? typeof value === 'boolean' : typeof value === 'string' && option.choices.some((choice) => choice.id === value);
+}
+/* What an option runs at: the value picked, else the model's own default. A value the model does not offer counts as unpicked. */
+export function optionValue(option, options) {
+    const picked = options[option.id];
+    if (fits(option, picked)) {
+        return picked;
+    }
+    return option.type === 'boolean' ? option.defaultValue : option.defaultChoice;
+}
+/* The picked options that `model` offers as well, so switching models keeps an effort the next one also has. */
+export function carryOptions(options, model) {
+    return Object.fromEntries((model?.options ?? []).filter((option) => fits(option, options[option.id])).map((option) => [option.id, options[option.id]]));
+}

package/dist/agents/provider-paths.d.ts

@@ -0,0 +1,2 @@
+import type { UsageProvider } from '@adecore/agent-contracts';
+export declare const PROVIDER_PATHS: Record<UsageProvider, string>;

package/dist/agents/provider-paths.js

@@ -0,0 +1,8 @@
+/*
+ * The marks of Anthropic and OpenAI. Lucide has no brand marks, so these are the icon rule's
+ * exception for provider marks. One path each, in `currentColor`, so a row decides how loud the logo is.
+ */
+export const PROVIDER_PATHS = {
+    claude: 'M4.709 15.955l4.72-2.647.079-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.377-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.048.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.607.212-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.914-1.316-.012.01z',
+    codex: 'M21.55 10.004a5.416 5.416 0 00-.478-4.501c-1.217-2.09-3.662-3.166-6.05-2.66A5.59 5.59 0 0010.831 1C8.39.995 6.224 2.546 5.473 4.838A5.553 5.553 0 001.76 7.496a5.487 5.487 0 00.691 6.5 5.416 5.416 0 00.477 4.502c1.217 2.09 3.662 3.165 6.05 2.66A5.586 5.586 0 0013.168 23c2.443.006 4.61-1.546 5.361-3.84a5.554 5.554 0 003.715-2.66 5.488 5.488 0 00-.693-6.497v.001zm-8.381 11.558a4.199 4.199 0 01-2.675-.954c.034-.018.093-.05.132-.074l4.44-2.53a.71.71 0 00.364-.623v-6.176l1.877 1.069c.02.01.033.029.036.05v5.115c-.003 2.274-1.87 4.118-4.174 4.123zM4.192 17.78a4.059 4.059 0 01-.498-2.763c.032.019.09.055.131.078l4.44 2.53c.225.13.504.13.73 0l5.42-3.088v2.138a.068.068 0 01-.027.057L9.9 19.288c-1.999 1.136-4.552.46-5.707-1.51h-.001zM3.023 8.216A4.15 4.15 0 015.198 6.41l-.002.151v5.06a.711.711 0 00.364.624l5.42 3.087-1.876 1.07a.067.067 0 01-.063.005l-4.489-2.559c-1.995-1.14-2.679-3.658-1.53-5.63h.001zm15.417 3.54l-5.42-3.088L14.896 7.6a.067.067 0 01.063-.006l4.489 2.557c1.998 1.14 2.683 3.662 1.529 5.633a4.163 4.163 0 01-2.174 1.807V12.38a.71.71 0 00-.363-.623zm1.867-2.773a6.04 6.04 0 00-.132-.078l-4.44-2.53a.731.731 0 00-.729 0l-5.42 3.088V7.325a.068.068 0 01.027-.057L14.1 4.713c2-1.137 4.555-.46 5.707 1.513.487.833.664 1.809.499 2.757h.001zm-11.741 3.81l-1.877-1.068a.065.065 0 01-.036-.051V6.559c.001-2.277 1.873-4.122 4.181-4.12.976 0 1.92.338 2.671.954-.034.018-.092.05-.131.073l-4.44 2.53a.71.71 0 00-.365.623l-.003 6.173v.001zm1.02-2.168L12 9.25l2.414 1.375v2.75L12 14.75l-2.415-1.375v-2.75z'
+};

package/dist/agents/status-look.d.ts

@@ -0,0 +1,13 @@
+import { type LucideIcon } from 'lucide-react';
+export type StatusWord = 'running' | 'paused' | 'done' | 'failed' | 'cancelled';
+export interface StatusLook {
+    icon: LucideIcon;
+    tone: string;
+    spins: boolean;
+}
+export declare function statusLookOf(word: StatusWord): StatusLook;
+export interface TaskState {
+    status: 'open' | 'done' | 'failed' | 'cancelled';
+    paused?: object;
+}
+export declare function taskStatusWord(task: TaskState): StatusWord;

package/dist/agents/status-look.js

@@ -0,0 +1,24 @@
+import { CircleCheck, CircleSlash, CircleX, Hourglass, LoaderCircle } from 'lucide-react';
+/*
+ * 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`).
+ */
+const LOOKS = {
+    running: { icon: LoaderCircle, tone: 'text-status-running', spins: true },
+    // The hourglass of a chat that stopped on a limit, since that is what holds the work up.
+    paused: { icon: Hourglass, tone: 'text-text-faint', spins: false },
+    done: { icon: CircleCheck, tone: 'text-status-idle', spins: false },
+    failed: { icon: CircleX, tone: 'text-status-error', spins: false },
+    cancelled: { icon: CircleSlash, tone: 'text-text-faint', spins: false }
+};
+export function statusLookOf(word) {
+    return LOOKS[word];
+}
+/* A task calls its running state `open`, which is the host's word for it and not a person's; an open task whose child stopped on a limit is paused. */
+export function taskStatusWord(task) {
+    if (task.status !== 'open') {
+        return task.status;
+    }
+    return task.paused === undefined ? 'running' : 'paused';
+}

package/dist/chat/account-choice.d.ts

@@ -0,0 +1,11 @@
+import type { AgentKind, ProviderAccounts } from '@adecore/agent-contracts';
+import { type AccountEntry } from '../agents/accounts.js';
+export interface AccountChoice {
+    accounts: ProviderAccounts;
+    offered: AccountEntry[];
+    currentId: string;
+    current: AccountEntry | null;
+    providerName: string;
+    nameOf(entry: AccountEntry): string;
+}
+export declare function useAccountChoice(kind: AgentKind | null, account: string | undefined): AccountChoice | null;