From c71286358608ff28719205b69878dd6a4b6b0304 Mon Sep 17 00:00:00 2001
From: Marve10s <igrimanigroman@gmail.com>
Date: Wed, 4 Nov 2026 14:24:58 +0300
Subject: [PATCH 1/8] feat(web): fold an aggregator's models into collapsible
 vendor sections

---
 apps/web/src/components/chat/ModelListRow.tsx |   3 +-
 .../components/chat/ModelPickerContent.tsx    | 140 +++++++++++++++---
 .../chat/ProviderModelPicker.browser.test.tsx |  56 +++++++
 .../src/components/chat/modelPickerKeys.ts    |  34 ++++-
 .../chat/modelPickerVendorSections.test.ts    |  40 +++++
 .../chat/modelPickerVendorSections.ts         |  32 ++++
 6 files changed, 280 insertions(+), 25 deletions(-)
 create mode 100644 apps/web/src/components/chat/modelPickerVendorSections.test.ts
 create mode 100644 apps/web/src/components/chat/modelPickerVendorSections.ts

diff --git a/apps/web/src/components/chat/ModelListRow.tsx b/apps/web/src/components/chat/ModelListRow.tsx
index 69da770f1f84b..e8dcc9d857c6a 100644
--- a/apps/web/src/components/chat/ModelListRow.tsx
+++ b/apps/web/src/components/chat/ModelListRow.tsx
@@ -16,6 +16,7 @@ export const ModelListRow = memo(function ModelListRow(props: {
   slug: string;
   name: string;
   subProvider?: string | undefined;
+  showSubProvider?: boolean;
   instanceId: ProviderInstanceId;
   driverKind: ProviderDriverKind;
   providerDisplayName: string;
@@ -80,7 +81,7 @@ export const ModelListRow = memo(function ModelListRow(props: {
           <span className="sr-only">, {props.providerDisplayName}</span>
         </div>
         {props.isSelected ? <CheckIcon className="size-3.5 shrink-0" aria-hidden="true" /> : null}
-        {props.subProvider ? (
+        {props.subProvider && props.showSubProvider !== false ? (
           <span className="min-w-0 shrink truncate text-xs text-muted-foreground/70">
             {props.subProvider}
           </span>
diff --git a/apps/web/src/components/chat/ModelPickerContent.tsx b/apps/web/src/components/chat/ModelPickerContent.tsx
index 211bbd59dbd98..4a17622158627 100644
--- a/apps/web/src/components/chat/ModelPickerContent.tsx
+++ b/apps/web/src/components/chat/ModelPickerContent.tsx
@@ -12,6 +12,7 @@ import { useAtomValue } from "@effect/atom-react";
 import { formatProviderUpdateRequiredNotice } from "@t3tools/client-runtime/providerUpdateRequiredModels";
 import { useNavigate } from "@tanstack/react-router";
 import { LegendList, type LegendListRef } from "@legendapp/list/react";
+import { ChevronRightIcon } from "lucide-react";
 import {
   memo,
   useState,
@@ -28,10 +29,12 @@ import { getProviderStatusMessage, hasProviderSetup } from "./ProviderStatusBann
 import {
   modelPickerLegacySectionKey,
   modelPickerModelKey,
+  modelPickerVendorSectionKey,
   parseModelPickerLegacySectionKey,
   parseModelPickerModelKey,
 } from "./modelPickerKeys";
 import { rankModelPickerSearch } from "@t3tools/client-runtime/model-search";
+import { groupModelPickerVendors } from "./modelPickerVendorSections";
 import {
   Combobox,
   ComboboxEmpty,
@@ -429,6 +432,9 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
           : [],
       ),
   );
+  const [vendorSectionOverrides, setVendorSectionOverrides] = useState(
+    () => new Map<string, boolean>(),
+  );
   const serverKeybindings = useAtomValue(primaryServerKeybindingsAtom);
   const keybindings = providedKeybindings ?? serverKeybindings;
   const [searchHeight, setSearchHeight] = useState(0);
@@ -573,6 +579,7 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
       );
     };
     const tabsWithLegacyRow = new Set<ProviderInstanceId>();
+    const vendorsByTab = new Map<ProviderInstanceId, Set<string>>();
     for (const model of flatModels) {
       if (!matchesLockedProvider(model)) continue;
       const isFavorite = favoritesSet.has(providerModelKey(model.instanceId, model.slug));
@@ -581,9 +588,18 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
         tabsWithLegacyRow.add(model.instanceId);
       } else {
         addRow(model.instanceId);
+        if (model.subProvider && !isFavorite) {
+          const vendors = vendorsByTab.get(model.instanceId) ?? new Set<string>();
+          vendors.add(model.subProvider);
+          vendorsByTab.set(model.instanceId, vendors);
+        }
       }
     }
     for (const instanceId of tabsWithLegacyRow) addRow(instanceId);
+    for (const [instanceId, vendors] of vendorsByTab) {
+      if (vendors.size < 2) continue;
+      vendors.forEach(() => addRow(instanceId));
+    }
     return Math.max(0, ...unitsByTab.values());
   })();
   const lockedDisabledInstanceIds = (() => {
@@ -675,14 +691,72 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
     };
   })();
 
-  const visibleModels = (() => {
-    if (!legacySection) {
-      return filteredModels;
+  const vendorGroups = (() => {
+    if (isSearching || selectedInstanceId === "favorites") {
+      return null;
+    }
+    const grouped = groupModelPickerVendors(
+      legacySection?.currentModels ?? filteredModels,
+      (model) => favoritesSet.has(providerModelKey(model.instanceId, model.slug)),
+    );
+    if (!grouped) {
+      return null;
+    }
+    const defaultVendor =
+      (selectedInstanceId === props.activeInstanceId
+        ? grouped.sections.find((section) =>
+            section.models.some((model) => model.slug === activeModelSlug),
+          )?.vendor
+        : undefined) ?? grouped.sections[0]?.vendor;
+    return {
+      pinned: grouped.pinned,
+      sections: grouped.sections.map((section) => {
+        const key = modelPickerVendorSectionKey(selectedInstanceId, section.vendor);
+        return {
+          ...section,
+          key,
+          isExpanded: vendorSectionOverrides.get(key) ?? section.vendor === defaultVendor,
+        };
+      }),
+    };
+  })();
+  const vendorSectionByKey = new Map(
+    vendorGroups?.sections.map((section) => [section.key, section] as const),
+  );
+
+  const toggleVendorSection = (key: string) => {
+    const section = vendorSectionByKey.get(key);
+    if (!section) return;
+    setVendorSectionOverrides((overrides) => new Map(overrides).set(key, !section.isExpanded));
+  };
+
+  const { visibleModels, filteredItemKeys, sectionedModelKeys } = (() => {
+    const models: ModelPickerItem[] = [];
+    const keys: string[] = [];
+    const sectioned = new Set<string>();
+    const pushModels = (list: ReadonlyArray<ModelPickerItem>, inSection = false) => {
+      for (const model of list) {
+        const key = modelPickerModelKey(model.instanceId, model.slug);
+        models.push(model);
+        keys.push(key);
+        if (inSection) sectioned.add(key);
+      }
+    };
+    if (vendorGroups) {
+      pushModels(vendorGroups.pinned);
+      for (const section of vendorGroups.sections) {
+        keys.push(section.key);
+        if (section.isExpanded) pushModels(section.models, true);
+      }
+    } else {
+      pushModels(legacySection?.currentModels ?? filteredModels);
     }
-    return [
-      ...legacySection.currentModels,
-      ...(legacySection.isExpanded ? legacySection.legacyModels : []),
-    ];
+    // The toggle trails the list, so expanding it reveals older models above it.
+    if (legacySection) {
+      if (legacySection.isExpanded) pushModels(legacySection.legacyModels);
+      keys.push(legacySection.key);
+    }
+    return { visibleModels: models, filteredItemKeys: keys, sectionedModelKeys: sectioned };
   })();
 
   const selectedEntry =
@@ -717,18 +791,14 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
   const allItemKeys = ((): string[] => [
     ...flatModels.map((model) => modelPickerModelKey(model.instanceId, model.slug)),
     ...new Set(
-      flatModels
-        .filter((model) => model.isLegacy)
-        .map((model) => modelPickerLegacySectionKey(model.instanceId)),
+      flatModels.flatMap((model) => [
+        ...(model.isLegacy ? [modelPickerLegacySectionKey(model.instanceId)] : []),
+        ...(model.subProvider
+          ? [modelPickerVendorSectionKey(model.instanceId, model.subProvider)]
+          : []),
+      ]),
     ),
   ])();
-  const filteredItemKeys = ((): string[] => {
-    const modelKeys = visibleModels.map((model) =>
-      modelPickerModelKey(model.instanceId, model.slug),
-    );
-    // The toggle trails the list, so expanding it reveals older models above it.
-    return legacySection ? [...modelKeys, legacySection.key] : modelKeys;
-  })();
   const filteredModelByKey = ((): ReadonlyMap<string, ModelPickerItem> =>
     new Map(
       visibleModels.map(
@@ -752,6 +822,7 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
     modelJumpLabelByKey,
     activeModelKey,
     selectedModelKeySet,
+    vendorSectionByKey,
   };
 
   const onWindowKeyDown = (event: globalThis.KeyboardEvent) => {
@@ -876,6 +947,10 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
             if (typeof modelKey !== "string") {
               return;
             }
+            if (vendorSectionByKey.has(modelKey)) {
+              toggleVendorSection(modelKey);
+              return;
+            }
             const legacyInstanceId = parseModelPickerLegacySectionKey(modelKey);
             if (legacyInstanceId) {
               toggleLegacySection(legacyInstanceId);
@@ -966,6 +1041,10 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
                   (e as typeof e & { preventBaseUIHandler?: () => void }).preventBaseUIHandler?.();
                   e.preventDefault();
                   e.stopPropagation();
+                  if (vendorSectionByKey.has(highlightedModelKeyRef.current)) {
+                    toggleVendorSection(highlightedModelKeyRef.current);
+                    return;
+                  }
                   const legacyInstanceId = parseModelPickerLegacySectionKey(
                     highlightedModelKeyRef.current,
                   );
@@ -1005,6 +1084,32 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
                     </ComboboxItem>
                   );
                 }
+                const vendorSection = vendorSectionByKey.get(modelKey);
+                if (vendorSection) {
+                  return (
+                    <ComboboxItem
+                      hideIndicator
+                      index={index}
+                      value={modelKey}
+                      aria-expanded={vendorSection.isExpanded}
+                      className="group w-full cursor-pointer"
+                    >
+                      <ChevronRightIcon
+                        aria-hidden="true"
+                        className={cn(
+                          "size-3.5 shrink-0 text-muted-foreground",
+                          vendorSection.isExpanded && "rotate-90",
+                        )}
+                      />
+                      <span className="min-w-0 flex-1 truncate text-xs font-medium leading-snug text-muted-foreground group-hover:text-foreground group-data-highlighted:text-foreground">
+                        {vendorSection.vendor}
+                      </span>
+                      <span className="shrink-0 text-xs tabular-nums text-muted-foreground/70">
+                        {vendorSection.models.length}
+                      </span>
+                    </ComboboxItem>
+                  );
+                }
                 const model = filteredModelByKey.get(modelKey);
                 if (!model) {
                   return null;
@@ -1018,6 +1123,7 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
                     slug={model.slug}
                     name={model.name}
                     subProvider={model.subProvider}
+                    showSubProvider={!sectionedModelKeys.has(modelKey)}
                     instanceId={model.instanceId}
                     driverKind={model.driverKind}
                     providerDisplayName={model.instanceDisplayName}
diff --git a/apps/web/src/components/chat/ProviderModelPicker.browser.test.tsx b/apps/web/src/components/chat/ProviderModelPicker.browser.test.tsx
index b6dd1a38e86cf..e61ec2e4ece70 100644
--- a/apps/web/src/components/chat/ProviderModelPicker.browser.test.tsx
+++ b/apps/web/src/components/chat/ProviderModelPicker.browser.test.tsx
@@ -169,3 +169,59 @@ it("keeps a docked picker open after a pick and hands focus to that model's effo
   await userEvent.keyboard("{Escape}");
   await expect.element(search).not.toBeInTheDocument();
 });
+
+it("folds an aggregator's vendors into sections that open on click and stay searchable", async () => {
+  const instanceId = ProviderInstanceId.make("opencode");
+  const entries = deriveProviderInstanceEntries([
+    {
+      instanceId,
+      driver: ProviderDriverKind.make("opencode"),
+      enabled: true,
+      installed: true,
+      version: null,
+      status: "ready",
+      auth: { status: "authenticated" },
+      checkedAt: "2026-01-01T00:00:00.000Z",
+      models: [],
+      slashCommands: [],
+      skills: [],
+    },
+  ]);
+  const options = new Map([
+    [
+      instanceId,
+      [
+        { slug: "anthropic/claude-sonnet", name: "Claude Sonnet", subProvider: "Anthropic" },
+        { slug: "openai/gpt-pro", name: "GPT Pro", subProvider: "OpenAI" },
+      ],
+    ],
+  ]);
+
+  await using screen = await render(
+    <ProviderModelPicker
+      environmentId={null}
+      activeInstanceId={instanceId}
+      model="anthropic/claude-sonnet"
+      lockedProvider={null}
+      instanceEntries={entries}
+      modelOptionsByInstance={options}
+      triggerAriaLabel="Choose model"
+      onInstanceModelChange={() => {}}
+    />,
+  );
+  await screen.getByRole("button", { name: "Choose model" }).click();
+  const gptPro = page.getByRole("option", { name: /GPT Pro/ });
+  await expect.element(page.getByRole("option", { name: /Claude Sonnet/ })).toBeVisible();
+  await expect.element(gptPro).not.toBeInTheDocument();
+
+  await userEvent.keyboard("gpt");
+  await expect.element(gptPro).toBeVisible();
+  await userEvent.clear(page.getByPlaceholder("Search models..."));
+  await expect.element(gptPro).not.toBeInTheDocument();
+
+  const openAiSection = page.getByRole("option", { name: /^OpenAI/ });
+  await expect.element(openAiSection).toHaveAttribute("aria-expanded", "false");
+  await openAiSection.click();
+  await expect.element(gptPro).toBeVisible();
+  await expect.element(openAiSection).toHaveAttribute("aria-expanded", "true");
+});
diff --git a/apps/web/src/components/chat/modelPickerKeys.ts b/apps/web/src/components/chat/modelPickerKeys.ts
index 0b4f0845e116f..3f7df671b653f 100644
--- a/apps/web/src/components/chat/modelPickerKeys.ts
+++ b/apps/web/src/components/chat/modelPickerKeys.ts
@@ -2,18 +2,20 @@ import type { ProviderInstanceId } from "@t3tools/contracts";
 
 const MODEL_KEY_PREFIX = "model:";
 const LEGACY_SECTION_KEY_PREFIX = "legacy-models:";
+const VENDOR_SECTION_KEY_PREFIX = "vendor-section:";
 
-export function modelPickerModelKey(instanceId: ProviderInstanceId, slug: string): string {
-  return `${MODEL_KEY_PREFIX}${instanceId.length}:${instanceId}${slug}`;
+function encodeInstanceKey(prefix: string, instanceId: ProviderInstanceId, rest: string): string {
+  return `${prefix}${instanceId.length}:${instanceId}${rest}`;
 }
 
-export function parseModelPickerModelKey(
+function decodeInstanceKey(
+  prefix: string,
   key: string,
-): { instanceId: ProviderInstanceId; slug: string } | null {
-  if (!key.startsWith(MODEL_KEY_PREFIX)) {
+): { instanceId: ProviderInstanceId; rest: string } | null {
+  if (!key.startsWith(prefix)) {
     return null;
   }
-  const encoded = key.slice(MODEL_KEY_PREFIX.length);
+  const encoded = key.slice(prefix.length);
   const separatorIndex = encoded.indexOf(":");
   if (separatorIndex === -1) {
     return null;
@@ -32,10 +34,28 @@ export function parseModelPickerModelKey(
 
   return {
     instanceId: value.slice(0, instanceIdLength) as ProviderInstanceId,
-    slug: value.slice(instanceIdLength),
+    rest: value.slice(instanceIdLength),
   };
 }
 
+export function modelPickerModelKey(instanceId: ProviderInstanceId, slug: string): string {
+  return encodeInstanceKey(MODEL_KEY_PREFIX, instanceId, slug);
+}
+
+export function parseModelPickerModelKey(
+  key: string,
+): { instanceId: ProviderInstanceId; slug: string } | null {
+  const decoded = decodeInstanceKey(MODEL_KEY_PREFIX, key);
+  return decoded ? { instanceId: decoded.instanceId, slug: decoded.rest } : null;
+}
+
+export function modelPickerVendorSectionKey(
+  instanceId: ProviderInstanceId,
+  vendor: string,
+): string {
+  return encodeInstanceKey(VENDOR_SECTION_KEY_PREFIX, instanceId, vendor);
+}
+
 export function modelPickerLegacySectionKey(instanceId: ProviderInstanceId): string {
   return `${LEGACY_SECTION_KEY_PREFIX}${instanceId}`;
 }
diff --git a/apps/web/src/components/chat/modelPickerVendorSections.test.ts b/apps/web/src/components/chat/modelPickerVendorSections.test.ts
new file mode 100644
index 0000000000000..f0aaf1b1344c8
--- /dev/null
+++ b/apps/web/src/components/chat/modelPickerVendorSections.test.ts
@@ -0,0 +1,40 @@
+import { describe, expect, it } from "vite-plus/test";
+import { groupModelPickerVendors } from "./modelPickerVendorSections";
+
+const model = (slug: string, subProvider?: string) => ({
+  slug,
+  ...(subProvider ? { subProvider } : {}),
+});
+
+describe("groupModelPickerVendors", () => {
+  it("folds a multi-vendor catalog into sorted vendor sections and keeps pinned models above them", () => {
+    const grouped = groupModelPickerVendors(
+      [
+        model("zen/big-pickle", "OpenCode Zen"),
+        model("anthropic/claude-sonnet", "Anthropic"),
+        model("custom"),
+        model("openai/gpt", "openai"),
+        model("anthropic/claude-opus", "Anthropic"),
+      ],
+      (candidate) => candidate.slug === "anthropic/claude-opus",
+    );
+
+    expect(grouped).toEqual({
+      pinned: [model("custom"), model("anthropic/claude-opus", "Anthropic")],
+      sections: [
+        { vendor: "Anthropic", models: [model("anthropic/claude-sonnet", "Anthropic")] },
+        { vendor: "openai", models: [model("openai/gpt", "openai")] },
+        { vendor: "OpenCode Zen", models: [model("zen/big-pickle", "OpenCode Zen")] },
+      ],
+    });
+  });
+
+  it("leaves a single-vendor catalog as a plain list", () => {
+    expect(
+      groupModelPickerVendors(
+        [model("a", "Anthropic"), model("b", "Anthropic"), model("c")],
+        () => false,
+      ),
+    ).toBeNull();
+  });
+});
diff --git a/apps/web/src/components/chat/modelPickerVendorSections.ts b/apps/web/src/components/chat/modelPickerVendorSections.ts
new file mode 100644
index 0000000000000..f3663cb900218
--- /dev/null
+++ b/apps/web/src/components/chat/modelPickerVendorSections.ts
@@ -0,0 +1,32 @@
+export interface ModelPickerVendorSection<T> {
+  readonly vendor: string;
+  readonly models: ReadonlyArray<T>;
+}
+
+export function groupModelPickerVendors<T extends { readonly subProvider?: string }>(
+  models: ReadonlyArray<T>,
+  isPinned: (model: T) => boolean,
+): { pinned: ReadonlyArray<T>; sections: ReadonlyArray<ModelPickerVendorSection<T>> } | null {
+  const pinned: T[] = [];
+  const modelsByVendor = new Map<string, T[]>();
+  for (const model of models) {
+    if (!model.subProvider || isPinned(model)) {
+      pinned.push(model);
+      continue;
+    }
+    const vendorModels = modelsByVendor.get(model.subProvider);
+    if (vendorModels) {
+      vendorModels.push(model);
+    } else {
+      modelsByVendor.set(model.subProvider, [model]);
+    }
+  }
+  if (modelsByVendor.size < 2) {
+    return null;
+  }
+  const sections = Array.from(modelsByVendor, ([vendor, vendorModels]) => ({
+    vendor,
+    models: vendorModels,
+  })).toSorted((a, b) => a.vendor.localeCompare(b.vendor, undefined, { sensitivity: "base" }));
+  return { pinned, sections };
+}

From aae4ac21f78c365e5102e5d9eca5d6a8c2eb1ba6 Mon Sep 17 00:00:00 2001
From: Marve10s <igrimanigroman@gmail.com>
Date: Wed, 4 Nov 2026 14:30:05 +0300
Subject: [PATCH 2/8] fix(web): vendor sections keep their state when a docked
 pick changes the model

---
 .../components/chat/ModelPickerContent.tsx    | 52 +++++++++++--------
 .../chat/ProviderModelPicker.browser.test.tsx | 36 ++++++++-----
 .../src/components/chat/modelPickerKeys.ts    | 28 +++-------
 .../chat/modelPickerVendorSections.ts         | 37 +++++--------
 4 files changed, 74 insertions(+), 79 deletions(-)

diff --git a/apps/web/src/components/chat/ModelPickerContent.tsx b/apps/web/src/components/chat/ModelPickerContent.tsx
index 4a17622158627..556279510afc8 100644
--- a/apps/web/src/components/chat/ModelPickerContent.tsx
+++ b/apps/web/src/components/chat/ModelPickerContent.tsx
@@ -435,6 +435,8 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
   const [vendorSectionOverrides, setVendorSectionOverrides] = useState(
     () => new Map<string, boolean>(),
   );
+  // Picks keep a docked picker open, so sections open from the model it opened with.
+  const [openedWithModelKey] = useState(activeModelKey);
   const serverKeybindings = useAtomValue(primaryServerKeybindingsAtom);
   const keybindings = providedKeybindings ?? serverKeybindings;
   const [searchHeight, setSearchHeight] = useState(0);
@@ -597,8 +599,7 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
     }
     for (const instanceId of tabsWithLegacyRow) addRow(instanceId);
     for (const [instanceId, vendors] of vendorsByTab) {
-      if (vendors.size < 2) continue;
-      vendors.forEach(() => addRow(instanceId));
+      if (vendors.size > 1) vendors.forEach(() => addRow(instanceId));
     }
     return Math.max(0, ...unitsByTab.values());
   })();
@@ -703,19 +704,21 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
       return null;
     }
     const defaultVendor =
-      (selectedInstanceId === props.activeInstanceId
-        ? grouped.sections.find((section) =>
-            section.models.some((model) => model.slug === activeModelSlug),
-          )?.vendor
-        : undefined) ?? grouped.sections[0]?.vendor;
+      grouped.sections.find((section) =>
+        section.models.some(
+          (model) => modelPickerModelKey(model.instanceId, model.slug) === openedWithModelKey,
+        ),
+      )?.vendor ?? grouped.sections[0]?.vendor;
     return {
       pinned: grouped.pinned,
       sections: grouped.sections.map((section) => {
         const key = modelPickerVendorSectionKey(selectedInstanceId, section.vendor);
+        const expandedByDefault = section.vendor === defaultVendor;
         return {
           ...section,
           key,
-          isExpanded: vendorSectionOverrides.get(key) ?? section.vendor === defaultVendor,
+          expandedByDefault,
+          isExpanded: vendorSectionOverrides.get(key) ?? expandedByDefault,
         };
       }),
     };
@@ -724,10 +727,13 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
     vendorGroups?.sections.map((section) => [section.key, section] as const),
   );
 
-  const toggleVendorSection = (key: string) => {
-    const section = vendorSectionByKey.get(key);
-    if (!section) return;
-    setVendorSectionOverrides((overrides) => new Map(overrides).set(key, !section.isExpanded));
+  const toggleVendorSection = (section: { key: string; expandedByDefault: boolean }) => {
+    setVendorSectionOverrides((overrides) =>
+      new Map(overrides).set(
+        section.key,
+        !(overrides.get(section.key) ?? section.expandedByDefault),
+      ),
+    );
   };
 
   const { visibleModels, filteredItemKeys, sectionedModelKeys } = (() => {
@@ -791,13 +797,11 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
   const allItemKeys = ((): string[] => [
     ...flatModels.map((model) => modelPickerModelKey(model.instanceId, model.slug)),
     ...new Set(
-      flatModels.flatMap((model) => [
-        ...(model.isLegacy ? [modelPickerLegacySectionKey(model.instanceId)] : []),
-        ...(model.subProvider
-          ? [modelPickerVendorSectionKey(model.instanceId, model.subProvider)]
-          : []),
-      ]),
+      flatModels
+        .filter((model) => model.isLegacy)
+        .map((model) => modelPickerLegacySectionKey(model.instanceId)),
     ),
+    ...vendorSectionByKey.keys(),
   ])();
   const filteredModelByKey = ((): ReadonlyMap<string, ModelPickerItem> =>
     new Map(
@@ -947,8 +951,9 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
             if (typeof modelKey !== "string") {
               return;
             }
-            if (vendorSectionByKey.has(modelKey)) {
-              toggleVendorSection(modelKey);
+            const vendorSection = vendorSectionByKey.get(modelKey);
+            if (vendorSection) {
+              toggleVendorSection(vendorSection);
               return;
             }
             const legacyInstanceId = parseModelPickerLegacySectionKey(modelKey);
@@ -1041,8 +1046,9 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
                   (e as typeof e & { preventBaseUIHandler?: () => void }).preventBaseUIHandler?.();
                   e.preventDefault();
                   e.stopPropagation();
-                  if (vendorSectionByKey.has(highlightedModelKeyRef.current)) {
-                    toggleVendorSection(highlightedModelKeyRef.current);
+                  const vendorSection = vendorSectionByKey.get(highlightedModelKeyRef.current);
+                  if (vendorSection) {
+                    toggleVendorSection(vendorSection);
                     return;
                   }
                   const legacyInstanceId = parseModelPickerLegacySectionKey(
@@ -1105,7 +1111,9 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
                         {vendorSection.vendor}
                       </span>
                       <span className="shrink-0 text-xs tabular-nums text-muted-foreground/70">
+                        <span className="sr-only">, </span>
                         {vendorSection.models.length}
+                        <span className="sr-only"> models</span>
                       </span>
                     </ComboboxItem>
                   );
diff --git a/apps/web/src/components/chat/ProviderModelPicker.browser.test.tsx b/apps/web/src/components/chat/ProviderModelPicker.browser.test.tsx
index e61ec2e4ece70..49bd719fe5445 100644
--- a/apps/web/src/components/chat/ProviderModelPicker.browser.test.tsx
+++ b/apps/web/src/components/chat/ProviderModelPicker.browser.test.tsx
@@ -197,18 +197,24 @@ it("folds an aggregator's vendors into sections that open on click and stay sear
     ],
   ]);
 
-  await using screen = await render(
-    <ProviderModelPicker
-      environmentId={null}
-      activeInstanceId={instanceId}
-      model="anthropic/claude-sonnet"
-      lockedProvider={null}
-      instanceEntries={entries}
-      modelOptionsByInstance={options}
-      triggerAriaLabel="Choose model"
-      onInstanceModelChange={() => {}}
-    />,
-  );
+  function Picker() {
+    const [model, setModel] = useState("anthropic/claude-sonnet");
+    return (
+      <ProviderModelPicker
+        environmentId={null}
+        activeInstanceId={instanceId}
+        model={model}
+        lockedProvider={null}
+        instanceEntries={entries}
+        modelOptionsByInstance={options}
+        triggerAriaLabel="Choose model"
+        onInstanceModelChange={(_, selected) => setModel(selected)}
+        effortColumn={[]}
+      />
+    );
+  }
+
+  await using screen = await render(<Picker />);
   await screen.getByRole("button", { name: "Choose model" }).click();
   const gptPro = page.getByRole("option", { name: /GPT Pro/ });
   await expect.element(page.getByRole("option", { name: /Claude Sonnet/ })).toBeVisible();
@@ -224,4 +230,10 @@ it("folds an aggregator's vendors into sections that open on click and stay sear
   await openAiSection.click();
   await expect.element(gptPro).toBeVisible();
   await expect.element(openAiSection).toHaveAttribute("aria-expanded", "true");
+
+  await gptPro.click();
+  await expect
+    .element(page.getByRole("option", { name: /^Anthropic/ }))
+    .toHaveAttribute("aria-expanded", "true");
+  await expect.element(page.getByRole("option", { name: /Claude Sonnet/ })).toBeVisible();
 });
diff --git a/apps/web/src/components/chat/modelPickerKeys.ts b/apps/web/src/components/chat/modelPickerKeys.ts
index 3f7df671b653f..2b9a62038b390 100644
--- a/apps/web/src/components/chat/modelPickerKeys.ts
+++ b/apps/web/src/components/chat/modelPickerKeys.ts
@@ -4,18 +4,17 @@ const MODEL_KEY_PREFIX = "model:";
 const LEGACY_SECTION_KEY_PREFIX = "legacy-models:";
 const VENDOR_SECTION_KEY_PREFIX = "vendor-section:";
 
-function encodeInstanceKey(prefix: string, instanceId: ProviderInstanceId, rest: string): string {
-  return `${prefix}${instanceId.length}:${instanceId}${rest}`;
+export function modelPickerModelKey(instanceId: ProviderInstanceId, slug: string): string {
+  return `${MODEL_KEY_PREFIX}${instanceId.length}:${instanceId}${slug}`;
 }
 
-function decodeInstanceKey(
-  prefix: string,
+export function parseModelPickerModelKey(
   key: string,
-): { instanceId: ProviderInstanceId; rest: string } | null {
-  if (!key.startsWith(prefix)) {
+): { instanceId: ProviderInstanceId; slug: string } | null {
+  if (!key.startsWith(MODEL_KEY_PREFIX)) {
     return null;
   }
-  const encoded = key.slice(prefix.length);
+  const encoded = key.slice(MODEL_KEY_PREFIX.length);
   const separatorIndex = encoded.indexOf(":");
   if (separatorIndex === -1) {
     return null;
@@ -34,26 +33,15 @@ function decodeInstanceKey(
 
   return {
     instanceId: value.slice(0, instanceIdLength) as ProviderInstanceId,
-    rest: value.slice(instanceIdLength),
+    slug: value.slice(instanceIdLength),
   };
 }
 
-export function modelPickerModelKey(instanceId: ProviderInstanceId, slug: string): string {
-  return encodeInstanceKey(MODEL_KEY_PREFIX, instanceId, slug);
-}
-
-export function parseModelPickerModelKey(
-  key: string,
-): { instanceId: ProviderInstanceId; slug: string } | null {
-  const decoded = decodeInstanceKey(MODEL_KEY_PREFIX, key);
-  return decoded ? { instanceId: decoded.instanceId, slug: decoded.rest } : null;
-}
-
 export function modelPickerVendorSectionKey(
   instanceId: ProviderInstanceId,
   vendor: string,
 ): string {
-  return encodeInstanceKey(VENDOR_SECTION_KEY_PREFIX, instanceId, vendor);
+  return `${VENDOR_SECTION_KEY_PREFIX}${instanceId.length}:${instanceId}${vendor}`;
 }
 
 export function modelPickerLegacySectionKey(instanceId: ProviderInstanceId): string {
diff --git a/apps/web/src/components/chat/modelPickerVendorSections.ts b/apps/web/src/components/chat/modelPickerVendorSections.ts
index f3663cb900218..0b720215bcf24 100644
--- a/apps/web/src/components/chat/modelPickerVendorSections.ts
+++ b/apps/web/src/components/chat/modelPickerVendorSections.ts
@@ -1,32 +1,19 @@
-export interface ModelPickerVendorSection<T> {
-  readonly vendor: string;
-  readonly models: ReadonlyArray<T>;
-}
+import * as Arr from "effect/Array";
 
 export function groupModelPickerVendors<T extends { readonly subProvider?: string }>(
   models: ReadonlyArray<T>,
   isPinned: (model: T) => boolean,
-): { pinned: ReadonlyArray<T>; sections: ReadonlyArray<ModelPickerVendorSection<T>> } | null {
-  const pinned: T[] = [];
-  const modelsByVendor = new Map<string, T[]>();
-  for (const model of models) {
-    if (!model.subProvider || isPinned(model)) {
-      pinned.push(model);
-      continue;
-    }
-    const vendorModels = modelsByVendor.get(model.subProvider);
-    if (vendorModels) {
-      vendorModels.push(model);
-    } else {
-      modelsByVendor.set(model.subProvider, [model]);
-    }
-  }
-  if (modelsByVendor.size < 2) {
+) {
+  const inSection = (model: T) => model.subProvider !== undefined && !isPinned(model);
+  const modelsByVendor = Arr.groupBy(models.filter(inSection), (model) => model.subProvider ?? "");
+  const vendors = Object.keys(modelsByVendor).toSorted((a, b) =>
+    a.localeCompare(b, undefined, { sensitivity: "base" }),
+  );
+  if (vendors.length < 2) {
     return null;
   }
-  const sections = Array.from(modelsByVendor, ([vendor, vendorModels]) => ({
-    vendor,
-    models: vendorModels,
-  })).toSorted((a, b) => a.vendor.localeCompare(b.vendor, undefined, { sensitivity: "base" }));
-  return { pinned, sections };
+  return {
+    pinned: models.filter((model) => !inSection(model)),
+    sections: vendors.map((vendor) => ({ vendor, models: modelsByVendor[vendor]! })),
+  };
 }

From c90a0265564129d59f70deb7abaeb4f3241c2b55 Mon Sep 17 00:00:00 2001
From: Marve10s <igrimanigroman@gmail.com>
Date: Wed, 4 Nov 2026 14:42:54 +0300
Subject: [PATCH 3/8] fix(web): starring the opening model keeps its vendor
 section open

---
 .../src/components/chat/ModelPickerContent.tsx   | 13 ++++++-------
 .../chat/modelPickerVendorSections.test.ts       | 16 ++++++++++++++++
 .../components/chat/modelPickerVendorSections.ts |  3 +++
 3 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/components/chat/ModelPickerContent.tsx b/apps/web/src/components/chat/ModelPickerContent.tsx
index 556279510afc8..06a71889b5d39 100644
--- a/apps/web/src/components/chat/ModelPickerContent.tsx
+++ b/apps/web/src/components/chat/ModelPickerContent.tsx
@@ -699,21 +699,20 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
     const grouped = groupModelPickerVendors(
       legacySection?.currentModels ?? filteredModels,
       (model) => favoritesSet.has(providerModelKey(model.instanceId, model.slug)),
+      flatModels.find(
+        (model) =>
+          model.instanceId === selectedInstanceId &&
+          modelPickerModelKey(model.instanceId, model.slug) === openedWithModelKey,
+      )?.subProvider,
     );
     if (!grouped) {
       return null;
     }
-    const defaultVendor =
-      grouped.sections.find((section) =>
-        section.models.some(
-          (model) => modelPickerModelKey(model.instanceId, model.slug) === openedWithModelKey,
-        ),
-      )?.vendor ?? grouped.sections[0]?.vendor;
     return {
       pinned: grouped.pinned,
       sections: grouped.sections.map((section) => {
         const key = modelPickerVendorSectionKey(selectedInstanceId, section.vendor);
-        const expandedByDefault = section.vendor === defaultVendor;
+        const expandedByDefault = section.vendor === grouped.defaultVendor;
         return {
           ...section,
           key,
diff --git a/apps/web/src/components/chat/modelPickerVendorSections.test.ts b/apps/web/src/components/chat/modelPickerVendorSections.test.ts
index f0aaf1b1344c8..e52f570506129 100644
--- a/apps/web/src/components/chat/modelPickerVendorSections.test.ts
+++ b/apps/web/src/components/chat/modelPickerVendorSections.test.ts
@@ -17,6 +17,7 @@ describe("groupModelPickerVendors", () => {
         model("anthropic/claude-opus", "Anthropic"),
       ],
       (candidate) => candidate.slug === "anthropic/claude-opus",
+      undefined,
     );
 
     expect(grouped).toEqual({
@@ -26,14 +27,29 @@ describe("groupModelPickerVendors", () => {
         { vendor: "openai", models: [model("openai/gpt", "openai")] },
         { vendor: "OpenCode Zen", models: [model("zen/big-pickle", "OpenCode Zen")] },
       ],
+      defaultVendor: "Anthropic",
     });
   });
 
+  it("keeps the preferred vendor open after its model is pinned", () => {
+    const models = [
+      model("a/sonnet", "Anthropic"),
+      model("o/pro", "OpenAI"),
+      model("o/mini", "OpenAI"),
+    ];
+
+    expect(
+      groupModelPickerVendors(models, (candidate) => candidate.slug === "o/pro", "OpenAI")
+        ?.defaultVendor,
+    ).toBe("OpenAI");
+  });
+
   it("leaves a single-vendor catalog as a plain list", () => {
     expect(
       groupModelPickerVendors(
         [model("a", "Anthropic"), model("b", "Anthropic"), model("c")],
         () => false,
+        "Anthropic",
       ),
     ).toBeNull();
   });
diff --git a/apps/web/src/components/chat/modelPickerVendorSections.ts b/apps/web/src/components/chat/modelPickerVendorSections.ts
index 0b720215bcf24..3e09a9c3e0707 100644
--- a/apps/web/src/components/chat/modelPickerVendorSections.ts
+++ b/apps/web/src/components/chat/modelPickerVendorSections.ts
@@ -3,6 +3,7 @@ import * as Arr from "effect/Array";
 export function groupModelPickerVendors<T extends { readonly subProvider?: string }>(
   models: ReadonlyArray<T>,
   isPinned: (model: T) => boolean,
+  preferredVendor: string | undefined,
 ) {
   const inSection = (model: T) => model.subProvider !== undefined && !isPinned(model);
   const modelsByVendor = Arr.groupBy(models.filter(inSection), (model) => model.subProvider ?? "");
@@ -15,5 +16,7 @@ export function groupModelPickerVendors<T extends { readonly subProvider?: strin
   return {
     pinned: models.filter((model) => !inSection(model)),
     sections: vendors.map((vendor) => ({ vendor, models: modelsByVendor[vendor]! })),
+    defaultVendor:
+      preferredVendor && vendors.includes(preferredVendor) ? preferredVendor : vendors[0],
   };
 }

From c2b8d7d6da42823796680acac60524bf5d8fb751 Mon Sep 17 00:00:00 2001
From: Marve10s <igrimanigroman@gmail.com>
Date: Wed, 4 Nov 2026 14:49:13 +0300
Subject: [PATCH 4/8] fix(web): vendor sections open from the favorites the
 picker opened with

---
 .../components/chat/ModelPickerContent.tsx    | 24 ++++++++++++-------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/components/chat/ModelPickerContent.tsx b/apps/web/src/components/chat/ModelPickerContent.tsx
index 06a71889b5d39..a21c5ffc79667 100644
--- a/apps/web/src/components/chat/ModelPickerContent.tsx
+++ b/apps/web/src/components/chat/ModelPickerContent.tsx
@@ -435,8 +435,9 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
   const [vendorSectionOverrides, setVendorSectionOverrides] = useState(
     () => new Map<string, boolean>(),
   );
-  // Picks keep a docked picker open, so sections open from the model it opened with.
+  // Picks and stars keep a docked picker open, so sections open from its state at open.
   const [openedWithModelKey] = useState(activeModelKey);
+  const [favoritesAtOpen] = useState(favoritesSet);
   const serverKeybindings = useAtomValue(primaryServerKeybindingsAtom);
   const keybindings = providedKeybindings ?? serverKeybindings;
   const [searchHeight, setSearchHeight] = useState(0);
@@ -696,23 +697,30 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
     if (isSearching || selectedInstanceId === "favorites") {
       return null;
     }
+    const models = legacySection?.currentModels ?? filteredModels;
     const grouped = groupModelPickerVendors(
-      legacySection?.currentModels ?? filteredModels,
+      models,
       (model) => favoritesSet.has(providerModelKey(model.instanceId, model.slug)),
-      flatModels.find(
-        (model) =>
-          model.instanceId === selectedInstanceId &&
-          modelPickerModelKey(model.instanceId, model.slug) === openedWithModelKey,
-      )?.subProvider,
+      undefined,
     );
     if (!grouped) {
       return null;
     }
+    const defaultVendor =
+      groupModelPickerVendors(
+        models,
+        (model) => favoritesAtOpen.has(providerModelKey(model.instanceId, model.slug)),
+        flatModels.find(
+          (model) =>
+            model.instanceId === selectedInstanceId &&
+            modelPickerModelKey(model.instanceId, model.slug) === openedWithModelKey,
+        )?.subProvider,
+      )?.defaultVendor ?? grouped.defaultVendor;
     return {
       pinned: grouped.pinned,
       sections: grouped.sections.map((section) => {
         const key = modelPickerVendorSectionKey(selectedInstanceId, section.vendor);
-        const expandedByDefault = section.vendor === grouped.defaultVendor;
+        const expandedByDefault = section.vendor === defaultVendor;
         return {
           ...section,
           key,

From 26c8f540f2a9281a6ba14306bc2c7ce6d346c1b5 Mon Sep 17 00:00:00 2001
From: Marve10s <igrimanigroman@gmail.com>
Date: Wed, 4 Nov 2026 14:55:22 +0300
Subject: [PATCH 5/8] fix(web): rows inside a vendor section keep the vendor in
 their accessible name

---
 apps/web/src/components/chat/ModelListRow.tsx          | 10 ++++++++--
 .../chat/ProviderModelPicker.browser.test.tsx          |  4 +++-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/chat/ModelListRow.tsx b/apps/web/src/components/chat/ModelListRow.tsx
index e8dcc9d857c6a..1c44f0a7e60ed 100644
--- a/apps/web/src/components/chat/ModelListRow.tsx
+++ b/apps/web/src/components/chat/ModelListRow.tsx
@@ -81,8 +81,14 @@ export const ModelListRow = memo(function ModelListRow(props: {
           <span className="sr-only">, {props.providerDisplayName}</span>
         </div>
         {props.isSelected ? <CheckIcon className="size-3.5 shrink-0" aria-hidden="true" /> : null}
-        {props.subProvider && props.showSubProvider !== false ? (
-          <span className="min-w-0 shrink truncate text-xs text-muted-foreground/70">
+        {props.subProvider ? (
+          <span
+            className={
+              props.showSubProvider === false
+                ? "sr-only"
+                : "min-w-0 shrink truncate text-xs text-muted-foreground/70"
+            }
+          >
             {props.subProvider}
           </span>
         ) : null}
diff --git a/apps/web/src/components/chat/ProviderModelPicker.browser.test.tsx b/apps/web/src/components/chat/ProviderModelPicker.browser.test.tsx
index 49bd719fe5445..871cdbc96b7a7 100644
--- a/apps/web/src/components/chat/ProviderModelPicker.browser.test.tsx
+++ b/apps/web/src/components/chat/ProviderModelPicker.browser.test.tsx
@@ -217,7 +217,9 @@ it("folds an aggregator's vendors into sections that open on click and stay sear
   await using screen = await render(<Picker />);
   await screen.getByRole("button", { name: "Choose model" }).click();
   const gptPro = page.getByRole("option", { name: /GPT Pro/ });
-  await expect.element(page.getByRole("option", { name: /Claude Sonnet/ })).toBeVisible();
+  await expect
+    .element(page.getByRole("option", { name: /Claude Sonnet.*Anthropic/ }))
+    .toBeVisible();
   await expect.element(gptPro).not.toBeInTheDocument();
 
   await userEvent.keyboard("gpt");

From 40ed59a290e5bd689bc03fc0982f86a36edb6510 Mon Sep 17 00:00:00 2001
From: maria-rcks <maria@kuuro.net>
Date: Tue, 10 Nov 2026 06:13:06 +0000
Subject: [PATCH 6/8] fix(web): starring a vendor's last model keeps the
 picker's sections

---
 .../components/chat/ModelPickerContent.tsx    | 19 +++++--------
 .../chat/modelPickerVendorSections.test.ts    | 25 +++++++++++++++--
 .../chat/modelPickerVendorSections.ts         | 27 +++++++++++++------
 3 files changed, 49 insertions(+), 22 deletions(-)

diff --git a/apps/web/src/components/chat/ModelPickerContent.tsx b/apps/web/src/components/chat/ModelPickerContent.tsx
index a21c5ffc79667..b39922ae88379 100644
--- a/apps/web/src/components/chat/ModelPickerContent.tsx
+++ b/apps/web/src/components/chat/ModelPickerContent.tsx
@@ -701,26 +701,21 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
     const grouped = groupModelPickerVendors(
       models,
       (model) => favoritesSet.has(providerModelKey(model.instanceId, model.slug)),
-      undefined,
+      (model) => favoritesAtOpen.has(providerModelKey(model.instanceId, model.slug)),
+      flatModels.find(
+        (model) =>
+          model.instanceId === selectedInstanceId &&
+          modelPickerModelKey(model.instanceId, model.slug) === openedWithModelKey,
+      )?.subProvider,
     );
     if (!grouped) {
       return null;
     }
-    const defaultVendor =
-      groupModelPickerVendors(
-        models,
-        (model) => favoritesAtOpen.has(providerModelKey(model.instanceId, model.slug)),
-        flatModels.find(
-          (model) =>
-            model.instanceId === selectedInstanceId &&
-            modelPickerModelKey(model.instanceId, model.slug) === openedWithModelKey,
-        )?.subProvider,
-      )?.defaultVendor ?? grouped.defaultVendor;
     return {
       pinned: grouped.pinned,
       sections: grouped.sections.map((section) => {
         const key = modelPickerVendorSectionKey(selectedInstanceId, section.vendor);
-        const expandedByDefault = section.vendor === defaultVendor;
+        const expandedByDefault = section.vendor === grouped.defaultVendor;
         return {
           ...section,
           key,
diff --git a/apps/web/src/components/chat/modelPickerVendorSections.test.ts b/apps/web/src/components/chat/modelPickerVendorSections.test.ts
index e52f570506129..f8f0aed9cbd59 100644
--- a/apps/web/src/components/chat/modelPickerVendorSections.test.ts
+++ b/apps/web/src/components/chat/modelPickerVendorSections.test.ts
@@ -17,6 +17,7 @@ describe("groupModelPickerVendors", () => {
         model("anthropic/claude-opus", "Anthropic"),
       ],
       (candidate) => candidate.slug === "anthropic/claude-opus",
+      () => false,
       undefined,
     );
 
@@ -39,16 +40,36 @@ describe("groupModelPickerVendors", () => {
     ];
 
     expect(
-      groupModelPickerVendors(models, (candidate) => candidate.slug === "o/pro", "OpenAI")
-        ?.defaultVendor,
+      groupModelPickerVendors(
+        models,
+        (candidate) => candidate.slug === "o/pro",
+        () => false,
+        "OpenAI",
+      )?.defaultVendor,
     ).toBe("OpenAI");
   });
 
+  it("keeps sections after starring the last model of one of two vendors", () => {
+    expect(
+      groupModelPickerVendors(
+        [model("a/sonnet", "Anthropic"), model("o/pro", "OpenAI")],
+        (candidate) => candidate.slug === "a/sonnet",
+        () => false,
+        "Anthropic",
+      ),
+    ).toEqual({
+      pinned: [model("a/sonnet", "Anthropic")],
+      sections: [{ vendor: "OpenAI", models: [model("o/pro", "OpenAI")] }],
+      defaultVendor: "Anthropic",
+    });
+  });
+
   it("leaves a single-vendor catalog as a plain list", () => {
     expect(
       groupModelPickerVendors(
         [model("a", "Anthropic"), model("b", "Anthropic"), model("c")],
         () => false,
+        () => false,
         "Anthropic",
       ),
     ).toBeNull();
diff --git a/apps/web/src/components/chat/modelPickerVendorSections.ts b/apps/web/src/components/chat/modelPickerVendorSections.ts
index 3e09a9c3e0707..15d520a96d2bd 100644
--- a/apps/web/src/components/chat/modelPickerVendorSections.ts
+++ b/apps/web/src/components/chat/modelPickerVendorSections.ts
@@ -1,22 +1,33 @@
 import * as Arr from "effect/Array";
 
+// Sectioning and the open section come from the pins at open, so starring a model never reflows them.
 export function groupModelPickerVendors<T extends { readonly subProvider?: string }>(
   models: ReadonlyArray<T>,
   isPinned: (model: T) => boolean,
+  isPinnedAtOpen: (model: T) => boolean,
   preferredVendor: string | undefined,
 ) {
-  const inSection = (model: T) => model.subProvider !== undefined && !isPinned(model);
-  const modelsByVendor = Arr.groupBy(models.filter(inSection), (model) => model.subProvider ?? "");
-  const vendors = Object.keys(modelsByVendor).toSorted((a, b) =>
-    a.localeCompare(b, undefined, { sensitivity: "base" }),
-  );
-  if (vendors.length < 2) {
+  const sortedVendors = (pinned: (model: T) => boolean) =>
+    Arr.dedupe(
+      models.flatMap((model) =>
+        model.subProvider !== undefined && !pinned(model) ? [model.subProvider] : [],
+      ),
+    ).toSorted((a, b) => a.localeCompare(b, undefined, { sensitivity: "base" }));
+  const vendorsAtOpen = sortedVendors(isPinnedAtOpen);
+  if (vendorsAtOpen.length < 2) {
     return null;
   }
+  const inSection = (model: T) => model.subProvider !== undefined && !isPinned(model);
+  const modelsByVendor = Arr.groupBy(models.filter(inSection), (model) => model.subProvider ?? "");
   return {
     pinned: models.filter((model) => !inSection(model)),
-    sections: vendors.map((vendor) => ({ vendor, models: modelsByVendor[vendor]! })),
+    sections: sortedVendors(isPinned).map((vendor) => ({
+      vendor,
+      models: modelsByVendor[vendor]!,
+    })),
     defaultVendor:
-      preferredVendor && vendors.includes(preferredVendor) ? preferredVendor : vendors[0],
+      preferredVendor && vendorsAtOpen.includes(preferredVendor)
+        ? preferredVendor
+        : vendorsAtOpen[0],
   };
 }

From ac4e5ede573d614095712254d38e3281b2dd3444 Mon Sep 17 00:00:00 2001
From: maria-rcks <maria@kuuro.net>
Date: Wed, 11 Nov 2026 22:12:47 +0000
Subject: [PATCH 7/8] fix(web): keep vendor sections stable for legacy
 favorites

---
 .../components/chat/ModelPickerContent.tsx    | 17 ++++++++-------
 .../chat/modelPickerVendorSections.test.ts    |  9 ++++++++
 .../chat/modelPickerVendorSections.ts         | 21 +++++++++++++------
 3 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/apps/web/src/components/chat/ModelPickerContent.tsx b/apps/web/src/components/chat/ModelPickerContent.tsx
index 6bd685109540f..2a6cffc25ef16 100644
--- a/apps/web/src/components/chat/ModelPickerContent.tsx
+++ b/apps/web/src/components/chat/ModelPickerContent.tsx
@@ -603,15 +603,19 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
       if (!matchesLockedProvider(model)) continue;
       const isFavorite = favoritesSet.has(providerModelKey(model.instanceId, model.slug));
       if (isFavorite) addRow("favorites");
+      if (
+        model.subProvider &&
+        !model.isLegacy &&
+        !favoritesAtOpen.has(providerModelKey(model.instanceId, model.slug))
+      ) {
+        const vendors = vendorsByTab.get(model.instanceId) ?? new Set<string>();
+        vendors.add(model.subProvider);
+        vendorsByTab.set(model.instanceId, vendors);
+      }
       if (model.isLegacy && !isFavorite) {
         tabsWithLegacyRow.add(model.instanceId);
       } else {
         addRow(model.instanceId);
-        if (model.subProvider && !isFavorite) {
-          const vendors = vendorsByTab.get(model.instanceId) ?? new Set<string>();
-          vendors.add(model.subProvider);
-          vendorsByTab.set(model.instanceId, vendors);
-        }
       }
     }
     for (const instanceId of tabsWithLegacyRow) addRow(instanceId);
@@ -713,9 +717,8 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
     if (isSearching || selectedInstanceId === "favorites") {
       return null;
     }
-    const models = legacySection?.currentModels ?? filteredModels;
     const grouped = groupModelPickerVendors(
-      models,
+      filteredModels,
       (model) => favoritesSet.has(providerModelKey(model.instanceId, model.slug)),
       (model) => favoritesAtOpen.has(providerModelKey(model.instanceId, model.slug)),
       flatModels.find(
diff --git a/apps/web/src/components/chat/modelPickerVendorSections.test.ts b/apps/web/src/components/chat/modelPickerVendorSections.test.ts
index f8f0aed9cbd59..7fa7768531cb2 100644
--- a/apps/web/src/components/chat/modelPickerVendorSections.test.ts
+++ b/apps/web/src/components/chat/modelPickerVendorSections.test.ts
@@ -65,6 +65,15 @@ describe("groupModelPickerVendors", () => {
   });
 
   it("leaves a single-vendor catalog as a plain list", () => {
+    const legacy = { ...model("o/legacy", "OpenAI"), isLegacy: true };
+    const models = [model("a/current", "Anthropic"), legacy];
+    for (const isPinned of [
+      () => false,
+      (candidate: (typeof models)[number]) => candidate === legacy,
+    ]) {
+      expect(groupModelPickerVendors(models, isPinned, () => false, "Anthropic")).toBeNull();
+    }
+
     expect(
       groupModelPickerVendors(
         [model("a", "Anthropic"), model("b", "Anthropic"), model("c")],
diff --git a/apps/web/src/components/chat/modelPickerVendorSections.ts b/apps/web/src/components/chat/modelPickerVendorSections.ts
index 15d520a96d2bd..ad6b751af606f 100644
--- a/apps/web/src/components/chat/modelPickerVendorSections.ts
+++ b/apps/web/src/components/chat/modelPickerVendorSections.ts
@@ -1,26 +1,35 @@
 import * as Arr from "effect/Array";
 
 // Sectioning and the open section come from the pins at open, so starring a model never reflows them.
-export function groupModelPickerVendors<T extends { readonly subProvider?: string }>(
+export function groupModelPickerVendors<
+  T extends { readonly subProvider?: string; readonly isLegacy?: boolean },
+>(
   models: ReadonlyArray<T>,
   isPinned: (model: T) => boolean,
   isPinnedAtOpen: (model: T) => boolean,
   preferredVendor: string | undefined,
 ) {
-  const sortedVendors = (pinned: (model: T) => boolean) =>
+  const currentModels = models.filter((model) => !model.isLegacy || isPinned(model));
+  const sortedVendors = (pinned: (model: T) => boolean, candidates = currentModels) =>
     Arr.dedupe(
-      models.flatMap((model) =>
+      candidates.flatMap((model) =>
         model.subProvider !== undefined && !pinned(model) ? [model.subProvider] : [],
       ),
     ).toSorted((a, b) => a.localeCompare(b, undefined, { sensitivity: "base" }));
-  const vendorsAtOpen = sortedVendors(isPinnedAtOpen);
+  const vendorsAtOpen = sortedVendors(
+    isPinnedAtOpen,
+    models.filter((model) => !model.isLegacy),
+  );
   if (vendorsAtOpen.length < 2) {
     return null;
   }
   const inSection = (model: T) => model.subProvider !== undefined && !isPinned(model);
-  const modelsByVendor = Arr.groupBy(models.filter(inSection), (model) => model.subProvider ?? "");
+  const modelsByVendor = Arr.groupBy(
+    currentModels.filter(inSection),
+    (model) => model.subProvider ?? "",
+  );
   return {
-    pinned: models.filter((model) => !inSection(model)),
+    pinned: currentModels.filter((model) => !inSection(model)),
     sections: sortedVendors(isPinned).map((vendor) => ({
       vendor,
       models: modelsByVendor[vendor]!,

From 1b6c5b0e755bbd96c4ae80907935ab914e6deea9 Mon Sep 17 00:00:00 2001
From: maria-rcks <maria@kuuro.net>
Date: Wed, 11 Nov 2026 22:17:02 +0000
Subject: [PATCH 8/8] fix(web): accept optional legacy flags in vendor grouping

---
 apps/web/src/components/chat/modelPickerVendorSections.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/components/chat/modelPickerVendorSections.ts b/apps/web/src/components/chat/modelPickerVendorSections.ts
index ad6b751af606f..d7d2a704debce 100644
--- a/apps/web/src/components/chat/modelPickerVendorSections.ts
+++ b/apps/web/src/components/chat/modelPickerVendorSections.ts
@@ -2,7 +2,7 @@ import * as Arr from "effect/Array";
 
 // Sectioning and the open section come from the pins at open, so starring a model never reflows them.
 export function groupModelPickerVendors<
-  T extends { readonly subProvider?: string; readonly isLegacy?: boolean },
+  T extends { readonly subProvider?: string; readonly isLegacy?: boolean | undefined },
 >(
   models: ReadonlyArray<T>,
   isPinned: (model: T) => boolean,