@adecore/agents-react 0.31.12 → 0.33.0

package/dist/usage/limit-groups.js

@@ -1,9 +1,10 @@
 import i18next from 'i18next';
-import { USAGE_PROVIDERS } from '@adecore/agent-contracts';
+import { evenPace, USAGE_PROVIDERS } from '@adecore/agent-contracts';
 import { limitsAccountId } from '../agents/account-limits.js';
 import { accountName, accountsOfKind, accountStatusLine } from '../agents/accounts.js';
 import { formatDuration } from '@adecore/ui/format';
 import { PROVIDER_LABELS } from './format.js';
+export { evenPace } from '@adecore/agent-contracts';
 const MINUTE = 60_000;
 /*
  * The plan numbers per CLI, one row per account. The machine only reads an account that is signed in,
@@ -12,80 +13,97 @@ const MINUTE = 60_000;
  * A CLI the machine reads no plan of at all has no group, whatever accounts it has.
  */
 export function limitGroups(snapshot, accounts) {
-    return USAGE_PROVIDERS.flatMap((kind) => {
-        if (!snapshot.providers.some((entry) => entry.kind === kind)) {
-            return [];
-        }
-        const known = accountsOfKind(accounts, kind);
-        const read = snapshot.providers
-            .filter((entry) => entry.kind === kind)
-            .map((entry) => {
-            const id = limitsAccountId(entry);
-            const account = known.find((each) => each.id === id);
-            return {
-                id,
-                kind,
-                name: account === undefined ? (entry.account?.label ?? PROVIDER_LABELS[kind]) : accountName(account, PROVIDER_LABELS[kind]),
-                color: account === undefined ? entry.account?.color : account.account.color,
-                entry,
-                status: account?.status ?? null
-            };
-        });
-        const unread = known
-            .filter((account) => account.account.enabled !== false && !read.some((row) => row.id === account.id))
-            .map((account) => ({
-            id: account.id,
-            kind,
-            name: accountName(account, PROVIDER_LABELS[kind]),
-            color: account.account.color,
-            entry: null,
-            status: account.status
-        }));
-        const rows = [...read, ...unread];
-        return rows.length === 0 ? [] : [{ kind, accounts: rows }];
+  return USAGE_PROVIDERS.flatMap(kind => {
+    if (!snapshot.providers.some(entry => entry.kind === kind)) {
+      return [];
+    }
+    const known = accountsOfKind(accounts, kind);
+    const read = snapshot.providers.filter(entry => entry.kind === kind).map(entry => {
+      const id = limitsAccountId(entry);
+      const account = known.find(each => each.id === id);
+      return {
+        id,
+        kind,
+        name: account === undefined ? entry.account?.label ?? PROVIDER_LABELS[kind] : accountName(account, PROVIDER_LABELS[kind]),
+        color: account === undefined ? entry.account?.color : account.account.color,
+        entry,
+        status: account?.status ?? null
+      };
     });
+    const unread = known.filter(account => account.account.enabled !== false && !read.some(row => row.id === account.id)).map(account => ({
+      id: account.id,
+      kind,
+      name: accountName(account, PROVIDER_LABELS[kind]),
+      color: account.account.color,
+      entry: null,
+      status: account.status
+    }));
+    const rows = [...read, ...unread];
+    return rows.length === 0 ? [] : [{
+      kind,
+      accounts: rows
+    }];
+  });
 }
 /* Whether any CLI has more than one account, which is when the limits name the account of every row. */
 export function hasSeveralAccounts(groups) {
-    return groups.some((group) => group.accounts.length > 1);
+  return groups.some(group => group.accounts.length > 1);
 }
 export function isSignedOut(account) {
-    return account.status?.state === 'signed-out';
+  return account.status?.state === 'signed-out';
 }
 /* The window that resets first from now, the one reset a line per window has no room to repeat. */
 export function nextReset(windows, now) {
-    let next = null;
-    for (const window of windows) {
-        if (window.resetsAt !== null && window.resetsAt > now && (next === null || window.resetsAt < next.resetsAt)) {
-            next = { ...window, resetsAt: window.resetsAt };
-        }
+  let next = null;
+  for (const window of windows) {
+    if (window.resetsAt !== null && window.resetsAt > now && (next === null || window.resetsAt < next.resetsAt)) {
+      next = {
+        ...window,
+        resetsAt: window.resetsAt
+      };
     }
-    return next;
+  }
+  return next;
+}
+/* The bar as words for whoever cannot see the mark: how much is used and how that stands against an even pace. */
+export function paceText(window, now) {
+  const percent = Math.round(window.used * 100);
+  const pace = evenPace(window, now);
+  return pace === null ? i18next.t('agent-usage:limits.used', {
+    percent
+  }) : i18next.t(`agent-usage:limits.pace.${pace.standing}`, {
+    percent,
+    pace: pace.percent
+  });
 }
 /* When the numbers came in and from where: a read of the machine's own, or a turn that reported them. Null before the first read. */
 export function checkedLabel(entry, now) {
-    if (entry.checkedAt <= 0) {
-        return null;
-    }
-    const past = now - entry.checkedAt;
-    const when = past < MINUTE ? i18next.t('agent-usage:limits.checked.now') : i18next.t('agent-usage:limits.checked.ago', { duration: formatDuration(past) });
-    return entry.source === 'event' ? i18next.t('agent-usage:limits.checked.fromTurn', { when }) : when;
+  if (entry.checkedAt <= 0) {
+    return null;
+  }
+  const past = now - entry.checkedAt;
+  const when = past < MINUTE ? i18next.t('agent-usage:limits.checked.now') : i18next.t('agent-usage:limits.checked.ago', {
+    duration: formatDuration(past)
+  });
+  return entry.source === 'event' ? i18next.t('agent-usage:limits.checked.fromTurn', {
+    when
+  }) : when;
 }
 /* Why a read account has no bars, or null when it has them. */
 export function explain(provider) {
-    if (provider.unavailable === null) {
-        return provider.windows.length === 0 ? i18next.t('agent-usage:limits.none') : null;
-    }
-    if (provider.unavailable.reason === 'not-installed') {
-        return i18next.t('agent-usage:limits.notInstalled');
-    }
-    if (provider.unavailable.reason === 'no-subscription') {
-        // A provider that knows why it has no plan says so; the rest are accounts on an API key.
-        return provider.unavailable.message ?? i18next.t('agent-usage:limits.noSubscription');
-    }
-    return provider.unavailable.message ?? i18next.t('agent-usage:limits.unreachable');
+  if (provider.unavailable === null) {
+    return provider.windows.length === 0 ? i18next.t('agent-usage:limits.none') : null;
+  }
+  if (provider.unavailable.reason === 'not-installed') {
+    return i18next.t('agent-usage:limits.notInstalled');
+  }
+  if (provider.unavailable.reason === 'no-subscription') {
+    // A provider that knows why it has no plan says so; the rest are accounts on an API key.
+    return provider.unavailable.message ?? i18next.t('agent-usage:limits.noSubscription');
+  }
+  return provider.unavailable.message ?? i18next.t('agent-usage:limits.unreachable');
 }
 /* Why an account has no bars, or null when it has them. An account the machine does not read says what its login is doing. */
 export function accountNote(account) {
-    return account.entry === null ? accountStatusLine(account.status, true).text : explain(account.entry);
-}
+  return account.entry === null ? accountStatusLine(account.status, true).text : explain(account.entry);
+}

package/dist/usage/limits.js

@@ -1,4 +1,5 @@
-import { useEffect, useMemo } from 'react';
+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 { useUsage, useUsageStore } from '../state/usage.js';
@@ -7,52 +8,86 @@ import { limitGroups } from './limit-groups.js';
 const holds = new Map();
 /* On the scope's transport as it stands: reading the windows never makes the host connect, so they fill once it is connected for another reason. */
 function hold(scope) {
-    const link = scope.transport;
-    const scopeId = scope.id;
-    const ask = () => {
-        link.request('usage.limits', {})
-            .then((snapshot) => useUsageStore.getState().setLimits(scopeId, snapshot))
-            .catch(() => undefined);
-    };
-    if (link.status === 'open') {
-        ask();
+  const link = scope.transport;
+  const scopeId = scope.id;
+  const ask = () => {
+    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();
     }
-    // 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: () => {
-            offChanged();
-            offStatus();
-        }
-    };
+  });
+  return {
+    readers: 0,
+    release: () => {
+      offChanged();
+      offStatus();
+    }
+  };
 }
 /* The snapshot of the host in scope, kept fresh for as long as anything shows it. */
 export function useUsageLimits() {
-    const limits = useUsage((s) => s.limits);
-    const scope = useChatScope();
-    useEffect(() => {
-        const held = holds.get(scope.id) ?? hold(scope);
-        held.readers += 1;
-        holds.set(scope.id, held);
-        return () => {
-            held.readers -= 1;
-            if (held.readers === 0) {
-                held.release();
-                holds.delete(scope.id);
-            }
-        };
-    }, [scope]);
-    return limits;
+  const $ = _c(3);
+  const limits = useUsage(_temp);
+  const scope = useChatScope();
+  let t0;
+  let t1;
+  if ($[0] !== scope) {
+    t0 = () => {
+      const held = holds.get(scope.id) ?? hold(scope);
+      held.readers = held.readers + 1;
+      holds.set(scope.id, held);
+      return () => {
+        held.readers = held.readers - 1;
+        if (held.readers === 0) {
+          held.release();
+          holds.delete(scope.id);
+        }
+      };
+    };
+    t1 = [scope];
+    $[0] = scope;
+    $[1] = t0;
+    $[2] = t1;
+  } else {
+    t0 = $[1];
+    t1 = $[2];
+  }
+  useEffect(t0, t1);
+  return limits;
 }
 /* The snapshot per CLI and account, with the accounts of the same host it is read from. */
-export function useLimitGroups(limits) {
-    const { id } = useChatScope();
-    const accounts = useProviderAccountsStore((s) => s.byScope[id]?.accounts ?? null);
-    return useMemo(() => (limits === null ? [] : limitGroups(limits, accounts)), [limits, accounts]);
+function _temp(s) {
+  return s.limits;
 }
+export function useLimitGroups(limits) {
+  const $ = _c(5);
+  const {
+    id
+  } = useChatScope();
+  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;
+  } else {
+    t1 = $[4];
+  }
+  return t1;
+}

package/dist/usage/money.js

@@ -1,9 +1,25 @@
-import { useMemo } from 'react';
+import { c as _c } from "react/compiler-runtime";
 import { useUsage } from '../state/usage.js';
 import { moneyFormat } from './format.js';
 /* The formatter every amount on the page goes through: the chosen currency, at the rate the summary on screen carries. */
 export function useMoney() {
-    const currency = useUsage((s) => s.currency);
-    const rate = useUsage((s) => s.summary?.rate ?? null);
-    return useMemo(() => moneyFormat(currency, rate), [currency, rate]);
+  const $ = _c(3);
+  const currency = useUsage(_temp);
+  const rate = useUsage(_temp2);
+  let t0;
+  if ($[0] !== currency || $[1] !== rate) {
+    t0 = moneyFormat(currency, rate);
+    $[0] = currency;
+    $[1] = rate;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  return t0;
 }
+function _temp2(s_0) {
+  return s_0.summary?.rate ?? null;
+}
+function _temp(s) {
+  return s.currency;
+}

package/dist/usage/summary.js

@@ -1,92 +1,113 @@
 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) {
-    if (!Number.isFinite(max) || max <= 0) {
-        return { max: 1, step: 1 };
-    }
-    const rough = max / ticks;
-    const magnitude = 10 ** Math.floor(Math.log10(rough));
-    const normalized = rough / magnitude;
-    const step = (normalized <= 1 ? 1 : normalized <= 2 ? 2 : normalized <= 5 ? 5 : 10) * magnitude;
-    return { max: Math.ceil(max / step) * step, step };
+  if (!Number.isFinite(max) || max <= 0) {
+    return {
+      max: 1,
+      step: 1
+    };
+  }
+  const rough = max / ticks;
+  const magnitude = 10 ** Math.floor(Math.log10(rough));
+  const normalized = rough / magnitude;
+  const step = (normalized <= 1 ? 1 : normalized <= 2 ? 2 : normalized <= 5 ? 5 : 10) * magnitude;
+  return {
+    max: Math.ceil(max / step) * step,
+    step
+  };
 }
 function pad(value) {
-    return String(value).padStart(2, '0');
+  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.
  */
 export function enumerateSlots(summary) {
-    if (summary.resolution === 'hour') {
-        return Array.from({ length: 24 }, (_, hour) => `${summary.to}T${pad(hour)}`);
-    }
-    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())}`);
-        at.setDate(at.getDate() + 1);
-    }
-    return slots;
+  if (summary.resolution === 'hour') {
+    return Array.from({
+      length: 24
+    }, (_, hour) => `${summary.to}T${pad(hour)}`);
+  }
+  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())}`);
+    at.setDate(at.getDate() + 1);
+  }
+  return slots;
 }
 /* How often an x label fits: every third hour, every day, every week, every fortnight. */
 export function labelEveryFor(slots) {
-    return slots <= 10 ? 1 : slots <= 24 ? 3 : slots <= 31 ? 7 : 15;
+  return slots <= 10 ? 1 : slots <= 24 ? 3 : slots <= 31 ? 7 : 15;
 }
 /*
  * The buckets folded into what the page draws. The daemon sends one bucket per slot, provider and
  * model, which is the smallest thing every part of the page can be summed out of.
  */
 export function deriveUsage(summary, metric) {
-    const bySlot = new Map();
-    for (const slot of enumerateSlots(summary)) {
-        bySlot.set(slot, { slot, byProvider: {}, total: 0 });
+  const bySlot = new Map();
+  for (const slot of enumerateSlots(summary)) {
+    bySlot.set(slot, {
+      slot,
+      byProvider: {},
+      total: 0
+    });
+  }
+  const byProvider = new Map();
+  let totals = EMPTY_TOTALS;
+  let costUsd = 0;
+  let cacheSavingsUsd = 0;
+  for (const bucket of summary.buckets) {
+    const value = metric === 'cost' ? bucket.costUsd ?? 0 : totalTokensOf(bucket.totals);
+    const slot = bySlot.get(bucket.slot);
+    if (slot !== undefined) {
+      slot.byProvider[bucket.provider] = (slot.byProvider[bucket.provider] ?? 0) + value;
+      slot.total += value;
     }
-    const byProvider = new Map();
-    let totals = EMPTY_TOTALS;
-    let costUsd = 0;
-    let cacheSavingsUsd = 0;
-    for (const bucket of summary.buckets) {
-        const value = metric === 'cost' ? (bucket.costUsd ?? 0) : totalTokensOf(bucket.totals);
-        const slot = bySlot.get(bucket.slot);
-        if (slot !== undefined) {
-            slot.byProvider[bucket.provider] = (slot.byProvider[bucket.provider] ?? 0) + value;
-            slot.total += value;
-        }
-        const provider = byProvider.get(bucket.provider) ?? { provider: bucket.provider, costUsd: 0, totals: EMPTY_TOTALS };
-        provider.costUsd += bucket.costUsd ?? 0;
-        provider.totals = addTotals(provider.totals, bucket.totals);
-        byProvider.set(bucket.provider, provider);
-        totals = addTotals(totals, bucket.totals);
-        costUsd += bucket.costUsd ?? 0;
-        cacheSavingsUsd += bucket.cacheSavingsUsd;
-    }
-    const providers = [...byProvider.values()].sort((a, b) => b.costUsd - a.costUsd);
-    return {
-        slots: [...bySlot.values()],
-        providers,
-        active: USAGE_PROVIDERS.filter((provider) => byProvider.has(provider)),
-        totals,
-        costUsd,
-        cacheSavingsUsd
+    const provider = byProvider.get(bucket.provider) ?? {
+      provider: bucket.provider,
+      costUsd: 0,
+      totals: EMPTY_TOTALS
     };
+    provider.costUsd += bucket.costUsd ?? 0;
+    provider.totals = addTotals(provider.totals, bucket.totals);
+    byProvider.set(bucket.provider, provider);
+    totals = addTotals(totals, bucket.totals);
+    costUsd += bucket.costUsd ?? 0;
+    cacheSavingsUsd += bucket.cacheSavingsUsd;
+  }
+  const providers = [...byProvider.values()].sort((a, b) => b.costUsd - a.costUsd);
+  return {
+    slots: [...bySlot.values()],
+    providers,
+    active: USAGE_PROVIDERS.filter(provider => byProvider.has(provider)),
+    totals,
+    costUsd,
+    cacheSavingsUsd
+  };
 }
 /*
  * The chart's buckets as a table of calendar days, newest first; an hour slot folds onto the date it
  * names. A day nothing happened in is left out, since the chart already shows the gap.
  */
 export function deriveDays(summary) {
-    const rows = new Map();
-    for (const bucket of summary.buckets) {
-        const day = bucket.slot.slice(0, 10);
-        const row = rows.get(day) ?? { slot: day, costByProvider: {}, costUsd: 0, tokens: 0 };
-        const cost = bucket.costUsd ?? 0;
-        row.costByProvider[bucket.provider] = (row.costByProvider[bucket.provider] ?? 0) + cost;
-        row.costUsd += cost;
-        row.tokens += totalTokensOf(bucket.totals);
-        rows.set(day, row);
-    }
-    return [...rows.values()].sort((a, b) => b.slot.localeCompare(a.slot));
-}
+  const rows = new Map();
+  for (const bucket of summary.buckets) {
+    const day = bucket.slot.slice(0, 10);
+    const row = rows.get(day) ?? {
+      slot: day,
+      costByProvider: {},
+      costUsd: 0,
+      tokens: 0
+    };
+    const cost = bucket.costUsd ?? 0;
+    row.costByProvider[bucket.provider] = (row.costByProvider[bucket.provider] ?? 0) + cost;
+    row.costUsd += cost;
+    row.tokens += totalTokensOf(bucket.totals);
+    rows.set(day, row);
+  }
+  return [...rows.values()].sort((a, b) => b.slot.localeCompare(a.slot));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/agents-react",
-  "version": "0.31.12",
+  "version": "0.33.0",
   "description": "React agent chat threads, composers, approvals, provider accounts and usage views.",
   "type": "module",
   "exports": {
@@ -67,11 +67,11 @@
     "test:visuals": "bun --config=integration.bunfig.toml --conditions=source test ./src/chat/visual-viewport.integration.test.ts"
   },
   "dependencies": {
-    "@adecore/agent-contracts": "0.31.12",
-    "@adecore/editor": "0.31.12",
-    "@adecore/editor-react": "0.31.12",
-    "@adecore/intelligent-ui": "0.31.12",
-    "@adecore/merge": "0.31.12",
+    "@adecore/agent-contracts": "0.33.0",
+    "@adecore/editor": "0.33.0",
+    "@adecore/editor-react": "0.33.0",
+    "@adecore/intelligent-ui": "0.33.0",
+    "@adecore/merge": "0.33.0",
     "@codemirror/commands": "^6.11.1",
     "@codemirror/language": "^6.12.4",
     "@codemirror/state": "^6.7.6",
@@ -84,7 +84,7 @@
     "clsx": "^2.1.1",
     "lucide-react": "^1.47.0",
     "maplibre-gl": "^6.14.0",
-    "mermaid": "^12.2.0",
+    "pele": "1.8.0",
     "react-markdown": "^10.1.0",
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
@@ -94,14 +94,14 @@
     "zustand": "^5.0.15"
   },
   "peerDependencies": {
-    "@adecore/ui": "^0.31.12",
+    "@adecore/ui": "^0.33.0",
     "i18next": "^26.4.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-i18next": "^17.0.15"
   },
   "devDependencies": {
-    "@adecore/ui": "0.31.12",
+    "@adecore/ui": "0.33.0",
     "@types/bun": "^1.4.2",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",

package/src/agents/ModelOptionControl.tsx

@@ -1,6 +1,7 @@
 import type { ModelOptionDescriptor, ModelSelection } from '@adecore/agent-contracts';
 import { Segmented, Switch, Select } from '@adecore/ui';
 import { optionValue } from './model-options';
+import { localizedOption } from './option-words';
 
 // Up to this many choices read at a glance side by side; more go into a menu.
 const MAX_SEGMENTS = 3;
@@ -26,7 +27,8 @@ type ModelOptionControlProps = {
  * descriptors as menu items (`RunSettings`), since there they sit in a menu.
  */
 export function ModelOptionControl(props: ModelOptionControlProps) {
-    const { option, options, layout = 'compact', disabled } = props;
+    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} />;
     }

package/src/agents/option-words.ts

@@ -0,0 +1,27 @@
+import i18next from 'i18next';
+import type { ModelOptionDescriptor } from '@adecore/agent-contracts';
+
+/*
+ * The model catalogs write a model's knobs in English. Those words read in the person's language; a word
+ * that differs from the catalog's is an agent's own and stays as the agent wrote it.
+ */
+function catalogWord(key: string, written: string): string {
+    return i18next.t(key, { lng: 'en', defaultValue: '' }) === written ? i18next.t(key) : written;
+}
+
+export function optionWord(option: ModelOptionDescriptor): string {
+    return catalogWord(`agent-chat:modelOptions.${option.id}.label`, option.label);
+}
+
+export function choiceWord(optionId: string, choice: { id: string; label: string }): string {
+    return catalogWord(`agent-chat:modelOptions.${optionId}.choices.${choice.id}`, choice.label);
+}
+
+/* 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) })) };
+}