@adecore/agents-react 0.23.0 → 0.24.0

package/dist/prompts/logic/subjects.js

@@ -1,5 +1,4 @@
 import i18next from 'i18next';
-import { chatHost } from '../../host.js';
 import { isBlockingPrompt } from './prompts.js';
 /* Unique across the chats of a surface and the app's own prompts, and stable while the prompt waits. */
 export function promptIdOf(subject) {
@@ -41,10 +40,13 @@ export function approvalButtons(subject, reason) {
         { id: 'allow', label: i18next.t('agent-prompts:approval.allow'), primary: true, action: { kind: 'approve', decision: 'allow' } }
     ];
 }
-/* Sends a card's action as the request its subject is answered with. A refusal comes back as an error for the card to show. */
-export async function answerPrompt(subject, action, chat) {
+/*
+ * Sends a card's action as the request its subject is answered with, or to `host` for a prompt it raised.
+ * A refusal comes back as an error for the card to show.
+ */
+export async function answerPrompt(subject, action, chat, host) {
     if (subject.kind === 'host') {
-        return chatHost().prompts.answer(subject.prompt, action);
+        return host.prompts.answer(subject.prompt, action);
     }
     if (chat === null) {
         throw new Error(i18next.t('agent-prompts:error.notConnected'));

package/dist/prompts/ui/ApprovalBody.js

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import { approvalChanges, fileChanges } from '../../chat/logic/tools.js';
-import { chatHost } from '../../host.js';
+import { useChatHost } from '../../host.js';
 import { ApprovalReview } from '../../chat/ui/diff/ApprovalReview.js';
 import { reviewEntries } from '../../chat/ui/diff/review-plan.js';
 import { isPrimaryKey } from '../logic/keys.js';
@@ -13,23 +13,25 @@ export function CommandBox({ command, cwd }) {
     return (_jsxs(TextMenu, { className: "rounded-xl bg-surface-sunken p-3", children: [cwd !== undefined && _jsx("p", { className: "mb-2 break-all font-mono text-xs text-text-muted select-text", children: cwd }), _jsx("pre", { className: "whitespace-pre-wrap break-words font-mono text-code text-text select-text", children: command })] }));
 }
 function ApprovalDetails({ item }) {
+    const host = useChatHost();
     const { t } = useTranslation('agent-prompts');
     const [expanded, setExpanded] = useState(false);
     const patches = approvalChanges(item.input);
     const edits = patches.length ? [] : fileChanges(item.toolName, item.input);
     const entries = reviewEntries(patches, edits);
-    const editorPreview = chatHost().code.editor !== undefined;
+    const editorPreview = host.code.editor !== undefined;
     const maxHeight = expanded ? 480 : 176;
     const input = typeof item.input === 'object' && item.input !== null ? item.input : {};
     return (_jsxs(_Fragment, { children: [item.description && _jsx("p", { className: "text-sm text-text-muted", children: item.description }), patches.length + edits.length > 1 && (_jsx("p", { className: "text-xs text-text-muted", children: t('approval.allChanges', { count: patches.length + edits.length }) })), patches.length + edits.length > 0 ? (_jsxs("div", { className: "overflow-hidden rounded-xl bg-surface-sunken", children: [_jsx("div", { className: clsx(editorPreview ? 'overflow-hidden' : 'overflow-auto', !editorPreview && !expanded && 'max-h-44'), children: _jsx(ApprovalReview, { entries: entries, maxHeight: maxHeight }, item.requestId) }), _jsx("div", { className: "flex items-center border-t border-border p-1", children: _jsx(Button, { size: "sm", "aria-expanded": expanded, onClick: () => setExpanded(!expanded), children: expanded ? t('approval.collapseDiff') : t('approval.viewDiff') }) })] })) : typeof input.command === 'string' ? (_jsx(CommandBox, { command: input.command, cwd: typeof input.cwd === 'string' ? input.cwd : undefined })) : (_jsxs("details", { children: [_jsx("summary", { className: "flex h-7 cursor-pointer items-center text-xs text-text-muted", children: t('approval.details') }), _jsx(TextMenu, { children: _jsx("pre", { className: "max-h-64 overflow-auto whitespace-pre-wrap break-words rounded-xl bg-surface-sunken p-3 font-mono text-code text-text select-text", children: JSON.stringify(item.input, null, 2) }) })] }))] }));
 }
 /* A chat's permission request: the diff, the command or the raw input, and the reason a Deny may carry. */
 export function ApprovalBody({ item, draft, onDraft, denyReason, locked }) {
+    const host = useChatHost();
     const { t } = useTranslation('agent-prompts');
-    const AnswerField = chatHost().dictation.Textarea;
+    const AnswerField = host.dictation.Textarea;
     return (_jsxs(_Fragment, { children: [_jsx(ApprovalDetails, { item: item }), denyReason && draft.showReason && (_jsx(AnswerField, { className: "field min-h-16 text-sm", autoFocus: true, "aria-label": t('approval.reasonLabel'), placeholder: t('approval.reasonPlaceholder'), disabled: locked, value: draft.reason, onChange: (e) => onDraft({ ...draft, reason: e.target.value }), onKeyDown: (e) => {
                     // Mod+Enter presses Allow everywhere else in the card, which is the opposite of what a reason for declining is typed for.
-                    if (isPrimaryKey(e.nativeEvent, chatHost().isApplePlatform())) {
+                    if (isPrimaryKey(e.nativeEvent, host.isApplePlatform())) {
                         e.preventDefault();
                     }
                 } }))] }));

package/dist/prompts/ui/PromptCard.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from 'react-i18next';
 import { Hand, MessageCircleQuestionMark } from 'lucide-react';
-import { chatHost } from '../../host.js';
+import { useChatHost } from '../../host.js';
 import { headingKey, isPrimaryKey, staysInCard, stepIndex, toolbarKey } from '../logic/keys.js';
 import { Icon } from '@adecore/ui';
 /* The raised glass a chat's composer is made of, for a card that stands on its own over a canvas. */
@@ -11,11 +11,11 @@ const ICONS = { approval: Hand, question: MessageCircleQuestionMark, waiting: Me
  * The keys every card shares: Mod+Enter, entering from the heading and the action row. The body handles
  * its own keys first and says so with `preventDefault`.
  */
-function onCardKeyDown(event) {
+function onCardKeyDown(event, apple) {
     const card = event.currentTarget;
     const target = event.target instanceof HTMLElement ? event.target : null;
     if (!event.defaultPrevented) {
-        if (isPrimaryKey(event.nativeEvent, chatHost().isApplePlatform())) {
+        if (isPrimaryKey(event.nativeEvent, apple)) {
             event.preventDefault();
             // A click on the button itself, so a disabled Next or Answer stays as disabled as it looks.
             card.querySelector('[data-prompt-primary]:not(:disabled)')?.click();
@@ -42,7 +42,8 @@ function onCardKeyDown(event) {
 /* What every prompt looks like, whatever asked it: in a chat's composer and in a canvas's stack. */
 export function PromptCard({ kind, heading, meta, top, actions, busy, notice, error, children }) {
     const { t } = useTranslation('agent-prompts');
-    const card = (_jsxs("div", { className: "prompt-card flex min-h-0 flex-col gap-2 p-3", role: "group", "aria-label": t(`card.${kind}`), "aria-busy": busy, onKeyDown: onCardKeyDown, children: [_jsx("div", { className: "-m-1.5 max-h-[min(50dvh,480px)] overflow-auto overscroll-contain p-1.5", children: _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx(Icon, { icon: ICONS[kind], size: 16, className: "mt-[3px] shrink-0 text-status-needs-you" }), _jsx("h3", { tabIndex: -1, className: "prompt-heading min-w-0 break-words text-sm font-semibold text-text outline-offset-4", children: heading })] }), meta && _jsx("div", { className: "flex flex-wrap gap-x-3 gap-y-1 text-xs text-text-muted", children: meta }), children, notice && _jsx("p", { className: "text-xs text-text-muted", children: notice }), error && (_jsx("p", { role: "alert", className: "text-xs text-status-error", children: error }))] }) }), _jsx("div", { role: "toolbar", "aria-label": t('toolbar'), className: "flex flex-wrap items-center gap-1.5", children: actions })] }));
+    const { isApplePlatform } = useChatHost();
+    const card = (_jsxs("div", { className: "prompt-card flex min-h-0 flex-col gap-2 p-3", role: "group", "aria-label": t(`card.${kind}`), "aria-busy": busy, onKeyDown: (event) => onCardKeyDown(event, isApplePlatform()), children: [_jsx("div", { className: "-m-1.5 max-h-[min(50dvh,480px)] overflow-auto overscroll-contain p-1.5", children: _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-start gap-2", children: [_jsx(Icon, { icon: ICONS[kind], size: 16, className: "mt-[3px] shrink-0 text-status-needs-you" }), _jsx("h3", { tabIndex: -1, className: "prompt-heading min-w-0 break-words text-sm font-semibold text-text outline-offset-4", children: heading })] }), meta && _jsx("div", { className: "flex flex-wrap gap-x-3 gap-y-1 text-xs text-text-muted", children: meta }), children, notice && _jsx("p", { className: "text-xs text-text-muted", children: notice }), error && (_jsx("p", { role: "alert", className: "text-xs text-status-error", children: error }))] }) }), _jsx("div", { role: "toolbar", "aria-label": t('toolbar'), className: "flex flex-wrap items-center gap-1.5", children: actions })] }));
     if (top === undefined) {
         return card;
     }

package/dist/prompts/ui/PromptView.js

@@ -1,7 +1,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useTranslation } from 'react-i18next';
 import { toolSummary } from '../../chat/logic/tools.js';
-import { chatHost } from '../../host.js';
+import { useChatHost } from '../../host.js';
 import { answerValue, promptAnswers, questionAnswer } from '../logic/prompts.js';
 import { approvalButtons } from '../logic/subjects.js';
 import { ApprovalBody } from './ApprovalBody.js';
@@ -12,11 +12,12 @@ import { QuestionBody } from './QuestionBody.js';
 export function PromptView(props) {
     const { subject, draft, onDraft, onAction, more, hasDraft, denyReason, disabled, sending, error, top } = props;
     const { t } = useTranslation('agent-prompts');
+    const { prompts } = useChatHost();
     const locked = sending || disabled;
     const notice = disabled ? t('error.notConnected') : null;
     const buttons = approvalButtons(subject, draft.reason).map(({ action, ...button }) => ({ ...button, onPress: () => onAction(action) }));
     if (subject.kind === 'host') {
-        return chatHost().prompts.render(subject.prompt, props);
+        return prompts.render(subject.prompt, props);
     }
     const { item } = subject;
     const question = item.kind === 'question' ? item.questions[Math.min(draft.index, item.questions.length - 1)] : null;

package/dist/prompts/ui/QuestionBody.js

@@ -6,11 +6,12 @@ import { Circle, CircleCheck, Square } from 'lucide-react';
 import { answerFieldKey, choiceKey, stepIndex } from '../logic/keys.js';
 import { pickPromptChoice } from '../logic/prompts.js';
 import { Icon } from '@adecore/ui';
-import { chatHost } from '../../host.js';
+import { useChatHost } from '../../host.js';
 /* One question of a request: its choices, "Something else…", or a written answer when it offers no choices. */
 export function QuestionBody({ question, answer, onAnswer, onCommit, locked }) {
+    const host = useChatHost();
     const { t } = useTranslation('agent-prompts');
-    const AnswerField = chatHost().dictation.Textarea;
+    const AnswerField = host.dictation.Textarea;
     // The choices, then the "Something else…" field form one list with a single tab stop.
     const items = useRef([]);
     const shownQuestion = useRef(question.id);

package/dist/providers/AccountColors.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { AccentSwatches } from '@adecore/ui';
-import { chatHost } from '../host.js';
+import { useChatHost } from '../host.js';
 /* The colors an account may wear, the host's palette. */
 export function AccountColors({ value, label, onChange }) {
-    const { all, featured, label: labelOf } = chatHost().accents;
+    const { all, featured, label: labelOf } = useChatHost().accents;
     return _jsx(AccentSwatches, { value: value, label: label, accents: all, featured: featured, labelOf: labelOf, onValueChange: onChange });
 }

package/dist/providers/AccountDetail.js

@@ -6,7 +6,7 @@ import { AccountDot } from '../agents/AccountDot.js';
 import { accountName, FOLDER_VARIABLES } from '../agents/accounts.js';
 import { ConfirmDialog, DetailHeader, SettingsRow, SettingsSection } from '@adecore/ui/settings';
 import { Button, copyText, Icon, Input, Switch, Tooltip } from '@adecore/ui';
-import { chatHost } from '../host.js';
+import { useChatHost } from '../host.js';
 import { useChatScope } from '../scope.js';
 import { removeAccount, saveAccount } from './account-actions.js';
 import { AccountVariables } from './AccountVariables.js';
@@ -35,6 +35,7 @@ function NameField({ value, label, onSave }) {
 export function AccountDetail({ provider, entry, canLogIn, loginBlocked, secretsAvailable, onRemoved }) {
     const { t } = useTranslation('agent-providers');
     const scope = useChatScope();
+    const host = useChatHost();
     const [confirming, setConfirming] = useState(false);
     const { id, account, status, isDefault } = entry;
     const name = accountName(entry, provider.name);
@@ -43,7 +44,7 @@ export function AccountDetail({ provider, entry, canLogIn, loginBlocked, secrets
     const signedIn = status?.state === 'ready';
     const showFolder = () => {
         copyText(folder);
-        chatHost().notify({ kind: 'success', title: t('account.folderCopied'), description: folder });
+        host.notify({ kind: 'success', title: t('account.folderCopied'), description: folder });
     };
     const loginDetail = () => {
         if (status !== null && TROUBLE.has(status.state) && status.message) {
@@ -54,16 +55,16 @@ export function AccountDetail({ provider, entry, canLogIn, loginBlocked, secrets
         }
         return status?.plan ? t('account.login.planDetail', { plan: status.plan }) : t('account.login.detail');
     };
-    const loginButton = (_jsxs(Button, { variant: "secondary", disabled: loginBlocked !== null, onClick: () => void chatHost().openLogin?.(scope.id, provider.kind, id, name), children: [_jsx(Icon, { icon: LogIn, size: 14 }), signedIn ? t('account.login.logInAgain') : t('account.login.logIn')] }));
+    const loginButton = (_jsxs(Button, { variant: "secondary", disabled: loginBlocked !== null, onClick: () => void host.openLogin?.(scope.id, provider.kind, id, name), children: [_jsx(Icon, { icon: LogIn, size: 14 }), signedIn ? t('account.login.logInAgain') : t('account.login.logIn')] }));
     return (_jsxs(_Fragment, { children: [_jsx(DetailHeader, { mark: _jsx("span", { className: "grid h-6 shrink-0 place-items-center", children: _jsx(AccountDot, { color: account.color, className: "size-3" }) }), title: name, subtitle: _jsxs(_Fragment, { children: [_jsx(CliMark, { kind: provider.kind, size: 12, className: "text-text-muted" }), t('account.kind', { provider: provider.name })] }), actions: folder !== '' && (_jsx(Button, { variant: "secondary", onClick: showFolder, children: t('account.showFolder') })) }), _jsxs(SettingsSection, { children: [_jsx(SettingsRow, { label: t('account.enabled.label'), description: t('account.enabled.description'), control: _jsx(Switch, { checked: account.enabled !== false, label: t('account.enabled.label'), onCheckedChange: (checked) => {
                                 const { enabled: _enabled, ...rest } = account;
-                                void saveAccount(scope, id, checked ? rest : { ...rest, enabled: false });
-                            } }) }), _jsx(SettingsRow, { label: t('account.name'), control: _jsx(NameField, { value: name, label: t('account.name'), onSave: (label) => void saveAccount(scope, id, { ...account, label }) }, name) }), _jsx(SettingsRow, { label: t('account.color'), control: _jsx(AccountColors, { value: account.color, label: t('account.color'), onChange: (color) => void saveAccount(scope, id, { ...account, color }) }) })] }), canLogIn && (_jsxs(SettingsSection, { title: t('account.login.title'), children: [_jsx(SettingsRow, { label: signedIn
+                                void saveAccount(scope, host, id, checked ? rest : { ...rest, enabled: false });
+                            } }) }), _jsx(SettingsRow, { label: t('account.name'), control: _jsx(NameField, { value: name, label: t('account.name'), onSave: (label) => void saveAccount(scope, host, id, { ...account, label }) }, name) }), _jsx(SettingsRow, { label: t('account.color'), control: _jsx(AccountColors, { value: account.color, label: t('account.color'), onChange: (color) => void saveAccount(scope, host, id, { ...account, color }) }) })] }), canLogIn && (_jsxs(SettingsSection, { title: t('account.login.title'), children: [_jsx(SettingsRow, { label: signedIn
                             ? status?.email
                                 ? t('account.login.signedInAs', { email: status.email })
                                 : t('account.login.signedIn')
                             : t('account.login.signedOut'), description: loginBlocked === null ? loginDetail() : `${loginDetail()} ${loginBlocked}`, control: loginBlocked === null ? (loginButton) : (_jsx(Tooltip, { label: loginBlocked, children: _jsx("span", { className: "inline-flex", children: loginButton }) })) }), _jsxs(SettingsRow, { label: t('account.folder.label'), children: [_jsx(Input, { mono: true, className: "h-8.5", value: folder, readOnly: true, "aria-label": t('account.folder.label') }), _jsx("p", { className: "-mt-1 text-xs text-text-muted", children: variable ? (_jsx(Trans, { t: t, i18nKey: "account.folder.detail", values: { variable }, components: { code: _jsx("code", { className: "font-mono text-code" }) } })) : (t('account.folder.detailPlain')) })] })] })), _jsx(AccountVariables, { id: id, account: account, secretsAvailable: secretsAvailable }, `${id}:${JSON.stringify(account.env ?? [])}`), _jsx(SettingsSection, { children: _jsx(SettingsRow, { label: t('account.remove.label'), description: isDefault ? t('account.remove.defaultNote') : t('account.remove.description'), control: _jsx(Button, { variant: "danger-outline", disabled: isDefault, onClick: () => setConfirming(true), children: t('account.remove.button') }) }) }), _jsx(ConfirmDialog, { open: confirming, onOpenChange: setConfirming, title: t('account.remove.confirmTitle', { account: name }), description: t('account.remove.confirmDescription', { folder }), confirmLabel: t('account.remove.confirm'), onConfirm: async () => {
-                    await removeAccount(scope, id, provider.kind);
+                    await removeAccount(scope, host, id, provider.kind);
                     onRemoved();
                 } })] }));
 }

package/dist/providers/AccountVariables.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Lock, LockOpen, Plus, X } from 'lucide-react';
+import { useChatHost } from '../host.js';
 import { useChatScope } from '../scope.js';
 import { saveAccount } from './account-actions.js';
 import { draftsOf, emptyDraft, variablesChanged, variablesOf, variablesProblem } from './variables.js';
@@ -14,6 +15,7 @@ import { Button, FormError, Icon, IconButton, Input, Tooltip } from '@adecore/ui
 export function AccountVariables({ id, account, secretsAvailable }) {
     const { t } = useTranslation('agent-providers');
     const scope = useChatScope();
+    const host = useChatHost();
     const [drafts, setDrafts] = useState(() => draftsOf(account.env));
     const [saving, setSaving] = useState(false);
     const changed = variablesChanged(drafts, account.env);
@@ -26,7 +28,7 @@ export function AccountVariables({ id, account, secretsAvailable }) {
         const { env: _env, ...rest } = account;
         setSaving(true);
         try {
-            await saveAccount(scope, id, env.length === 0 ? rest : { ...rest, env });
+            await saveAccount(scope, host, id, env.length === 0 ? rest : { ...rest, env });
         }
         finally {
             setSaving(false);

package/dist/providers/AddAccountForm.js

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import { ChevronRight } from 'lucide-react';
 import { freeAccountColor, mintAccountId } from '../agents/accounts.js';
-import { chatHost } from '../host.js';
+import { useChatHost } from '../host.js';
 import { useChatScope } from '../scope.js';
 import { createAccount, linkAccount } from './account-actions.js';
 import { AccountColors } from './AccountColors.js';
@@ -19,8 +19,9 @@ import { providerAccountsOf } from '../state/provider-accounts.js';
 export function AddAccountForm({ provider, entries, onCancel, onAdded }) {
     const { t } = useTranslation('agent-providers');
     const scope = useChatScope();
+    const { accents } = useChatHost();
     const [name, setName] = useState('');
-    const [color, setColor] = useState(() => freeAccountColor(entries, chatHost().accents.current()));
+    const [color, setColor] = useState(() => freeAccountColor(entries, accents, accents.current()));
     const [advanced, setAdvanced] = useState(false);
     const [folder, setFolder] = useState('');
     const [busy, setBusy] = useState(false);

package/dist/providers/ProvidersPane.js

@@ -7,7 +7,7 @@ import { AccountDot } from '../agents/AccountDot.js';
 import { ACCOUNT_TONE_CLASSES, accountName, accountsOfKind, accountStatusLine } from '../agents/accounts.js';
 import { ErrorBoundary, Icon, IconButton, SectionLabel, Skeleton } from '@adecore/ui';
 import { MasterDetail } from '@adecore/ui/settings';
-import { chatHost } from '../host.js';
+import { useChatHost } from '../host.js';
 import { useChatScope } from '../scope.js';
 import { AccountDetail } from './AccountDetail.js';
 import { AddAccountForm } from './AddAccountForm.js';
@@ -26,8 +26,9 @@ export function ProvidersPane({ target = null, detailOf, defaults = true }) {
     const providers = useProviders((s) => s.providers);
     const loaded = useProviders((s) => s.loaded);
     const accounts = useProviderAccounts((s) => s.accounts);
-    const { openLogin } = chatHost();
-    const loginBlocked = chatHost().useLoginBlocked(scopeId);
+    const host = useChatHost();
+    const { openLogin } = host;
+    const loginBlocked = host.useLoginBlocked(scopeId);
     const [picked, setPicked] = useState(() => (target === 'providers.apple' ? { kind: 'cli', cli: 'apple' } : null));
     const installed = useMemo(() => providers.filter((provider) => provider.installed || provider.kind === 'apple'), [providers]);
     const missing = useMemo(() => providers.filter((provider) => !provider.installed && provider.kind !== 'apple'), [providers]);

package/dist/providers/account-actions.d.ts

@@ -1,7 +1,8 @@
 import type { AgentKind, ProviderAccount, ProviderAccountMap } from '@adecore/agent-contracts';
+import type { ChatHost } from '../host.js';
 import type { ChatScope } from '../scope.js';
-export declare function saveAccounts(scope: ChatScope, accounts: ProviderAccountMap): Promise<boolean>;
-export declare function saveAccount(scope: ChatScope, id: string, account: ProviderAccount): Promise<boolean>;
-export declare function removeAccount(scope: ChatScope, id: string, kind: AgentKind): Promise<void>;
+export declare function saveAccounts(scope: ChatScope, host: Pick<ChatHost, 'notify'>, accounts: ProviderAccountMap): Promise<boolean>;
+export declare function saveAccount(scope: ChatScope, host: Pick<ChatHost, 'notify'>, id: string, account: ProviderAccount): Promise<boolean>;
+export declare function removeAccount(scope: ChatScope, host: Pick<ChatHost, 'notify'>, id: string, kind: AgentKind): Promise<void>;
 export declare function createAccount(scope: ChatScope, kind: AgentKind, label: string, color: string): Promise<string>;
 export declare function linkAccount(scope: ChatScope, id: string, account: ProviderAccount): Promise<void>;

package/dist/providers/account-actions.js

@@ -1,6 +1,5 @@
 import i18next from 'i18next';
 import { accountFor, readChatPreferences, rememberChatAccount } from '../chat/preferences.js';
-import { chatHost } from '../host.js';
 import { providerAccountsOf, useProviderAccountsStore } from '../state/provider-accounts.js';
 function words(key, values) {
     return i18next.t(`agent-providers:${key}`, values);
@@ -15,28 +14,28 @@ function linkTo(scope) {
     return scope.transport;
 }
 /* The whole map, as `accounts.save` takes it. Answers false when the host refused, which a toast then says. */
-export async function saveAccounts(scope, accounts) {
+export async function saveAccounts(scope, host, accounts) {
     try {
         useProviderAccountsStore.getState().set(scope.id, await linkTo(scope).request('accounts.save', { accounts }));
         return true;
     }
     catch (e) {
-        chatHost().notify({ id: `providers-save-${scope.id}`, kind: 'error', title: words('account.saveFailed'), description: reason(e) });
+        host.notify({ id: `providers-save-${scope.id}`, kind: 'error', title: words('account.saveFailed'), description: reason(e) });
         return false;
     }
 }
 /* One account changed and every other one as the host last said. */
-export function saveAccount(scope, id, account) {
+export function saveAccount(scope, host, id, account) {
     const current = providerAccountsOf(scope.id).accounts?.accounts ?? {};
-    return saveAccounts(scope, { ...current, [id]: account });
+    return saveAccounts(scope, host, { ...current, [id]: account });
 }
 /*
  * Forgets an account; its folder stays where it is. A pick for new agents that named it goes back to
  * the CLI's default account, since no chat started from it yet.
  */
-export async function removeAccount(scope, id, kind) {
+export async function removeAccount(scope, host, id, kind) {
     const { [id]: _gone, ...rest } = providerAccountsOf(scope.id).accounts?.accounts ?? {};
-    if (!(await saveAccounts(scope, rest))) {
+    if (!(await saveAccounts(scope, host, rest))) {
         throw new Error(words('account.saveFailed'));
     }
     if (accountFor(readChatPreferences(), scope.id, kind) === id) {

package/dist/providers/index.d.ts

@@ -0,0 +1,16 @@
+export { AccountDot } from '../agents/AccountDot.js';
+export { AgentIcon } from '../agents/AgentIcon.js';
+export { ModelOptionControl } from '../agents/ModelOptionControl.js';
+export { ProviderLogo } from '../agents/ProviderLogo.js';
+export { type AccountEntry, accountsOfKind, accountName, ACCOUNT_TONE_CLASSES, accountStatusLine, canContinueOn, type AccountTone } from '../agents/accounts.js';
+export { modelName, useModelName, shortModelName } from '../agents/model-name.js';
+export { optionValue, carryOptions } from '../agents/model-options.js';
+export { modelRequirementOf, type ModelRequirement } from '../agents/model-requirement.js';
+export { AccountColors } from './AccountColors.js';
+export { AccountDetail } from './AccountDetail.js';
+export { AccountVariables } from './AccountVariables.js';
+export { AddAccountForm } from './AddAccountForm.js';
+export { CliDetail } from './CliDetail.js';
+export { ProvidersPane } from './ProvidersPane.js';
+export { saveAccounts, saveAccount, removeAccount, createAccount, linkAccount } from './account-actions.js';
+export { CliMark, CliTile } from './parts.js';

package/dist/providers/index.js

@@ -0,0 +1,17 @@
+// Public API: exports.test.ts snapshots this list, so a name added or dropped here is an API change.
+export { AccountDot } from '../agents/AccountDot.js';
+export { AgentIcon } from '../agents/AgentIcon.js';
+export { ModelOptionControl } from '../agents/ModelOptionControl.js';
+export { ProviderLogo } from '../agents/ProviderLogo.js';
+export { accountsOfKind, accountName, ACCOUNT_TONE_CLASSES, accountStatusLine, canContinueOn } from '../agents/accounts.js';
+export { modelName, useModelName, shortModelName } from '../agents/model-name.js';
+export { optionValue, carryOptions } from '../agents/model-options.js';
+export { modelRequirementOf } from '../agents/model-requirement.js';
+export { AccountColors } from './AccountColors.js';
+export { AccountDetail } from './AccountDetail.js';
+export { AccountVariables } from './AccountVariables.js';
+export { AddAccountForm } from './AddAccountForm.js';
+export { CliDetail } from './CliDetail.js';
+export { ProvidersPane } from './ProvidersPane.js';
+export { saveAccounts, saveAccount, removeAccount, createAccount, linkAccount } from './account-actions.js';
+export { CliMark, CliTile } from './parts.js';

package/dist/providers/provider-abilities.d.ts

@@ -1,2 +1,3 @@
-import type { ProviderInfo } from '@adecore/agent-contracts';
+import type { ProviderCapabilities, ProviderInfo } from '@adecore/agent-contracts';
 export declare function providerAbilities(provider: ProviderInfo): string;
+export declare function canSteer(capabilities: ProviderCapabilities | undefined): boolean;

package/dist/providers/provider-abilities.js

@@ -5,3 +5,7 @@ export function providerAbilities(provider) {
     const status = provider.capabilities.hooks ? i18next.t('agent-providers:abilities.reportsStatus') : i18next.t('agent-providers:abilities.noStatus');
     return `${where} ${status}`;
 }
+/* Whether a message sent while a turn runs may join it. Undefined while the host has not answered `provider.list`, which steers nothing. */
+export function canSteer(capabilities) {
+    return capabilities?.steer === true;
+}

package/dist/state/chats.js

@@ -1,5 +1,6 @@
 import { useContext, useMemo } from 'react';
 import { create } from 'zustand';
+import { appendToolOutput } from '@adecore/agent-contracts/text';
 import { ChatScopeContext, useChatScope } from '../scope.js';
 function isWaiting(item) {
     return (item?.kind === 'approval' && item.decision === 'pending') || (item?.kind === 'question' && item.state === 'pending');
@@ -39,7 +40,8 @@ export function prependPage(state, cursor, page) {
     const olderIds = new Set(older.map((item) => item.id));
     const items = { ...state.items };
     for (const item of older) {
-        items[item.id] = item;
+        // 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) {
@@ -103,7 +105,7 @@ export function applyEvent(state, event) {
             }
             if (item?.kind === 'tool' && item.state === 'running') {
                 const progress = item.progress ?? { startedAt: null, description: null, output: null };
-                const grown = { ...item, progress: { ...progress, output: (progress.output ?? '') + event.text } };
+                const grown = { ...item, progress: { ...progress, output: appendToolOutput(progress.output, event.text) } };
                 return { ...state, items: { ...state.items, [event.itemId]: grown } };
             }
             return state;

package/dist/state/index.d.ts

@@ -0,0 +1,4 @@
+export { type ChatState, type ChatsById, type ChatStatuses, type ChatSink, prependPage, waitingRequestsOf, applyEvent, useChats, chatSink, useChatRow, useReportedModels, useCurrentItem, type ChatHistoryPage, type ChatPage } from './chats.js';
+export { useProviderAccountsStore, useProviderAccounts, providerAccountsOf, knownAccounts, watchProviderAccounts, type ProviderAccountsRow } from './provider-accounts.js';
+export { useProvidersStore, useProviders, providersOf, providerSinkFor, type ProvidersRow } from './providers.js';
+export { type UsageMetric, USAGE_PREFERENCES_KEY, usagePreferencesKey, dayOf, windowFor, summaryPayload, reloadUsagePreferences, useUsageStore, useUsage, type UsagePeriod, type UsageView } from './usage.js';

package/dist/state/index.js

@@ -0,0 +1,5 @@
+// Public API: exports.test.ts snapshots this list, so a name added or dropped here is an API change.
+export { prependPage, waitingRequestsOf, applyEvent, useChats, chatSink, useChatRow, useReportedModels, useCurrentItem } from './chats.js';
+export { useProviderAccountsStore, useProviderAccounts, providerAccountsOf, knownAccounts, watchProviderAccounts } from './provider-accounts.js';
+export { useProvidersStore, useProviders, providersOf, providerSinkFor } from './providers.js';
+export { USAGE_PREFERENCES_KEY, usagePreferencesKey, dayOf, windowFor, summaryPayload, reloadUsagePreferences, useUsageStore, useUsage } from './usage.js';

package/dist/testing/index.d.ts

@@ -0,0 +1 @@
+export { PROMPT_SAMPLES } from './prompts.js';

package/dist/testing/index.js

@@ -0,0 +1,2 @@
+// Public API: exports.test.ts snapshots this list, so a name added or dropped here is an API change.
+export { PROMPT_SAMPLES } from './prompts.js';

package/dist/{prompts/logic/prompts.fixtures.d.ts → testing/prompts.d.ts}

@@ -1,4 +1,4 @@
-import type { PendingPrompt } from './prompts.js';
+import type { PendingPrompt } from '../prompts/logic/prompts.js';
 export declare const PROMPT_SAMPLES: Array<{
     label: string;
     items: PendingPrompt[];

package/dist/theme.css

@@ -91,13 +91,14 @@
     /*
      * A chat that is a view of its own reads in a column. The scroller keeps the full width of the
      * main column, so its scrollbar sits at that column's right edge and nothing jumps when the
-     * thread grows past a screenful; only the rows and the composer inside it are centered.
+     * thread grows past a screenful; only the rows and the composer inside it are centered. The
+     * width is the person's reading width (`chat/reading-width.ts`).
      */
-    .chat-column .chat-column-content { margin-inline: auto; max-width: 768px; }
+    .chat-column .chat-column-content { margin-inline: auto; max-width: var(--chat-measure, 768px); }
     /* Wide pages clear the scrubber even when the reply column needs no extra padding. */
     .chat-wide-content { max-width: calc(100% - 2 * var(--chat-wide-inset, 0px)); }
     /* Wider by the input's inset (`.composer-input .cm-content` padding plus the card's border), so what is typed lines up with the thread. */
-    .chat-column .chat-composer-content { margin-inline: auto; max-width: calc(768px + 2 * 21px); }
+    .chat-column .chat-composer-content { margin-inline: auto; max-width: calc(var(--chat-measure, 768px) + 2 * 21px); }
 
     /* A diff inside a chat tool block; the library paints its own colors inside a shadow root and
        takes the face it draws them in through these variables. */
@@ -184,6 +185,15 @@
     --tw-prose-th-borders: var(--border);
     --tw-prose-td-borders: var(--border);
 }
+/* A muted `Markdown`, such as a thought the model had before it answered. */
+.prose.chat-markdown[data-muted] {
+    --tw-prose-body: var(--text-muted);
+    --tw-prose-headings: var(--text-muted);
+    --tw-prose-bold: var(--text-muted);
+    --tw-prose-quotes: var(--text-muted);
+    --tw-prose-code: var(--text-muted);
+    --tw-prose-pre-code: var(--text-muted);
+}
 /* Headings stay on the app's scale, which is flatter than the one prose brings. */
 .chat-markdown :is(h1, h2, h3, h4) { font-weight: 600; line-height: round(1.3em, 1px); }
 .chat-markdown h1 { font-size: var(--text-lg); }

package/dist/usage/UsageBreakdown.js

@@ -5,7 +5,7 @@ import { CircleHelp, Folder, Info } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { EmptyState, Icon, SectionLabel, Segmented, Tooltip } from '@adecore/ui';
 import { useChatScope } from '../scope.js';
-import { chatHost } from '../host.js';
+import { useChatHost } from '../host.js';
 import { ProviderLogo } from '../agents/ProviderLogo.js';
 import { USAGE_PROVIDERS, totalTokensOf } from '@adecore/agent-contracts';
 import { modelNameFromSlug } from '../agents/model-name.js';
@@ -33,8 +33,9 @@ function ModelRows({ models, metric, total }) {
 }
 /* One project's row, under the name and the mark its host gives it, or its folder's own under a folder. */
 function ProjectRow({ project, top, money }) {
+    const host = useChatHost();
     // 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);
+    const look = host.useProjectLook(useChatScope().id, project.projectId);
     return (_jsxs("div", { className: `${ROW} h-auto items-start py-1.5`, children: [_jsx("span", { className: "mt-px flex", children: look?.mark ?? (_jsx("span", { className: "text-text-faint", children: _jsx(Icon, { icon: Folder, size: 16 }) })) }), _jsxs("span", { className: "flex min-w-0 grow flex-col", children: [_jsx("span", { className: "truncate", children: look?.name ?? project.name }), _jsx("span", { className: "truncate text-text-faint", children: shortPath(project.folder) })] }), _jsx("span", { className: "mt-1 flex h-[9px] w-32 shrink-0 overflow-hidden rounded-full bg-surface-sunken", children: USAGE_PROVIDERS.map((provider) => {
                     const share = project.byProvider[provider];
                     const width = barWidth(share?.costUsd ?? 0, top);

package/dist/usage/UsageLimits.js

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { LogIn } from 'lucide-react';
 import { AccountDot } from '../agents/AccountDot.js';
 import { Button, Icon, SectionLabel, Segmented, Tooltip, useNow } from '@adecore/ui';
-import { chatHost } from '../host.js';
+import { useChatHost } from '../host.js';
 import { PROVIDER_COLORS, PROVIDER_LABELS } from './format.js';
 import { accountNote, checkedLabel, hasSeveralAccounts, isSignedOut } from './limit-groups.js';
 import { WindowBar } from './LimitsList.js';
@@ -32,14 +32,15 @@ function LimitCard({ account, named, now, login }) {
  * credential: every CLI holds its own login and answers the question when the daemon starts one and asks.
  */
 export function UsageLimits() {
+    const host = useChatHost();
     const { t } = useTranslation('agent-usage');
     const limits = useUsageLimits();
     const groups = useLimitGroups(limits);
     const now = useNow(MINUTE_MS);
     const scopeId = useChatScope().id;
     const loginCommands = useProviderAccountsStore((s) => s.byScope[scopeId]?.accounts?.loginCommands);
-    const { openLogin } = chatHost();
-    const blocked = chatHost().useLoginBlocked(scopeId);
+    const { openLogin } = host;
+    const blocked = host.useLoginBlocked(scopeId);
     const [filter, setFilter] = useState('all');
     if (limits === null) {
         return null;

package/dist/usage/UsagePage.js

@@ -5,7 +5,7 @@ import { ChartNoAxesColumn, RefreshCw } from 'lucide-react';
 import { USAGE_PROVIDERS } from '@adecore/agent-contracts';
 import { Button, CloseButton, Dialog, EmptyState, FormError, IconButton, Segmented, Select, Skeleton } from '@adecore/ui';
 import { AccountDot } from '../agents/AccountDot.js';
-import { chatHost } from '../host.js';
+import { useChatHost } from '../host.js';
 import { useChatScope } from '../scope.js';
 import { useProvidersStore } from '../state/providers.js';
 import { askedKey, summaryPayload, USAGE_PERIODS, useUsage, useUsageStore } from '../state/usage.js';
@@ -31,6 +31,7 @@ function useAnswering(transport) {
  * agent looks like too, and the way to fix that is the agent settings.
  */
 function HostAgents() {
+    const host = useChatHost();
     const { t } = useTranslation('agent-usage');
     const { id } = useChatScope();
     const row = useProvidersStore((s) => s.byScope[id]);
@@ -38,7 +39,7 @@ function HostAgents() {
     if (!row?.loaded) {
         return null;
     }
-    return (_jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx("p", { className: "text-xs text-text-muted", children: installed.length === 0 ? t('agents.none') : t('agents.installed', { list: installed.map((provider) => provider.name).join(', ') }) }), _jsx(Button, { size: "sm", variant: "secondary", onClick: () => chatHost().openSettings('agents'), children: t('agents.settings') })] }));
+    return (_jsxs("div", { className: "flex flex-col items-center gap-2", children: [_jsx("p", { className: "text-xs text-text-muted", children: installed.length === 0 ? t('agents.none') : t('agents.installed', { list: installed.map((provider) => provider.name).join(', ') }) }), _jsx(Button, { size: "sm", variant: "secondary", onClick: () => host.openSettings('agents'), children: t('agents.settings') })] }));
 }
 /*
  * Asks the host on screen for the period that is up, keeps the answer under the key of the question

package/dist/usage/index.d.ts

@@ -0,0 +1,15 @@
+export { WindowBar, LimitsList, AccountLimitsList } from './LimitsList.js';
+export { UsageBreakdown } from './UsageBreakdown.js';
+export { UsageChart } from './UsageChart.js';
+export { UsageDialog } from './UsageDialog.js';
+export { UsageLimits } from './UsageLimits.js';
+export { UsageLimitsCard } from './UsageLimitsCard.js';
+export { UsagePage } from './UsagePage.js';
+export { UsagePane } from './UsagePane.js';
+export { UsageSummary } from './UsageSummary.js';
+export { UsageTiles } from './UsageTiles.js';
+export { formatClock, type UsageCurrency } from './format.js';
+export type { LimitAccount, LimitGroup } from './limit-groups.js';
+export { useLimitGroups } from './limits.js';
+export { useMoney } from './money.js';
+export { niceScale, labelEveryFor, deriveUsage, type ChartSlot, type ProviderTotal, type DerivedUsage } from './summary.js';

package/dist/usage/index.js

@@ -0,0 +1,15 @@
+// Public API: exports.test.ts snapshots this list, so a name added or dropped here is an API change.
+export { WindowBar, LimitsList, AccountLimitsList } from './LimitsList.js';
+export { UsageBreakdown } from './UsageBreakdown.js';
+export { UsageChart } from './UsageChart.js';
+export { UsageDialog } from './UsageDialog.js';
+export { UsageLimits } from './UsageLimits.js';
+export { UsageLimitsCard } from './UsageLimitsCard.js';
+export { UsagePage } from './UsagePage.js';
+export { UsagePane } from './UsagePane.js';
+export { UsageSummary } from './UsageSummary.js';
+export { UsageTiles } from './UsageTiles.js';
+export { formatClock } from './format.js';
+export { useLimitGroups } from './limits.js';
+export { useMoney } from './money.js';
+export { niceScale, labelEveryFor, deriveUsage } from './summary.js';