@adecore/agents-react 0.23.1 → 0.24.0

package/src/locales/nl/agent-prompts.ts

@@ -0,0 +1,43 @@
+export default {
+    card: {
+        approval: 'Verzoek om toestemming',
+        question: 'Vraag',
+        waiting: 'Wacht in de terminal'
+    },
+    toolbar: 'Acties',
+    sending: 'Versturen…',
+    error: {
+        notConnected: 'Geen verbinding met de machine',
+        noChoices: 'Een chatverzoek heeft geen eigen keuzes'
+    },
+    approval: {
+        runCommand: 'Commando uitvoeren',
+        allow: 'Toestaan',
+        deny: 'Weigeren',
+        addReason: 'Reden toevoegen',
+        allChanges_one: 'Toestaan geldt voor de {{count}} wijziging in dit verzoek.',
+        allChanges_other: 'Toestaan geldt voor alle {{count}} wijzigingen in dit verzoek.',
+        loadingDiff: 'Diff laden…',
+        reviewChanges: 'Wijzigingen beoordelen',
+        viewDiff: 'Volledige diff tonen',
+        collapseDiff: 'Diff inklappen',
+        details: 'Details',
+        reasonLabel: 'Reden voor weigeren',
+        reasonPlaceholder: 'Reden voor weigeren, optioneel'
+    },
+    question: {
+        multiSelect: 'Kies er een of meer',
+        answerLabel: 'Jouw antwoord',
+        answerPlaceholder: 'Jouw antwoord',
+        somethingElse: 'Iets anders…',
+        previous: 'Vorige',
+        next: 'Volgende',
+        answer: 'Antwoorden'
+    },
+    meta: {
+        waiting_one: '{{count}} verzoek wacht',
+        waiting_other: '{{count}} verzoeken wachten',
+        question: 'Vraag {{index}} van {{total}}',
+        draftSaved: 'Concept bewaard'
+    }
+};

package/src/locales/nl/agent-providers.ts

@@ -0,0 +1,131 @@
+export default {
+    status: {
+        checking: 'Controleren',
+        disabled: 'Uitgezet',
+        notFound: 'CLI niet gevonden',
+        signedOut: 'Niet ingelogd',
+        ready: 'Ingelogd',
+        readyPlan: 'Ingelogd · {{plan}}',
+        available: 'Klaar',
+        folderMissing: 'Map ontbreekt',
+        unavailable: 'Niet beschikbaar',
+        failed: 'Controle mislukt'
+    },
+    failed: 'De instellingen van de providers konden niet worden getekend',
+    list: {
+        label: "Agent-CLI's en hun accounts",
+        default: 'Standaard',
+        addAccount: 'Een {{provider}}-account toevoegen',
+        notInstalled: 'Niet geïnstalleerd',
+        missing: 'Ontbreekt',
+        notInstalledNote: 'Installeer er een en start Ruimte op die machine opnieuw om hem toe te voegen.',
+        none: "Geen agent-CLI's gevonden op deze machine.",
+        noAccounts: 'Deze machine houdt nog geen accounts bij. Werk Ruimte daar bij om er een toe te voegen.'
+    },
+    abilities: {
+        version: 'Versie {{version}}.',
+        chatAndTerminal: 'Chat en terminal.',
+        terminalOnly: 'Alleen terminal.',
+        reportsStatus: 'Meldt de agentstatus.',
+        noStatus: 'Meldt geen agentstatus.'
+    },
+    cli: {
+        addAccount: 'Account toevoegen',
+        onlyDefault: '{{provider}} heeft geen instelling voor zijn configuratiemap, dus alleen zijn standaardaccount.',
+        defaults: {
+            title: 'Standaarden voor nieuwe chats',
+            description: 'Een model of account kiezen in een chat verandert hier ook de standaard.',
+            account: 'Account',
+            accountFor: 'Standaardaccount voor {{provider}}',
+            model: 'Model',
+            modelFor: 'Standaardmodel voor {{provider}}',
+            shared: 'Gedeeld door elk {{provider}}-account.',
+            usesCliDefault: 'Gebruikt het standaardmodel van de CLI zelf.',
+            providerDefault: 'Standaard van de provider',
+            legacyModel: '{{name}} (legacy)'
+        },
+        accounts: 'Accounts'
+    },
+    account: {
+        kind: '{{provider}}-account',
+        enabled: {
+            label: 'Dit account gebruiken',
+            description: 'Uitgezet wordt het niet aangeboden voor nieuwe chats en agents.'
+        },
+        showFolder: 'Map tonen',
+        folderCopied: 'Pad van de map gekopieerd',
+        name: 'Naam',
+        color: 'Kleur',
+        login: {
+            title: 'Login',
+            signedInAs: 'Ingelogd als {{email}}',
+            signedIn: 'Ingelogd',
+            planDetail: '{{plan}}-abonnement. Opnieuw inloggen opent een terminal met de login van de CLI zelf.',
+            detail: 'Opnieuw inloggen opent een terminal met de login van de CLI zelf.',
+            signedOut: 'Niet ingelogd',
+            signedOutDetail: 'Opent een terminal die de login van de CLI met deze map draait.',
+            logIn: 'Inloggen',
+            logInAgain: 'Opnieuw inloggen'
+        },
+        folder: {
+            label: 'Map',
+            detail: 'Aan de CLI gegeven als <code>{{variable}}</code>. De CLI bewaart hier zijn eigen login, instellingen en geschiedenis.',
+            detailPlain: 'De CLI bewaart hier zijn eigen login, instellingen en geschiedenis.'
+        },
+        variables: {
+            title: 'Variabelen',
+            description: 'Extra omgeving voor alleen dit account. Gevoelige waarden blijven in de sleutelhanger.',
+            add: 'Variabele toevoegen',
+            name: 'Naam van variabele {{index}}',
+            value: 'Waarde van {{name}}',
+            kept: 'Bewaard in de sleutelhanger',
+            lock: '{{name}} in de sleutelhanger bewaren',
+            unlock: '{{name}} als platte tekst bewaren',
+            noKeychain: 'Deze machine heeft geen sleutelhanger, dus een waarde kan niet geheim blijven.',
+            remove: '{{name}} verwijderen',
+            none: 'Geen variabelen',
+            discard: 'Weggooien',
+            problem: {
+                noName: 'Elke variabele heeft een naam nodig.',
+                invalidName: '{{name}} is geen naam voor een variabele.',
+                duplicate: '{{name}} staat er twee keer in.',
+                noValue: '{{name}} heeft een waarde nodig.'
+            }
+        },
+        remove: {
+            label: 'Account verwijderen',
+            description: 'Chats die het gebruiken vragen bij hun volgende turn om een ander account. De map blijft op de schijf.',
+            defaultNote: 'Het standaardaccount gebruikt de eigen map van de CLI en kan niet weg. Zet het in plaats daarvan hierboven uit.',
+            button: 'Verwijderen',
+            confirmTitle: '{{account}} verwijderen?',
+            confirmDescription: 'Ruimte vergeet dit account. De map blijft op de schijf staan op {{folder}}, met de login erin.',
+            confirm: 'Account verwijderen'
+        },
+        saveFailed: 'Kon het account niet opslaan'
+    },
+    add: {
+        title: 'Een {{provider}}-account toevoegen',
+        description: 'Ruimte maakt er een map voor op de machine en opent dan een terminal waarin je inlogt.',
+        name: 'Naam',
+        namePlaceholder: 'Werk',
+        color: 'Kleur',
+        advanced: 'Geavanceerd',
+        link: {
+            label: 'Een bestaande map koppelen',
+            description: 'Gebruik een configuratiemap die al op de machine staat in plaats van een nieuwe. Ruimte verplaatst of verwijdert hem nooit.',
+            placeholder: 'Pad op de machine'
+        },
+        create: 'Account toevoegen',
+        linkButton: 'Map koppelen',
+        failed: 'Kon het account niet toevoegen'
+    },
+    section: {
+        label: 'Providers',
+        description: "De agent-CLI's op deze machine en de accounts waarmee ze inloggen."
+    },
+    notAnswering: 'Geeft geen antwoord. Pas dit aan zodra de machine terug is.',
+    common: {
+        save: 'Opslaan',
+        cancel: 'Annuleren'
+    }
+};

package/src/locales/nl/agent-usage.ts

@@ -0,0 +1,132 @@
+export default {
+    limits: {
+        title: 'Limieten',
+        explain:
+            'Het streepje op een balk laat zien hoeveel van het venster voorbij is. Een balk voorbij dat streepje verbruikt sneller dan het venster teruggeeft.',
+        loading: 'Limieten laden…',
+        used: '{{percent}}% gebruikt',
+        bar: '{{window}}, {{percent}}% gebruikt',
+        windowPassed: '{{percent}}% van het venster voorbij',
+        faster: 'Verbruikt sneller dan het venster teruggeeft.',
+        slower: 'Verbruikt langzamer dan het venster teruggeeft.',
+        resets: 'Reset {{at}}',
+        none: 'Nog geen limieten gemeld.',
+        notInstalled: 'Niet geïnstalleerd op deze machine.',
+        noSubscription: 'Dit account gebruikt een API-sleutel en kent geen abonnementslimieten.',
+        unreachable: 'De CLI was niet bereikbaar.',
+        filter: 'Accounts waarvan je de limieten ziet',
+        signedOut: 'Niet ingelogd',
+        signedOutDetail: 'Niet ingelogd. Log in om de limieten te zien.',
+        logIn: 'Inloggen',
+        nextReset: '{{window}} reset {{at}}',
+        checked: {
+            now: 'nu',
+            ago: '{{duration}} geleden',
+            fromTurn: 'Uit een turn · {{when}}'
+        }
+    },
+    settings: {
+        currency: {
+            label: 'Valuta',
+            dollars: 'Prijzen zoals gepubliceerd, in dollars.',
+            noRate: 'Nog geen wisselkoers. De pagina toont dollars zolang die er niet is.',
+            converted: 'Omgerekend met de ECB-referentiekoers van {{date}}.',
+            options: {
+                USD: 'Dollars',
+                EUR: "Euro's"
+            }
+        },
+        page: {
+            label: 'Verbruikspagina',
+            description: 'Kosten, tokens en planlimieten, per account.',
+            open: 'Verbruik openen'
+        }
+    },
+    section: {
+        label: 'Verbruik',
+        description: 'De valuta van de verbruikspagina.'
+    },
+    dialog: {
+        title: 'Verbruik',
+        description: 'Kosten, tokens en limieten van je abonnement',
+        close: 'Verbruik sluiten',
+        rescan: 'Opnieuw scannen',
+        period: 'Periode',
+        metric: 'Eenheid',
+        failed: 'Verbruik kon niet worden getekend',
+        periods: {
+            today: 'Vandaag',
+            '7d': '7 dagen',
+            '30d': '30 dagen',
+            '90d': '90 dagen'
+        },
+        metrics: {
+            cost: 'Kosten',
+            tokens: 'Tokens'
+        },
+        accounts: {
+            label: 'Account',
+            all: 'Alle accounts'
+        }
+    },
+    empty: {
+        noTranscripts: 'Geen transcripts van Claude of Codex gevonden. De machine leest ~/.claude/projects en ~/.codex/sessions.',
+        noUsage: 'Nog geen verbruik op deze machine.'
+    },
+    agents: {
+        none: 'Op deze machine staat geen agent-CLI.',
+        installed: 'Deze machine heeft {{list}}.',
+        settings: 'Agent-instellingen'
+    },
+    provenance: {
+        failed: 'Kon de transcripts niet lezen. Dit is de laatste scan die wel lukte.',
+        scanned_one: 'Gescand om {{time}}, {{files}} bestand',
+        scanned_other: 'Gescand om {{time}}, {{files}} bestanden',
+        bundledPrices: 'Prijzen uit de meegeleverde tabel',
+        fetchedPrices: 'Prijzen van LiteLLM, {{date}}',
+        rate: '{{currency}} tegen de ECB-koers van {{date}}'
+    },
+    summary: {
+        sessions_one: '{{sessions}} sessie',
+        sessions_other: '{{sessions}} sessies',
+        calls_one: '{{calls}} aanroep',
+        calls_other: '{{calls}} aanroepen',
+        apiRates: 'tegen API-tarieven'
+    },
+    tiles: {
+        processed: 'Verwerkt',
+        uncachedInput: 'Input zonder cache',
+        cachedInput: 'Input uit cache',
+        cacheWrites: 'Naar cache geschreven',
+        output: 'Output',
+        cacheSavings: 'Bespaard met cache'
+    },
+    chart: {
+        total: 'Totaal'
+    },
+    breakdown: {
+        title: 'Uitsplitsing',
+        tabs: {
+            models: 'Modellen',
+            projects: 'Projecten',
+            day: 'Dag'
+        },
+        models: {
+            model: 'Model',
+            calls: 'Aanroepen',
+            input: 'Input',
+            output: 'Output',
+            cache: 'Cache R/W',
+            cost: 'Kosten',
+            share: 'Aandeel',
+            pricedAs: 'Geprijsd als {{model}}',
+            noPrice: 'Geen prijs bekend voor dit model'
+        },
+        days: {
+            day: 'Dag',
+            total: 'Totaal',
+            tokens: 'Tokens',
+            empty: 'Geen activiteit in deze periode.'
+        }
+    }
+};

package/src/locales.ts

@@ -14,20 +14,21 @@ async function open(files: Files): Promise<Record<AgentsNamespace, Bundle>> {
     >;
 }
 
+/* The words are modules, not JSON: Node needs `with { type: 'json' }` on a JSON import, and a browser refuses it on the JavaScript Vite serves. */
 /* One loader per language that answers every namespace of it, so a bundler splits them and a window only downloads the language it shows. */
 export const AGENTS_LOCALES: Record<string, () => Promise<Record<AgentsNamespace, Bundle>>> = {
     en: () =>
         open({
-            'agent-chat': () => import('./locales/en/agent-chat.json', { with: { type: 'json' } }),
-            'agent-prompts': () => import('./locales/en/agent-prompts.json', { with: { type: 'json' } }),
-            'agent-providers': () => import('./locales/en/agent-providers.json', { with: { type: 'json' } }),
-            'agent-usage': () => import('./locales/en/agent-usage.json', { with: { type: 'json' } })
+            'agent-chat': () => import('./locales/en/agent-chat'),
+            'agent-prompts': () => import('./locales/en/agent-prompts'),
+            'agent-providers': () => import('./locales/en/agent-providers'),
+            'agent-usage': () => import('./locales/en/agent-usage')
         }),
     nl: () =>
         open({
-            'agent-chat': () => import('./locales/nl/agent-chat.json', { with: { type: 'json' } }),
-            'agent-prompts': () => import('./locales/nl/agent-prompts.json', { with: { type: 'json' } }),
-            'agent-providers': () => import('./locales/nl/agent-providers.json', { with: { type: 'json' } }),
-            'agent-usage': () => import('./locales/nl/agent-usage.json', { with: { type: 'json' } })
+            'agent-chat': () => import('./locales/nl/agent-chat'),
+            'agent-prompts': () => import('./locales/nl/agent-prompts'),
+            'agent-providers': () => import('./locales/nl/agent-providers'),
+            'agent-usage': () => import('./locales/nl/agent-usage')
         })
 };

package/src/prompts/index.ts

@@ -0,0 +1,35 @@
+// Public API: exports.test.ts snapshots this list, so a name added or dropped here is an API change.
+export { focusPromptStart, focusPromptHeading } from './logic/focus';
+export { PROMPT_SHORTCUTS, pageKey, type PromptKeyEvent } from './logic/keys';
+export {
+    type PendingPrompt,
+    type PromptAction,
+    emptyPromptDraft,
+    answerValue,
+    questionAnswer,
+    pickPromptChoice,
+    isBlockingPrompt,
+    orderPrompts,
+    nextPrompt,
+    promptAnswers,
+    type PromptAnswer,
+    type PromptDraft
+} from './logic/prompts';
+export {
+    type HostPrompt,
+    type PromptSubject,
+    type ChatPromptClients,
+    type PromptViewProps,
+    type ApprovalButtonSpec,
+    promptIdOf,
+    promptCreatedAt,
+    isBlockingSubject,
+    answerPrompt
+} from './logic/subjects';
+export { useFocusAfterAnswer, type FocusAfterAnswer } from './logic/useFocusAfterAnswer';
+export { usePromptSession, type PromptSession } from './logic/usePromptSession';
+export { CommandBox, ApprovalBody } from './ui/ApprovalBody';
+export { PromptPrimary, ApprovalActions, QuestionActions, type ApprovalButton } from './ui/PromptActions';
+export { PROMPT_SURFACE, PromptCard, type PromptCardKind } from './ui/PromptCard';
+export { PromptView } from './ui/PromptView';
+export { QuestionBody } from './ui/QuestionBody';

package/src/prompts/logic/subjects.ts

@@ -1,6 +1,6 @@
 import i18next from 'i18next';
 import type { ReactNode } from 'react';
-import { chatHost } from '../../host';
+import type { ChatHost } from '../../host';
 import { isBlockingPrompt, type PendingPrompt, type PromptAction, type PromptDraft } from './prompts';
 
 /*
@@ -100,10 +100,18 @@ export function approvalButtons(subject: PromptSubject, reason: string): Approva
     ];
 }
 
-/* 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: PromptSubject, action: PromptAction, chat: ChatPromptClients | null): Promise<void> {
+/*
+ * 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: PromptSubject,
+    action: PromptAction,
+    chat: ChatPromptClients | null,
+    host: Pick<ChatHost, 'prompts'>
+): Promise<void> {
     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/src/prompts/ui/ApprovalBody.tsx

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import type { ChatApprovalItem } from '@adecore/agent-contracts';
 import { approvalChanges, fileChanges } from '../../chat/logic/tools';
-import { chatHost } from '../../host';
+import { useChatHost } from '../../host';
 import { ApprovalReview } from '../../chat/ui/diff/ApprovalReview';
 import { reviewEntries } from '../../chat/ui/diff/review-plan';
 import { isPrimaryKey } from '../logic/keys';
@@ -21,12 +21,13 @@ export function CommandBox({ command, cwd }: { command: string; cwd?: string })
 }
 
 function ApprovalDetails({ item }: { item: ChatApprovalItem }) {
+    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 as Record<string, unknown>) : {};
     return (
@@ -76,8 +77,9 @@ export function ApprovalBody({
     denyReason: boolean;
     locked: boolean;
 }) {
+    const host = useChatHost();
     const { t } = useTranslation('agent-prompts');
-    const AnswerField = chatHost().dictation.Textarea;
+    const AnswerField = host.dictation.Textarea;
     return (
         <>
             <ApprovalDetails item={item} />
@@ -92,7 +94,7 @@ export function ApprovalBody({
                     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/src/prompts/ui/PromptCard.tsx

@@ -1,7 +1,7 @@
 import type { KeyboardEvent, ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Hand, MessageCircleQuestionMark, type LucideIcon } from 'lucide-react';
-import { chatHost } from '../../host';
+import { useChatHost } from '../../host';
 import { headingKey, isPrimaryKey, staysInCard, stepIndex, toolbarKey } from '../logic/keys';
 import { Icon } from '@adecore/ui';
 
@@ -32,11 +32,11 @@ interface PromptCardProps {
  * 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: KeyboardEvent<HTMLDivElement>) {
+function onCardKeyDown(event: KeyboardEvent<HTMLDivElement>, apple: boolean) {
     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<HTMLButtonElement>('[data-prompt-primary]:not(:disabled)')?.click();
@@ -62,8 +62,15 @@ function onCardKeyDown(event: KeyboardEvent<HTMLDivElement>) {
 /* 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 }: PromptCardProps) {
     const { t } = useTranslation('agent-prompts');
+    const { isApplePlatform } = useChatHost();
     const card = (
-        <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}>
+        <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())}
+        >
             {/* The scroll box would clip the focus ring of whatever sits against its edge, so it carries the
                 room that ring needs and gives the same amount back to the card's own padding. */}
             <div className="-m-1.5 max-h-[min(50dvh,480px)] overflow-auto overscroll-contain p-1.5">

package/src/prompts/ui/PromptView.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next';
 import { toolSummary } from '../../chat/logic/tools';
-import { chatHost } from '../../host';
+import { useChatHost } from '../../host';
 import { answerValue, promptAnswers, questionAnswer, type PromptDraft } from '../logic/prompts';
 import { approvalButtons, type PromptViewProps } from '../logic/subjects';
 import { ApprovalBody } from './ApprovalBody';
@@ -12,12 +12,13 @@ import { QuestionBody } from './QuestionBody';
 export function PromptView(props: PromptViewProps) {
     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;

package/src/prompts/ui/QuestionBody.tsx

@@ -6,7 +6,7 @@ import type { ChatQuestion } from '@adecore/agent-contracts';
 import { answerFieldKey, choiceKey, stepIndex } from '../logic/keys';
 import { pickPromptChoice, type PromptAnswer } from '../logic/prompts';
 import { Icon } from '@adecore/ui';
-import { chatHost } from '../../host';
+import { useChatHost } from '../../host';
 
 /* One question of a request: its choices, "Something else…", or a written answer when it offers no choices. */
 export function QuestionBody({
@@ -23,8 +23,9 @@ export function QuestionBody({
     onCommit(answer: PromptAnswer): void;
     locked: boolean;
 }) {
+    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<(HTMLElement | null)[]>([]);
     const shownQuestion = useRef(question.id);

package/src/providers/AccountColors.tsx

@@ -1,8 +1,8 @@
 import { AccentSwatches } from '@adecore/ui';
-import { chatHost } from '../host';
+import { useChatHost } from '../host';
 
 /* The colors an account may wear, the host's palette. */
 export function AccountColors({ value, label, onChange }: { value: string | undefined; label: string; onChange(id: string): void }) {
-    const { all, featured, label: labelOf } = chatHost().accents;
+    const { all, featured, label: labelOf } = useChatHost().accents;
     return <AccentSwatches value={value} label={label} accents={all} featured={featured} labelOf={labelOf} onValueChange={onChange} />;
 }

package/src/providers/AccountDetail.tsx

@@ -6,7 +6,7 @@ import { AccountDot } from '../agents/AccountDot';
 import { accountName, FOLDER_VARIABLES, type AccountEntry } from '../agents/accounts';
 import { ConfirmDialog, DetailHeader, SettingsRow, SettingsSection } from '@adecore/ui/settings';
 import { Button, copyText, Icon, Input, Switch, Tooltip } from '@adecore/ui';
-import { chatHost } from '../host';
+import { useChatHost } from '../host';
 import { useChatScope } from '../scope';
 import { removeAccount, saveAccount } from './account-actions';
 import { AccountVariables } from './AccountVariables';
@@ -59,6 +59,7 @@ function NameField({ value, label, onSave }: { value: string; label: string; onS
 export function AccountDetail({ provider, entry, canLogIn, loginBlocked, secretsAvailable, onRemoved }: AccountDetailProps) {
     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);
@@ -68,7 +69,7 @@ export function AccountDetail({ provider, entry, canLogIn, loginBlocked, secrets
 
     const showFolder = (): void => {
         copyText(folder);
-        chatHost().notify({ kind: 'success', title: t('account.folderCopied'), description: folder });
+        host.notify({ kind: 'success', title: t('account.folderCopied'), description: folder });
     };
 
     const loginDetail = (): string => {
@@ -82,7 +83,7 @@ export function AccountDetail({ provider, entry, canLogIn, loginBlocked, secrets
     };
 
     const loginButton = (
-        <Button variant="secondary" disabled={loginBlocked !== null} onClick={() => void chatHost().openLogin?.(scope.id, provider.kind, id, name)}>
+        <Button variant="secondary" disabled={loginBlocked !== null} onClick={() => void host.openLogin?.(scope.id, provider.kind, id, name)}>
             <Icon icon={LogIn} size={14} />
             {signedIn ? t('account.login.logInAgain') : t('account.login.logIn')}
         </Button>
@@ -121,7 +122,7 @@ export function AccountDetail({ provider, entry, canLogIn, loginBlocked, secrets
                             label={t('account.enabled.label')}
                             onCheckedChange={(checked) => {
                                 const { enabled: _enabled, ...rest } = account;
-                                void saveAccount(scope, id, checked ? rest : { ...rest, enabled: false });
+                                void saveAccount(scope, host, id, checked ? rest : { ...rest, enabled: false });
                             }}
                         />
                     }
@@ -129,7 +130,12 @@ export function AccountDetail({ provider, entry, canLogIn, loginBlocked, secrets
                 <SettingsRow
                     label={t('account.name')}
                     control={
-                        <NameField key={name} value={name} label={t('account.name')} onSave={(label) => void saveAccount(scope, id, { ...account, label })} />
+                        <NameField
+                            key={name}
+                            value={name}
+                            label={t('account.name')}
+                            onSave={(label) => void saveAccount(scope, host, id, { ...account, label })}
+                        />
                     }
                 />
                 <SettingsRow
@@ -138,7 +144,7 @@ export function AccountDetail({ provider, entry, canLogIn, loginBlocked, secrets
                         <AccountColors
                             value={account.color}
                             label={t('account.color')}
-                            onChange={(color) => void saveAccount(scope, id, { ...account, color })}
+                            onChange={(color) => void saveAccount(scope, host, id, { ...account, color })}
                         />
                     }
                 />
@@ -200,7 +206,7 @@ export function AccountDetail({ provider, entry, canLogIn, loginBlocked, secrets
                 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/src/providers/AccountVariables.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Lock, LockOpen, Plus, X } from 'lucide-react';
 import type { ProviderAccount } from '@adecore/agent-contracts';
+import { useChatHost } from '../host';
 import { useChatScope } from '../scope';
 import { saveAccount } from './account-actions';
 import { draftsOf, emptyDraft, variablesChanged, variablesOf, variablesProblem, type VariableDraft } from './variables';
@@ -22,6 +23,7 @@ interface AccountVariablesProps {
 export function AccountVariables({ id, account, secretsAvailable }: AccountVariablesProps) {
     const { t } = useTranslation('agent-providers');
     const scope = useChatScope();
+    const host = useChatHost();
     const [drafts, setDrafts] = useState<VariableDraft[]>(() => draftsOf(account.env));
     const [saving, setSaving] = useState(false);
     const changed = variablesChanged(drafts, account.env);
@@ -36,7 +38,7 @@ export function AccountVariables({ id, account, secretsAvailable }: AccountVaria
         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);
         }