@adecore/agents-react 0.37.0 → 0.37.2

package/dist/agents/provider-paths.js

@@ -3,8 +3,10 @@ import { siGithubcopilot } from 'simple-icons';
  * The marks of Anthropic, OpenAI, xAI and GitHub Copilot, and a monogram for a provider with no mark of its own. Lucide has no brand marks, so these are the icon rule's
  * exception for provider marks. One path each, in `currentColor`, so a row decides how loud the logo is.
  */
+const CLAUDE_PATH = 'M4.709 15.955l4.72-2.647.079-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.377-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.048.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.607.212-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.914-1.316-.012.01z';
 export const PROVIDER_PATHS = {
-  claude: 'M4.709 15.955l4.72-2.647.079-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.377-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.048.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.607.212-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.914-1.316-.012.01z',
+  claude: CLAUDE_PATH,
+  'anthropic-claude-api': CLAUDE_PATH,
   codex: 'M21.55 10.004a5.416 5.416 0 00-.478-4.501c-1.217-2.09-3.662-3.166-6.05-2.66A5.59 5.59 0 0010.831 1C8.39.995 6.224 2.546 5.473 4.838A5.553 5.553 0 001.76 7.496a5.487 5.487 0 00.691 6.5 5.416 5.416 0 00.477 4.502c1.217 2.09 3.662 3.165 6.05 2.66A5.586 5.586 0 0013.168 23c2.443.006 4.61-1.546 5.361-3.84a5.554 5.554 0 003.715-2.66 5.488 5.488 0 00-.693-6.497v.001zm-8.381 11.558a4.199 4.199 0 01-2.675-.954c.034-.018.093-.05.132-.074l4.44-2.53a.71.71 0 00.364-.623v-6.176l1.877 1.069c.02.01.033.029.036.05v5.115c-.003 2.274-1.87 4.118-4.174 4.123zM4.192 17.78a4.059 4.059 0 01-.498-2.763c.032.019.09.055.131.078l4.44 2.53c.225.13.504.13.73 0l5.42-3.088v2.138a.068.068 0 01-.027.057L9.9 19.288c-1.999 1.136-4.552.46-5.707-1.51h-.001zM3.023 8.216A4.15 4.15 0 015.198 6.41l-.002.151v5.06a.711.711 0 00.364.624l5.42 3.087-1.876 1.07a.067.067 0 01-.063.005l-4.489-2.559c-1.995-1.14-2.679-3.658-1.53-5.63h.001zm15.417 3.54l-5.42-3.088L14.896 7.6a.067.067 0 01.063-.006l4.489 2.557c1.998 1.14 2.683 3.662 1.529 5.633a4.163 4.163 0 01-2.174 1.807V12.38a.71.71 0 00-.363-.623zm1.867-2.773a6.04 6.04 0 00-.132-.078l-4.44-2.53a.731.731 0 00-.729 0l-5.42 3.088V7.325a.068.068 0 01.027-.057L14.1 4.713c2-1.137 4.555-.46 5.707 1.513.487.833.664 1.809.499 2.757h.001zm-11.741 3.81l-1.877-1.068a.065.065 0 01-.036-.051V6.559c.001-2.277 1.873-4.122 4.181-4.12.976 0 1.92.338 2.671.954-.034.018-.092.05-.131.073l-4.44 2.53a.71.71 0 00-.365.623l-.003 6.173v.001zm1.02-2.168L12 9.25l2.414 1.375v2.75L12 14.75l-2.415-1.375v-2.75z',
   nanogpt: 'M5 20V4h2.6l8.8 11.2V4H19v16h-2.6L7.6 8.8V20z',
   grok: 'M6.469 8.776 16.512 23h-4.464L2.005 8.776H6.47Zm-.004 7.9 2.233 3.164L6.467 23H2l4.465-6.324ZM22 2.582V23h-3.659V7.764L22 2.582ZM22 1l-9.952 14.095-2.233-3.163L17.533 1H22Z',

package/dist/chat/logic/picker-entries.d.ts

@@ -1,4 +1,9 @@
-import type { AgentKind, ModelInfo, ProviderInfo } from '@adecore/agent-contracts';
+import { type AgentKind, type ModelInfo, type ProviderInfo } from '@adecore/agent-contracts';
+export declare function inPickerOrder<T extends {
+    kind: AgentKind;
+    name: string;
+}>(providers: readonly T[]): T[];
+export declare function separatesGroups(previous: AgentKind | undefined, kind: AgentKind): boolean;
 export declare const COMPACT_MODEL_LIMIT = 8;
 export type PickerEntry = {
     kind: 'model';

package/dist/chat/logic/picker-entries.js

@@ -1,4 +1,14 @@
+import { pickerGroupsOf, providerGroupOf } from '@adecore/agent-contracts';
 import { nameCollator } from '@adecore/ui/format';
+/* The providers in the order a picker lists them: the frontier labs, the rest, then the API providers, each by name. */
+export function inPickerOrder(providers) {
+  const groups = pickerGroupsOf(providers);
+  return [...groups.frontier, ...groups.others, ...groups.api];
+}
+/* Whether a separator goes between two providers next to each other in that order: where one group ends. */
+export function separatesGroups(previous, kind) {
+  return previous !== undefined && providerGroupOf(previous) !== providerGroupOf(kind);
+}
 /*
  * A provider with more live models than this keeps the list short: the model that is picked and the default,
  * with the rest behind one row that opens all of them. A list of three hundred models is not one to scroll.

package/dist/chat/ui/Pickers.js

@@ -10,7 +10,7 @@ import { useChatHost } from '../../host.js';
 import { ChatScopeContext } from '../../scope.js';
 import { useReportedModels } from '../../state/chats.js';
 import { ModelMarks } from './ModelMarks.js';
-import { pickerEntriesOf } from '../logic/picker-entries.js';
+import { inPickerOrder, pickerEntriesOf, separatesGroups } from '../logic/picker-entries.js';
 import { favoriteModelsOf, toggleFavoriteModel, useChatPreferences } from '../preferences.js';
 import { forgetStashed, STASH_SHORTCUT, useStash } from '../stash.js';
 import { Button, Icon, IconButton, Menu, Popover, Tooltip } from '@adecore/ui';
@@ -23,7 +23,7 @@ const triggerClass = 'flex h-7 shrink-0 items-center gap-1 whitespace-nowrap rou
  * provider's model is also how a chat picks its provider; with one CLI the group headers drop.
  */
 export function ModelPicker(t0) {
-  const $ = _c(76);
+  const $ = _c(49);
   const {
     providers,
     provider,
@@ -111,7 +111,7 @@ export function ModelPicker(t0) {
   } else {
     t8 = $[15];
   }
-  const entries = pickerEntriesOf(providers, trimmed, legacyOpen, expanded, {
+  const entries = pickerEntriesOf(inPickerOrder(providers), trimmed, legacyOpen, expanded, {
     provider,
     model: selection.model
   }, t8);
@@ -127,6 +127,10 @@ export function ModelPicker(t0) {
     t9 = $[17];
   }
   const requirementOf = t9;
+  const kindBefore = i => {
+    const before = entries[i - 1];
+    return before === undefined || before.kind === "legacy" ? undefined : before.provider.kind;
+  };
   let t10;
   if ($[18] !== requirementOf) {
     t10 = entry_1 => entry_1.kind === "model" && requirementOf(entry_1) !== null ? [entry_1.provider.kind] : [];
@@ -173,83 +177,63 @@ export function ModelPicker(t0) {
     t13 = $[24];
   }
   useEffect(t12, t13);
-  let t14;
-  if ($[25] !== onChange || $[26] !== requirementOf || $[27] !== setOpen) {
-    t14 = entry_2 => {
-      if (!entry_2) {
-        return;
-      }
-      if (entry_2.kind === "legacy") {
-        setLegacyOpen(true);
-        inputRef.current?.focus();
-        return;
-      }
-      if (entry_2.kind === "all") {
-        const kind_0 = entry_2.provider.kind;
-        setExpanded(now => {
-          const next_0 = new Set(now);
-          if (!next_0.delete(kind_0)) {
-            next_0.add(kind_0);
-          }
-          return next_0;
-        });
-        inputRef.current?.focus();
-        return;
-      }
-      if (requirementOf(entry_2) !== null) {
-        return;
-      }
-      onChange(entry_2.provider.kind, entry_2.model.slug);
-      setOpen(false);
-    };
-    $[25] = onChange;
-    $[26] = requirementOf;
-    $[27] = setOpen;
-    $[28] = t14;
-  } else {
-    t14 = $[28];
-  }
-  const choose = t14;
-  let t15;
-  if ($[29] !== choose || $[30] !== entries || $[31] !== index) {
-    t15 = e => {
-      if (e.key === "ArrowDown") {
+  const choose = entry_2 => {
+    if (!entry_2) {
+      return;
+    }
+    if (entry_2.kind === "legacy") {
+      setLegacyOpen(true);
+      inputRef.current?.focus();
+      return;
+    }
+    if (entry_2.kind === "all") {
+      const kind_0 = entry_2.provider.kind;
+      setExpanded(now => {
+        const next_0 = new Set(now);
+        if (!next_0.delete(kind_0)) {
+          next_0.add(kind_0);
+        }
+        return next_0;
+      });
+      inputRef.current?.focus();
+      return;
+    }
+    if (requirementOf(entry_2) !== null) {
+      return;
+    }
+    onChange(entry_2.provider.kind, entry_2.model.slug);
+    setOpen(false);
+  };
+  const onKeyDown = e => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setIndex(i_0 => entries.length === 0 ? 0 : (i_0 + 1) % entries.length);
+    } else {
+      if (e.key === "ArrowUp") {
         e.preventDefault();
-        setIndex(i => entries.length === 0 ? 0 : (i + 1) % entries.length);
+        setIndex(i_1 => entries.length === 0 ? 0 : (i_1 - 1 + entries.length) % entries.length);
       } else {
-        if (e.key === "ArrowUp") {
+        if (e.key === "Enter") {
           e.preventDefault();
-          setIndex(i_0 => entries.length === 0 ? 0 : (i_0 - 1 + entries.length) % entries.length);
-        } else {
-          if (e.key === "Enter") {
-            e.preventDefault();
-            choose(entries[index]);
-          }
+          choose(entries[index]);
         }
       }
-    };
-    $[29] = choose;
-    $[30] = entries;
-    $[31] = index;
-    $[32] = t15;
+    }
+  };
+  let t14;
+  if ($[25] !== current || $[26] !== owner || $[27] !== t) {
+    t14 = owner ? `${owner.name} · ${current}` : t("pickers.model.choose");
+    $[25] = current;
+    $[26] = owner;
+    $[27] = t;
+    $[28] = t14;
   } else {
-    t15 = $[32];
+    t14 = $[28];
   }
-  const onKeyDown = t15;
+  const t15 = kbd ?? undefined;
   let t16;
-  if ($[33] !== current || $[34] !== owner || $[35] !== t) {
-    t16 = owner ? `${owner.name} · ${current}` : t("pickers.model.choose");
-    $[33] = current;
-    $[34] = owner;
-    $[35] = t;
-    $[36] = t16;
-  } else {
-    t16 = $[36];
-  }
-  const t17 = kbd ?? undefined;
-  let t18;
-  if ($[37] !== chip || $[38] !== current || $[39] !== provider || $[40] !== trigger) {
-    t18 = trigger === "chip" ? /*#__PURE__*/_jsxs(Popover.Trigger, {
+  if ($[29] !== chip || $[30] !== current || $[31] !== provider || $[32] !== trigger) {
+    t16 = trigger === "chip" ? /*#__PURE__*/_jsxs(Popover.Trigger, {
       render: /*#__PURE__*/_jsx(Button, {
         variant: "secondary",
         size: "sm",
@@ -286,117 +270,89 @@ export function ModelPicker(t0) {
         className: "text-text-faint"
       })]
     });
-    $[37] = chip;
-    $[38] = current;
-    $[39] = provider;
-    $[40] = trigger;
-    $[41] = t18;
-  } else {
-    t18 = $[41];
-  }
-  let t19;
-  if ($[42] !== t16 || $[43] !== t17 || $[44] !== t18) {
-    t19 = /*#__PURE__*/_jsx(Tooltip, {
-      label: t16,
-      kbd: t17,
-      children: t18
+    $[29] = chip;
+    $[30] = current;
+    $[31] = provider;
+    $[32] = trigger;
+    $[33] = t16;
+  } else {
+    t16 = $[33];
+  }
+  let t17;
+  if ($[34] !== t14 || $[35] !== t15 || $[36] !== t16) {
+    t17 = /*#__PURE__*/_jsx(Tooltip, {
+      label: t14,
+      kbd: t15,
+      children: t16
     });
-    $[42] = t16;
-    $[43] = t17;
-    $[44] = t18;
-    $[45] = t19;
+    $[34] = t14;
+    $[35] = t15;
+    $[36] = t16;
+    $[37] = t17;
   } else {
-    t19 = $[45];
+    t17 = $[37];
   }
-  let t20;
-  if ($[46] !== finalFocus) {
-    t20 = finalFocus === undefined ? {} : {
+  let t18;
+  if ($[38] !== finalFocus) {
+    t18 = finalFocus === undefined ? {} : {
       finalFocus
     };
-    $[46] = finalFocus;
-    $[47] = t20;
+    $[38] = finalFocus;
+    $[39] = t18;
   } else {
-    t20 = $[47];
+    t18 = $[39];
   }
-  let t21;
-  if ($[48] === Symbol.for("react.memo_cache_sentinel")) {
-    t21 = /*#__PURE__*/_jsx(Icon, {
+  let t19;
+  if ($[40] === Symbol.for("react.memo_cache_sentinel")) {
+    t19 = /*#__PURE__*/_jsx(Icon, {
       icon: Search,
       size: 14,
       className: "shrink-0 text-text-faint"
     });
-    $[48] = t21;
+    $[40] = t19;
   } else {
-    t21 = $[48];
+    t19 = $[40];
   }
-  let t22;
-  if ($[49] !== t) {
-    t22 = t("pickers.model.search");
-    $[49] = t;
-    $[50] = t22;
+  let t20;
+  if ($[41] !== t) {
+    t20 = t("pickers.model.search");
+    $[41] = t;
+    $[42] = t20;
   } else {
-    t22 = $[50];
+    t20 = $[42];
   }
-  let t23;
-  if ($[51] === Symbol.for("react.memo_cache_sentinel")) {
-    t23 = e_0 => {
+  let t21;
+  if ($[43] === Symbol.for("react.memo_cache_sentinel")) {
+    t21 = e_0 => {
       setQuery(e_0.target.value);
       setIndex(0);
     };
-    $[51] = t23;
+    $[43] = t21;
   } else {
-    t23 = $[51];
+    t21 = $[43];
   }
-  let t24;
-  if ($[52] !== onKeyDown || $[53] !== query || $[54] !== t22) {
-    t24 = /*#__PURE__*/_jsxs("div", {
-      className: "flex items-center gap-2 border-b border-border px-2.5",
-      children: [t21, /*#__PURE__*/_jsx("input", {
-        ref: inputRef,
-        className: "h-8 w-full bg-transparent text-sm text-text outline-none placeholder:text-text-faint",
-        placeholder: t22,
-        spellCheck: false,
-        value: query,
-        onChange: t23,
-        onKeyDown: onKeyDown
-      })]
-    });
-    $[52] = onKeyDown;
-    $[53] = query;
-    $[54] = t22;
-    $[55] = t24;
-  } else {
-    t24 = $[55];
-  }
-  let t25;
-  if ($[56] !== entries.length || $[57] !== providers.length || $[58] !== t) {
-    t25 = entries.length === 0 && /*#__PURE__*/_jsx("div", {
-      className: "px-3 py-6 text-center text-xs text-text-faint",
-      children: providers.length === 0 ? t("pickers.model.noProvider") : t("pickers.model.noMatch")
-    });
-    $[56] = entries.length;
-    $[57] = providers.length;
-    $[58] = t;
-    $[59] = t25;
-  } else {
-    t25 = $[59];
-  }
-  const t26 = entries.map((entry_3, i_1) => {
+  const t22 = "max-h-72 overflow-auto p-1";
+  const t23 = "listbox";
+  const t24 = entries.length === 0 && /*#__PURE__*/_jsx("div", {
+    className: "px-3 py-6 text-center text-xs text-text-faint",
+    children: providers.length === 0 ? t("pickers.model.noProvider") : t("pickers.model.noMatch")
+  });
+  const t25 = entries.map((entry_3, i_2) => {
     if (entry_3.kind === "all") {
-      const before = entries[i_1 - 1];
-      const header = grouped && (before === undefined || before.kind === "legacy" || before.provider.kind !== entry_3.provider.kind);
+      const before_0 = entries[i_2 - 1];
+      const header = grouped && (before_0 === undefined || before_0.kind === "legacy" || before_0.provider.kind !== entry_3.provider.kind);
       return /*#__PURE__*/_jsxs("div", {
-        children: [header && /*#__PURE__*/_jsxs(Menu.Label, {
+        children: [separatesGroups(kindBefore(i_2), entry_3.provider.kind) && /*#__PURE__*/_jsx(Menu.Separator, {}), header && /*#__PURE__*/_jsxs(Menu.Label, {
           className: "flex items-center gap-1.5",
           children: [/*#__PURE__*/_jsx(AgentIcon, {
             kind: entry_3.provider.kind,
             size: 12
           }), entry_3.provider.name]
         }), /*#__PURE__*/_jsxs("button", {
-          "data-active": i_1 === index,
+          "data-active": i_2 === index,
           "aria-expanded": entry_3.open,
           className: "cursor-row flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-xs text-text-muted",
-          onMouseEnter: () => setIndex(i_1),
+          onMouseEnter: () => setIndex(i_2),
           onClick: () => choose(entry_3),
           children: [/*#__PURE__*/_jsx(Icon, {
             icon: entry_3.open ? ChevronDown : ChevronRight,
@@ -409,9 +365,9 @@ export function ModelPicker(t0) {
     }
     if (entry_3.kind === "legacy") {
       return /*#__PURE__*/_jsxs("button", {
-        "data-active": i_1 === index,
+        "data-active": i_2 === index,
         className: "cursor-row flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-xs text-text-faint",
-        onMouseEnter: () => setIndex(i_1),
+        onMouseEnter: () => setIndex(i_2),
         onClick: () => choose(entry_3),
         children: [/*#__PURE__*/_jsx(Icon, {
           icon: legacyOpen ? ChevronDown : ChevronRight,
@@ -421,17 +377,17 @@ export function ModelPicker(t0) {
         })]
       }, "legacy");
     }
-    const previous = entries[i_1 - 1];
+    const previous = entries[i_2 - 1];
     const first = grouped && (previous === undefined || previous.kind === "legacy" || previous.provider.kind !== entry_3.provider.kind);
     const vendorOpen = trimmed !== "" || expanded.has(entry_3.provider.kind);
     const vendorFirst = vendorOpen && entry_3.model.vendor !== undefined && !starredHere(entry_3) && (previous === undefined || previous.kind !== "model" || previous.provider.kind !== entry_3.provider.kind || starredHere(previous) || previous.model.vendor !== entry_3.model.vendor);
     const requirement = requirementOf(entry_3);
-    const next_1 = entries[i_1 + 1];
+    const next_1 = entries[i_2 + 1];
     const lastOfGroup = next_1 === undefined || next_1.kind !== "model" || next_1.provider.kind !== entry_3.provider.kind;
     const chosen = entry_3.provider.kind === provider && entry_3.model.slug === selection.model;
     const starred = starredHere(entry_3);
     return /*#__PURE__*/_jsxs("div", {
-      children: [first && /*#__PURE__*/_jsxs(Menu.Label, {
+      children: [separatesGroups(kindBefore(i_2), entry_3.provider.kind) && /*#__PURE__*/_jsx(Menu.Separator, {}), first && /*#__PURE__*/_jsxs(Menu.Label, {
         className: "flex items-center gap-1.5",
         children: [/*#__PURE__*/_jsx(AgentIcon, {
           kind: entry_3.provider.kind,
@@ -445,9 +401,9 @@ export function ModelPicker(t0) {
           role: "option",
           "aria-selected": chosen,
           "aria-disabled": requirement !== null || undefined,
-          "data-active": i_1 === index,
+          "data-active": i_2 === index,
           className: `cursor-row flex min-w-0 grow flex-col items-stretch gap-0.5 rounded-md px-2.5 py-1.5 text-left text-sm ${requirement === null ? "text-text-muted" : "text-text-faint"}`,
-          onMouseEnter: () => setIndex(i_1),
+          onMouseEnter: () => setIndex(i_2),
           onClick: () => choose(entry_3),
           children: [/*#__PURE__*/_jsxs("span", {
             className: "flex w-full items-center gap-2",
@@ -496,65 +452,53 @@ export function ModelPicker(t0) {
       })]
     }, `${entry_3.provider.kind}/${entry_3.model.slug}`);
   });
-  let t27;
-  if ($[60] !== t25 || $[61] !== t26) {
-    t27 = /*#__PURE__*/_jsxs("div", {
+  let t26;
+  if ($[44] !== t24 || $[45] !== t25) {
+    t26 = /*#__PURE__*/_jsxs("div", {
       ref: listRef,
-      className: "max-h-72 overflow-auto p-1",
-      role: "listbox",
-      children: [t25, t26]
+      className: t22,
+      role: t23,
+      children: [t24, t25]
     });
-    $[60] = t25;
-    $[61] = t26;
-    $[62] = t27;
+    $[44] = t24;
+    $[45] = t25;
+    $[46] = t26;
   } else {
-    t27 = $[62];
+    t26 = $[46];
   }
-  let t28;
-  if ($[63] !== footer) {
-    t28 = footer !== undefined && /*#__PURE__*/_jsx("div", {
+  let t27;
+  if ($[47] !== footer) {
+    t27 = footer !== undefined && /*#__PURE__*/_jsx("div", {
       className: "border-t border-border-soft px-3 py-2 text-xs text-text-faint",
       children: footer
     });
-    $[63] = footer;
-    $[64] = t28;
+    $[47] = footer;
+    $[48] = t27;
   } else {
-    t28 = $[64];
+    t27 = $[48];
   }
-  let t29;
-  if ($[65] !== side || $[66] !== t20 || $[67] !== t24 || $[68] !== t27 || $[69] !== t28) {
-    t29 = /*#__PURE__*/_jsxs(Popover.Popup, {
+  return /*#__PURE__*/_jsxs(Popover.Root, {
+    open: open,
+    onOpenChange: setOpen,
+    children: [t17, /*#__PURE__*/_jsxs(Popover.Popup, {
       variant: "picker",
       side: side,
       initialFocus: inputRef,
-      ...t20,
-      children: [t24, t27, t28]
-    });
-    $[65] = side;
-    $[66] = t20;
-    $[67] = t24;
-    $[68] = t27;
-    $[69] = t28;
-    $[70] = t29;
-  } else {
-    t29 = $[70];
-  }
-  let t30;
-  if ($[71] !== open || $[72] !== setOpen || $[73] !== t19 || $[74] !== t29) {
-    t30 = /*#__PURE__*/_jsxs(Popover.Root, {
-      open: open,
-      onOpenChange: setOpen,
-      children: [t19, t29]
-    });
-    $[71] = open;
-    $[72] = setOpen;
-    $[73] = t19;
-    $[74] = t29;
-    $[75] = t30;
-  } else {
-    t30 = $[75];
-  }
-  return t30;
+      ...t18,
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: "flex items-center gap-2 border-b border-border px-2.5",
+        children: [t19, /*#__PURE__*/_jsx("input", {
+          ref: inputRef,
+          className: "h-8 w-full bg-transparent text-sm text-text outline-none placeholder:text-text-faint",
+          placeholder: t20,
+          spellCheck: false,
+          value: query,
+          onChange: t21,
+          onKeyDown: onKeyDown
+        })]
+      }), t26, t27]
+    })]
+  });
 }
 /*
  * Prompts put aside with Cmd+S, on a shelf the whole app shares, since a stashed prompt usually moves

package/dist/chat/ui/RunSettings.js

@@ -10,7 +10,7 @@ import { AgentIcon } from '../../agents/AgentIcon.js';
 import { modelName, shortModelName } from '../../agents/model-name.js';
 import { ModelMarks } from './ModelMarks.js';
 import { SessionLine } from './SessionLine.js';
-import { favoritesFirst, searchModels, shortlistOf, wantsModelSearch } from '../logic/picker-entries.js';
+import { favoritesFirst, inPickerOrder, searchModels, separatesGroups, 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';
@@ -56,7 +56,7 @@ function modelValue(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 => ({
+  return inPickerOrder(providers).map(entry => ({
     entry,
     models: entry.models.filter(row => row.legacy === true === legacy)
   })).filter(group => group.models.length > 0);
@@ -196,7 +196,7 @@ export function RunSettings(t0) {
   const favoritesOf = t8;
   let t9;
   if ($[19] !== favoritesOf || $[20] !== providers || $[21] !== query) {
-    t9 = query.trim() === "" ? null : searchModels(providers, query, favoritesOf);
+    t9 = query.trim() === "" ? null : searchModels(inPickerOrder(providers), query, favoritesOf);
     $[19] = favoritesOf;
     $[20] = providers;
     $[21] = query;
@@ -391,19 +391,21 @@ export function RunSettings(t0) {
   const providerModels = t17;
   let t18;
   if ($[51] !== grouped || $[52] !== providerModels) {
-    t18 = groups => groups.map(t19 => {
+    t18 = groups => groups.map((t19, i_0) => {
       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)]
+      return /*#__PURE__*/_jsxs(Fragment, {
+        children: [separatesGroups(groups[i_0 - 1]?.entry.kind, entry_3.kind) && /*#__PURE__*/_jsx(Menu.Separator, {}), /*#__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;
@@ -657,19 +659,21 @@ export function RunSettings(t0) {
     t47 = found !== null && found.length > 0 && /*#__PURE__*/_jsx(Menu.RadioGroup, {
       value: chosenModel,
       onValueChange: chooseModel,
-      children: found.map(t48 => {
+      children: found.map((t48, i_1) => {
         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)]
+        return /*#__PURE__*/_jsxs(Fragment, {
+          children: [separatesGroups(found[i_1 - 1]?.entry.kind, entry_5.kind) && /*#__PURE__*/_jsx(Menu.Separator, {}), /*#__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);
       })
     });

package/dist/providers/parts.js

@@ -10,7 +10,8 @@ const CLI_COLORS = {
   gemini: 'text-chart-gemini',
   copilot: 'text-chart-copilot',
   nanogpt: 'text-chart-nanogpt',
-  grok: 'text-chart-grok'
+  grok: 'text-chart-grok',
+  'anthropic-claude-api': 'text-chart-claude-api'
 };
 export function CliMark(t0) {
   const $ = _c(7);

package/dist/theme.css

@@ -8,8 +8,10 @@
     --skill: #9333ea;
     --skill-soft: #f7eeff;
     /* One color per agent CLI, so a bar, a dot and a legend row all name the same provider. Apple's
-       system orange and teal; Gemini and Copilot are reserved for the day their transcripts are read. */
+       system orange and teal, and purple for Claude through an API key so it reads apart from Claude Code;
+       Gemini and Copilot are reserved for the day their transcripts are read. */
     --chart-claude: #ff9500;
+    --chart-claude-api: #af52de;
     --chart-codex: #30b0c7;
     --chart-gemini: #3b82f6;
     --chart-copilot: #64748b;
@@ -37,6 +39,7 @@
     --skill: #c084fc;
     --skill-soft: #2f2350;
     --chart-claude: #ff9f0a;
+    --chart-claude-api: #bf5af2;
     --chart-codex: #40c8e0;
     --chart-gemini: #60a5fa;
     --chart-copilot: #94a3b8;
@@ -70,6 +73,7 @@
     --color-skill: var(--skill);
     --color-skill-soft: var(--skill-soft);
     --color-chart-claude: var(--chart-claude);
+    --color-chart-claude-api: var(--chart-claude-api);
     --color-chart-codex: var(--chart-codex);
     --color-chart-gemini: var(--chart-gemini);
     --color-chart-copilot: var(--chart-copilot);

package/dist/usage/format.js

@@ -25,14 +25,16 @@ export const PROVIDER_LABELS = {
   codex: 'Codex',
   nanogpt: 'NanoGPT',
   grok: 'Grok',
-  copilot: 'GitHub Copilot'
+  copilot: 'GitHub Copilot',
+  'anthropic-claude-api': 'Claude API'
 };
 export const PROVIDER_COLORS = {
   claude: 'var(--chart-claude)',
   codex: 'var(--chart-codex)',
   nanogpt: 'var(--chart-nanogpt)',
   grok: 'var(--chart-grok)',
-  copilot: 'var(--chart-copilot)'
+  copilot: 'var(--chart-copilot)',
+  'anthropic-claude-api': 'var(--chart-claude-api)'
 };
 /*
  * A slot is `2026-09-10` or `2026-09-10T14`, already in the viewer's own zone, so it is read as plain

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/agents-react",
-  "version": "0.37.0",
+  "version": "0.37.2",
   "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.37.0",
-    "@adecore/editor": "0.37.0",
-    "@adecore/editor-react": "0.37.0",
-    "@adecore/intelligent-ui": "0.37.0",
-    "@adecore/merge": "0.37.0",
+    "@adecore/agent-contracts": "0.37.2",
+    "@adecore/editor": "0.37.2",
+    "@adecore/editor-react": "0.37.2",
+    "@adecore/intelligent-ui": "0.37.2",
+    "@adecore/merge": "0.37.2",
     "@codemirror/commands": "^6.11.1",
     "@codemirror/language": "^6.12.4",
     "@codemirror/state": "^6.7.6",
@@ -94,14 +94,14 @@
     "zustand": "^5.0.15"
   },
   "peerDependencies": {
-    "@adecore/ui": "^0.37.0",
+    "@adecore/ui": "^0.37.2",
     "i18next": "^26.4.2",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-i18next": "^17.0.15"
   },
   "devDependencies": {
-    "@adecore/ui": "0.37.0",
+    "@adecore/ui": "0.37.2",
     "@types/bun": "^1.4.2",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",

package/src/agents/provider-paths.ts

@@ -5,8 +5,12 @@ import { siGithubcopilot } from 'simple-icons';
  * The marks of Anthropic, OpenAI, xAI and GitHub Copilot, and a monogram for a provider with no mark of its own. Lucide has no brand marks, so these are the icon rule's
  * exception for provider marks. One path each, in `currentColor`, so a row decides how loud the logo is.
  */
+const CLAUDE_PATH =
+    'M4.709 15.955l4.72-2.647.079-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.377-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.048.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.607.212-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.914-1.316-.012.01z';
+
 export const PROVIDER_PATHS: Record<UsageProvider, string> = {
-    claude: 'M4.709 15.955l4.72-2.647.079-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.377-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.048.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.607.212-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.914-1.316-.012.01z',
+    claude: CLAUDE_PATH,
+    'anthropic-claude-api': CLAUDE_PATH,
     codex: 'M21.55 10.004a5.416 5.416 0 00-.478-4.501c-1.217-2.09-3.662-3.166-6.05-2.66A5.59 5.59 0 0010.831 1C8.39.995 6.224 2.546 5.473 4.838A5.553 5.553 0 001.76 7.496a5.487 5.487 0 00.691 6.5 5.416 5.416 0 00.477 4.502c1.217 2.09 3.662 3.165 6.05 2.66A5.586 5.586 0 0013.168 23c2.443.006 4.61-1.546 5.361-3.84a5.554 5.554 0 003.715-2.66 5.488 5.488 0 00-.693-6.497v.001zm-8.381 11.558a4.199 4.199 0 01-2.675-.954c.034-.018.093-.05.132-.074l4.44-2.53a.71.71 0 00.364-.623v-6.176l1.877 1.069c.02.01.033.029.036.05v5.115c-.003 2.274-1.87 4.118-4.174 4.123zM4.192 17.78a4.059 4.059 0 01-.498-2.763c.032.019.09.055.131.078l4.44 2.53c.225.13.504.13.73 0l5.42-3.088v2.138a.068.068 0 01-.027.057L9.9 19.288c-1.999 1.136-4.552.46-5.707-1.51h-.001zM3.023 8.216A4.15 4.15 0 015.198 6.41l-.002.151v5.06a.711.711 0 00.364.624l5.42 3.087-1.876 1.07a.067.067 0 01-.063.005l-4.489-2.559c-1.995-1.14-2.679-3.658-1.53-5.63h.001zm15.417 3.54l-5.42-3.088L14.896 7.6a.067.067 0 01.063-.006l4.489 2.557c1.998 1.14 2.683 3.662 1.529 5.633a4.163 4.163 0 01-2.174 1.807V12.38a.71.71 0 00-.363-.623zm1.867-2.773a6.04 6.04 0 00-.132-.078l-4.44-2.53a.731.731 0 00-.729 0l-5.42 3.088V7.325a.068.068 0 01.027-.057L14.1 4.713c2-1.137 4.555-.46 5.707 1.513.487.833.664 1.809.499 2.757h.001zm-11.741 3.81l-1.877-1.068a.065.065 0 01-.036-.051V6.559c.001-2.277 1.873-4.122 4.181-4.12.976 0 1.92.338 2.671.954-.034.018-.092.05-.131.073l-4.44 2.53a.71.71 0 00-.365.623l-.003 6.173v.001zm1.02-2.168L12 9.25l2.414 1.375v2.75L12 14.75l-2.415-1.375v-2.75z',
     nanogpt: 'M5 20V4h2.6l8.8 11.2V4H19v16h-2.6L7.6 8.8V20z',
     grok: 'M6.469 8.776 16.512 23h-4.464L2.005 8.776H6.47Zm-.004 7.9 2.233 3.164L6.467 23H2l4.465-6.324ZM22 2.582V23h-3.659V7.764L22 2.582ZM22 1l-9.952 14.095-2.233-3.163L17.533 1H22Z',

package/src/chat/logic/picker-entries.ts

@@ -1,6 +1,17 @@
-import type { AgentKind, ModelInfo, ProviderInfo } from '@adecore/agent-contracts';
+import { pickerGroupsOf, providerGroupOf, type AgentKind, type ModelInfo, type ProviderInfo } from '@adecore/agent-contracts';
 import { nameCollator } from '@adecore/ui/format';
 
+/* The providers in the order a picker lists them: the frontier labs, the rest, then the API providers, each by name. */
+export function inPickerOrder<T extends { kind: AgentKind; name: string }>(providers: readonly T[]): T[] {
+    const groups = pickerGroupsOf(providers);
+    return [...groups.frontier, ...groups.others, ...groups.api];
+}
+
+/* Whether a separator goes between two providers next to each other in that order: where one group ends. */
+export function separatesGroups(previous: AgentKind | undefined, kind: AgentKind): boolean {
+    return previous !== undefined && providerGroupOf(previous) !== providerGroupOf(kind);
+}
+
 /*
  * A provider with more live models than this keeps the list short: the model that is picked and the default,
  * with the rest behind one row that opens all of them. A list of three hundred models is not one to scroll.

package/src/chat/ui/Pickers.tsx

@@ -10,7 +10,7 @@ import { useChatHost } from '../../host';
 import { ChatScopeContext } from '../../scope';
 import { useReportedModels } from '../../state/chats';
 import { ModelMarks } from './ModelMarks';
-import { pickerEntriesOf, type PickerEntry } from '../logic/picker-entries';
+import { inPickerOrder, pickerEntriesOf, separatesGroups, type PickerEntry } from '../logic/picker-entries';
 import { favoriteModelsOf, toggleFavoriteModel, useChatPreferences } from '../preferences';
 import { forgetStashed, STASH_SHORTCUT, useStash, type StashedPrompt } from '../stash';
 import { Button, Icon, IconButton, Menu, Popover, Tooltip } from '@adecore/ui';
@@ -75,7 +75,7 @@ export function ModelPicker({
 
     const favorites = useChatPreferences((preferences) => preferences.favoriteModels);
     const starredHere = (row: PickerEntry | undefined): boolean => row?.kind === 'model' && favorites[row.provider.kind]?.includes(row.model.slug) === true;
-    const entries = pickerEntriesOf(providers, trimmed, legacyOpen, expanded, { provider, model: selection.model }, (kind) =>
+    const entries = pickerEntriesOf(inPickerOrder(providers), trimmed, legacyOpen, expanded, { provider, model: selection.model }, (kind) =>
         favoriteModelsOf(favorites, kind)
     );
     const scope = useContext(ChatScopeContext);
@@ -83,6 +83,10 @@ export function ModelPicker({
     const reported = useReportedModels(provider);
     const requirementOf = (entry: PickerEntry & { kind: 'model' }) => modelRequirementOf(entry.model, entry.provider, reported);
     // A CLI that is too old blocks all its models; one way to its settings under the group says it once.
+    const kindBefore = (i: number): AgentKind | undefined => {
+        const before = entries[i - 1];
+        return before === undefined || before.kind === 'legacy' ? undefined : before.provider.kind;
+    };
     const blockedKinds = new Set(entries.flatMap((entry) => (entry.kind === 'model' && requirementOf(entry) !== null ? [entry.provider.kind] : [])));
 
     /* Closing forgets the search, so the next open (a click or `/model`) starts on the whole list. */
@@ -188,6 +192,7 @@ export function ModelPicker({
                             const header = grouped && (before === undefined || before.kind === 'legacy' || before.provider.kind !== entry.provider.kind);
                             return (
                                 <div key={`all-${entry.provider.kind}`}>
+                                    {separatesGroups(kindBefore(i), entry.provider.kind) && <Menu.Separator />}
                                     {header && (
                                         <Menu.Label className="flex items-center gap-1.5">
                                             <AgentIcon kind={entry.provider.kind} size={12} />
@@ -243,6 +248,7 @@ export function ModelPicker({
                         const starred = starredHere(entry);
                         return (
                             <div key={`${entry.provider.kind}/${entry.model.slug}`}>
+                                {separatesGroups(kindBefore(i), entry.provider.kind) && <Menu.Separator />}
                                 {first && (
                                     <Menu.Label className="flex items-center gap-1.5">
                                         <AgentIcon kind={entry.provider.kind} size={12} />

package/src/chat/ui/RunSettings.tsx

@@ -27,7 +27,7 @@ import type { AccountChoice } from '../account-choice';
 import { modelName, shortModelName } from '../../agents/model-name';
 import { ModelMarks } from './ModelMarks';
 import { SessionLine } from './SessionLine';
-import { favoritesFirst, searchModels, shortlistOf, wantsModelSearch } from '../logic/picker-entries';
+import { favoritesFirst, inPickerOrder, searchModels, separatesGroups, shortlistOf, wantsModelSearch } from '../logic/picker-entries';
 import { favoriteModelsOf, toggleFavoriteModel, useChatPreferences } from '../preferences';
 import { CONTEXT_OPTION, contextFraction, contextSegments, orderOptions, type ContextPart } from '../logic/context-usage';
 import { RUNTIME_MODES } from '../runtime-modes';
@@ -113,7 +113,7 @@ function modelValue(provider: AgentKind, slug: string): string {
 
 /* Each provider's current or legacy models; a provider with none of them is left out. */
 function modelGroupsOf(providers: ProviderInfo[], legacy: boolean): Array<{ entry: ProviderInfo; models: ModelInfo[] }> {
-    return providers
+    return inPickerOrder(providers)
         .map((entry) => ({ entry, models: entry.models.filter((row) => (row.legacy === true) === legacy) }))
         .filter((group) => group.models.length > 0);
 }
@@ -177,7 +177,7 @@ export function RunSettings({
     const searchable = wantsModelSearch(providers);
     const favorites = useChatPreferences((preferences) => preferences.favoriteModels);
     const favoritesOf = (kind: AgentKind): ReadonlySet<string> => favoriteModelsOf(favorites, kind);
-    const found = query.trim() === '' ? null : searchModels(providers, query, favoritesOf);
+    const found = query.trim() === '' ? null : searchModels(inPickerOrder(providers), query, favoritesOf);
 
     // The menu moves the focus to its popup as it opens, so the search field takes it a frame later.
     useEffect(() => {
@@ -292,16 +292,19 @@ export function RunSettings({
     };
 
     const modelGroups = (groups: typeof live) =>
-        groups.map(({ entry, models }) => (
-            <Menu.Group key={entry.kind}>
-                {grouped && (
-                    <Menu.GroupLabel className="flex items-center gap-1.5">
-                        <AgentIcon kind={entry.kind} size={12} />
-                        {entry.name}
-                    </Menu.GroupLabel>
-                )}
-                {providerModels(entry, models)}
-            </Menu.Group>
+        groups.map(({ entry, models }, i) => (
+            <Fragment key={entry.kind}>
+                {separatesGroups(groups[i - 1]?.entry.kind, entry.kind) && <Menu.Separator />}
+                <Menu.Group>
+                    {grouped && (
+                        <Menu.GroupLabel className="flex items-center gap-1.5">
+                            <AgentIcon kind={entry.kind} size={12} />
+                            {entry.name}
+                        </Menu.GroupLabel>
+                    )}
+                    {providerModels(entry, models)}
+                </Menu.Group>
+            </Fragment>
         ));
 
     return (
@@ -370,16 +373,19 @@ export function RunSettings({
                 {found !== null && found.length === 0 && <div className="px-2.5 py-3 text-xs text-text-faint">{t('pickers.model.noMatch')}</div>}
                 {found !== null && found.length > 0 && (
                     <Menu.RadioGroup value={chosenModel} onValueChange={chooseModel}>
-                        {found.map(({ entry, models }) => (
-                            <Menu.Group key={entry.kind}>
-                                {grouped && (
-                                    <Menu.GroupLabel className="flex items-center gap-1.5">
-                                        <AgentIcon kind={entry.kind} size={12} />
-                                        {entry.name}
-                                    </Menu.GroupLabel>
-                                )}
-                                {byMaker(entry, models)}
-                            </Menu.Group>
+                        {found.map(({ entry, models }, i) => (
+                            <Fragment key={entry.kind}>
+                                {separatesGroups(found[i - 1]?.entry.kind, entry.kind) && <Menu.Separator />}
+                                <Menu.Group>
+                                    {grouped && (
+                                        <Menu.GroupLabel className="flex items-center gap-1.5">
+                                            <AgentIcon kind={entry.kind} size={12} />
+                                            {entry.name}
+                                        </Menu.GroupLabel>
+                                    )}
+                                    {byMaker(entry, models)}
+                                </Menu.Group>
+                            </Fragment>
                         ))}
                     </Menu.RadioGroup>
                 )}

package/src/providers/parts.tsx

@@ -10,7 +10,8 @@ const CLI_COLORS: Partial<Record<AgentKind, string>> = {
     gemini: 'text-chart-gemini',
     copilot: 'text-chart-copilot',
     nanogpt: 'text-chart-nanogpt',
-    grok: 'text-chart-grok'
+    grok: 'text-chart-grok',
+    'anthropic-claude-api': 'text-chart-claude-api'
 };
 
 export function CliMark({ kind, size = 14, className }: { kind: AgentKind; size?: number; className?: string }) {

package/src/theme.css

@@ -8,8 +8,10 @@
     --skill: #9333ea;
     --skill-soft: #f7eeff;
     /* One color per agent CLI, so a bar, a dot and a legend row all name the same provider. Apple's
-       system orange and teal; Gemini and Copilot are reserved for the day their transcripts are read. */
+       system orange and teal, and purple for Claude through an API key so it reads apart from Claude Code;
+       Gemini and Copilot are reserved for the day their transcripts are read. */
     --chart-claude: #ff9500;
+    --chart-claude-api: #af52de;
     --chart-codex: #30b0c7;
     --chart-gemini: #3b82f6;
     --chart-copilot: #64748b;
@@ -37,6 +39,7 @@
     --skill: #c084fc;
     --skill-soft: #2f2350;
     --chart-claude: #ff9f0a;
+    --chart-claude-api: #bf5af2;
     --chart-codex: #40c8e0;
     --chart-gemini: #60a5fa;
     --chart-copilot: #94a3b8;
@@ -70,6 +73,7 @@
     --color-skill: var(--skill);
     --color-skill-soft: var(--skill-soft);
     --color-chart-claude: var(--chart-claude);
+    --color-chart-claude-api: var(--chart-claude-api);
     --color-chart-codex: var(--chart-codex);
     --color-chart-gemini: var(--chart-gemini);
     --color-chart-copilot: var(--chart-copilot);

package/src/usage/format.ts

@@ -33,7 +33,8 @@ export const PROVIDER_LABELS: Record<UsageProvider, string> = {
     codex: 'Codex',
     nanogpt: 'NanoGPT',
     grok: 'Grok',
-    copilot: 'GitHub Copilot'
+    copilot: 'GitHub Copilot',
+    'anthropic-claude-api': 'Claude API'
 };
 
 export const PROVIDER_COLORS: Record<UsageProvider, string> = {
@@ -41,7 +42,8 @@ export const PROVIDER_COLORS: Record<UsageProvider, string> = {
     codex: 'var(--chart-codex)',
     nanogpt: 'var(--chart-nanogpt)',
     grok: 'var(--chart-grok)',
-    copilot: 'var(--chart-copilot)'
+    copilot: 'var(--chart-copilot)',
+    'anthropic-claude-api': 'var(--chart-claude-api)'
 };
 
 /*