@adecore/agents-react 0.31.11 → 0.32.0

package/dist/chat/ui/RunSettings.js

@@ -1,227 +1,1817 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react/compiler-runtime";
 import { Fragment, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import clsx from 'clsx';
-import { Activity, TriangleAlert, ChevronDown, ChevronRight, ChevronUp, FilePen, Gauge, Hand, Search, Settings, Shield, ShieldAlert, SlidersHorizontal } from 'lucide-react';
+import { Activity, TriangleAlert, ChevronDown, ChevronRight, ChevronUp, FilePen, Gauge, Hand, Search, Settings, Shield, ShieldAlert, SlidersHorizontal, Star } from 'lucide-react';
 import { AccountDot } from '../../agents/AccountDot.js';
 import { limitsOfAccount, sessionWindow } from '../../agents/account-limits.js';
 import { canContinueOn } from '../../agents/accounts.js';
 import { AgentIcon } from '../../agents/AgentIcon.js';
 import { modelName, shortModelName } from '../../agents/model-name.js';
 import { ModelMarks } from './ModelMarks.js';
-import { modelsByVendor, searchModels, shortlistOf, wantsModelSearch } from '../logic/picker-entries.js';
+import { favoritesFirst, searchModels, shortlistOf, wantsModelSearch } from '../logic/picker-entries.js';
+import { favoriteModelsOf, toggleFavoriteModel, useChatPreferences } from '../preferences.js';
 import { CONTEXT_OPTION, contextFraction, contextSegments, orderOptions } from '../logic/context-usage.js';
 import { RUNTIME_MODES } from '../runtime-modes.js';
+import { localizedOption } from '../../agents/option-words.js';
 import { formatClock, formatWeekdayClock, isSameDay, formatPercent, formatTokens } from '@adecore/ui/format';
 import { Icon, Menu, Tooltip, useNow } from '@adecore/ui';
 import { useChatHost } from '../../host.js';
+import { evenPace, paceText } from '../../usage/limit-groups.js';
 import { useUsageLimits } from '../../usage/limits.js';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const MINUTE_MS = 60_000;
 const MODE_ICONS = {
-    supervised: Hand,
-    'auto-accept-edits': FilePen,
-    auto: Shield,
-    'full-access': ShieldAlert
+  supervised: Hand,
+  'auto-accept-edits': FilePen,
+  auto: Shield,
+  'full-access': ShieldAlert
 };
 // More choices than this do not fit beside the label, so they go in a submenu of their own.
 const INLINE_CHOICES = 3;
 const PART_COLORS = {
-    toolOutput: 'bg-chart-context-tools',
-    filesRead: 'bg-chart-context-files',
-    conversation: 'bg-chart-context-conversation',
-    system: 'bg-chart-context-system'
+  toolOutput: 'bg-chart-context-tools',
+  filesRead: 'bg-chart-context-files',
+  conversation: 'bg-chart-context-conversation',
+  system: 'bg-chart-context-system'
 };
 const RING_RADIUS = 5;
 const RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS;
 function optionSummary(option, selection) {
-    const value = selection.options[option.id];
-    if (option.type === 'select') {
-        return option.choices.find((choice) => choice.id === (value ?? option.defaultChoice))?.label ?? null;
-    }
-    return (value ?? option.defaultValue) === true ? option.label : null;
+  const value = selection.options[option.id];
+  if (option.type === 'select') {
+    return option.choices.find(choice => choice.id === (value ?? option.defaultChoice))?.label ?? null;
+  }
+  return (value ?? option.defaultValue) === true ? option.label : null;
 }
 function optionIcon(option) {
-    return option.type === 'boolean' ? Gauge : option.id === CONTEXT_OPTION ? Activity : SlidersHorizontal;
+  return option.type === 'boolean' ? Gauge : option.id === CONTEXT_OPTION ? Activity : SlidersHorizontal;
 }
 function contextTone(fraction) {
-    return fraction >= 0.9 ? 'text-status-error' : fraction >= 0.7 ? 'text-status-needs-you' : 'text-text';
+  return fraction >= 0.9 ? 'text-status-error' : fraction >= 0.7 ? 'text-status-needs-you' : 'text-text';
 }
 // A radio group holds one string, so a model is named by its provider and its slug together.
 function modelValue(provider, slug) {
-    return `${provider}/${slug}`;
+  return `${provider}/${slug}`;
 }
 /* Each provider's current or legacy models; a provider with none of them is left out. */
 function modelGroupsOf(providers, legacy) {
-    return providers
-        .map((entry) => ({ entry, models: entry.models.filter((row) => (row.legacy === true) === legacy) }))
-        .filter((group) => group.models.length > 0);
+  return providers.map(entry => ({
+    entry,
+    models: entry.models.filter(row => row.legacy === true === legacy)
+  })).filter(group => group.models.length > 0);
 }
 /*
  * Everything that decides how the next turn runs, behind one pill: the model, its own knobs and the
  * permission mode. Model and effective permissions stay visible as the composer narrows.
  */
-export function RunSettings({ disabled = false, providers, provider, selection, model, runtimeMode, effectiveRuntimeMode, permissionMode, open, onOpenChange, onModel, onOption, onMode, usage, compactDisabled, onCompact, account }) {
-    const { t } = useTranslation('agent-chat');
-    const [query, setQuery] = useState('');
-    const searchRef = useRef(null);
-    const owner = providers.find((entry) => entry.kind === provider);
-    const current = modelName(selection.model, owner?.models);
-    const short = shortModelName(current, owner?.models);
-    const options = orderOptions(model?.options ?? []);
-    const summary = options.flatMap((option) => {
-        const label = optionSummary(option, selection);
-        return label === null ? [] : [{ id: option.id, label, ring: option.id === CONTEXT_OPTION }];
-    });
-    // A CLI without a context choice still fills one, so the ring stands on its own next to the size.
-    const hasContextOption = options.some((option) => option.id === CONTEXT_OPTION);
-    const standaloneContext = !hasContextOption && Boolean(usage.contextWindow);
-    if (standaloneContext) {
-        summary.push({ id: CONTEXT_OPTION, label: formatTokens(usage.contextWindow ?? 0), ring: true });
-    }
-    const grouped = providers.length > 1;
-    const live = modelGroupsOf(providers, false);
-    const legacy = modelGroupsOf(providers, true);
-    const chosenLegacy = owner?.models.find((row) => row.legacy && row.slug === selection.model);
-    const chosenModel = modelValue(provider, selection.model);
-    const shownMode = effectiveRuntimeMode ?? runtimeMode;
-    const fullAccess = shownMode === 'full-access';
-    const permissionFallback = permissionMode !== undefined && effectiveRuntimeMode !== runtimeMode;
+export function RunSettings(t0) {
+  const $ = _c(115);
+  const {
+    disabled: t1,
+    providers,
+    provider,
+    selection,
+    model,
+    runtimeMode,
+    effectiveRuntimeMode,
+    permissionMode,
+    open,
+    onOpenChange,
+    onModel,
+    onOption,
+    onMode,
+    usage,
+    compactDisabled,
+    onCompact,
+    account
+  } = t0;
+  const disabled = t1 === undefined ? false : t1;
+  const {
+    t
+  } = useTranslation("agent-chat");
+  const [query, setQuery] = useState("");
+  const searchRef = useRef(null);
+  let t2;
+  if ($[0] !== provider) {
+    t2 = entry => entry.kind === provider;
+    $[0] = provider;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const owner = providers.find(t2);
+  const current = modelName(selection.model, owner?.models);
+  const short = shortModelName(current, owner?.models);
+  const options = orderOptions((model?.options ?? []).map(localizedOption));
+  let t3;
+  if ($[2] !== selection) {
+    t3 = option => {
+      const label = optionSummary(option, selection);
+      return label === null ? [] : [{
+        id: option.id,
+        label,
+        ring: option.id === CONTEXT_OPTION
+      }];
+    };
+    $[2] = selection;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  const summary = options.flatMap(t3);
+  const hasContextOption = options.some(_temp);
+  const standaloneContext = !hasContextOption && Boolean(usage.contextWindow);
+  if (standaloneContext) {
+    summary.push({
+      id: CONTEXT_OPTION,
+      label: formatTokens(usage.contextWindow ?? 0),
+      ring: true
+    });
+  }
+  const grouped = providers.length > 1;
+  const live = modelGroupsOf(providers, false);
+  const legacy = modelGroupsOf(providers, true);
+  const chosenLegacy = owner?.models.find(row => row.legacy && row.slug === selection.model);
+  let t4;
+  if ($[4] !== provider || $[5] !== selection.model) {
+    t4 = modelValue(provider, selection.model);
+    $[4] = provider;
+    $[5] = selection.model;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  const chosenModel = t4;
+  const shownMode = effectiveRuntimeMode ?? runtimeMode;
+  const fullAccess = shownMode === "full-access";
+  const permissionFallback = permissionMode !== undefined && effectiveRuntimeMode !== runtimeMode;
+  let t5;
+  if ($[7] !== effectiveRuntimeMode || $[8] !== permissionFallback || $[9] !== permissionMode || $[10] !== runtimeMode || $[11] !== t) {
     const effectiveLabel = effectiveRuntimeMode === undefined ? permissionMode : t(`modes.${effectiveRuntimeMode}.label`);
-    const permissionHint = permissionFallback ? t('pickers.mode.effective', { effective: effectiveLabel, requested: t(`modes.${runtimeMode}.label`) }) : null;
-    const chooseModel = (value) => {
-        const slash = value.indexOf('/');
-        onModel(value.slice(0, slash), value.slice(slash + 1));
+    t5 = permissionFallback ? t("pickers.mode.effective", {
+      effective: effectiveLabel,
+      requested: t(`modes.${runtimeMode}.label`)
+    }) : null;
+    $[7] = effectiveRuntimeMode;
+    $[8] = permissionFallback;
+    $[9] = permissionMode;
+    $[10] = runtimeMode;
+    $[11] = t;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  const permissionHint = t5;
+  let t6;
+  if ($[13] !== onModel) {
+    t6 = value => {
+      const slash = value.indexOf("/");
+      onModel(value.slice(0, slash), value.slice(slash + 1));
     };
-    const searchable = wantsModelSearch(providers);
-    const found = query.trim() === '' ? null : searchModels(providers, query);
-    // The menu moves the focus to its popup as it opens, so the search field takes it a frame later.
-    useEffect(() => {
-        if (!open || !searchable) {
-            return;
-        }
-        const frame = requestAnimationFrame(() => searchRef.current?.focus());
-        return () => cancelAnimationFrame(frame);
-    }, [open, searchable]);
-    const changeOpen = (next) => {
-        if (!next) {
-            setQuery('');
-        }
-        onOpenChange(next);
+    $[13] = onModel;
+    $[14] = t6;
+  } else {
+    t6 = $[14];
+  }
+  const chooseModel = t6;
+  let t7;
+  if ($[15] !== providers) {
+    t7 = wantsModelSearch(providers);
+    $[15] = providers;
+    $[16] = t7;
+  } else {
+    t7 = $[16];
+  }
+  const searchable = t7;
+  const favorites = useChatPreferences(_temp2);
+  let t8;
+  if ($[17] !== favorites) {
+    t8 = kind => favoriteModelsOf(favorites, kind);
+    $[17] = favorites;
+    $[18] = t8;
+  } else {
+    t8 = $[18];
+  }
+  const favoritesOf = t8;
+  let t9;
+  if ($[19] !== favoritesOf || $[20] !== providers || $[21] !== query) {
+    t9 = query.trim() === "" ? null : searchModels(providers, query, favoritesOf);
+    $[19] = favoritesOf;
+    $[20] = providers;
+    $[21] = query;
+    $[22] = t9;
+  } else {
+    t9 = $[22];
+  }
+  const found = t9;
+  let t10;
+  let t11;
+  if ($[23] !== open || $[24] !== searchable) {
+    t10 = () => {
+      if (!open || !searchable) {
+        return;
+      }
+      const frame = requestAnimationFrame(() => searchRef.current?.focus());
+      return () => cancelAnimationFrame(frame);
     };
-    // An item the arrow keys moved to has the focus; typing there still goes to the search.
-    const onPopupKey = (event) => {
-        if (!searchable || event.target === searchRef.current || event.metaKey || event.ctrlKey || event.altKey) {
-            return;
-        }
-        const typed = event.key.length === 1 && event.key !== ' ';
-        if (!typed && event.key !== 'Backspace') {
-            return;
-        }
-        event.preventDefault();
-        event.stopPropagation();
-        setQuery((now) => (typed ? now + event.key : now.slice(0, -1)));
-        searchRef.current?.focus();
+    t11 = [open, searchable];
+    $[23] = open;
+    $[24] = searchable;
+    $[25] = t10;
+    $[26] = t11;
+  } else {
+    t10 = $[25];
+    t11 = $[26];
+  }
+  useEffect(t10, t11);
+  let t12;
+  if ($[27] !== onOpenChange) {
+    t12 = next => {
+      if (!next) {
+        setQuery("");
+      }
+      onOpenChange(next);
     };
-    // The menu reads letters as a jump to an item and arrows as moving through them; the field keeps what it types.
-    const onSearchKey = (event) => {
-        if (event.key === 'Escape' && query !== '') {
-            event.preventDefault();
-            event.stopPropagation();
-            setQuery('');
-            return;
-        }
-        if (event.key === 'Enter') {
-            event.preventDefault();
-            const first = found?.[0];
-            if (first !== undefined) {
-                onModel(first.entry.kind, first.models[0].slug);
-                changeOpen(false);
-            }
-            return;
-        }
-        if (event.key !== 'Escape' && event.key !== 'ArrowDown' && event.key !== 'ArrowUp' && event.key !== 'Tab') {
-            event.stopPropagation();
-        }
+    $[27] = onOpenChange;
+    $[28] = t12;
+  } else {
+    t12 = $[28];
+  }
+  const changeOpen = t12;
+  let t13;
+  if ($[29] !== searchable) {
+    t13 = event => {
+      if (!searchable || event.target === searchRef.current || event.metaKey || event.ctrlKey || event.altKey) {
+        return;
+      }
+      const typed = event.key.length === 1 && event.key !== " ";
+      if (!typed && event.key !== "Backspace") {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      setQuery(now => typed ? now + event.key : now.slice(0, -1));
+      searchRef.current?.focus();
     };
-    const modelRow = (entry, row) => (_jsxs(Menu.RadioItem, { value: modelValue(entry.kind, row.slug), closeOnClick: true, children: [_jsx(AgentIcon, { kind: entry.kind, size: 14, className: "shrink-0" }), _jsx("span", { className: "min-w-0 truncate", children: row.name }), _jsx(ModelMarks, { model: row })] }, row.slug));
-    // Every model of one provider, under a label per maker where the provider names them.
-    const byMaker = (entry, models) => modelsByVendor(models).map((row, i, sorted) => (_jsxs(Fragment, { children: [row.vendor !== undefined && sorted[i - 1]?.vendor !== row.vendor && _jsx(Menu.GroupLabel, { children: row.vendor }), modelRow(entry, row)] }, row.slug)));
-    // A provider with many models shows the default and the chosen one, with all of them one submenu away.
-    const providerModels = (entry, models) => {
-        const shortlist = shortlistOf(entry.kind, models, { provider, model: selection.model });
-        if (shortlist === null) {
-            return models.map((row) => modelRow(entry, row));
+    $[29] = searchable;
+    $[30] = t13;
+  } else {
+    t13 = $[30];
+  }
+  const onPopupKey = t13;
+  let t14;
+  if ($[31] !== changeOpen || $[32] !== found?.[0] || $[33] !== onModel || $[34] !== query) {
+    t14 = event_0 => {
+      if (event_0.key === "Escape" && query !== "") {
+        event_0.preventDefault();
+        event_0.stopPropagation();
+        setQuery("");
+        return;
+      }
+      if (event_0.key === "Enter") {
+        event_0.preventDefault();
+        const first = found?.[0];
+        if (first !== undefined) {
+          onModel(first.entry.kind, first.models[0].slug);
+          changeOpen(false);
         }
-        return (_jsxs(_Fragment, { children: [shortlist.map((row) => modelRow(entry, row)), _jsxs(Menu.SubmenuRoot, { children: [_jsx(Menu.SubmenuTrigger, { className: "text-text-muted", children: t('pickers.model.allGroup', { count: models.length }) }), _jsx(Menu.Popup, { className: "w-80", children: _jsx(Menu.RadioGroup, { value: chosenModel, onValueChange: chooseModel, children: byMaker(entry, models) }) })] })] }));
+        return;
+      }
+      if (event_0.key !== "Escape" && event_0.key !== "ArrowDown" && event_0.key !== "ArrowUp" && event_0.key !== "Tab") {
+        event_0.stopPropagation();
+      }
+    };
+    $[31] = changeOpen;
+    $[32] = found?.[0];
+    $[33] = onModel;
+    $[34] = query;
+    $[35] = t14;
+  } else {
+    t14 = $[35];
+  }
+  const onSearchKey = t14;
+  let t15;
+  if ($[36] !== favoritesOf || $[37] !== t) {
+    t15 = (entry_0, row_0) => {
+      const starred = favoritesOf(entry_0.kind).has(row_0.slug);
+      return /*#__PURE__*/_jsxs(Menu.Row, {
+        "aria-label": row_0.name,
+        children: [/*#__PURE__*/_jsxs(Menu.RadioItem, {
+          value: modelValue(entry_0.kind, row_0.slug),
+          closeOnClick: true,
+          children: [/*#__PURE__*/_jsx(AgentIcon, {
+            kind: entry_0.kind,
+            size: 14,
+            className: "shrink-0"
+          }), /*#__PURE__*/_jsx("span", {
+            className: "min-w-0 break-words",
+            children: row_0.name
+          }), /*#__PURE__*/_jsx(ModelMarks, {
+            model: row_0
+          })]
+        }), /*#__PURE__*/_jsx(Menu.RowAction, {
+          icon: Star,
+          label: starred ? t("pickers.model.unstar") : t("pickers.model.star"),
+          iconClassName: starred ? "fill-current text-accent" : "text-text-faint",
+          closeOnClick: false,
+          onClick: () => toggleFavoriteModel(entry_0.kind, row_0.slug)
+        })]
+      }, row_0.slug);
     };
-    const modelGroups = (groups) => groups.map(({ entry, models }) => (_jsxs(Menu.Group, { children: [grouped && (_jsxs(Menu.GroupLabel, { className: "flex items-center gap-1.5", children: [_jsx(AgentIcon, { kind: entry.kind, size: 12 }), entry.name] })), providerModels(entry, models)] }, entry.kind)));
-    return (_jsxs(Menu.Root, { open: open, onOpenChange: changeOpen, highlightItemOnHover: !searchable, children: [_jsx(Tooltip, { label: permissionHint ?? t('pickers.settings.title'), kbd: "/model", children: _jsxs(Menu.Trigger, { disabled: disabled, className: clsx('flex h-8 min-w-0 items-center gap-2 rounded-full border pr-3 pl-2.5 text-xs whitespace-nowrap text-text-muted @max-xl/composer:gap-1.5 @max-sm/composer:pr-2.5', open ? 'border-accent bg-accent-soft' : 'border-border hover:bg-surface-hover'), children: [_jsx(AgentIcon, { kind: provider, size: 14, className: "shrink-0" }), _jsxs("span", { className: "flex min-w-0 items-center gap-2 overflow-hidden @max-xl/composer:gap-1.5", children: [_jsx("span", { className: "truncate font-medium text-text @max-xl/composer:hidden", children: current }), _jsx("span", { className: "hidden truncate font-medium text-text @max-xl/composer:inline", children: short }), account !== null && (_jsxs("span", { className: "flex min-w-0 items-center gap-2 @max-xl/composer:gap-1.5", children: [_jsx("span", { className: "shrink-0 text-text-faint", children: "\u00B7" }), _jsx(AccountDot, { color: account.choice.current?.account.color }), _jsx("span", { className: "truncate @max-xl/composer:hidden", children: account.choice.current === null ? account.choice.currentId : account.choice.nameOf(account.choice.current) })] })), summary.map((entry) => (_jsxs("span", { className: clsx('flex shrink-0 items-center gap-2 @max-xl/composer:gap-1.5', !entry.ring && '@max-xl/composer:hidden'), children: [_jsx("span", { className: "text-text-faint", children: "\u00B7" }), entry.ring && _jsx(ContextRing, { usage: usage }), _jsx("span", { className: clsx(entry.ring && '@max-sm/composer:hidden'), children: entry.label })] }, entry.id))), _jsx("span", { className: "shrink-0 text-text-faint", children: "\u00B7" }), _jsxs("span", { className: clsx('flex shrink-0 items-center gap-1', fullAccess && 'text-status-needs-you'), children: [_jsx(Icon, { icon: MODE_ICONS[shownMode], size: 12, className: "shrink-0" }), _jsx("span", { children: effectiveRuntimeMode === undefined && permissionMode !== undefined ? permissionMode : t(`modes.${shownMode}.short`) }), permissionFallback && _jsx(Icon, { icon: TriangleAlert, size: 12, className: "shrink-0 text-status-needs-you" })] })] }), _jsx(Icon, { icon: open ? ChevronUp : ChevronDown, size: 12, className: "shrink-0 @max-sm/composer:hidden" })] }) }), _jsxs(Menu.Popup, { side: "top", sideOffset: 8, align: "start", className: "w-80", onKeyDownCapture: onPopupKey, children: [providers.length === 0 && _jsx("div", { className: "px-2.5 py-3 text-xs text-text-faint", children: t('pickers.model.noProvider') }), searchable && (_jsxs("div", { className: "flex items-center gap-2 border-b border-border px-2.5", children: [_jsx(Icon, { icon: Search, size: 14, className: "shrink-0 text-text-faint" }), _jsx("input", { ref: searchRef, className: "h-8 w-full bg-transparent text-sm text-text outline-none placeholder:text-text-faint", placeholder: t('pickers.model.search'), "aria-label": t('pickers.model.search'), spellCheck: false, value: query, onChange: (event) => setQuery(event.target.value), onKeyDown: onSearchKey })] })), found !== null && found.length === 0 && _jsx("div", { className: "px-2.5 py-3 text-xs text-text-faint", children: t('pickers.model.noMatch') }), found !== null && found.length > 0 && (_jsx(Menu.RadioGroup, { value: chosenModel, onValueChange: chooseModel, children: found.map(({ entry, models }) => (_jsxs(Menu.Group, { children: [grouped && (_jsxs(Menu.GroupLabel, { className: "flex items-center gap-1.5", children: [_jsx(AgentIcon, { kind: entry.kind, size: 12 }), entry.name] })), byMaker(entry, models)] }, entry.kind))) })), found === null && (_jsxs(_Fragment, { children: [_jsx(Menu.RadioGroup, { value: chosenModel, onValueChange: chooseModel, children: modelGroups(live) }), legacy.length > 0 && (_jsxs(Menu.SubmenuRoot, { children: [_jsxs(Menu.SubmenuTrigger, { className: "text-text-muted", children: [_jsx("span", { className: "min-w-0 grow truncate", children: t('pickers.model.legacyGroup', { count: legacy.reduce((count, group) => count + group.models.length, 0) }) }), chosenLegacy && _jsx(Menu.Hint, { className: "truncate", children: chosenLegacy.name })] }), _jsx(Menu.Popup, { className: "min-w-56", children: _jsx(Menu.RadioGroup, { value: chosenModel, onValueChange: chooseModel, children: modelGroups(legacy) }) })] })), _jsx(Menu.Separator, {}), account !== null && _jsx(AccountSubmenu, { provider: provider, account: account }), _jsxs(Menu.SubmenuRoot, { children: [_jsxs(Menu.SubmenuTrigger, { className: "text-text-muted", children: [_jsx(Icon, { icon: MODE_ICONS[runtimeMode], size: 14, className: clsx('shrink-0', fullAccess ? 'text-status-needs-you' : 'text-text-faint') }), _jsx("span", { className: "min-w-0 grow truncate", children: t('pickers.mode.label') }), _jsx(Menu.Hint, { className: "truncate", children: t(`modes.${runtimeMode}.label`) })] }), _jsxs(Menu.Popup, { className: "w-72", children: [permissionHint !== null && _jsx("p", { className: "px-2.5 py-2 text-xs text-text-muted", children: permissionHint }), _jsx(Menu.RadioGroup, { value: runtimeMode, onValueChange: (mode) => onMode(mode), children: RUNTIME_MODES.map((mode) => (_jsxs(Menu.RadioItem, { value: mode, className: "items-start", children: [_jsx("span", { className: "grid h-lh w-4 shrink-0 place-items-center", children: _jsx(Icon, { icon: MODE_ICONS[mode], size: 14, className: mode === 'full-access' ? 'text-status-needs-you' : 'text-text-faint' }) }), _jsxs("span", { className: "flex min-w-0 grow flex-col", children: [t(`modes.${mode}.label`), _jsx("span", { className: "text-xs text-text-faint", children: t(`modes.${mode}.hint`) })] })] }, mode))) })] })] }), options.map((option) => (_jsx(OptionRow, { option: option, selection: selection, onChange: (value) => onOption(option.id, value) }, option.id))), (hasContextOption || standaloneContext) && (_jsxs(_Fragment, { children: [_jsx(Menu.Separator, {}), _jsx(ContextUsage, { usage: usage, disabled: compactDisabled, onCompact: onCompact })] }))] }))] })] }));
+    $[36] = favoritesOf;
+    $[37] = t;
+    $[38] = t15;
+  } else {
+    t15 = $[38];
+  }
+  const modelRow = t15;
+  let t16;
+  if ($[39] !== favoritesOf || $[40] !== modelRow) {
+    t16 = (entry_1, models) => {
+      const starred_0 = favoritesOf(entry_1.kind);
+      return favoritesFirst(models, starred_0).map((row_1, i, sorted) => {
+        const previous = sorted[i - 1];
+        const labeled = row_1.vendor !== undefined && !starred_0.has(row_1.slug) && (previous === undefined || starred_0.has(previous.slug) || previous.vendor !== row_1.vendor);
+        return /*#__PURE__*/_jsxs(Fragment, {
+          children: [labeled && /*#__PURE__*/_jsx(Menu.GroupLabel, {
+            children: row_1.vendor
+          }), modelRow(entry_1, row_1)]
+        }, row_1.slug);
+      });
+    };
+    $[39] = favoritesOf;
+    $[40] = modelRow;
+    $[41] = t16;
+  } else {
+    t16 = $[41];
+  }
+  const byMaker = t16;
+  let t17;
+  if ($[42] !== byMaker || $[43] !== chooseModel || $[44] !== chosenModel || $[45] !== favoritesOf || $[46] !== modelRow || $[47] !== provider || $[48] !== selection.model || $[49] !== t) {
+    t17 = (entry_2, models_0) => {
+      const starred_1 = favoritesOf(entry_2.kind);
+      const shortlist = shortlistOf(entry_2.kind, models_0, {
+        provider,
+        model: selection.model
+      }, starred_1);
+      if (shortlist === null) {
+        return [...models_0.filter(row_2 => starred_1.has(row_2.slug)), ...models_0.filter(row_3 => !starred_1.has(row_3.slug))].map(row_4 => modelRow(entry_2, row_4));
+      }
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [shortlist.map(row_5 => modelRow(entry_2, row_5)), /*#__PURE__*/_jsxs(Menu.SubmenuRoot, {
+          children: [/*#__PURE__*/_jsx(Menu.SubmenuTrigger, {
+            className: "text-text-muted",
+            children: t("pickers.model.allGroup", {
+              count: models_0.length
+            })
+          }), /*#__PURE__*/_jsx(Menu.Popup, {
+            className: "w-80",
+            children: /*#__PURE__*/_jsx(Menu.RadioGroup, {
+              value: chosenModel,
+              onValueChange: chooseModel,
+              children: byMaker(entry_2, models_0)
+            })
+          })]
+        })]
+      });
+    };
+    $[42] = byMaker;
+    $[43] = chooseModel;
+    $[44] = chosenModel;
+    $[45] = favoritesOf;
+    $[46] = modelRow;
+    $[47] = provider;
+    $[48] = selection.model;
+    $[49] = t;
+    $[50] = t17;
+  } else {
+    t17 = $[50];
+  }
+  const providerModels = t17;
+  let t18;
+  if ($[51] !== grouped || $[52] !== providerModels) {
+    t18 = groups => groups.map(t19 => {
+      const {
+        entry: entry_3,
+        models: models_1
+      } = t19;
+      return /*#__PURE__*/_jsxs(Menu.Group, {
+        children: [grouped && /*#__PURE__*/_jsxs(Menu.GroupLabel, {
+          className: "flex items-center gap-1.5",
+          children: [/*#__PURE__*/_jsx(AgentIcon, {
+            kind: entry_3.kind,
+            size: 12
+          }), entry_3.name]
+        }), providerModels(entry_3, models_1)]
+      }, entry_3.kind);
+    });
+    $[51] = grouped;
+    $[52] = providerModels;
+    $[53] = t18;
+  } else {
+    t18 = $[53];
+  }
+  const modelGroups = t18;
+  let t19;
+  if ($[54] !== permissionHint || $[55] !== t) {
+    t19 = permissionHint ?? t("pickers.settings.title");
+    $[54] = permissionHint;
+    $[55] = t;
+    $[56] = t19;
+  } else {
+    t19 = $[56];
+  }
+  const t20 = open ? "border-accent bg-accent-soft" : "border-border hover:bg-surface-hover";
+  let t21;
+  if ($[57] !== t20) {
+    t21 = clsx("flex h-8 min-w-0 items-center gap-2 rounded-full border pr-3 pl-2.5 text-xs whitespace-nowrap text-text-muted @max-xl/composer:gap-1.5 @max-sm/composer:pr-2.5", t20);
+    $[57] = t20;
+    $[58] = t21;
+  } else {
+    t21 = $[58];
+  }
+  let t22;
+  if ($[59] !== provider) {
+    t22 = /*#__PURE__*/_jsx(AgentIcon, {
+      kind: provider,
+      size: 14,
+      className: "shrink-0"
+    });
+    $[59] = provider;
+    $[60] = t22;
+  } else {
+    t22 = $[60];
+  }
+  let t23;
+  if ($[61] !== current) {
+    t23 = /*#__PURE__*/_jsx("span", {
+      className: "truncate font-medium text-text @max-xl/composer:hidden",
+      children: current
+    });
+    $[61] = current;
+    $[62] = t23;
+  } else {
+    t23 = $[62];
+  }
+  let t24;
+  if ($[63] !== short) {
+    t24 = /*#__PURE__*/_jsx("span", {
+      className: "hidden truncate font-medium text-text @max-xl/composer:inline",
+      children: short
+    });
+    $[63] = short;
+    $[64] = t24;
+  } else {
+    t24 = $[64];
+  }
+  let t25;
+  if ($[65] !== account) {
+    t25 = account !== null && /*#__PURE__*/_jsxs("span", {
+      className: "flex min-w-0 items-center gap-2 @max-xl/composer:gap-1.5",
+      children: [/*#__PURE__*/_jsx("span", {
+        className: "shrink-0 text-text-faint",
+        children: "\xB7"
+      }), /*#__PURE__*/_jsx(AccountDot, {
+        color: account.choice.current?.account.color
+      }), /*#__PURE__*/_jsx("span", {
+        className: "truncate @max-xl/composer:hidden",
+        children: account.choice.current === null ? account.choice.currentId : account.choice.nameOf(account.choice.current)
+      })]
+    });
+    $[65] = account;
+    $[66] = t25;
+  } else {
+    t25 = $[66];
+  }
+  let t26;
+  if ($[67] !== usage) {
+    t26 = entry_4 => /*#__PURE__*/_jsxs("span", {
+      className: clsx("flex shrink-0 items-center gap-2 @max-xl/composer:gap-1.5", !entry_4.ring && "@max-xl/composer:hidden"),
+      children: [/*#__PURE__*/_jsx("span", {
+        className: "text-text-faint",
+        children: "\xB7"
+      }), entry_4.ring && /*#__PURE__*/_jsx(ContextRing, {
+        usage: usage
+      }), /*#__PURE__*/_jsx("span", {
+        className: clsx(entry_4.ring && "@max-sm/composer:hidden"),
+        children: entry_4.label
+      })]
+    }, entry_4.id);
+    $[67] = usage;
+    $[68] = t26;
+  } else {
+    t26 = $[68];
+  }
+  const t27 = summary.map(t26);
+  let t28;
+  if ($[69] === Symbol.for("react.memo_cache_sentinel")) {
+    t28 = /*#__PURE__*/_jsx("span", {
+      className: "shrink-0 text-text-faint",
+      children: "\xB7"
+    });
+    $[69] = t28;
+  } else {
+    t28 = $[69];
+  }
+  const t29 = fullAccess && "text-status-needs-you";
+  let t30;
+  if ($[70] !== t29) {
+    t30 = clsx("flex shrink-0 items-center gap-1", t29);
+    $[70] = t29;
+    $[71] = t30;
+  } else {
+    t30 = $[71];
+  }
+  const t31 = MODE_ICONS[shownMode];
+  let t32;
+  if ($[72] !== t31) {
+    t32 = /*#__PURE__*/_jsx(Icon, {
+      icon: t31,
+      size: 12,
+      className: "shrink-0"
+    });
+    $[72] = t31;
+    $[73] = t32;
+  } else {
+    t32 = $[73];
+  }
+  let t33;
+  if ($[74] !== effectiveRuntimeMode || $[75] !== permissionMode || $[76] !== shownMode || $[77] !== t) {
+    t33 = effectiveRuntimeMode === undefined && permissionMode !== undefined ? permissionMode : t(`modes.${shownMode}.short`);
+    $[74] = effectiveRuntimeMode;
+    $[75] = permissionMode;
+    $[76] = shownMode;
+    $[77] = t;
+    $[78] = t33;
+  } else {
+    t33 = $[78];
+  }
+  let t34;
+  if ($[79] !== t33) {
+    t34 = /*#__PURE__*/_jsx("span", {
+      children: t33
+    });
+    $[79] = t33;
+    $[80] = t34;
+  } else {
+    t34 = $[80];
+  }
+  let t35;
+  if ($[81] !== permissionFallback) {
+    t35 = permissionFallback && /*#__PURE__*/_jsx(Icon, {
+      icon: TriangleAlert,
+      size: 12,
+      className: "shrink-0 text-status-needs-you"
+    });
+    $[81] = permissionFallback;
+    $[82] = t35;
+  } else {
+    t35 = $[82];
+  }
+  let t36;
+  if ($[83] !== t30 || $[84] !== t32 || $[85] !== t34 || $[86] !== t35) {
+    t36 = /*#__PURE__*/_jsxs("span", {
+      className: t30,
+      children: [t32, t34, t35]
+    });
+    $[83] = t30;
+    $[84] = t32;
+    $[85] = t34;
+    $[86] = t35;
+    $[87] = t36;
+  } else {
+    t36 = $[87];
+  }
+  const t37 = open ? ChevronUp : ChevronDown;
+  let t38;
+  if ($[88] !== t37) {
+    t38 = /*#__PURE__*/_jsx(Icon, {
+      icon: t37,
+      size: 12,
+      className: "shrink-0 @max-sm/composer:hidden"
+    });
+    $[88] = t37;
+    $[89] = t38;
+  } else {
+    t38 = $[89];
+  }
+  const t39 = Menu;
+  const t40 = "top";
+  const t41 = 8;
+  const t42 = "start";
+  const t43 = "w-80";
+  let t44;
+  if ($[90] !== providers.length || $[91] !== t) {
+    t44 = providers.length === 0 && /*#__PURE__*/_jsx("div", {
+      className: "px-2.5 py-3 text-xs text-text-faint",
+      children: t("pickers.model.noProvider")
+    });
+    $[90] = providers.length;
+    $[91] = t;
+    $[92] = t44;
+  } else {
+    t44 = $[92];
+  }
+  let t45;
+  if ($[93] !== onSearchKey || $[94] !== query || $[95] !== searchable || $[96] !== t) {
+    t45 = searchable && /*#__PURE__*/_jsxs("div", {
+      className: "flex items-center gap-2 border-b border-border px-2.5",
+      children: [/*#__PURE__*/_jsx(Icon, {
+        icon: Search,
+        size: 14,
+        className: "shrink-0 text-text-faint"
+      }), /*#__PURE__*/_jsx("input", {
+        ref: searchRef,
+        className: "h-8 w-full bg-transparent text-sm text-text outline-none placeholder:text-text-faint",
+        placeholder: t("pickers.model.search"),
+        "aria-label": t("pickers.model.search"),
+        spellCheck: false,
+        value: query,
+        onChange: event_1 => setQuery(event_1.target.value),
+        onKeyDown: onSearchKey
+      })]
+    });
+    $[93] = onSearchKey;
+    $[94] = query;
+    $[95] = searchable;
+    $[96] = t;
+    $[97] = t45;
+  } else {
+    t45 = $[97];
+  }
+  let t46;
+  if ($[98] !== found || $[99] !== t) {
+    t46 = found !== null && found.length === 0 && /*#__PURE__*/_jsx("div", {
+      className: "px-2.5 py-3 text-xs text-text-faint",
+      children: t("pickers.model.noMatch")
+    });
+    $[98] = found;
+    $[99] = t;
+    $[100] = t46;
+  } else {
+    t46 = $[100];
+  }
+  let t47;
+  if ($[101] !== byMaker || $[102] !== chooseModel || $[103] !== chosenModel || $[104] !== found || $[105] !== grouped) {
+    t47 = found !== null && found.length > 0 && /*#__PURE__*/_jsx(Menu.RadioGroup, {
+      value: chosenModel,
+      onValueChange: chooseModel,
+      children: found.map(t48 => {
+        const {
+          entry: entry_5,
+          models: models_2
+        } = t48;
+        return /*#__PURE__*/_jsxs(Menu.Group, {
+          children: [grouped && /*#__PURE__*/_jsxs(Menu.GroupLabel, {
+            className: "flex items-center gap-1.5",
+            children: [/*#__PURE__*/_jsx(AgentIcon, {
+              kind: entry_5.kind,
+              size: 12
+            }), entry_5.name]
+          }), byMaker(entry_5, models_2)]
+        }, entry_5.kind);
+      })
+    });
+    $[101] = byMaker;
+    $[102] = chooseModel;
+    $[103] = chosenModel;
+    $[104] = found;
+    $[105] = grouped;
+    $[106] = t47;
+  } else {
+    t47 = $[106];
+  }
+  const t48 = found === null && /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Menu.RadioGroup, {
+      value: chosenModel,
+      onValueChange: chooseModel,
+      children: modelGroups(live)
+    }), legacy.length > 0 && /*#__PURE__*/_jsxs(Menu.SubmenuRoot, {
+      children: [/*#__PURE__*/_jsxs(Menu.SubmenuTrigger, {
+        className: "text-text-muted",
+        children: [/*#__PURE__*/_jsx("span", {
+          className: "min-w-0 grow truncate",
+          children: t("pickers.model.legacyGroup", {
+            count: legacy.reduce(_temp3, 0)
+          })
+        }), chosenLegacy && /*#__PURE__*/_jsx(Menu.Hint, {
+          className: "truncate",
+          children: chosenLegacy.name
+        })]
+      }), /*#__PURE__*/_jsx(Menu.Popup, {
+        className: "min-w-56",
+        children: /*#__PURE__*/_jsx(Menu.RadioGroup, {
+          value: chosenModel,
+          onValueChange: chooseModel,
+          children: modelGroups(legacy)
+        })
+      })]
+    }), /*#__PURE__*/_jsx(Menu.Separator, {}), account !== null && /*#__PURE__*/_jsx(AccountSubmenu, {
+      provider: provider,
+      account: account
+    }), /*#__PURE__*/_jsxs(Menu.SubmenuRoot, {
+      children: [/*#__PURE__*/_jsxs(Menu.SubmenuTrigger, {
+        className: "text-text-muted",
+        children: [/*#__PURE__*/_jsx(Icon, {
+          icon: MODE_ICONS[runtimeMode],
+          size: 14,
+          className: clsx("shrink-0", fullAccess ? "text-status-needs-you" : "text-text-faint")
+        }), /*#__PURE__*/_jsx("span", {
+          className: "min-w-0 grow truncate",
+          children: t("pickers.mode.label")
+        }), /*#__PURE__*/_jsx(Menu.Hint, {
+          className: "truncate",
+          children: t(`modes.${runtimeMode}.label`)
+        })]
+      }), /*#__PURE__*/_jsxs(Menu.Popup, {
+        className: "w-72",
+        children: [permissionHint !== null && /*#__PURE__*/_jsx("p", {
+          className: "px-2.5 py-2 text-xs text-text-muted",
+          children: permissionHint
+        }), /*#__PURE__*/_jsx(Menu.RadioGroup, {
+          value: runtimeMode,
+          onValueChange: mode => onMode(mode),
+          children: RUNTIME_MODES.map(mode_0 => /*#__PURE__*/_jsxs(Menu.RadioItem, {
+            value: mode_0,
+            className: "items-start",
+            children: [/*#__PURE__*/_jsx("span", {
+              className: "grid h-lh w-4 shrink-0 place-items-center",
+              children: /*#__PURE__*/_jsx(Icon, {
+                icon: MODE_ICONS[mode_0],
+                size: 14,
+                className: mode_0 === "full-access" ? "text-status-needs-you" : "text-text-faint"
+              })
+            }), /*#__PURE__*/_jsxs("span", {
+              className: "flex min-w-0 grow flex-col",
+              children: [t(`modes.${mode_0}.label`), /*#__PURE__*/_jsx("span", {
+                className: "text-xs text-text-faint",
+                children: t(`modes.${mode_0}.hint`)
+              })]
+            })]
+          }, mode_0))
+        })]
+      })]
+    }), options.map(option_1 => /*#__PURE__*/_jsx(OptionRow, {
+      option: option_1,
+      selection: selection,
+      onChange: value_0 => onOption(option_1.id, value_0)
+    }, option_1.id)), (hasContextOption || standaloneContext) && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Menu.Separator, {}), /*#__PURE__*/_jsx(ContextUsage, {
+        usage: usage,
+        disabled: compactDisabled,
+        onCompact: onCompact
+      })]
+    })]
+  });
+  let t49;
+  if ($[107] !== onPopupKey || $[108] !== t39.Popup || $[109] !== t44 || $[110] !== t45 || $[111] !== t46 || $[112] !== t47 || $[113] !== t48) {
+    t49 = /*#__PURE__*/_jsxs(t39.Popup, {
+      side: t40,
+      sideOffset: t41,
+      align: t42,
+      className: t43,
+      onKeyDownCapture: onPopupKey,
+      children: [t44, t45, t46, t47, t48]
+    });
+    $[107] = onPopupKey;
+    $[108] = t39.Popup;
+    $[109] = t44;
+    $[110] = t45;
+    $[111] = t46;
+    $[112] = t47;
+    $[113] = t48;
+    $[114] = t49;
+  } else {
+    t49 = $[114];
+  }
+  return /*#__PURE__*/_jsxs(Menu.Root, {
+    open: open,
+    onOpenChange: changeOpen,
+    highlightItemOnHover: !searchable,
+    children: [/*#__PURE__*/_jsx(Tooltip, {
+      label: t19,
+      kbd: "/model",
+      children: /*#__PURE__*/_jsxs(Menu.Trigger, {
+        disabled: disabled,
+        className: t21,
+        children: [t22, /*#__PURE__*/_jsxs("span", {
+          className: "flex min-w-0 items-center gap-2 overflow-hidden @max-xl/composer:gap-1.5",
+          children: [t23, t24, t25, t27, t28, t36]
+        }), t38]
+      })
+    }), t49]
+  });
 }
 /* Red where a window is nearly spent, amber where it is worth knowing, as the usage bars have it. */
+function _temp3(count, group) {
+  return count + group.models.length;
+}
+function _temp2(preferences) {
+  return preferences.favoriteModels;
+}
+function _temp(option_0) {
+  return option_0.id === CONTEXT_OPTION;
+}
 function sessionTone(used) {
-    return used >= 0.9
-        ? { bar: 'bg-status-error', text: 'text-status-error' }
-        : used >= 0.7
-            ? { bar: 'bg-status-needs-you', text: 'text-status-needs-you' }
-            : { bar: 'bg-text-muted', text: 'text-text-muted' };
+  return used >= 0.9 ? {
+    bar: 'bg-status-error',
+    text: 'text-status-error'
+  } : used >= 0.7 ? {
+    bar: 'bg-status-needs-you',
+    text: 'text-status-needs-you'
+  } : {
+    bar: 'bg-text-muted',
+    text: 'text-text-muted'
+  };
 }
 /*
  * The account the next turn runs under, for the chat's own CLI. Before the first turn any of them;
  * after it one that reads the conversation, since the others would start it over, and a fork is how
  * the conversation goes along to those. A switch applies from the next turn.
  */
-function AccountSubmenu({ provider, account }) {
-    const host = useChatHost();
-    const { t } = useTranslation('agent-chat');
-    const { choice, started, onPick } = account;
-    return (_jsxs(Menu.SubmenuRoot, { children: [_jsxs(Menu.SubmenuTrigger, { className: "text-text-muted", children: [_jsx("span", { className: "grid w-3.5 shrink-0 place-items-center", children: _jsx(AccountDot, { color: choice.current?.account.color }) }), _jsx("span", { className: "min-w-0 grow truncate", children: t('pickers.account.label') }), _jsx(Menu.Hint, { className: "truncate", children: choice.current === null ? choice.currentId : choice.nameOf(choice.current) })] }), _jsxs(Menu.Popup, { className: "min-w-64", children: [_jsxs(Menu.Group, { children: [_jsxs(Menu.GroupLabel, { className: "flex items-center gap-1.5", children: [_jsx(AgentIcon, { kind: provider, size: 12 }), choice.providerName] }), _jsx(Menu.RadioGroup, { value: choice.currentId, onValueChange: (id) => onPick(id), children: _jsx(AccountRows, { choice: choice, locked: (id) => started && !canContinueOn(choice.accounts, provider, choice.currentId, id) }) })] }), _jsx(Menu.Separator, {}), _jsxs(Menu.Item, { className: "text-text-muted", onClick: () => host.openSettings('providers'), children: [_jsx(Icon, { icon: Settings, size: 14, className: "shrink-0 text-text-faint" }), t('pickers.account.manage')] })] })] }));
+function AccountSubmenu(t0) {
+  const $ = _c(51);
+  const {
+    provider,
+    account
+  } = t0;
+  const host = useChatHost();
+  const {
+    t
+  } = useTranslation("agent-chat");
+  const {
+    choice,
+    started,
+    onPick
+  } = account;
+  const t1 = choice.current?.account.color;
+  let t2;
+  if ($[0] !== t1) {
+    t2 = /*#__PURE__*/_jsx("span", {
+      className: "grid w-3.5 shrink-0 place-items-center",
+      children: /*#__PURE__*/_jsx(AccountDot, {
+        color: t1
+      })
+    });
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  let t3;
+  if ($[2] !== t) {
+    t3 = t("pickers.account.label");
+    $[2] = t;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] !== t3) {
+    t4 = /*#__PURE__*/_jsx("span", {
+      className: "min-w-0 grow truncate",
+      children: t3
+    });
+    $[4] = t3;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  let t5;
+  if ($[6] !== choice) {
+    t5 = choice.current === null ? choice.currentId : choice.nameOf(choice.current);
+    $[6] = choice;
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  let t6;
+  if ($[8] !== t5) {
+    t6 = /*#__PURE__*/_jsx(Menu.Hint, {
+      className: "truncate",
+      children: t5
+    });
+    $[8] = t5;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  let t7;
+  if ($[10] !== t2 || $[11] !== t4 || $[12] !== t6) {
+    t7 = /*#__PURE__*/_jsxs(Menu.SubmenuTrigger, {
+      className: "text-text-muted",
+      children: [t2, t4, t6]
+    });
+    $[10] = t2;
+    $[11] = t4;
+    $[12] = t6;
+    $[13] = t7;
+  } else {
+    t7 = $[13];
+  }
+  let t8;
+  if ($[14] !== provider) {
+    t8 = /*#__PURE__*/_jsx(AgentIcon, {
+      kind: provider,
+      size: 12
+    });
+    $[14] = provider;
+    $[15] = t8;
+  } else {
+    t8 = $[15];
+  }
+  let t9;
+  if ($[16] !== choice.providerName || $[17] !== t8) {
+    t9 = /*#__PURE__*/_jsxs(Menu.GroupLabel, {
+      className: "flex items-center gap-1.5",
+      children: [t8, choice.providerName]
+    });
+    $[16] = choice.providerName;
+    $[17] = t8;
+    $[18] = t9;
+  } else {
+    t9 = $[18];
+  }
+  let t10;
+  if ($[19] !== onPick) {
+    t10 = id => onPick(id);
+    $[19] = onPick;
+    $[20] = t10;
+  } else {
+    t10 = $[20];
+  }
+  let t11;
+  if ($[21] !== choice.accounts || $[22] !== choice.currentId || $[23] !== provider || $[24] !== started) {
+    t11 = id_0 => started && !canContinueOn(choice.accounts, provider, choice.currentId, id_0);
+    $[21] = choice.accounts;
+    $[22] = choice.currentId;
+    $[23] = provider;
+    $[24] = started;
+    $[25] = t11;
+  } else {
+    t11 = $[25];
+  }
+  let t12;
+  if ($[26] !== choice || $[27] !== t11) {
+    t12 = /*#__PURE__*/_jsx(AccountRows, {
+      choice: choice,
+      locked: t11
+    });
+    $[26] = choice;
+    $[27] = t11;
+    $[28] = t12;
+  } else {
+    t12 = $[28];
+  }
+  let t13;
+  if ($[29] !== choice.currentId || $[30] !== t10 || $[31] !== t12) {
+    t13 = /*#__PURE__*/_jsx(Menu.RadioGroup, {
+      value: choice.currentId,
+      onValueChange: t10,
+      children: t12
+    });
+    $[29] = choice.currentId;
+    $[30] = t10;
+    $[31] = t12;
+    $[32] = t13;
+  } else {
+    t13 = $[32];
+  }
+  let t14;
+  if ($[33] !== t13 || $[34] !== t9) {
+    t14 = /*#__PURE__*/_jsxs(Menu.Group, {
+      children: [t9, t13]
+    });
+    $[33] = t13;
+    $[34] = t9;
+    $[35] = t14;
+  } else {
+    t14 = $[35];
+  }
+  let t15;
+  if ($[36] === Symbol.for("react.memo_cache_sentinel")) {
+    t15 = /*#__PURE__*/_jsx(Menu.Separator, {});
+    $[36] = t15;
+  } else {
+    t15 = $[36];
+  }
+  let t16;
+  if ($[37] !== host) {
+    t16 = () => host.openSettings("providers");
+    $[37] = host;
+    $[38] = t16;
+  } else {
+    t16 = $[38];
+  }
+  let t17;
+  if ($[39] === Symbol.for("react.memo_cache_sentinel")) {
+    t17 = /*#__PURE__*/_jsx(Icon, {
+      icon: Settings,
+      size: 14,
+      className: "shrink-0 text-text-faint"
+    });
+    $[39] = t17;
+  } else {
+    t17 = $[39];
+  }
+  let t18;
+  if ($[40] !== t) {
+    t18 = t("pickers.account.manage");
+    $[40] = t;
+    $[41] = t18;
+  } else {
+    t18 = $[41];
+  }
+  let t19;
+  if ($[42] !== t16 || $[43] !== t18) {
+    t19 = /*#__PURE__*/_jsxs(Menu.Item, {
+      className: "text-text-muted",
+      onClick: t16,
+      children: [t17, t18]
+    });
+    $[42] = t16;
+    $[43] = t18;
+    $[44] = t19;
+  } else {
+    t19 = $[44];
+  }
+  let t20;
+  if ($[45] !== t14 || $[46] !== t19) {
+    t20 = /*#__PURE__*/_jsxs(Menu.Popup, {
+      className: "min-w-64",
+      children: [t14, t15, t19]
+    });
+    $[45] = t14;
+    $[46] = t19;
+    $[47] = t20;
+  } else {
+    t20 = $[47];
+  }
+  let t21;
+  if ($[48] !== t20 || $[49] !== t7) {
+    t21 = /*#__PURE__*/_jsxs(Menu.SubmenuRoot, {
+      children: [t7, t20]
+    });
+    $[48] = t20;
+    $[49] = t7;
+    $[50] = t21;
+  } else {
+    t21 = $[50];
+  }
+  return t21;
 }
 /* Mounted only while the submenu is open, since asking for the plan windows starts a CLI per account. */
-function AccountRows({ choice, locked }) {
-    const { t } = useTranslation('agent-chat');
-    const limits = useUsageLimits();
-    const now = useNow(MINUTE_MS);
-    return choice.offered.map((entry) => {
-        const session = sessionWindow(limitsOfAccount(limits, entry.id));
-        const disabled = locked(entry.id);
-        const row = (_jsx(Menu.RadioItem, { value: entry.id, disabled: disabled, closeOnClick: true, className: "items-start data-disabled:opacity-50", children: _jsxs("span", { className: "flex min-w-0 grow flex-col", children: [_jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [_jsx(AccountDot, { color: entry.account.color }), _jsx("span", { className: "truncate", children: choice.nameOf(entry) })] }), session !== null && _jsx(SessionLine, { used: session.used, resetsAt: session.resetsAt, now: now })] }) }, entry.id));
-        return disabled ? (_jsx(Tooltip, { label: t('pickers.account.forkToSwitch', { account: choice.nameOf(entry) }), side: "right", sideOffset: 12, children: row }, entry.id)) : (row);
-    });
-}
-function SessionLine({ used, resetsAt, now }) {
-    const { t } = useTranslation('agent-chat');
-    const percent = Math.round(used * 100);
-    const tone = sessionTone(used);
-    return (_jsxs("span", { className: "flex items-center gap-2 text-xs text-text-faint tabular-nums", children: [_jsx("span", { "aria-hidden": true, className: "relative h-1 w-14 shrink-0 overflow-hidden rounded-full bg-surface-sunken", children: _jsx("span", { className: clsx('absolute inset-y-0 left-0 rounded-full', tone.bar), style: { width: `${Math.min(100, percent)}%` } }) }), _jsx("span", { className: tone.text, children: formatPercent(percent) }), resetsAt !== null && (_jsxs("span", { className: "whitespace-nowrap", children: ["\u00B7 ", t('pickers.account.resets', { time: isSameDay(resetsAt, now) ? formatClock(resetsAt) : formatWeekdayClock(resetsAt) })] }))] }));
+function AccountRows(t0) {
+  const $ = _c(6);
+  const {
+    choice,
+    locked
+  } = t0;
+  const {
+    t
+  } = useTranslation("agent-chat");
+  const limits = useUsageLimits();
+  const now = useNow(MINUTE_MS);
+  let t1;
+  if ($[0] !== choice || $[1] !== limits || $[2] !== locked || $[3] !== now || $[4] !== t) {
+    t1 = choice.offered.map(entry => {
+      const session = sessionWindow(limitsOfAccount(limits, entry.id));
+      const disabled = locked(entry.id);
+      const row = /*#__PURE__*/_jsx(Menu.RadioItem, {
+        value: entry.id,
+        disabled: disabled,
+        closeOnClick: true,
+        className: "items-start data-disabled:opacity-50",
+        children: /*#__PURE__*/_jsxs("span", {
+          className: "flex min-w-0 grow flex-col",
+          children: [/*#__PURE__*/_jsxs("span", {
+            className: "flex min-w-0 items-center gap-2",
+            children: [/*#__PURE__*/_jsx(AccountDot, {
+              color: entry.account.color
+            }), /*#__PURE__*/_jsx("span", {
+              className: "truncate",
+              children: choice.nameOf(entry)
+            })]
+          }), session !== null && /*#__PURE__*/_jsx(SessionLine, {
+            window: session,
+            now: now
+          })]
+        })
+      }, entry.id);
+      return disabled ? /*#__PURE__*/_jsx(Tooltip, {
+        label: t("pickers.account.forkToSwitch", {
+          account: choice.nameOf(entry)
+        }),
+        side: "right",
+        sideOffset: 12,
+        children: row
+      }, entry.id) : row;
+    });
+    $[0] = choice;
+    $[1] = limits;
+    $[2] = locked;
+    $[3] = now;
+    $[4] = t;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  return t1;
+}
+function SessionLine(t0) {
+  const $ = _c(37);
+  const {
+    window,
+    now
+  } = t0;
+  const {
+    t
+  } = useTranslation("agent-chat");
+  let resetsAt;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  let t5;
+  if ($[0] !== now || $[1] !== window) {
+    const percent = Math.round(window.used * 100);
+    const tone = sessionTone(window.used);
+    const mark = evenPace(window, now)?.percent ?? null;
+    resetsAt = window.resetsAt;
+    t4 = "flex items-center gap-2 text-xs text-text-faint tabular-nums";
+    const t6 = true;
+    const t7 = "relative h-1 w-14 shrink-0 rounded-full bg-surface-sunken";
+    const t8 = clsx("absolute inset-y-0 left-0 rounded-full", tone.bar);
+    const t9 = `${Math.min(100, percent)}%`;
+    let t10;
+    if ($[8] !== t9) {
+      t10 = {
+        width: t9
+      };
+      $[8] = t9;
+      $[9] = t10;
+    } else {
+      t10 = $[9];
+    }
+    let t11;
+    if ($[10] !== t10 || $[11] !== t8) {
+      t11 = /*#__PURE__*/_jsx("span", {
+        className: t8,
+        style: t10
+      });
+      $[10] = t10;
+      $[11] = t8;
+      $[12] = t11;
+    } else {
+      t11 = $[12];
+    }
+    const t12 = mark !== null && /*#__PURE__*/_jsx("span", {
+      className: clsx("absolute -inset-y-0.5 w-px -translate-x-1/2", mark <= percent ? "bg-surface-raised" : "bg-text-muted"),
+      style: {
+        left: `${mark}%`
+      }
+    });
+    if ($[13] !== t11 || $[14] !== t12 || $[15] !== t6 || $[16] !== t7) {
+      t5 = /*#__PURE__*/_jsxs("span", {
+        "aria-hidden": t6,
+        className: t7,
+        children: [t11, t12]
+      });
+      $[13] = t11;
+      $[14] = t12;
+      $[15] = t6;
+      $[16] = t7;
+      $[17] = t5;
+    } else {
+      t5 = $[17];
+    }
+    t1 = true;
+    t2 = tone.text;
+    t3 = formatPercent(percent);
+    $[0] = now;
+    $[1] = window;
+    $[2] = resetsAt;
+    $[3] = t1;
+    $[4] = t2;
+    $[5] = t3;
+    $[6] = t4;
+    $[7] = t5;
+  } else {
+    resetsAt = $[2];
+    t1 = $[3];
+    t2 = $[4];
+    t3 = $[5];
+    t4 = $[6];
+    t5 = $[7];
+  }
+  let t6;
+  if ($[18] !== t1 || $[19] !== t2 || $[20] !== t3) {
+    t6 = /*#__PURE__*/_jsx("span", {
+      "aria-hidden": t1,
+      className: t2,
+      children: t3
+    });
+    $[18] = t1;
+    $[19] = t2;
+    $[20] = t3;
+    $[21] = t6;
+  } else {
+    t6 = $[21];
+  }
+  let t7;
+  if ($[22] !== now || $[23] !== window) {
+    t7 = paceText(window, now);
+    $[22] = now;
+    $[23] = window;
+    $[24] = t7;
+  } else {
+    t7 = $[24];
+  }
+  let t8;
+  if ($[25] !== t7) {
+    t8 = /*#__PURE__*/_jsx("span", {
+      className: "sr-only",
+      children: t7
+    });
+    $[25] = t7;
+    $[26] = t8;
+  } else {
+    t8 = $[26];
+  }
+  let t9;
+  if ($[27] !== now || $[28] !== resetsAt || $[29] !== t) {
+    t9 = resetsAt !== null && /*#__PURE__*/_jsxs("span", {
+      className: "whitespace-nowrap",
+      children: ["\xB7 ", t("pickers.account.resets", {
+        time: isSameDay(resetsAt, now) ? formatClock(resetsAt) : formatWeekdayClock(resetsAt)
+      })]
+    });
+    $[27] = now;
+    $[28] = resetsAt;
+    $[29] = t;
+    $[30] = t9;
+  } else {
+    t9 = $[30];
+  }
+  let t10;
+  if ($[31] !== t4 || $[32] !== t5 || $[33] !== t6 || $[34] !== t8 || $[35] !== t9) {
+    t10 = /*#__PURE__*/_jsxs("span", {
+      className: t4,
+      children: [t5, t6, t8, t9]
+    });
+    $[31] = t4;
+    $[32] = t5;
+    $[33] = t6;
+    $[34] = t8;
+    $[35] = t9;
+    $[36] = t10;
+  } else {
+    t10 = $[36];
+  }
+  return t10;
 }
 /* How full the context is, drawn small enough to sit in the pill beside the window's size. */
-function ContextRing({ usage }) {
-    const fraction = contextFraction(usage);
-    return (_jsxs("svg", { width: "14", height: "14", viewBox: "0 0 14 14", className: clsx('shrink-0', contextTone(fraction)), "aria-hidden": "true", children: [_jsx("circle", { cx: "7", cy: "7", r: RING_RADIUS, fill: "none", strokeWidth: "2", className: "stroke-border-strong" }), _jsx("circle", { cx: "7", cy: "7", r: RING_RADIUS, fill: "none", strokeWidth: "2", stroke: "currentColor", strokeDasharray: RING_CIRCUMFERENCE, strokeDashoffset: RING_CIRCUMFERENCE * (1 - fraction), transform: "rotate(-90 7 7)" })] }));
+function ContextRing(t0) {
+  const $ = _c(15);
+  const {
+    usage
+  } = t0;
+  let fraction;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  if ($[0] !== usage) {
+    fraction = contextFraction(usage);
+    t1 = "14";
+    t2 = "14";
+    t3 = "0 0 14 14";
+    t4 = clsx("shrink-0", contextTone(fraction));
+    $[0] = usage;
+    $[1] = fraction;
+    $[2] = t1;
+    $[3] = t2;
+    $[4] = t3;
+    $[5] = t4;
+  } else {
+    fraction = $[1];
+    t1 = $[2];
+    t2 = $[3];
+    t3 = $[4];
+    t4 = $[5];
+  }
+  let t5;
+  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = /*#__PURE__*/_jsx("circle", {
+      cx: "7",
+      cy: "7",
+      r: RING_RADIUS,
+      fill: "none",
+      strokeWidth: "2",
+      className: "stroke-border-strong"
+    });
+    $[6] = t5;
+  } else {
+    t5 = $[6];
+  }
+  const t6 = RING_CIRCUMFERENCE * (1 - fraction);
+  let t7;
+  if ($[7] !== t6) {
+    t7 = /*#__PURE__*/_jsx("circle", {
+      cx: "7",
+      cy: "7",
+      r: RING_RADIUS,
+      fill: "none",
+      strokeWidth: "2",
+      stroke: "currentColor",
+      strokeDasharray: RING_CIRCUMFERENCE,
+      strokeDashoffset: t6,
+      transform: "rotate(-90 7 7)"
+    });
+    $[7] = t6;
+    $[8] = t7;
+  } else {
+    t7 = $[8];
+  }
+  let t8;
+  if ($[9] !== t1 || $[10] !== t2 || $[11] !== t3 || $[12] !== t4 || $[13] !== t7) {
+    t8 = /*#__PURE__*/_jsxs("svg", {
+      width: t1,
+      height: t2,
+      viewBox: t3,
+      className: t4,
+      "aria-hidden": "true",
+      children: [t5, t7]
+    });
+    $[9] = t1;
+    $[10] = t2;
+    $[11] = t3;
+    $[12] = t4;
+    $[13] = t7;
+    $[14] = t8;
+  } else {
+    t8 = $[14];
+  }
+  return t8;
 }
 /* How full the context is and what fills it, and the one thing to do about a full context. */
-function ContextUsage({ usage, disabled, onCompact }) {
-    const { t } = useTranslation('agent-chat');
-    const fraction = contextFraction(usage);
+function ContextUsage(t0) {
+  const $ = _c(35);
+  const {
+    usage,
+    disabled,
+    onCompact
+  } = t0;
+  const {
+    t
+  } = useTranslation("agent-chat");
+  let T0;
+  let fraction;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  if ($[0] !== t || $[1] !== usage) {
+    fraction = contextFraction(usage);
     const percent = Math.round(fraction * 100);
     const segments = contextSegments(usage);
     const used = formatTokens(usage.contextTokens);
-    return (_jsxs(Menu.Group, { className: "flex flex-col gap-2 px-2.5 py-1.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Menu.GroupLabel, { unstyled: true, className: "min-w-0 grow truncate text-sm font-medium text-text", children: t('contextMeter.title') }), _jsx("span", { className: clsx('shrink-0 text-xs tabular-nums', fraction >= 0.7 ? contextTone(fraction) : 'text-text-faint'), children: usage.contextWindow ? t('contextMeter.of', { used, window: formatTokens(usage.contextWindow) }) : t('contextMeter.used', { tokens: used }) })] }), usage.contextWindow ? (_jsx("div", { role: "meter", "aria-valuenow": percent, "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": t('contextMeter.aria', { percent }), className: "flex h-1.5 overflow-hidden rounded-full bg-surface-sunken", children: segments ? (segments.map((segment) => (_jsx("div", { className: clsx('h-full shrink-0', PART_COLORS[segment.part]), style: { width: `${segment.fraction * 100}%` } }, segment.part)))) : (_jsx("div", { className: clsx('h-full rounded-full bg-current', contextTone(fraction)), style: { width: `${percent}%` } })) })) : null, segments && (_jsx("div", { className: "flex flex-col gap-0.5 text-xs", children: segments.map((segment) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { "aria-hidden": "true", className: clsx('size-2 shrink-0 rounded-xs', PART_COLORS[segment.part]) }), _jsx("span", { className: "min-w-0 grow truncate text-text-muted", children: t(`contextMeter.parts.${segment.part}`) }), _jsx("span", { className: "shrink-0 text-text-faint tabular-nums", children: t('contextMeter.estimate', { tokens: formatTokens(segment.tokens) }) })] }, segment.part))) })), _jsxs("div", { className: "flex items-center gap-2 text-xs text-text-faint tabular-nums", children: [_jsx("span", { className: "min-w-0 grow truncate", children: usage.contextWindow ? t('contextMeter.percentUsed', { percent: formatPercent(fraction * 100) }) : null }), _jsxs(Menu.Item, { unstyled: true, className: "flex shrink-0 cursor-default items-center gap-0.5 rounded font-medium text-accent outline-none data-disabled:opacity-50 data-highlighted:underline", disabled: disabled || usage.contextTokens === 0, onClick: onCompact, children: [t('contextMeter.compactNow'), _jsx(Icon, { icon: ChevronRight, size: 12 })] })] })] }));
+    T0 = Menu.Group;
+    t1 = "flex flex-col gap-2 px-2.5 py-1.5";
+    let t5;
+    if ($[8] !== t) {
+      t5 = t("contextMeter.title");
+      $[8] = t;
+      $[9] = t5;
+    } else {
+      t5 = $[9];
+    }
+    let t6;
+    if ($[10] !== t5) {
+      t6 = /*#__PURE__*/_jsx(Menu.GroupLabel, {
+        unstyled: true,
+        className: "min-w-0 grow truncate text-sm font-medium text-text",
+        children: t5
+      });
+      $[10] = t5;
+      $[11] = t6;
+    } else {
+      t6 = $[11];
+    }
+    t2 = /*#__PURE__*/_jsxs("div", {
+      className: "flex items-center gap-2",
+      children: [t6, /*#__PURE__*/_jsx("span", {
+        className: clsx("shrink-0 text-xs tabular-nums", fraction >= 0.7 ? contextTone(fraction) : "text-text-faint"),
+        children: usage.contextWindow ? t("contextMeter.of", {
+          used,
+          window: formatTokens(usage.contextWindow)
+        }) : t("contextMeter.used", {
+          tokens: used
+        })
+      })]
+    });
+    t3 = usage.contextWindow ? /*#__PURE__*/_jsx("div", {
+      role: "meter",
+      "aria-valuenow": percent,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-label": t("contextMeter.aria", {
+        percent
+      }),
+      className: "flex h-1.5 overflow-hidden rounded-full bg-surface-sunken",
+      children: segments ? segments.map(_temp4) : /*#__PURE__*/_jsx("div", {
+        className: clsx("h-full rounded-full bg-current", contextTone(fraction)),
+        style: {
+          width: `${percent}%`
+        }
+      })
+    }) : null;
+    t4 = segments && /*#__PURE__*/_jsx("div", {
+      className: "flex flex-col gap-0.5 text-xs",
+      children: segments.map(segment_0 => /*#__PURE__*/_jsxs("div", {
+        className: "flex items-center gap-2",
+        children: [/*#__PURE__*/_jsx("span", {
+          "aria-hidden": "true",
+          className: clsx("size-2 shrink-0 rounded-xs", PART_COLORS[segment_0.part])
+        }), /*#__PURE__*/_jsx("span", {
+          className: "min-w-0 grow truncate text-text-muted",
+          children: t(`contextMeter.parts.${segment_0.part}`)
+        }), /*#__PURE__*/_jsx("span", {
+          className: "shrink-0 text-text-faint tabular-nums",
+          children: t("contextMeter.estimate", {
+            tokens: formatTokens(segment_0.tokens)
+          })
+        })]
+      }, segment_0.part))
+    });
+    $[0] = t;
+    $[1] = usage;
+    $[2] = T0;
+    $[3] = fraction;
+    $[4] = t1;
+    $[5] = t2;
+    $[6] = t3;
+    $[7] = t4;
+  } else {
+    T0 = $[2];
+    fraction = $[3];
+    t1 = $[4];
+    t2 = $[5];
+    t3 = $[6];
+    t4 = $[7];
+  }
+  let t5;
+  if ($[12] !== fraction || $[13] !== t || $[14] !== usage.contextWindow) {
+    t5 = usage.contextWindow ? t("contextMeter.percentUsed", {
+      percent: formatPercent(fraction * 100)
+    }) : null;
+    $[12] = fraction;
+    $[13] = t;
+    $[14] = usage.contextWindow;
+    $[15] = t5;
+  } else {
+    t5 = $[15];
+  }
+  let t6;
+  if ($[16] !== t5) {
+    t6 = /*#__PURE__*/_jsx("span", {
+      className: "min-w-0 grow truncate",
+      children: t5
+    });
+    $[16] = t5;
+    $[17] = t6;
+  } else {
+    t6 = $[17];
+  }
+  const t7 = disabled || usage.contextTokens === 0;
+  let t8;
+  if ($[18] !== t) {
+    t8 = t("contextMeter.compactNow");
+    $[18] = t;
+    $[19] = t8;
+  } else {
+    t8 = $[19];
+  }
+  let t9;
+  if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+    t9 = /*#__PURE__*/_jsx(Icon, {
+      icon: ChevronRight,
+      size: 12
+    });
+    $[20] = t9;
+  } else {
+    t9 = $[20];
+  }
+  let t10;
+  if ($[21] !== onCompact || $[22] !== t7 || $[23] !== t8) {
+    t10 = /*#__PURE__*/_jsxs(Menu.Item, {
+      unstyled: true,
+      className: "flex shrink-0 cursor-default items-center gap-0.5 rounded font-medium text-accent outline-none data-disabled:opacity-50 data-highlighted:underline",
+      disabled: t7,
+      onClick: onCompact,
+      children: [t8, t9]
+    });
+    $[21] = onCompact;
+    $[22] = t7;
+    $[23] = t8;
+    $[24] = t10;
+  } else {
+    t10 = $[24];
+  }
+  let t11;
+  if ($[25] !== t10 || $[26] !== t6) {
+    t11 = /*#__PURE__*/_jsxs("div", {
+      className: "flex items-center gap-2 text-xs text-text-faint tabular-nums",
+      children: [t6, t10]
+    });
+    $[25] = t10;
+    $[26] = t6;
+    $[27] = t11;
+  } else {
+    t11 = $[27];
+  }
+  let t12;
+  if ($[28] !== T0 || $[29] !== t1 || $[30] !== t11 || $[31] !== t2 || $[32] !== t3 || $[33] !== t4) {
+    t12 = /*#__PURE__*/_jsxs(T0, {
+      className: t1,
+      children: [t2, t3, t4, t11]
+    });
+    $[28] = T0;
+    $[29] = t1;
+    $[30] = t11;
+    $[31] = t2;
+    $[32] = t3;
+    $[33] = t4;
+    $[34] = t12;
+  } else {
+    t12 = $[34];
+  }
+  return t12;
 }
 /*
  * One of the model's own knobs: a few choices side by side, more of them in a submenu, a checkbox for
  * a boolean. Every choice is a menu item, so the arrow keys reach it.
  */
-function OptionRow({ option, selection, onChange }) {
-    const icon = _jsx(Icon, { icon: optionIcon(option), size: 14, className: "shrink-0 text-text-faint" });
-    if (option.type === 'boolean') {
-        const checked = (selection.options[option.id] ?? option.defaultValue) === true;
-        const item = (_jsxs(Menu.CheckboxItem, { indicator: "end", className: "text-text-muted", checked: checked, onCheckedChange: onChange, closeOnClick: false, children: [icon, _jsx("span", { className: "min-w-0 grow truncate", children: option.label })] }));
-        return option.description ? (_jsx(Tooltip, { label: option.description, side: "right", sideOffset: 12, children: item })) : (item);
+function _temp4(segment) {
+  return /*#__PURE__*/_jsx("div", {
+    className: clsx("h-full shrink-0", PART_COLORS[segment.part]),
+    style: {
+      width: `${segment.fraction * 100}%`
+    }
+  }, segment.part);
+}
+function OptionRow(t0) {
+  const $ = _c(54);
+  const {
+    option,
+    selection,
+    onChange
+  } = t0;
+  let t1;
+  if ($[0] !== option) {
+    t1 = optionIcon(option);
+    $[0] = option;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== t1) {
+    t2 = /*#__PURE__*/_jsx(Icon, {
+      icon: t1,
+      size: 14,
+      className: "shrink-0 text-text-faint"
+    });
+    $[2] = t1;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const icon = t2;
+  if (option.type === "boolean") {
+    const checked = (selection.options[option.id] ?? option.defaultValue) === true;
+    let t3;
+    if ($[4] !== option.label) {
+      t3 = /*#__PURE__*/_jsx("span", {
+        className: "min-w-0 grow truncate",
+        children: option.label
+      });
+      $[4] = option.label;
+      $[5] = t3;
+    } else {
+      t3 = $[5];
+    }
+    let t4;
+    if ($[6] !== checked || $[7] !== icon || $[8] !== onChange || $[9] !== t3) {
+      t4 = /*#__PURE__*/_jsxs(Menu.CheckboxItem, {
+        indicator: "end",
+        className: "text-text-muted",
+        checked: checked,
+        onCheckedChange: onChange,
+        closeOnClick: false,
+        children: [icon, t3]
+      });
+      $[6] = checked;
+      $[7] = icon;
+      $[8] = onChange;
+      $[9] = t3;
+      $[10] = t4;
+    } else {
+      t4 = $[10];
+    }
+    const item = t4;
+    let t5;
+    if ($[11] !== item || $[12] !== option.description) {
+      t5 = option.description ? /*#__PURE__*/_jsx(Tooltip, {
+        label: option.description,
+        side: "right",
+        sideOffset: 12,
+        children: item
+      }) : item;
+      $[11] = item;
+      $[12] = option.description;
+      $[13] = t5;
+    } else {
+      t5 = $[13];
+    }
+    return t5;
+  }
+  const value = String(selection.options[option.id] ?? option.defaultChoice);
+  if (option.choices.length > INLINE_CHOICES) {
+    let t3;
+    if ($[14] !== option.label) {
+      t3 = /*#__PURE__*/_jsx("span", {
+        className: "min-w-0 grow truncate",
+        children: option.label
+      });
+      $[14] = option.label;
+      $[15] = t3;
+    } else {
+      t3 = $[15];
     }
-    const value = String(selection.options[option.id] ?? option.defaultChoice);
-    if (option.choices.length > INLINE_CHOICES) {
-        return (_jsxs(Menu.SubmenuRoot, { children: [_jsxs(Menu.SubmenuTrigger, { className: "text-text-muted", children: [icon, _jsx("span", { className: "min-w-0 grow truncate", children: option.label }), _jsx(Menu.Hint, { children: option.choices.find((choice) => choice.id === value)?.label })] }), _jsx(Menu.Popup, { className: "min-w-56", children: _jsx(Menu.RadioGroup, { value: value, onValueChange: (next) => onChange(next), children: option.choices.map((choice) => (_jsx(Menu.RadioItem, { value: choice.id, className: choice.description ? 'items-start' : undefined, children: _jsxs("span", { className: "flex min-w-0 grow flex-col", children: [choice.label, choice.description && _jsx("span", { className: "text-xs text-text-faint", children: choice.description })] }) }, choice.id))) }) })] }));
+    let t4;
+    if ($[16] !== option.choices || $[17] !== value) {
+      t4 = option.choices.find(choice => choice.id === value)?.label;
+      $[16] = option.choices;
+      $[17] = value;
+      $[18] = t4;
+    } else {
+      t4 = $[18];
     }
-    return (_jsxs("div", { className: "flex items-center gap-2.5 px-2.5 py-1.5 text-sm text-text-muted", children: [icon, _jsx("span", { className: "min-w-0 grow truncate", children: option.label }), _jsx(Menu.RadioGroup, { value: value, onValueChange: (next) => onChange(next), "aria-label": option.label, className: "flex gap-0.5 rounded-md bg-surface-sunken p-0.5", children: option.choices.map((choice) => (_jsx(Menu.RadioItem, { unstyled: true, value: choice.id, className: clsx('flex h-6 cursor-default items-center rounded px-2 text-xs outline-none', choice.id === value ? 'bg-surface-active text-text' : 'text-text-muted data-highlighted:text-text'), children: choice.label }, choice.id))) })] }));
+    let t5;
+    if ($[19] !== t4) {
+      t5 = /*#__PURE__*/_jsx(Menu.Hint, {
+        children: t4
+      });
+      $[19] = t4;
+      $[20] = t5;
+    } else {
+      t5 = $[20];
+    }
+    let t6;
+    if ($[21] !== icon || $[22] !== t3 || $[23] !== t5) {
+      t6 = /*#__PURE__*/_jsxs(Menu.SubmenuTrigger, {
+        className: "text-text-muted",
+        children: [icon, t3, t5]
+      });
+      $[21] = icon;
+      $[22] = t3;
+      $[23] = t5;
+      $[24] = t6;
+    } else {
+      t6 = $[24];
+    }
+    let t7;
+    if ($[25] !== onChange) {
+      t7 = next => onChange(next);
+      $[25] = onChange;
+      $[26] = t7;
+    } else {
+      t7 = $[26];
+    }
+    let t8;
+    if ($[27] !== option.choices) {
+      t8 = option.choices.map(_temp5);
+      $[27] = option.choices;
+      $[28] = t8;
+    } else {
+      t8 = $[28];
+    }
+    let t9;
+    if ($[29] !== t7 || $[30] !== t8 || $[31] !== value) {
+      t9 = /*#__PURE__*/_jsx(Menu.Popup, {
+        className: "min-w-56",
+        children: /*#__PURE__*/_jsx(Menu.RadioGroup, {
+          value: value,
+          onValueChange: t7,
+          children: t8
+        })
+      });
+      $[29] = t7;
+      $[30] = t8;
+      $[31] = value;
+      $[32] = t9;
+    } else {
+      t9 = $[32];
+    }
+    let t10;
+    if ($[33] !== t6 || $[34] !== t9) {
+      t10 = /*#__PURE__*/_jsxs(Menu.SubmenuRoot, {
+        children: [t6, t9]
+      });
+      $[33] = t6;
+      $[34] = t9;
+      $[35] = t10;
+    } else {
+      t10 = $[35];
+    }
+    return t10;
+  }
+  let t3;
+  if ($[36] !== option.label) {
+    t3 = /*#__PURE__*/_jsx("span", {
+      className: "min-w-0 grow truncate",
+      children: option.label
+    });
+    $[36] = option.label;
+    $[37] = t3;
+  } else {
+    t3 = $[37];
+  }
+  let t4;
+  if ($[38] !== onChange) {
+    t4 = next_0 => onChange(next_0);
+    $[38] = onChange;
+    $[39] = t4;
+  } else {
+    t4 = $[39];
+  }
+  const t5 = option.label;
+  let t6;
+  if ($[40] !== option.choices || $[41] !== value) {
+    let t7;
+    if ($[43] !== value) {
+      t7 = choice_1 => /*#__PURE__*/_jsx(Menu.RadioItem, {
+        unstyled: true,
+        value: choice_1.id,
+        className: clsx("flex h-6 cursor-default items-center rounded px-2 text-xs outline-none", choice_1.id === value ? "bg-surface-active text-text" : "text-text-muted data-highlighted:text-text"),
+        children: choice_1.label
+      }, choice_1.id);
+      $[43] = value;
+      $[44] = t7;
+    } else {
+      t7 = $[44];
+    }
+    t6 = option.choices.map(t7);
+    $[40] = option.choices;
+    $[41] = value;
+    $[42] = t6;
+  } else {
+    t6 = $[42];
+  }
+  let t7;
+  if ($[45] !== option.label || $[46] !== t4 || $[47] !== t6 || $[48] !== value) {
+    t7 = /*#__PURE__*/_jsx(Menu.RadioGroup, {
+      value: value,
+      onValueChange: t4,
+      "aria-label": t5,
+      className: "flex gap-0.5 rounded-md bg-surface-sunken p-0.5",
+      children: t6
+    });
+    $[45] = option.label;
+    $[46] = t4;
+    $[47] = t6;
+    $[48] = value;
+    $[49] = t7;
+  } else {
+    t7 = $[49];
+  }
+  let t8;
+  if ($[50] !== icon || $[51] !== t3 || $[52] !== t7) {
+    t8 = /*#__PURE__*/_jsxs("div", {
+      className: "flex items-center gap-2.5 px-2.5 py-1.5 text-sm text-text-muted",
+      children: [icon, t3, t7]
+    });
+    $[50] = icon;
+    $[51] = t3;
+    $[52] = t7;
+    $[53] = t8;
+  } else {
+    t8 = $[53];
+  }
+  return t8;
 }
+function _temp5(choice_0) {
+  return /*#__PURE__*/_jsx(Menu.RadioItem, {
+    value: choice_0.id,
+    className: choice_0.description ? "items-start" : undefined,
+    children: /*#__PURE__*/_jsxs("span", {
+      className: "flex min-w-0 grow flex-col",
+      children: [choice_0.label, choice_0.description && /*#__PURE__*/_jsx("span", {
+        className: "text-xs text-text-faint",
+        children: choice_0.description
+      })]
+    })
+  }, choice_0.id);
+}