@adecore/agents-react 0.31.12 → 0.33.0

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

@@ -1,7 +1,7 @@
 export default {
     status: {
         checking: 'Controleren',
-        disabled: 'Uitgezet',
+        disabled: 'Uit',
         notFound: 'CLI niet gevonden',
         signedOut: 'Niet ingelogd',
         ready: 'Ingelogd',
@@ -11,23 +11,24 @@ export default {
         unavailable: 'Niet beschikbaar',
         failed: 'Controle mislukt'
     },
-    failed: 'De instellingen van de providers konden niet worden getekend',
+    failed: 'Kon de providerinstellingen niet tonen',
     list: {
-        label: "Agent-CLI's en hun accounts",
+        label: 'Agents en hun accounts',
         default: 'Standaard',
         ready: 'Klaar',
         needsSetup: 'Nog instellen',
-        signedOut: 'Uitgelogd',
-        addAccount: 'Een {{provider}}-account toevoegen',
+        signedOut: 'Niet ingelogd',
+        addAccount: '{{provider}}-account toevoegen',
+        addProvider: 'Provider toevoegen',
         notInstalled: 'Niet geïnstalleerd',
         missing: 'Ontbreekt',
-        notInstalledNote: 'Installeer er een op deze machine om hem hier te gebruiken.',
-        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.'
+        notInstalledNote: 'Installeer om hem hier te gebruiken.',
+        none: 'Geen agents gevonden op deze machine.',
+        noAccounts: 'Werk Ruimte op deze machine bij om accounts toe te voegen.'
     },
     install: {
         notInstalled: 'Niet geïnstalleerd',
-        steps: '{{provider}} instellen in stappen',
+        steps: '{{provider}} instellen',
         platform: 'Systeem',
         platforms: {
             darwin: 'macOS',
@@ -40,38 +41,38 @@ export default {
         guide: 'Installatiegids',
         install: {
             title: 'Installeer de CLI',
-            none: 'Er is geen installatiecommando voor dit systeem.',
+            none: 'Geen installatiecommando voor dit systeem.',
             done: 'Geïnstalleerd, versie {{version}}.',
             doneNoVersion: 'Geïnstalleerd.'
         },
         signIn: {
             title: 'Log in',
-            command: 'Voer dit uit in een terminal en volg de stappen:',
+            command: 'Voer dit uit in een terminal:',
             env: 'Zet <code>{{variable}}</code> in de omgeving waarin de CLI start.',
             chat: 'De eerste chat vraagt je om in te loggen.',
             or: 'Of',
-            unknown: 'De CLI vraagt je om in te loggen als hij voor het eerst draait.'
+            unknown: 'Vraagt bij de eerste start om in te loggen.'
         },
         start: {
             title: 'Aan de slag',
             description: 'Kies {{provider}} voor je volgende chat of terminal.'
         },
         footer: {
-            missing: 'Nog niet gevonden op deze machine. Er wordt opnieuw gekeken als je terugkomt in dit venster.',
+            missing: 'Nog niet gevonden. Ruimte kijkt opnieuw als je terugkomt in dit venster.',
             found: 'Gevonden op deze machine.'
         },
-        fallback: 'Installeer {{provider}} op deze machine om hem hier te gebruiken.'
+        fallback: 'Installeer {{provider}} om hem hier te gebruiken.'
     },
     abilities: {
         version: 'Versie {{version}}.',
         chatAndTerminal: 'Chat en terminal.',
         terminalOnly: 'Alleen terminal.',
-        reportsStatus: 'Meldt de agentstatus.',
-        noStatus: 'Meldt geen agentstatus.'
+        reportsStatus: 'Laat zien wanneer hij je nodig heeft.',
+        noStatus: 'Laat niet zien wanneer hij je nodig heeft.'
     },
     cli: {
         addAccount: 'Account toevoegen',
-        onlyDefault: '{{provider}} heeft geen instelling voor zijn configuratiemap, dus alleen zijn standaardaccount.',
+        onlyDefault: '{{provider}} kent alleen zijn standaardaccount.',
         defaults: {
             title: 'Standaarden voor nieuwe chats',
             description: 'Een model of account kiezen in een chat verandert hier ook de standaard.',
@@ -90,7 +91,7 @@ export default {
         kind: '{{provider}}-account',
         enabled: {
             label: 'Dit account gebruiken',
-            description: 'Uitgezet wordt het niet aangeboden voor nieuwe chats en agents.'
+            description: 'Staat het uit, dan zien nieuwe chats en agents het niet.'
         },
         showFolder: 'Map tonen',
         folderCopied: 'Pad van de map gekopieerd',
@@ -100,14 +101,14 @@ export default {
             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.',
+            planDetail: '{{plan}}-abonnement. Opnieuw inloggen opent een terminal.',
+            detail: 'Opnieuw inloggen opent een terminal.',
             signedOut: 'Niet ingelogd',
-            signedOutDetail: 'Opent een terminal die de login van de CLI met deze map draait.',
+            signedOutDetail: 'Opent een terminal waarin je inlogt op dit account.',
             logIn: 'Inloggen',
             logInAgain: 'Opnieuw inloggen',
             inChat: 'Logt in vanuit een chat',
-            inChatDetail: 'De eerste chat op dit account vraagt je in te loggen, en de CLI bewaart die login in deze map.'
+            inChatDetail: 'De eerste chat op dit account vraagt je in te loggen.'
         },
         folder: {
             label: 'Map',
@@ -116,14 +117,14 @@ export default {
         },
         variables: {
             title: 'Variabelen',
-            description: 'Extra omgeving voor alleen dit account. Gevoelige waarden blijven in de sleutelhanger.',
+            description: 'Extra omgeving voor dit account. Geheimen 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.',
+            noKeychain: 'Geen sleutelhanger op deze machine, dus waarden blijven leesbaar.',
             remove: '{{name}} verwijderen',
             none: 'Geen variabelen',
             discard: 'Weggooien',
@@ -137,25 +138,25 @@ export default {
         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.',
+            defaultNote: 'Het standaardaccount kan niet weg. Zet het 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.',
+            confirmDescription: 'De map en de login blijven in {{folder}}.',
             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.',
-        chatDescription: 'Er komt een map voor op de machine. De eerste chat erop vraagt je in te loggen.',
+        title: '{{provider}}-account toevoegen',
+        description: 'Maakt een map en opent een terminal om in te loggen.',
+        chatDescription: 'Maakt een map. De eerste chat vraagt je in te loggen.',
         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.',
+            description: 'Gebruik een bestaande configuratiemap. Ruimte verplaatst of verwijdert hem nooit.',
             placeholder: 'Pad op de machine'
         },
         create: 'Account toevoegen',
@@ -164,9 +165,9 @@ export default {
     },
     section: {
         label: 'Providers',
-        description: "De agent-CLI's op deze machine en de accounts waarmee ze inloggen."
+        description: 'Agents op deze machine en hun accounts.'
     },
-    notAnswering: 'Geeft geen antwoord. Pas dit aan zodra de machine terug is.',
+    notAnswering: 'De machine geeft geen antwoord. Probeer het opnieuw zodra hij terug is.',
     common: {
         save: 'Opslaan',
         cancel: 'Annuleren'

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

@@ -1,22 +1,27 @@
 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.',
+        explain: 'De markering toont waar het verbruik bij een gelijk tempo zou staan. Voorbij de markering verbruik je sneller dan het weer vrijkomt.',
         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.',
+        faster: 'Sneller verbruikt dan het weer vrijkomt.',
+        slower: 'Langzamer verbruikt dan het weer vrijkomt.',
+        pace: {
+            ahead: '{{percent}}% gebruikt, voor op een gelijkmatig tempo van {{pace}}%',
+            behind: '{{percent}}% gebruikt, achter op een gelijkmatig tempo van {{pace}}%',
+            even: '{{percent}}% gebruikt, op een gelijkmatig tempo'
+        },
+        even: 'Even snel verbruikt als het vrijkomt.',
         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',
+        noSubscription: 'API-sleutel, geen abonnementslimieten.',
+        unreachable: 'Kon de limieten niet ophalen.',
+        filter: 'Getoonde accounts',
         signedOut: 'Niet ingelogd',
-        signedOutDetail: 'Niet ingelogd. Log in om de limieten te zien.',
+        signedOutDetail: 'Niet ingelogd. Log in om limieten te zien.',
         logIn: 'Inloggen',
         nextReset: '{{window}} reset {{at}}',
         checked: {
@@ -29,8 +34,8 @@ export default {
         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}}.',
+            noRate: 'Nog geen wisselkoers. Bedragen in dollars.',
+            converted: 'Omgerekend met de ECB-koers van {{date}}.',
             options: {
                 USD: 'Dollars',
                 EUR: "Euro's"
@@ -44,7 +49,7 @@ export default {
     },
     section: {
         label: 'Verbruik',
-        description: 'De valuta van de verbruikspagina.'
+        description: 'Valuta van de verbruikspagina.'
     },
     dialog: {
         title: 'Verbruik',
@@ -53,7 +58,7 @@ export default {
         rescan: 'Opnieuw scannen',
         period: 'Periode',
         metric: 'Eenheid',
-        failed: 'Verbruik kon niet worden getekend',
+        failed: 'Kon het verbruik niet tonen',
         periods: {
             today: 'Vandaag',
             '7d': '7 dagen',
@@ -70,20 +75,20 @@ export default {
         }
     },
     empty: {
-        noTranscripts: 'Geen transcripts van Claude of Codex gevonden. De machine leest ~/.claude/projects en ~/.codex/sessions.',
-        noUsage: 'Nog geen verbruik op deze machine.'
+        noTranscripts: 'Nog geen chats van Claude of Codex gevonden op deze machine.',
+        noUsage: 'Nog geen verbruik.'
     },
     agents: {
-        none: 'Op deze machine staat geen agent-CLI.',
-        installed: 'Deze machine heeft {{list}}.',
+        none: 'Geen agent-CLI geïnstalleerd.',
+        installed: 'Geïnstalleerd: {{list}}.',
         settings: 'Agent-instellingen'
     },
     provenance: {
-        failed: 'Kon de transcripts niet lezen. Dit is de laatste scan die wel lukte.',
+        failed: 'Kon het laatste verbruik niet lezen. Dit zijn de vorige resultaten.',
         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}}',
+        bundledPrices: 'Ingebouwde prijzen',
+        fetchedPrices: 'Prijzen van {{date}}',
         rate: '{{currency}} tegen de ECB-koers van {{date}}'
     },
     summary: {
@@ -120,7 +125,7 @@ export default {
             cost: 'Kosten',
             share: 'Aandeel',
             pricedAs: 'Geprijsd als {{model}}',
-            noPrice: 'Geen prijs bekend voor dit model'
+            noPrice: 'Geen prijs bekend'
         },
         days: {
             day: 'Dag',

package/src/providers/CliDetail.tsx

@@ -4,6 +4,7 @@ import type { AgentKind, ModelInfo, ProviderInfo } from '@adecore/agent-contract
 import { AccountDot } from '../agents/AccountDot';
 import { ModelOptionControl } from '../agents/ModelOptionControl';
 import { carryOptions } from '../agents/model-options';
+import { optionWord } from '../agents/option-words';
 import { ACCOUNT_TONE_CLASSES, accountName, accountStatusLine, type AccountEntry, type AccountLogin } from '../agents/accounts';
 import { accountFor, forgetChatSelection, rememberChatAccount, rememberChatSelection, selectionFor, useChatPreferences } from '../chat/preferences';
 import { useChatScope } from '../scope';
@@ -27,7 +28,7 @@ function ModelOptionRows({ provider, model, options }: { provider: AgentKind; mo
                     key={option.id}
                     indent
                     muted
-                    label={option.label}
+                    label={optionWord(option)}
                     control={<ModelOptionControl option={option} options={options} layout="row" onChange={(value) => setOption(option.id, value)} />}
                 />
             ))}

package/src/providers/InstallPage.tsx

@@ -5,12 +5,11 @@ import { Check, Copy, ExternalLink, SquareTerminal } from 'lucide-react';
 import type { ProviderInfo, ProviderPlatform, ProviderSignIn } from '@adecore/agent-contracts';
 import { Button, copyText, Icon, Pill, Segmented } from '@adecore/ui';
 import { useChatHost } from '../host';
+import { useHostMachinePlatform } from '../host-hooks';
 import { useChatScope } from '../scope';
 import { installPlatforms, installStepStates, pagePlatform, type InstallStepState, type ProviderInstallStep } from './install-steps';
 import { CliMark } from './parts';
 
-const noPlatform = (): ProviderPlatform | null => null;
-
 function CommandBlock({ command }: { command: string }) {
     const { t } = useTranslation('agent-providers');
     const [copied, setCopied] = useState<string | null>(null);
@@ -104,8 +103,7 @@ export function InstallPage({ provider, signedIn, extra }: InstallPageProps) {
     const { t } = useTranslation('agent-providers');
     const { id: scopeId } = useChatScope();
     const host = useChatHost();
-    const useMachinePlatform = host.useMachinePlatform ?? noPlatform;
-    const machine = useMachinePlatform(scopeId) ?? pagePlatform();
+    const machine = useHostMachinePlatform(scopeId) ?? pagePlatform();
     const { offered, initial } = installPlatforms(provider, machine);
     // Only a person's pick is kept, so a machine whose system arrives late still opens on its own.
     const [chosen, setPlatform] = useState<ProviderPlatform | null>(null);

package/src/providers/ProviderList.tsx

@@ -5,7 +5,7 @@ import { Plus } from 'lucide-react';
 import type { AgentKind } from '@adecore/agent-contracts';
 import { AccountDot } from '../agents/AccountDot';
 import { accountName } from '../agents/accounts';
-import { IconButton, SectionLabel } from '@adecore/ui';
+import { Icon, IconButton, SectionLabel } from '@adecore/ui';
 import type { Picked } from './pane-target';
 import { CliMark } from './parts';
 import { accountNote, type ProviderGroups, type ProviderRow, type ProviderSetupStatus } from './provider-groups';
@@ -55,11 +55,13 @@ interface ProviderListProps {
     groups: ProviderGroups;
     current: Picked | null;
     canAddAccount(kind: AgentKind): boolean;
+    /* Whether the list ends in a row that opens the host's page to add a provider. */
+    canAddProvider?: boolean;
     onPick(picked: Picked): void;
 }
 
 /* The providers by whether they are ready, need setup or are not installed; a group without providers is left out. */
-export function ProviderList({ groups, current, canAddAccount, onPick }: ProviderListProps) {
+export function ProviderList({ groups, current, canAddAccount, canAddProvider = false, onPick }: ProviderListProps) {
     const { t } = useTranslation('agent-providers');
     const picksCli = (kind: AgentKind): boolean => (current?.kind === 'cli' || current?.kind === 'install') && current.cli === kind;
     const picksAccount = (id: string): boolean => current?.kind === 'account' && current.id === id;
@@ -139,6 +141,14 @@ export function ProviderList({ groups, current, canAddAccount, onPick }: Provide
                         )}
                     </>
                 )}
+            {canAddProvider && (
+                <ListRow selected={current?.kind === 'catalog'} onSelect={() => onPick({ kind: 'catalog' })} className="py-2">
+                    <span className="grid w-3.5 shrink-0 place-items-center text-text-muted">
+                        <Icon icon={Plus} size={14} />
+                    </span>
+                    <span className="min-w-0 grow truncate text-sm text-text-muted">{t('list.addProvider')}</span>
+                </ListRow>
+            )}
         </>
     );
 }

package/src/providers/ProvidersPane.tsx

@@ -11,11 +11,12 @@ import { AddAccountForm } from './AddAccountForm';
 import { CliDetail } from './CliDetail';
 import { InstallPage } from './InstallPage';
 import type { ProviderInstallStep } from './install-steps';
-import { pickOfTarget, type Picked } from './pane-target';
+import { pickOfCli, pickOfTarget, type Picked } from './pane-target';
 import { groupProviders, type ProviderSetupStatus } from './provider-groups';
 import { ProviderList } from './ProviderList';
 import { useProviderAccounts } from '../state/provider-accounts';
 import { useProviders } from '../state/providers';
+import { useHostLoginBlocked } from '../host-hooks';
 
 interface ProvidersPaneProps {
     /* The row a search result leads to, by its `searchId`; the pane opens on the CLI it belongs to. `providers.install.<kind>` opens on that CLI's install page, or on its detail once it is installed. */
@@ -28,10 +29,14 @@ interface ProvidersPaneProps {
     installStepOf?(provider: ProviderInfo): ProviderInstallStep | null;
     /* Why a provider is not usable yet when the app knows better than its accounts, such as one turned off in its own detail; null leaves it to the accounts. */
     setupStatusOf?(provider: ProviderInfo): ProviderSetupStatus | null;
+    /* Sections of the app's own under a CLI's usual detail, such as its version and an update; null adds none. */
+    sectionsOf?(provider: ProviderInfo): ReactNode | null;
+    /* A page of the app's own to add a provider from, such as a catalog to install one; the list then ends in a row that opens it. `added` picks the provider it added. */
+    addPage?(added: (kind: AgentKind) => void): ReactNode;
 }
 
 /* The agent CLIs of the host in scope, each with its accounts, beside the detail of what is picked. */
-export function ProvidersPane({ target = null, detailOf, defaults = true, installStepOf, setupStatusOf }: ProvidersPaneProps) {
+export function ProvidersPane({ target = null, detailOf, defaults = true, installStepOf, setupStatusOf, sectionsOf, addPage }: ProvidersPaneProps) {
     const { t } = useTranslation('agent-providers');
     const { id: scopeId } = useChatScope();
     const providers = useProviders((s) => s.providers);
@@ -39,7 +44,7 @@ export function ProvidersPane({ target = null, detailOf, defaults = true, instal
     const accounts = useProviderAccounts((s) => s.accounts);
     const host = useChatHost();
     const { openLogin } = host;
-    const loginBlocked = host.useLoginBlocked(scopeId);
+    const loginBlocked = useHostLoginBlocked(scopeId);
     const [picked, setPicked] = useState<Picked | null>(() => pickOfTarget(target, providers));
 
     const groups = groupProviders(providers, accounts, setupStatusOf);
@@ -49,10 +54,23 @@ export function ProvidersPane({ target = null, detailOf, defaults = true, instal
 
     // What was picked may be gone since (an account removed elsewhere); the first CLI stands in for it.
     const pickedEntry = picked?.kind === 'account' ? (Object.hasOwn(accounts?.accounts ?? {}, picked.id) ? picked.id : null) : null;
-    const current: Picked | null =
-        picked !== null && (picked.kind !== 'account' || pickedEntry !== null) ? picked : installed[0] ? { kind: 'cli', cli: installed[0].kind } : null;
+    // A CLI taken off the host since it was picked makes way too, so the detail never stays empty.
+    const keeps = (entry: Picked): boolean => {
+        switch (entry.kind) {
+            case 'account':
+                return pickedEntry !== null;
+            case 'catalog':
+                return addPage !== undefined;
+            case 'cli':
+                return !loaded || installed.some((provider) => provider.kind === entry.cli);
+            default:
+                return true;
+        }
+    };
+    const current: Picked | null = picked !== null && keeps(picked) ? picked : installed[0] ? { kind: 'cli', cli: installed[0].kind } : null;
     const currentAccount = current?.kind === 'account' ? accounts?.accounts[current.id] : undefined;
-    const currentCli = current === null ? null : current.kind === 'account' ? (currentAccount?.kind as AgentKind | undefined) : current.cli;
+    const currentCli =
+        current === null || current.kind === 'catalog' ? null : current.kind === 'account' ? (currentAccount?.kind as AgentKind | undefined) : current.cli;
     const provider = (current?.kind === 'install' ? providers : installed).find((entry) => entry.kind === currentCli) ?? null;
 
     // A search result lands on a row of a CLI's detail, so a picked account makes way for its CLI.
@@ -80,10 +98,19 @@ export function ProvidersPane({ target = null, detailOf, defaults = true, instal
             <Skeleton className="w-40" />
         </div>
     ) : (
-        <ProviderList groups={groups} current={current} canAddAccount={(kind) => loginOf(kind) !== null} onPick={setPicked} />
+        <ProviderList
+            groups={groups}
+            current={current}
+            canAddAccount={(kind) => loginOf(kind) !== null}
+            canAddProvider={addPage !== undefined}
+            onPick={setPicked}
+        />
     );
 
     const detail = (): ReactNode => {
+        if (current?.kind === 'catalog') {
+            return addPage?.((kind) => setPicked(pickOfCli(kind, providers))) ?? null;
+        }
         if (current === null || provider === null) {
             return null;
         }
@@ -130,14 +157,17 @@ export function ProvidersPane({ target = null, detailOf, defaults = true, instal
             );
         }
         return (
-            <CliDetail
-                provider={provider}
-                entries={accounts === null ? null : entriesOf(provider.kind)}
-                defaults={defaults}
-                login={loginOf(provider.kind)}
-                onAddAccount={() => setPicked({ kind: 'add', cli: provider.kind })}
-                onPickAccount={(id) => setPicked({ kind: 'account', id })}
-            />
+            <>
+                <CliDetail
+                    provider={provider}
+                    entries={accounts === null ? null : entriesOf(provider.kind)}
+                    defaults={defaults}
+                    login={loginOf(provider.kind)}
+                    onAddAccount={() => setPicked({ kind: 'add', cli: provider.kind })}
+                    onPickAccount={(id) => setPicked({ kind: 'account', id })}
+                />
+                {sectionsOf?.(provider) ?? null}
+            </>
         );
     };
 

package/src/providers/pane-target.ts

@@ -1,21 +1,37 @@
 import type { AgentKind, ProviderInfo } from '@adecore/agent-contracts';
 
-// `install` is a CLI picked while it was missing: its install page stays until it is installed and signed in.
-export type Picked = { kind: 'cli'; cli: AgentKind } | { kind: 'install'; cli: AgentKind } | { kind: 'account'; id: string } | { kind: 'add'; cli: AgentKind };
+// `install` is a CLI picked while it was missing: its install page stays until it is installed and signed in. `catalog` is the host's page to add a provider from.
+export type Picked =
+    | { kind: 'cli'; cli: AgentKind }
+    | { kind: 'install'; cli: AgentKind }
+    | { kind: 'account'; id: string }
+    | { kind: 'add'; cli: AgentKind }
+    | { kind: 'catalog' };
 
 const INSTALL_TARGET = 'providers.install.';
+const ADD_TARGET = 'providers.add';
 
 /* What a target opens on its own, before any CLI is picked; null for a target that only lands on a row of the CLI already shown. */
 export function pickOfTarget(target: string | null, providers: ProviderInfo[]): Picked | null {
     if (target === 'providers.apple') {
         return { kind: 'cli', cli: 'apple' };
     }
+    if (target === ADD_TARGET) {
+        return { kind: 'catalog' };
+    }
     if (!target?.startsWith(INSTALL_TARGET) || target.length === INSTALL_TARGET.length) {
         return null;
     }
-    const cli = target.slice(INSTALL_TARGET.length) as AgentKind;
+    return pickOfCli(target.slice(INSTALL_TARGET.length) as AgentKind, providers);
+}
+
+/*
+ * A CLI opened by name, from a target or from the host's page that just added it: its detail once it is there, its
+ * install page while it is missing. A CLI the host has not reported yet is taken as missing, so the pick holds until
+ * the next list names it; once it is installed and signed in, its install page gives way to its detail.
+ */
+export function pickOfCli(cli: AgentKind, providers: ProviderInfo[]): Picked {
     const provider = providers.find((entry) => entry.kind === cli);
-    // A CLI the host has not reported yet is taken as missing; once it is installed and signed in, its install page gives way to its detail.
     if (provider !== undefined && (provider.installed || !provider.capabilities.terminal)) {
         return { kind: 'cli', cli };
     }

package/src/state/chats.ts

@@ -1,4 +1,4 @@
-import { useContext, useMemo } from 'react';
+import { useContext } from 'react';
 import { create } from 'zustand';
 import type {
     AgentKind,
@@ -344,7 +344,7 @@ export function useReportedModels(provider: AgentKind): ReadonlySet<string> {
         }
         return [...names].sort().join('\n');
     });
-    return useMemo(() => new Set(joined === '' ? [] : joined.split('\n')), [joined]);
+    return new Set(joined === '' ? [] : joined.split('\n'));
 }
 
 /* Whether a call still waits on the person's answer to an approval of it, when its clock is not running yet. */

package/src/usage/LimitsList.tsx

@@ -8,7 +8,7 @@ import { Tooltip } from '@adecore/ui';
 import { formatClock, formatWeekdayClock, isSameDay, formatCountdown, formatPercent } from '@adecore/ui/format';
 import { ProviderLogo } from '../agents/ProviderLogo';
 import { PROVIDER_COLORS, PROVIDER_LABELS } from './format';
-import { accountNote, explain, isSignedOut, nextReset, type LimitAccount, type LimitGroup } from './limit-groups';
+import { accountNote, evenPace, explain, isSignedOut, nextReset, paceText, type LimitAccount, type LimitGroup, type PaceStanding } from './limit-groups';
 
 /* Red where a window is nearly spent, amber where it is worth knowing; room to spare is not news and takes the text color. */
 function toneOf(used: number): string {
@@ -25,20 +25,18 @@ function resetInLabel(resetsAt: number, now: number): string | null {
     return resetsAt <= now ? null : formatCountdown(resetsAt - now);
 }
 
-/* How much of the window has run, or null when the provider named neither a reset nor a length. */
-function elapsedShare(window: UsageWindow, now: number): number | null {
-    if (window.resetsAt === null || window.durationMs === null || window.durationMs <= 0) {
-        return null;
-    }
-    return Math.min(1, Math.max(0, 1 - (window.resetsAt - now) / window.durationMs));
-}
+const PACE_LINES: Record<PaceStanding, string> = {
+    ahead: 'limits.faster',
+    behind: 'limits.slower',
+    even: 'limits.even'
+};
 
 export function WindowBar({ window, now, compact }: { window: UsageWindow; now: number; compact: boolean }) {
     const { t } = useTranslation('agent-usage');
     const percent = Math.round(window.used * 100);
-    const elapsed = elapsedShare(window, now);
     // The bar fills as the quota is spent, so the mark beside it is how much of the window has run.
-    const mark = elapsed === null ? null : Math.round(elapsed * 100);
+    const pace = evenPace(window, now);
+    const mark = pace?.percent ?? null;
     const resetsAt = window.resetsAt === null ? null : resetAtLabel(window.resetsAt, now);
     const resetsIn = window.resetsAt === null ? null : resetInLabel(window.resetsAt, now);
 
@@ -47,6 +45,7 @@ export function WindowBar({ window, now, compact }: { window: UsageWindow; now:
             role="progressbar"
             aria-label={t('limits.bar', { window: window.label, percent })}
             aria-valuenow={percent}
+            aria-valuetext={paceText(window, now)}
             aria-valuemin={0}
             aria-valuemax={100}
             className={clsx('relative cursor-default', compact ? 'h-4' : 'h-6')}
@@ -85,7 +84,7 @@ export function WindowBar({ window, now, compact }: { window: UsageWindow; now:
                                 {t('limits.used', { percent })}
                                 {mark !== null && ` · ${t('limits.windowPassed', { percent: mark })}`}
                             </span>
-                            {mark !== null && <span className="text-text-muted">{mark <= percent ? t('limits.faster') : t('limits.slower')}</span>}
+                            {pace !== null && <span className="text-text-muted">{t(PACE_LINES[pace.standing])}</span>}
                         </span>
                     }
                 >
@@ -145,8 +144,7 @@ export function LimitsList({ limits, now, compact = false }: LimitsListProps) {
 function WindowLine({ window, now }: { window: UsageWindow; now: number }) {
     const { t } = useTranslation('agent-usage');
     const percent = Math.round(window.used * 100);
-    const elapsed = elapsedShare(window, now);
-    const mark = elapsed === null ? null : Math.round(elapsed * 100);
+    const mark = evenPace(window, now)?.percent ?? null;
     return (
         <>
             <span className="text-text-muted">{window.label}</span>
@@ -154,6 +152,7 @@ function WindowLine({ window, now }: { window: UsageWindow; now: number }) {
                 role="progressbar"
                 aria-label={t('limits.bar', { window: window.label, percent })}
                 aria-valuenow={percent}
+                aria-valuetext={paceText(window, now)}
                 aria-valuemin={0}
                 aria-valuemax={100}
                 className="relative h-1.5 rounded-full bg-surface-sunken"