@adecore/agents-react 0.38.0 → 0.40.0

package/dist/usage/limits.js

@@ -1,8 +1,9 @@
 import { c as _c } from "react/compiler-runtime";
 import { useEffect } from 'react';
 import { useChatScope } from '../scope.js';
-import { useProviderAccountsStore } from '../state/provider-accounts.js';
+import { useProviderAccounts } from '../state/provider-accounts.js';
 import { useUsage, useUsageStore } from '../state/usage.js';
+import { whenOpen } from '../transport.js';
 import { limitGroups } from './limit-groups.js';
 /* Asking the CLIs is expensive, so everything that shows the windows shares one read per host. */
 const holds = new Map();
@@ -10,19 +11,11 @@ const holds = new Map();
 function hold(scope) {
   const link = scope.transport;
   const scopeId = scope.id;
-  const ask = () => {
+  const offStatus = whenOpen(link, () => {
     link.request('usage.limits', {}).then(snapshot => useUsageStore.getState().setLimits(scopeId, snapshot)).catch(() => undefined);
-  };
-  if (link.status === 'open') {
-    ask();
-  }
+  });
   // A running turn reports its own numbers, which is what keeps a bar moving between reads.
   const offChanged = link.on('usage.limitsChanged', snapshot => useUsageStore.getState().setLimits(scopeId, snapshot));
-  const offStatus = link.subscribeStatus(status => {
-    if (status === 'open') {
-      ask();
-    }
-  });
   return {
     readers: 0,
     release: () => {
@@ -67,27 +60,19 @@ function _temp(s) {
   return s.limits;
 }
 export function useLimitGroups(limits) {
-  const $ = _c(5);
-  const {
-    id
-  } = useChatScope();
+  const $ = _c(3);
+  const accounts = useProviderAccounts(_temp2);
   let t0;
-  if ($[0] !== id) {
-    t0 = s => s.byScope[id]?.accounts ?? null;
-    $[0] = id;
-    $[1] = t0;
-  } else {
-    t0 = $[1];
-  }
-  const accounts = useProviderAccountsStore(t0);
-  let t1;
-  if ($[2] !== accounts || $[3] !== limits) {
-    t1 = limits === null ? [] : limitGroups(limits, accounts);
-    $[2] = accounts;
-    $[3] = limits;
-    $[4] = t1;
+  if ($[0] !== accounts || $[1] !== limits) {
+    t0 = limits === null ? [] : limitGroups(limits, accounts);
+    $[0] = accounts;
+    $[1] = limits;
+    $[2] = t0;
   } else {
-    t1 = $[4];
+    t0 = $[2];
   }
-  return t1;
+  return t0;
+}
+function _temp2(row) {
+  return row.accounts;
 }

package/dist/usage/summary.d.ts

@@ -1,5 +1,5 @@
 import type { UsageProvider, UsageSummaryResult, UsageTotals } from '@adecore/agent-contracts';
-import type { UsageMetric } from '../state/usage.js';
+import { type UsageMetric } from '../state/usage.js';
 export interface ChartSlot {
     slot: string;
     byProvider: Partial<Record<UsageProvider, number>>;

package/dist/usage/summary.js

@@ -1,3 +1,4 @@
+import { dayOf } from '../state/usage.js';
 import { EMPTY_TOTALS, USAGE_PROVIDERS, addTotals, totalTokensOf } from '@adecore/agent-contracts';
 /* Three or four round numbers up the side. The one piece of arithmetic a chart library would bring. */
 export function niceScale(max, ticks = 4) {
@@ -16,9 +17,6 @@ export function niceScale(max, ticks = 4) {
     step
   };
 }
-function pad(value) {
-  return String(value).padStart(2, '0');
-}
 /*
  * Every slot the period has, whether anything happened in it or not: an empty day keeps its place on
  * the axis, so a gap in the work reads as a gap and not as a shorter week.
@@ -27,14 +25,14 @@ export function enumerateSlots(summary) {
   if (summary.resolution === 'hour') {
     return Array.from({
       length: 24
-    }, (_, hour) => `${summary.to}T${pad(hour)}`);
+    }, (_, hour) => `${summary.to}T${String(hour).padStart(2, '0')}`);
   }
   const slots = [];
   const at = new Date(`${summary.from}T00:00:00`);
   const end = new Date(`${summary.to}T00:00:00`);
   // A calendar loop rather than adding milliseconds, since a day is 23 or 25 hours long twice a year.
   while (at <= end && slots.length < 400) {
-    slots.push(`${at.getFullYear()}-${pad(at.getMonth() + 1)}-${pad(at.getDate())}`);
+    slots.push(dayOf(at));
     at.setDate(at.getDate() + 1);
   }
   return slots;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/agents-react",
-  "version": "0.38.0",
+  "version": "0.40.0",
   "description": "React agent chat threads, composers, approvals, provider accounts and usage views.",
   "type": "module",
   "exports": {
@@ -67,49 +67,49 @@
     "test:visuals": "bun --config=integration.bunfig.toml --conditions=source test ./src/chat/visual-viewport.integration.test.ts"
   },
   "dependencies": {
-    "@adecore/agent-contracts": "0.38.0",
-    "@adecore/editor": "0.38.0",
-    "@adecore/editor-react": "0.38.0",
-    "@adecore/intelligent-ui": "0.38.0",
-    "@adecore/merge": "0.38.0",
+    "@adecore/agent-contracts": "0.40.0",
+    "@adecore/editor": "0.40.0",
+    "@adecore/editor-react": "0.40.0",
+    "@adecore/intelligent-ui": "0.40.0",
+    "@adecore/merge": "0.40.0",
     "@codemirror/commands": "^6.11.1",
-    "@codemirror/language": "^6.12.4",
+    "@codemirror/language": "^6.13.1",
     "@codemirror/state": "^6.7.6",
-    "@codemirror/view": "^6.43.13",
-    "@lezer/common": "^1.5.2",
-    "@lezer/highlight": "^1.2.3",
-    "@lezer/markdown": "^1.7.2",
-    "@pierre/diffs": "^1.4.3",
+    "@codemirror/view": "^6.43.15",
+    "@lezer/common": "^1.5.4",
+    "@lezer/highlight": "^1.2.5",
+    "@lezer/markdown": "^1.8.1",
+    "@pierre/diffs": "^1.6.1",
     "@tanstack/react-virtual": "^3.14.13",
     "clsx": "^2.1.1",
-    "lucide-react": "^1.47.0",
-    "maplibre-gl": "^6.14.0",
+    "lucide-react": "^1.61.0",
+    "maplibre-gl": "^6.16.0",
     "pele": "1.8.0",
     "react-markdown": "^10.1.0",
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
-    "shiki": "^4.4.3",
-    "simple-icons": "^16.32.0",
-    "zod": "^4.6.5",
-    "zustand": "^5.0.15"
+    "shiki": "^4.5.0",
+    "simple-icons": "^16.36.0",
+    "zod": "^4.6.7",
+    "zustand": "^5.0.16"
   },
   "peerDependencies": {
-    "@adecore/ui": "^0.38.0",
+    "@adecore/ui": "^0.40.0",
     "i18next": "^26.4.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-i18next": "^17.0.15"
   },
   "devDependencies": {
-    "@adecore/ui": "0.38.0",
-    "@types/bun": "^1.4.2",
+    "@adecore/ui": "0.40.0",
+    "@types/bun": "^1.4.4",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
-    "i18next": "^26.4.2",
-    "linkedom": "^0.18.13",
-    "react": "^19.3.0",
-    "react-dom": "^19.3.0",
-    "react-i18next": "^17.0.15",
+    "i18next": "^26.5.11",
+    "linkedom": "^0.18.14",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "react-i18next": "^17.1.9",
     "typescript": "^7.0.2"
   },
   "license": "FSL-1.1-MIT",

package/src/agents/AccountDot.tsx

@@ -6,6 +6,7 @@ import { accountColor } from './accounts';
 export function AccountDot({ color, className }: { color: string | undefined; className?: string }) {
     const { accents } = useChatHost();
     const paint = accountColor(color, accents.all);
+
     return (
         <span
             aria-hidden

package/src/agents/AgentIcon.tsx

@@ -17,9 +17,11 @@ const BUILT_IN_MARKS: Partial<Record<AgentKind, AgentMark>> = {
 
 export function AgentIcon({ kind, size = 14, className }: { kind: AgentKind; size?: number; className?: string }) {
     const mark = hostAgentMark(kind) ?? BUILT_IN_MARKS[kind];
+
     if (!mark) {
         return <Icon icon={Bot} size={size} className={className} />;
     }
+
     return (
         <svg
             role="img"

package/src/agents/AgentModelLabel.tsx

@@ -0,0 +1,38 @@
+import { useContext } from 'react';
+import clsx from 'clsx';
+import type { AgentKind } from '@adecore/agent-contracts';
+import { ChatScopeContext } from '../scope';
+import { useProvidersStore } from '../state/providers';
+import { AgentIcon } from './AgentIcon';
+import { modelName } from './model-name';
+import { hasProviderLogo } from './provider-paths';
+import { ProviderLogo } from './ProviderLogo';
+
+interface AgentModelLabelProps {
+    provider: AgentKind;
+    /* The model's slug; absent names the CLI itself. */
+    model?: string;
+    /* The machine whose catalog names the model; absent, the chat scope the label is drawn in. */
+    scopeId?: string;
+    size?: number;
+    className?: string;
+}
+
+/*
+ * Who answered or will answer, in one line: the CLI's mark and the model, named the way the machine's
+ * catalog names it, as a row of facts writes it ("made by", "runs as").
+ */
+export function AgentModelLabel({ provider, model, scopeId, size = 14, className }: AgentModelLabelProps) {
+    // Outside a chat scope a host names the machine itself; with neither, the CLI still draws, by its kind.
+    const scope = useContext(ChatScopeContext);
+    const id = scopeId ?? scope?.id;
+    const catalog = useProvidersStore((s) => (id === undefined ? undefined : s.byScope[id]?.providers.find((entry) => entry.kind === provider)));
+    const name = model === undefined ? (catalog?.name ?? provider) : modelName(model, catalog?.models);
+
+    return (
+        <span className={clsx('flex min-w-0 items-center gap-1.5', className)}>
+            {hasProviderLogo(provider) ? <ProviderLogo provider={provider} size={size} /> : <AgentIcon kind={provider} size={size} className="shrink-0" />}
+            <span className="truncate">{name}</span>
+        </span>
+    );
+}

package/src/agents/ModelOptionControl.tsx

@@ -29,21 +29,28 @@ type ModelOptionControlProps = {
 export function ModelOptionControl(props: ModelOptionControlProps) {
     const { options, layout = 'compact', disabled } = props;
     const option = localizedOption(props.option);
+
     if (option.type === 'boolean') {
         return <Switch checked={optionValue(option, options) === true} label={option.label} disabled={disabled} onCheckedChange={props.onChange} />;
     }
+
     const picked = props.defaultLabel !== undefined && options[option.id] === undefined ? MODEL_DEFAULT : String(optionValue(option, options));
+
     const choices = [
         ...(props.defaultLabel !== undefined ? [{ id: MODEL_DEFAULT, label: props.defaultLabel, description: undefined }] : []),
         ...option.choices
     ];
+
     const choose = (id: string): void => {
         if (props.defaultLabel !== undefined) {
             props.onChange(id === MODEL_DEFAULT ? undefined : id);
+
             return;
         }
+
         props.onChange(id);
     };
+
     if (layout === 'row' && choices.length <= MAX_SEGMENTS) {
         return (
             <Segmented
@@ -55,6 +62,7 @@ export function ModelOptionControl(props: ModelOptionControlProps) {
             />
         );
     }
+
     return (
         <Select
             value={picked}

package/src/agents/account-limits.ts

@@ -44,9 +44,12 @@ export function continueTargets(
 ): AccountEntry[] {
     const roomy = others(accounts, kind, current).flatMap((entry) => {
         const limits = limitsOfAccount(snapshot, entry.id);
+
         return hasRoom(limits) ? [{ entry, pressure: pressure(limits) }] : [];
     });
+
     roomy.sort((a, b) => a.pressure - b.pressure);
+
     return roomy.map((target) => target.entry);
 }
 

package/src/agents/accounts.ts

@@ -29,7 +29,9 @@ export function accountsOfKind(accounts: ProviderAccounts | null, kind: AgentKin
     if (accounts === null) {
         return [];
     }
+
     const statuses = new Map(accounts.statuses.map((status) => [status.id, status]));
+
     return Object.entries(accounts.accounts)
         .filter(([, account]) => account.kind === kind)
         .map(([id, account]) => ({ id, account, status: statuses.get(id) ?? null, isDefault: id === kind }))
@@ -51,6 +53,7 @@ export function accountLoginOf(accounts: ProviderAccounts | null | undefined, ki
     if (accounts?.loginCommands?.[kind] !== undefined) {
         return 'terminal';
     }
+
     return accounts?.chatLogins?.includes(kind) === true ? 'chat' : null;
 }
 
@@ -68,6 +71,7 @@ export const ACCOUNT_TONE_CLASSES: Record<AccountTone, string> = {
  */
 export function accountStatusLine(status: ProviderAccountStatus | null, canLogIn: boolean): { text: string; tone: AccountTone } {
     const words = (key: string, values?: Record<string, string>): string => i18next.t(`agent-providers:status.${key}`, values);
+
     switch (status?.state ?? 'checking') {
         case 'checking':
             return { text: words('checking'), tone: 'muted' };
@@ -81,6 +85,7 @@ export function accountStatusLine(status: ProviderAccountStatus | null, canLogIn
             if (!canLogIn) {
                 return { text: words('available'), tone: 'muted' };
             }
+
             return { text: status?.plan ? words('readyPlan', { plan: status.plan }) : words('ready'), tone: 'muted' };
         case 'folder-missing':
             return { text: words('folderMissing'), tone: 'error' };
@@ -105,9 +110,11 @@ function slugOf(label: string): string {
 export function mintAccountId(kind: AgentKind, label: string, taken: ReadonlySet<string>): string {
     const base = `${kind}_${slugOf(label) || 'account'}`.slice(0, 60).replace(/-+$/, '');
     let id = base;
+
     for (let suffix = 2; taken.has(id); suffix += 1) {
         id = `${base}-${suffix}`;
     }
+
     return id;
 }
 
@@ -119,6 +126,7 @@ export function freeAccountColor(entries: readonly AccountEntry[], accents: Chat
     const { all, featured } = accents;
     const worn = new Set(entries.map((entry) => (accountColor(entry.account.color, all) === undefined ? fallback : entry.account.color)));
     const choices = [...featured, ...all.map((entry) => entry.id).filter((id) => !featured.includes(id))];
+
     return choices.find((id) => !worn.has(id)) ?? featured[entries.length % featured.length] ?? fallback;
 }
 
@@ -140,11 +148,15 @@ export function hasAccountChoice(entries: readonly AccountEntry[]): boolean {
 export function canContinueOn(accounts: ProviderAccounts | null, kind: AgentKind, from: string | undefined, to: string | undefined): boolean {
     const fromId = from ?? kind;
     const toId = to ?? kind;
+
     if (fromId === toId) {
         return true;
     }
+
     const folderOf = (id: string): string | undefined =>
         accounts?.accounts[id]?.kind === kind ? accounts.statuses.find((status) => status.id === id)?.transcripts : undefined;
+
     const folder = folderOf(fromId);
+
     return folder !== undefined && folder !== '' && folder === folderOf(toId);
 }

package/src/agents/model-name.ts

@@ -1,5 +1,6 @@
 import type { AgentKind, ModelInfo, ProviderInfo } from '@adecore/agent-contracts';
 import { useProviders } from '../state/providers';
+import { hasProviderLogo } from './provider-paths';
 
 /*
  * A model id as a person reads it, for a model no catalog names: without its vendor prefix and its
@@ -9,14 +10,19 @@ import { useProviders } from '../state/providers';
 export function modelNameFromSlug(slug: string): string {
     const bare = slug.slice(slug.lastIndexOf('/') + 1).replace(/-\d{6,8}$/, '');
     const words: string[] = [];
+
     for (const word of bare.split('-')) {
         const previous = words.at(-1);
+
         if (previous !== undefined && /^\d+$/.test(word) && /\d$/.test(previous)) {
             words[words.length - 1] = `${previous}.${word}`;
+
             continue;
         }
+
         words.push(word);
     }
+
     return words.map((word) => (word === 'gpt' ? 'GPT' : word.charAt(0).toUpperCase() + word.slice(1))).join(' ');
 }
 
@@ -34,8 +40,9 @@ export interface AgentChip {
 
 export function agentChipOf(providers: readonly ProviderInfo[], provider: AgentKind, model: string): AgentChip {
     const owner = providers.find((entry) => entry.kind === provider);
+
     return {
-        mark: provider === 'claude' || provider === 'codex' ? 'logo' : 'icon',
+        mark: hasProviderLogo(provider) ? 'logo' : 'icon',
         name: owner?.name ?? provider,
         model: modelName(model, owner?.models)
     };
@@ -53,18 +60,23 @@ export function useModelName(provider: AgentKind | undefined, slug: string): str
 export function sharedModelPrefix(models: readonly ModelInfo[]): string {
     const names = models.map((entry) => entry.name.split(' '));
     const first = names[0];
+
     if (first === undefined || names.length < 2) {
         return '';
     }
+
     let count = 0;
+
     while (names.every((words) => words.length > count + 1 && words[count] === first[count])) {
         count++;
     }
+
     return count === 0 ? '' : `${first.slice(0, count).join(' ')} `;
 }
 
 /* A model's name without the words its whole catalog shares. */
 export function shortModelName(name: string, models: readonly ModelInfo[] | undefined): string {
     const prefix = sharedModelPrefix(models ?? []);
+
     return prefix !== '' && name.startsWith(prefix) ? name.slice(prefix.length) : name;
 }

package/src/agents/model-options.ts

@@ -9,9 +9,11 @@ function fits(option: ModelOptionDescriptor, value: string | boolean | undefined
 /* What an option runs at: the value picked, else the model's own default. A value the model does not offer counts as unpicked. */
 export function optionValue(option: ModelOptionDescriptor, options: OptionValues): string | boolean {
     const picked = options[option.id];
+
     if (fits(option, picked)) {
         return picked;
     }
+
     return option.type === 'boolean' ? option.defaultValue : option.defaultChoice;
 }
 

package/src/agents/model-requirement.ts

@@ -8,6 +8,7 @@ export interface ModelRequirement {
 
 function partsOf(version: string, strict: boolean): number[] | null {
     const found = (strict ? /^(\d+)\.(\d+)(?:\.(\d+))?$/ : /(\d+)\.(\d+)\.(\d+)/).exec(version);
+
     return found === null ? null : [Number(found[1]), Number(found[2]), Number(found[3] ?? 0)];
 }
 
@@ -24,13 +25,16 @@ function isReported(slug: string, reported: ReadonlySet<string>): boolean {
 export function modelRequirementOf(model: ModelInfo, provider: ProviderInfo, reported: ReadonlySet<string>): ModelRequirement | null {
     const minimum = model.minCliVersion === undefined ? null : partsOf(model.minCliVersion, true);
     const installed = provider.version === null ? null : partsOf(provider.version, false);
+
     if (minimum === null || installed === null || isReported(model.slug, reported)) {
         return null;
     }
+
     for (let i = 0; i < 3; i++) {
         if (installed[i] !== minimum[i]) {
             return (installed[i] ?? 0) > (minimum[i] ?? 0) ? null : { cli: provider.name, minVersion: model.minCliVersion ?? '' };
         }
     }
+
     return null;
 }

package/src/agents/option-words.ts

@@ -20,8 +20,10 @@ export function choiceWord(optionId: string, choice: { id: string; label: string
 /* The option with the words a person reads, for a surface that draws its labels and choices. */
 export function localizedOption(option: ModelOptionDescriptor): ModelOptionDescriptor {
     const label = optionWord(option);
+
     if (option.type !== 'select') {
         return { ...option, label };
     }
+
     return { ...option, label, choices: option.choices.map((choice) => ({ ...choice, label: choiceWord(option.id, choice) })) };
 }

package/src/agents/provider-paths.ts

@@ -1,9 +1,9 @@
-import type { UsageProvider } from '@adecore/agent-contracts';
+import type { AgentKind, UsageProvider } from '@adecore/agent-contracts';
 import { siGithubcopilot } from 'simple-icons';
 
 /*
- * The marks of Anthropic, OpenAI, xAI and GitHub Copilot, and a monogram for a provider with no mark of its own. Lucide has no brand marks, so these are the icon rule's
- * exception for provider marks. One path each, in `currentColor`, so a row decides how loud the logo is.
+ * Lucide has no brand marks, so these are the icon rule's exception for provider marks. One path each,
+ * in `currentColor`, so a row decides how loud the logo is.
  */
 const CLAUDE_PATH =
     'M4.709 15.955l4.72-2.647.079-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.377-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.048.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.607.212-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.914-1.316-.012.01z';
@@ -16,3 +16,8 @@ export const PROVIDER_PATHS: Record<UsageProvider, string> = {
     grok: 'M6.469 8.776 16.512 23h-4.464L2.005 8.776H6.47Zm-.004 7.9 2.233 3.164L6.467 23H2l4.465-6.324ZM22 2.582V23h-3.659V7.764L22 2.582ZM22 1l-9.952 14.095-2.233-3.163L17.533 1H22Z',
     copilot: siGithubcopilot.path
 };
+
+/* The CLIs drawn with the logo of the usage page rather than their agent mark. */
+export function hasProviderLogo(kind: AgentKind): kind is 'claude' | 'codex' {
+    return kind === 'claude' || kind === 'codex';
+}

package/src/agents/status-look.ts

@@ -38,5 +38,6 @@ export function taskStatusWord(task: TaskState): StatusWord {
     if (task.status !== 'open') {
         return task.status;
     }
+
     return task.paused === undefined ? 'running' : 'paused';
 }

package/src/chat/account-choice.ts

@@ -1,4 +1,3 @@
-import { useMemo } from 'react';
 import type { AgentKind, ProviderAccounts } from '@adecore/agent-contracts';
 import { accountName, accountsOfKind, hasAccountChoice, offeredAccounts, type AccountEntry } from '../agents/accounts';
 import { useProviderAccounts, type ProviderAccountsRow } from '../state/provider-accounts';
@@ -23,24 +22,27 @@ export interface AccountChoice {
 export function useAccountChoice(kind: AgentKind | null, account: string | undefined): AccountChoice | null {
     const accounts = useProviderAccounts((row) => row.accounts);
     const providerName = useProviders((row) => row.providers.find((entry) => entry.kind === kind)?.name) ?? kind ?? '';
-    return useMemo(() => {
-        if (kind === null || accounts === null) {
-            return null;
-        }
-        const entries = accountsOfKind(accounts, kind);
-        if (!hasAccountChoice(entries)) {
-            return null;
-        }
-        const currentId = account ?? kind;
-        return {
-            accounts,
-            offered: offeredAccounts(entries, currentId),
-            currentId,
-            current: entries.find((entry) => entry.id === currentId) ?? null,
-            providerName,
-            nameOf: (entry: AccountEntry) => accountName(entry, providerName)
-        };
-    }, [accounts, kind, account, providerName]);
+
+    if (kind === null || accounts === null) {
+        return null;
+    }
+
+    const entries = accountsOfKind(accounts, kind);
+
+    if (!hasAccountChoice(entries)) {
+        return null;
+    }
+
+    const currentId = account ?? kind;
+
+    return {
+        accounts,
+        offered: offeredAccounts(entries, currentId),
+        currentId,
+        current: entries.find((entry) => entry.id === currentId) ?? null,
+        providerName,
+        nameOf: (entry: AccountEntry) => accountName(entry, providerName)
+    };
 }
 
 /*
@@ -63,11 +65,14 @@ export function newAccountChoiceOf(row: ProviderAccountsRow, kind: AgentKind | n
     if (kind === null || !row.loaded) {
         return LOADING;
     }
+
     const entries = accountsOfKind(row.accounts, kind);
+
     // An older machine lists no accounts at all, or none of a CLI it does not know.
     if (entries.length === 0) {
         return UNSUPPORTED;
     }
+
     return {
         status: 'ready',
         offered: offeredAccounts(entries, undefined),
@@ -80,5 +85,6 @@ export function newAccountChoiceOf(row: ProviderAccountsRow, kind: AgentKind | n
 export function useNewAccountChoice(kind: AgentKind | null): NewAccountChoice {
     const row = useProviderAccounts((entry) => entry);
     const providerName = useProviders((entry) => entry.providers.find((provider) => provider.kind === kind)?.name) ?? kind ?? '';
+
     return newAccountChoiceOf(row, kind, providerName);
 }

package/src/chat/actions.ts

@@ -14,6 +14,7 @@ export function transportActions(transport: ChatTransport): ChatActions {
         },
         unqueue: async (chatId, messageId) => {
             const { message } = await transport.request('chat.unqueue', { chatId, messageId });
+
             // A host answers without the message once it went out, which is what the composer tells a person.
             if (message === undefined) {
                 throw new ChatTransportError('request-not-found', i18next.t('agent-chat:composer.queue.alreadySent'));
@@ -58,15 +59,19 @@ const byTransport = new WeakMap<ChatTransport, ChatActions>();
 /* The app's own actions when its host has them, and the requests of this scope's host of chats otherwise. */
 export function actionsOf(scope: ChatScope, host: Pick<ChatHost, 'actions'>): ChatActions {
     const own = host.actions;
+
     if (own !== null) {
         return own;
     }
+
     const { transport } = scope;
     let actions = byTransport.get(transport);
+
     if (actions === undefined) {
         actions = transportActions(transport);
         byTransport.set(transport, actions);
     }
+
     return actions;
 }