From 41960cb691424002200ed7d3cdabc72026d0be0a Mon Sep 17 00:00:00 2001
From: Dara Adedeji <daraadedeji07@gmail.com>
Date: Thu, 16 Jul 2026 14:07:29 -0700
Subject: [PATCH 1/3] redesign(model-picker): compact rows, shortened model
 names, refined selection styling

- Shorten display names in the picker (GPT-5.6-Sol -> 5.6 Sol, Claude Fable 5 -> Fable 5) via getModelPickerDisplayAlias, with unit tests
- Hide the per-row provider line on single-provider tabs (the sidebar already shows the provider); keep it for search, favorites, and sub-provider models
- Blue-tinted selected-row state, tighter row metrics (rounded-sm, text-sm)
- Fix LegendList stale-row renders by passing all row-render inputs through extraData instead of only favoritesSet
- Move the scrollbar styling class onto the actual LegendList scroll element; widen the scrollbar hit area with an inset pill thumb

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 apps/web/src/components/chat/ModelListRow.tsx | 10 ++--
 .../components/chat/ModelPickerContent.tsx    | 40 ++++++++++++++--
 .../components/chat/ModelPickerSidebar.tsx    |  9 ++--
 .../components/chat/providerIconUtils.test.ts | 48 +++++++++++++++++++
 .../src/components/chat/providerIconUtils.ts  | 18 ++++++-
 apps/web/src/index.css                        | 21 +++++---
 6 files changed, 123 insertions(+), 23 deletions(-)
 create mode 100644 apps/web/src/components/chat/providerIconUtils.test.ts

diff --git a/apps/web/src/components/chat/ModelListRow.tsx b/apps/web/src/components/chat/ModelListRow.tsx
index 3f8915e5d8b..de7c04ee8ca 100644
--- a/apps/web/src/components/chat/ModelListRow.tsx
+++ b/apps/web/src/components/chat/ModelListRow.tsx
@@ -50,15 +50,15 @@ export const ModelListRow = memo(function ModelListRow(props: {
       disabled={Boolean(props.disabledReason)}
       contentClassName="flex w-full items-center gap-3"
       className={cn(
-        "group relative w-full !min-w-0 max-w-full cursor-pointer rounded-md px-2 py-2.5 transition-[background-color,box-shadow,color]",
-        "data-highlighted:bg-muted/56 data-selected:bg-transparent data-selected:text-foreground data-selected:ring-0",
+        "group relative my-0.5 w-full !min-w-0 max-w-full cursor-pointer rounded-sm px-2 py-2 transition-[background-color,box-shadow,color]",
+        "data-highlighted:bg-muted/56 data-selected:bg-blue-500/10 data-selected:text-foreground data-selected:ring-0 [&[data-highlighted][data-selected]]:bg-blue-500/15",
         props.disabledReason &&
           "data-disabled:pointer-events-auto data-disabled:cursor-not-allowed data-disabled:hover:bg-transparent",
       )}
     >
       <div className="min-w-0 flex-1 text-left">
         <div className="flex min-w-0 items-center gap-2">
-          <div className="min-w-0 truncate text-xs font-medium leading-snug">
+          <div className="min-w-0 truncate text-sm font-medium leading-snug">
             {props.useTriggerLabel
               ? getTriggerDisplayModelLabel(props.model)
               : getDisplayModelName(
@@ -69,7 +69,7 @@ export const ModelListRow = memo(function ModelListRow(props: {
           {props.isSelected ? <CheckIcon className="size-3.5 shrink-0 text-blue-400" /> : null}
           {props.showNewBadge ? (
             <span
-              className="shrink-0 rounded border border-amber-500/35 bg-amber-500/15 px-0.5 py-px text-[10px] font-bold uppercase leading-none tracking-wide text-amber-800 dark:border-amber-400/30 dark:bg-amber-400/12 dark:text-amber-200"
+              className="shrink-0 rounded-sm border border-amber-500/35 bg-amber-500/15 px-0.5 py-px text-[10px] font-bold uppercase leading-none tracking-wide text-amber-800 dark:border-amber-400/30 dark:bg-amber-400/12 dark:text-amber-200"
               aria-label="New model"
             >
               New
@@ -97,7 +97,7 @@ export const ModelListRow = memo(function ModelListRow(props: {
                 size="icon-xs"
                 variant="ghost"
                 className={cn(
-                  "-mr-1 shrink-0 text-muted-foreground/70 opacity-64 transition-[color,opacity] hover:text-foreground hover:opacity-100 group-hover:opacity-100",
+                  "-mr-1 shrink-0 rounded-sm text-muted-foreground/70 opacity-64 transition-[color,opacity] before:rounded-[calc(var(--radius-sm)-1px)] hover:text-foreground hover:opacity-100 group-hover:opacity-100",
                   props.isFavorite && "text-foreground opacity-100",
                 )}
                 onClick={(event) => {
diff --git a/apps/web/src/components/chat/ModelPickerContent.tsx b/apps/web/src/components/chat/ModelPickerContent.tsx
index e0d6b9afc5e..3320eed8b63 100644
--- a/apps/web/src/components/chat/ModelPickerContent.tsx
+++ b/apps/web/src/components/chat/ModelPickerContent.tsx
@@ -504,6 +504,28 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
     };
   }, [handleModelSelect, keybindings, modelJumpModelKeys, modelJumpShortcutContext]);
 
+  // LegendList only re-renders a row when its data item or `extraData`
+  // changes — a new `renderItem` closure alone is ignored. Everything the
+  // row render reads from surrounding state must therefore be represented
+  // here, or rows that keep their list position render stale output.
+  const listExtraData = useMemo(
+    () => ({
+      favoritesSet,
+      isSearching,
+      selectedInstanceId,
+      activeModelKey: `${props.activeInstanceId}:${props.model}`,
+      modelJumpLabelByKey,
+    }),
+    [
+      favoritesSet,
+      isSearching,
+      selectedInstanceId,
+      props.activeInstanceId,
+      props.model,
+      modelJumpLabelByKey,
+    ],
+  );
+
   useLayoutEffect(() => {
     setShowTopScrollFade(false);
     setShowBottomScrollFade(filteredModelKeys.length > 5);
@@ -619,11 +641,11 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
 
             {/* Model list */}
             <div className="relative min-h-0 flex-1 overflow-hidden">
-              <ComboboxListVirtualized className="model-picker-list size-full min-w-0 p-0">
+              <ComboboxListVirtualized className="not-empty:p-0 size-full min-w-0">
                 <LegendList<string>
                   ref={modelListRef}
                   data={filteredModelKeys}
-                  extraData={favoritesSet}
+                  extraData={listExtraData}
                   keyExtractor={(modelKey) => modelKey}
                   renderItem={({ item: modelKey, index }) => {
                     const model = filteredModelByKey.get(modelKey);
@@ -643,7 +665,17 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
                         providerAccentColor={model.instanceAccentColor}
                         isFavorite={favoritesSet.has(modelKey)}
                         isSelected={modelKey === `${props.activeInstanceId}:${props.model}`}
-                        showProvider
+                        showProvider={
+                          // When browsing a single provider's tab the sidebar
+                          // already says which provider these models belong
+                          // to, so the per-row provider line is redundant.
+                          // Keep it in mixed-provider views (favorites,
+                          // search) and for models that carry a sub-provider
+                          // distinction (e.g. "Claude · Bedrock").
+                          isSearching ||
+                          selectedInstanceId === "favorites" ||
+                          Boolean(model.subProvider)
+                        }
                         preferShortName={!isLocked}
                         useTriggerLabel={false}
                         showNewBadge={isModelPickerNewModel(model.driverKind, model.slug)}
@@ -659,7 +691,7 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
                   onLayout={updateModelListScrollFades}
                   onScroll={updateModelListScrollFades}
                   className={cn(
-                    "scrollbar-gutter-both h-full overflow-x-hidden overscroll-y-contain py-1.5 [--fade-size:1.5rem]",
+                    "model-picker-list scrollbar-gutter-both h-full overflow-x-hidden overscroll-y-contain py-1.5 [--fade-size:1.5rem]",
                     showTopScrollFade && "mask-t-from-[calc(100%-var(--fade-size))]",
                     showBottomScrollFade && "mask-b-from-[calc(100%-var(--fade-size))]",
                   )}
diff --git a/apps/web/src/components/chat/ModelPickerSidebar.tsx b/apps/web/src/components/chat/ModelPickerSidebar.tsx
index e5555cb0115..c0a479e62ea 100644
--- a/apps/web/src/components/chat/ModelPickerSidebar.tsx
+++ b/apps/web/src/components/chat/ModelPickerSidebar.tsx
@@ -102,10 +102,7 @@ export const ModelPickerSidebar = memo(function ModelPickerSidebar(props: {
       data-model-picker-sidebar="true"
     >
       <div className="h-full overflow-y-auto overscroll-contain [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
-        <div
-          ref={sidebarContentRef}
-          className="relative flex min-h-full flex-col gap-1 px-1 pb-1 pt-0.5"
-        >
+        <div ref={sidebarContentRef} className="relative flex min-h-full flex-col gap-1 p-1">
           {selectedIndicatorTop !== null ? (
             <div
               data-model-picker-selected-indicator="true"
@@ -125,7 +122,7 @@ export const ModelPickerSidebar = memo(function ModelPickerSidebar(props: {
                     render={
                       <button
                         className={cn(
-                          "relative isolate flex w-full cursor-pointer aspect-square items-center justify-center rounded-md transition-colors hover:bg-muted",
+                          "relative isolate flex w-full cursor-pointer aspect-square items-center justify-center rounded-sm transition-colors hover:bg-muted",
                         )}
                         onClick={() => handleSelect("favorites")}
                         type="button"
@@ -172,7 +169,7 @@ export const ModelPickerSidebar = memo(function ModelPickerSidebar(props: {
               <button
                 data-model-picker-provider={entry.instanceId}
                 className={cn(
-                  "relative isolate flex w-full cursor-pointer aspect-square items-center justify-center rounded-md transition-colors hover:bg-muted",
+                  "relative isolate flex w-full cursor-pointer aspect-square items-center justify-center rounded-sm transition-colors hover:bg-muted",
                   isDisabled && "opacity-50 cursor-not-allowed hover:bg-transparent",
                 )}
                 data-provider-accent-color={entry.accentColor}
diff --git a/apps/web/src/components/chat/providerIconUtils.test.ts b/apps/web/src/components/chat/providerIconUtils.test.ts
new file mode 100644
index 00000000000..58baee4860b
--- /dev/null
+++ b/apps/web/src/components/chat/providerIconUtils.test.ts
@@ -0,0 +1,48 @@
+import { describe, expect, it } from "vite-plus/test";
+
+import {
+  getDisplayModelName,
+  getModelPickerDisplayAlias,
+  getTriggerDisplayModelName,
+} from "./providerIconUtils";
+
+describe("getModelPickerDisplayAlias", () => {
+  it("shortens GPT model names while preserving model family suffixes", () => {
+    expect(getModelPickerDisplayAlias("GPT-5.6-Sol")).toBe("5.6 Sol");
+    expect(getModelPickerDisplayAlias("GPT-5.6-Terra")).toBe("5.6 Terra");
+    expect(getModelPickerDisplayAlias("GPT-5.4-Mini")).toBe("5.4 Mini");
+  });
+
+  it("shortens older GPT model names to the numeric version", () => {
+    expect(getModelPickerDisplayAlias("GPT-5.5")).toBe("5.5");
+    expect(getModelPickerDisplayAlias("GPT-5.4")).toBe("5.4");
+  });
+
+  it("removes the Claude prefix from Claude model names", () => {
+    expect(getModelPickerDisplayAlias("Claude Fable 5")).toBe("Fable 5");
+    expect(getModelPickerDisplayAlias("Claude Sonnet 5")).toBe("Sonnet 5");
+    expect(getModelPickerDisplayAlias("Claude Opus 4.8")).toBe("Opus 4.8");
+  });
+});
+
+describe("getDisplayModelName", () => {
+  it("applies aliases after removing sub-provider qualifiers", () => {
+    expect(
+      getDisplayModelName({
+        slug: "openai/gpt-5.6-sol",
+        name: "OpenAI: GPT-5.6-Sol",
+        subProvider: "OpenAI",
+      }),
+    ).toBe("5.6 Sol");
+  });
+
+  it("applies aliases to preferred short names used by the picker trigger", () => {
+    expect(
+      getTriggerDisplayModelName({
+        slug: "gpt-5.5",
+        name: "GPT-5.5",
+        shortName: "GPT-5.5",
+      }),
+    ).toBe("5.5");
+  });
+});
diff --git a/apps/web/src/components/chat/providerIconUtils.ts b/apps/web/src/components/chat/providerIconUtils.ts
index f9e7a700716..586f9512463 100644
--- a/apps/web/src/components/chat/providerIconUtils.ts
+++ b/apps/web/src/components/chat/providerIconUtils.ts
@@ -42,12 +42,28 @@ function stripLeadingQualifier(value: string, qualifier: string | null | undefin
   return value.replace(pattern, "").trim() || value;
 }
 
+export function getModelPickerDisplayAlias(value: string): string {
+  const trimmed = value.trim();
+  const gptMatch = /^GPT-(\d+(?:\.\d+)*)(?:(?:[-\s]+)(.+))?$/iu.exec(trimmed);
+  if (gptMatch) {
+    const suffix = gptMatch[2]?.trim().replace(/[-_]+/gu, " ");
+    return suffix ? `${gptMatch[1]} ${suffix}` : gptMatch[1]!;
+  }
+
+  const claudeMatch = /^Claude(?:\s+(.+))$/iu.exec(trimmed);
+  if (claudeMatch) {
+    return claudeMatch[1]!.trim() || trimmed;
+  }
+
+  return value;
+}
+
 export function getDisplayModelName(
   model: ModelEsque,
   options?: { preferShortName?: boolean },
 ): string {
   const name = options?.preferShortName && model.shortName ? model.shortName : model.name;
-  return stripLeadingQualifier(name, model.subProvider);
+  return getModelPickerDisplayAlias(stripLeadingQualifier(name, model.subProvider));
 }
 
 export function getTriggerDisplayModelName(model: ModelEsque): string {
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 5a0d1f394c0..76dacbfca21 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -933,24 +933,31 @@ label:has(> select#reasoning-effort) select {
   animation: ultrathink-rainbow 10s linear infinite;
 }
 
-/* Thin scrollbar for model picker */
+/* Center a narrow model-picker thumb inside a forgiving interaction gutter. */
 .model-picker-list::-webkit-scrollbar {
-  width: 4px;
+  width: 8px;
+}
+
+.model-picker-list::-webkit-scrollbar-track {
+  background: transparent;
 }
 
 .model-picker-list::-webkit-scrollbar-thumb {
-  background: rgba(0, 0, 0, 0.1);
-  border-radius: 2px;
+  background-color: rgba(0, 0, 0, 0.1);
+  background-clip: content-box;
+  border: 2px solid transparent;
+  border-radius: 999px;
 }
 
 .model-picker-list::-webkit-scrollbar-thumb:hover {
-  background: rgba(0, 0, 0, 0.2);
+  background-color: rgba(0, 0, 0, 0.2);
+  background-clip: content-box;
 }
 
 .dark .model-picker-list::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.08);
+  background-color: rgba(255, 255, 255, 0.08);
 }
 
 .dark .model-picker-list::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.15);
+  background-color: rgba(255, 255, 255, 0.15);
 }

From 4f07288ccf4ab915fe697d79d935697c0e7a968c Mon Sep 17 00:00:00 2001
From: Dara Adedeji <daraadedeji07@gmail.com>
Date: Thu, 16 Jul 2026 14:46:44 -0700
Subject: [PATCH 2/3] refactor(model-picker): move short-name aliasing into the
 provider catalog

Replaces the web-layer regex aliasing with catalog-driven shortName:
- Claude built-in models get explicit shortName entries
- Codex derives shortName at model-list parse time (toCodexShortName),
  so discovered GPT models render as e.g. "5.6 Sol" / "5.5"
- Cursor/OpenCode/Grok models are intentionally left without shortName:
  their catalogs are dynamic multi-vendor lists
- Display-name helpers extracted from providerIconUtils to
  modelDisplayNames.ts; the picker-only alias regexes are deleted
- Picker rows always prefer shortName; extraData now carries
  filteredModelByKey and getModelDisabledReason so recycled rows
  cannot render stale disabled state

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../src/provider/Layers/ClaudeProvider.ts     |  8 +++
 .../src/provider/Layers/CodexProvider.test.ts | 10 +++-
 .../src/provider/Layers/CodexProvider.ts      | 27 +++++++---
 .../provider/Layers/ProviderRegistry.test.ts  |  1 +
 apps/web/src/components/chat/ModelListRow.tsx |  4 +-
 .../components/chat/ModelPickerContent.tsx    | 16 +++---
 .../components/chat/ProviderModelPicker.tsx   |  2 +-
 .../components/chat/modelDisplayNames.test.ts | 40 ++++++++++++++
 .../src/components/chat/modelDisplayNames.ts  | 36 +++++++++++++
 .../components/chat/providerIconUtils.test.ts | 48 -----------------
 .../src/components/chat/providerIconUtils.ts  | 53 -------------------
 apps/web/src/modelSelection.ts                |  2 +-
 12 files changed, 129 insertions(+), 118 deletions(-)
 create mode 100644 apps/web/src/components/chat/modelDisplayNames.test.ts
 create mode 100644 apps/web/src/components/chat/modelDisplayNames.ts
 delete mode 100644 apps/web/src/components/chat/providerIconUtils.test.ts

diff --git a/apps/server/src/provider/Layers/ClaudeProvider.ts b/apps/server/src/provider/Layers/ClaudeProvider.ts
index 59b7d0464de..4aac016a827 100644
--- a/apps/server/src/provider/Layers/ClaudeProvider.ts
+++ b/apps/server/src/provider/Layers/ClaudeProvider.ts
@@ -56,6 +56,7 @@ const BUILT_IN_MODELS: ReadonlyArray<ServerProviderModel> = [
   {
     slug: "claude-fable-5",
     name: "Claude Fable 5",
+    shortName: "Fable 5",
     isCustom: false,
     capabilities: createModelCapabilities({
       optionDescriptors: [
@@ -87,6 +88,7 @@ const BUILT_IN_MODELS: ReadonlyArray<ServerProviderModel> = [
   {
     slug: "claude-opus-4-8",
     name: "Claude Opus 4.8",
+    shortName: "Opus 4.8",
     isCustom: false,
     capabilities: createModelCapabilities({
       optionDescriptors: [
@@ -114,6 +116,7 @@ const BUILT_IN_MODELS: ReadonlyArray<ServerProviderModel> = [
   {
     slug: "claude-opus-4-7",
     name: "Claude Opus 4.7",
+    shortName: "Opus 4.7",
     isCustom: false,
     capabilities: createModelCapabilities({
       optionDescriptors: [
@@ -140,6 +143,7 @@ const BUILT_IN_MODELS: ReadonlyArray<ServerProviderModel> = [
   {
     slug: "claude-opus-4-6",
     name: "Claude Opus 4.6",
+    shortName: "Opus 4.6",
     isCustom: false,
     capabilities: createModelCapabilities({
       optionDescriptors: [
@@ -173,6 +177,7 @@ const BUILT_IN_MODELS: ReadonlyArray<ServerProviderModel> = [
   {
     slug: "claude-opus-4-5",
     name: "Claude Opus 4.5",
+    shortName: "Opus 4.5",
     isCustom: false,
     capabilities: createModelCapabilities({
       optionDescriptors: [
@@ -196,6 +201,7 @@ const BUILT_IN_MODELS: ReadonlyArray<ServerProviderModel> = [
   {
     slug: "claude-sonnet-5",
     name: "Claude Sonnet 5",
+    shortName: "Sonnet 5",
     isCustom: false,
     capabilities: createModelCapabilities({
       optionDescriptors: [
@@ -226,6 +232,7 @@ const BUILT_IN_MODELS: ReadonlyArray<ServerProviderModel> = [
   {
     slug: "claude-sonnet-4-6",
     name: "Claude Sonnet 4.6",
+    shortName: "Sonnet 4.6",
     isCustom: false,
     capabilities: createModelCapabilities({
       optionDescriptors: [
@@ -255,6 +262,7 @@ const BUILT_IN_MODELS: ReadonlyArray<ServerProviderModel> = [
   {
     slug: "claude-haiku-4-5",
     name: "Claude Haiku 4.5",
+    shortName: "Haiku 4.5",
     isCustom: false,
     capabilities: createModelCapabilities({
       optionDescriptors: [
diff --git a/apps/server/src/provider/Layers/CodexProvider.test.ts b/apps/server/src/provider/Layers/CodexProvider.test.ts
index 0e21b76306b..038da870623 100644
--- a/apps/server/src/provider/Layers/CodexProvider.test.ts
+++ b/apps/server/src/provider/Layers/CodexProvider.test.ts
@@ -1,6 +1,14 @@
 import { assert, it } from "@effect/vitest";
 
-import { mapCodexModelCapabilities } from "./CodexProvider.ts";
+import { mapCodexModelCapabilities, toCodexShortName } from "./CodexProvider.ts";
+
+it("derives concise names for Codex-owned GPT models", () => {
+  assert.strictEqual(toCodexShortName("GPT-5.6-Sol"), "5.6 Sol");
+  assert.strictEqual(toCodexShortName("GPT-5.6-Terra"), "5.6 Terra");
+  assert.strictEqual(toCodexShortName("GPT-5.4-Mini"), "5.4 Mini");
+  assert.strictEqual(toCodexShortName("GPT-5.5"), "5.5");
+  assert.strictEqual(toCodexShortName("o3"), "o3");
+});
 
 it("maps current Codex model capability fields", () => {
   const capabilities = mapCodexModelCapabilities({
diff --git a/apps/server/src/provider/Layers/CodexProvider.ts b/apps/server/src/provider/Layers/CodexProvider.ts
index a2182cfb73c..df88aa15112 100644
--- a/apps/server/src/provider/Layers/CodexProvider.ts
+++ b/apps/server/src/provider/Layers/CodexProvider.ts
@@ -181,15 +181,30 @@ const toDisplayName = (model: CodexSchema.V2ModelListResponse__Model): string =>
     .replace(/-([a-z])/g, (_, c) => "-" + c.toUpperCase());
 };
 
+export const toCodexShortName = (name: string): string => {
+  const match = /^GPT-(\d+(?:\.\d+)*)(?:(?:[-\s]+)(.+))?$/iu.exec(name.trim());
+  const version = match?.[1];
+  if (!version) {
+    return name;
+  }
+  const suffix = match[2]?.trim().replace(/[-_]+/gu, " ");
+  return suffix ? `${version} ${suffix}` : version;
+};
+
 function parseCodexModelListResponse(
   response: CodexSchema.V2ModelListResponse,
 ): ReadonlyArray<ServerProviderModel> {
-  return response.data.map((model) => ({
-    slug: model.model,
-    name: toDisplayName(model),
-    isCustom: false,
-    capabilities: mapCodexModelCapabilities(model),
-  }));
+  return response.data.map((model) => {
+    const name = toDisplayName(model);
+    const shortName = toCodexShortName(name);
+    return {
+      slug: model.model,
+      name,
+      ...(shortName !== name ? { shortName } : {}),
+      isCustom: false,
+      capabilities: mapCodexModelCapabilities(model),
+    };
+  });
 }
 
 function appendCustomCodexModels(
diff --git a/apps/server/src/provider/Layers/ProviderRegistry.test.ts b/apps/server/src/provider/Layers/ProviderRegistry.test.ts
index b3ab1145495..ccc813de1f1 100644
--- a/apps/server/src/provider/Layers/ProviderRegistry.test.ts
+++ b/apps/server/src/provider/Layers/ProviderRegistry.test.ts
@@ -1500,6 +1500,7 @@ it.layer(Layer.mergeAll(NodeServices.layer, ServerSettingsModule.layerTest(), Te
           );
           const fable5 = status.models.find((model) => model.slug === "claude-fable-5");
           assert.strictEqual(fable5?.name, "Claude Fable 5");
+          assert.strictEqual(fable5?.shortName, "Fable 5");
         }).pipe(
           Effect.provide(
             mockSpawnerLayer((args) => {
diff --git a/apps/web/src/components/chat/ModelListRow.tsx b/apps/web/src/components/chat/ModelListRow.tsx
index de7c04ee8ca..a9527018158 100644
--- a/apps/web/src/components/chat/ModelListRow.tsx
+++ b/apps/web/src/components/chat/ModelListRow.tsx
@@ -5,8 +5,8 @@ import {
   getDisplayModelName,
   getTriggerDisplayModelLabel,
   type ModelEsque,
-  PROVIDER_ICON_BY_PROVIDER,
-} from "./providerIconUtils";
+} from "./modelDisplayNames";
+import { PROVIDER_ICON_BY_PROVIDER } from "./providerIconUtils";
 import { ComboboxItem } from "../ui/combobox";
 import { Button } from "../ui/button";
 import { Kbd } from "../ui/kbd";
diff --git a/apps/web/src/components/chat/ModelPickerContent.tsx b/apps/web/src/components/chat/ModelPickerContent.tsx
index 3320eed8b63..11134b9946c 100644
--- a/apps/web/src/components/chat/ModelPickerContent.tsx
+++ b/apps/web/src/components/chat/ModelPickerContent.tsx
@@ -12,7 +12,7 @@ import { ModelPickerSidebar } from "./ModelPickerSidebar";
 import { isModelPickerNewModel } from "./modelPickerModelHighlights";
 import { buildModelPickerSearchText, scoreModelPickerSearch } from "./modelPickerSearch";
 import { Combobox, ComboboxEmpty, ComboboxInput, ComboboxListVirtualized } from "../ui/combobox";
-import { ModelEsque } from "./providerIconUtils";
+import { ModelEsque } from "./modelDisplayNames";
 import {
   modelPickerJumpCommandForIndex,
   modelPickerJumpIndexFromCommand,
@@ -472,6 +472,8 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
     return mapping.size > 0 ? mapping : EMPTY_MODEL_JUMP_LABELS;
   }, [keybindings, modelJumpCommandByKey, modelJumpShortcutContext]);
 
+  const showProviderForEveryRow = isSearching || selectedInstanceId === "favorites";
+
   useEffect(() => {
     const onWindowKeyDown = (event: globalThis.KeyboardEvent) => {
       if (event.defaultPrevented || event.repeat) {
@@ -514,6 +516,8 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
       isSearching,
       selectedInstanceId,
       activeModelKey: `${props.activeInstanceId}:${props.model}`,
+      filteredModelByKey,
+      getModelDisabledReason,
       modelJumpLabelByKey,
     }),
     [
@@ -522,6 +526,8 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
       selectedInstanceId,
       props.activeInstanceId,
       props.model,
+      filteredModelByKey,
+      getModelDisabledReason,
       modelJumpLabelByKey,
     ],
   );
@@ -672,11 +678,9 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
                           // Keep it in mixed-provider views (favorites,
                           // search) and for models that carry a sub-provider
                           // distinction (e.g. "Claude · Bedrock").
-                          isSearching ||
-                          selectedInstanceId === "favorites" ||
-                          Boolean(model.subProvider)
+                          showProviderForEveryRow || Boolean(model.subProvider)
                         }
-                        preferShortName={!isLocked}
+                        preferShortName
                         useTriggerLabel={false}
                         showNewBadge={isModelPickerNewModel(model.driverKind, model.slug)}
                         jumpLabel={modelJumpLabelByKey.get(modelKey) ?? null}
@@ -685,7 +689,7 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
                       />
                     );
                   }}
-                  estimatedItemSize={60}
+                  estimatedItemSize={showProviderForEveryRow ? 60 : 40}
                   drawDistance={480}
                   recycleItems
                   onLayout={updateModelListScrollFades}
diff --git a/apps/web/src/components/chat/ProviderModelPicker.tsx b/apps/web/src/components/chat/ProviderModelPicker.tsx
index e3463631733..4a812d28548 100644
--- a/apps/web/src/components/chat/ProviderModelPicker.tsx
+++ b/apps/web/src/components/chat/ProviderModelPicker.tsx
@@ -16,7 +16,7 @@ import {
   ModelEsque,
   getTriggerDisplayModelLabel,
   getTriggerDisplayModelName,
-} from "./providerIconUtils";
+} from "./modelDisplayNames";
 import type { ProviderInstanceEntry } from "../../providerInstances";
 
 export const ProviderModelPicker = memo(function ProviderModelPicker(props: {
diff --git a/apps/web/src/components/chat/modelDisplayNames.test.ts b/apps/web/src/components/chat/modelDisplayNames.test.ts
new file mode 100644
index 00000000000..33c5916f759
--- /dev/null
+++ b/apps/web/src/components/chat/modelDisplayNames.test.ts
@@ -0,0 +1,40 @@
+import { describe, expect, it } from "vite-plus/test";
+
+import { getDisplayModelName, getTriggerDisplayModelName } from "./modelDisplayNames";
+
+describe("getDisplayModelName", () => {
+  it("removes a redundant sub-provider qualifier", () => {
+    expect(
+      getDisplayModelName({
+        slug: "openai/gpt-5.6-sol",
+        name: "OpenAI: GPT-5.6-Sol",
+        subProvider: "OpenAI",
+      }),
+    ).toBe("GPT-5.6-Sol");
+  });
+
+  it("uses provider-authored short names for the picker trigger", () => {
+    expect(
+      getTriggerDisplayModelName({
+        slug: "gpt-5.5",
+        name: "GPT-5.5",
+        shortName: "5.5",
+      }),
+    ).toBe("5.5");
+  });
+
+  it("does not rewrite provider or user-authored model names", () => {
+    expect(
+      getTriggerDisplayModelName({
+        slug: "GPT-5.6-My_Model",
+        name: "GPT-5.6-My_Model",
+      }),
+    ).toBe("GPT-5.6-My_Model");
+    expect(
+      getTriggerDisplayModelName({
+        slug: "cursor-claude-sonnet-5",
+        name: "Claude Sonnet 5",
+      }),
+    ).toBe("Claude Sonnet 5");
+  });
+});
diff --git a/apps/web/src/components/chat/modelDisplayNames.ts b/apps/web/src/components/chat/modelDisplayNames.ts
new file mode 100644
index 00000000000..4e5f054b9e3
--- /dev/null
+++ b/apps/web/src/components/chat/modelDisplayNames.ts
@@ -0,0 +1,36 @@
+export type ModelEsque = {
+  slug: string;
+  name: string;
+  shortName?: string | undefined;
+  subProvider?: string | undefined;
+};
+
+function escapeRegExp(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+function stripLeadingQualifier(value: string, qualifier: string | null | undefined): string {
+  const trimmedQualifier = qualifier?.trim();
+  if (!trimmedQualifier) {
+    return value;
+  }
+
+  const pattern = new RegExp(`^${escapeRegExp(trimmedQualifier)}(?:\\s*[.:/-]\\s*|\\s+)`, "iu");
+  return value.replace(pattern, "").trim() || value;
+}
+
+export function getDisplayModelName(
+  model: ModelEsque,
+  options?: { preferShortName?: boolean },
+): string {
+  const name = options?.preferShortName && model.shortName ? model.shortName : model.name;
+  return stripLeadingQualifier(name, model.subProvider);
+}
+
+export function getTriggerDisplayModelName(model: ModelEsque): string {
+  return getDisplayModelName(model, { preferShortName: true });
+}
+
+export function getTriggerDisplayModelLabel(model: ModelEsque): string {
+  return getTriggerDisplayModelName(model);
+}
diff --git a/apps/web/src/components/chat/providerIconUtils.test.ts b/apps/web/src/components/chat/providerIconUtils.test.ts
deleted file mode 100644
index 58baee4860b..00000000000
--- a/apps/web/src/components/chat/providerIconUtils.test.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { describe, expect, it } from "vite-plus/test";
-
-import {
-  getDisplayModelName,
-  getModelPickerDisplayAlias,
-  getTriggerDisplayModelName,
-} from "./providerIconUtils";
-
-describe("getModelPickerDisplayAlias", () => {
-  it("shortens GPT model names while preserving model family suffixes", () => {
-    expect(getModelPickerDisplayAlias("GPT-5.6-Sol")).toBe("5.6 Sol");
-    expect(getModelPickerDisplayAlias("GPT-5.6-Terra")).toBe("5.6 Terra");
-    expect(getModelPickerDisplayAlias("GPT-5.4-Mini")).toBe("5.4 Mini");
-  });
-
-  it("shortens older GPT model names to the numeric version", () => {
-    expect(getModelPickerDisplayAlias("GPT-5.5")).toBe("5.5");
-    expect(getModelPickerDisplayAlias("GPT-5.4")).toBe("5.4");
-  });
-
-  it("removes the Claude prefix from Claude model names", () => {
-    expect(getModelPickerDisplayAlias("Claude Fable 5")).toBe("Fable 5");
-    expect(getModelPickerDisplayAlias("Claude Sonnet 5")).toBe("Sonnet 5");
-    expect(getModelPickerDisplayAlias("Claude Opus 4.8")).toBe("Opus 4.8");
-  });
-});
-
-describe("getDisplayModelName", () => {
-  it("applies aliases after removing sub-provider qualifiers", () => {
-    expect(
-      getDisplayModelName({
-        slug: "openai/gpt-5.6-sol",
-        name: "OpenAI: GPT-5.6-Sol",
-        subProvider: "OpenAI",
-      }),
-    ).toBe("5.6 Sol");
-  });
-
-  it("applies aliases to preferred short names used by the picker trigger", () => {
-    expect(
-      getTriggerDisplayModelName({
-        slug: "gpt-5.5",
-        name: "GPT-5.5",
-        shortName: "GPT-5.5",
-      }),
-    ).toBe("5.5");
-  });
-});
diff --git a/apps/web/src/components/chat/providerIconUtils.ts b/apps/web/src/components/chat/providerIconUtils.ts
index 586f9512463..32f6a052e52 100644
--- a/apps/web/src/components/chat/providerIconUtils.ts
+++ b/apps/web/src/components/chat/providerIconUtils.ts
@@ -20,56 +20,3 @@ function isAvailableProviderOption(option: (typeof PROVIDER_OPTIONS)[number]): o
 }
 
 export const AVAILABLE_PROVIDER_OPTIONS = PROVIDER_OPTIONS.filter(isAvailableProviderOption);
-
-export type ModelEsque = {
-  slug: string;
-  name: string;
-  shortName?: string | undefined;
-  subProvider?: string | undefined;
-};
-
-function escapeRegExp(value: string): string {
-  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-}
-
-function stripLeadingQualifier(value: string, qualifier: string | null | undefined): string {
-  const trimmedQualifier = qualifier?.trim();
-  if (!trimmedQualifier) {
-    return value;
-  }
-
-  const pattern = new RegExp(`^${escapeRegExp(trimmedQualifier)}(?:\\s*[.:/-]\\s*|\\s+)`, "iu");
-  return value.replace(pattern, "").trim() || value;
-}
-
-export function getModelPickerDisplayAlias(value: string): string {
-  const trimmed = value.trim();
-  const gptMatch = /^GPT-(\d+(?:\.\d+)*)(?:(?:[-\s]+)(.+))?$/iu.exec(trimmed);
-  if (gptMatch) {
-    const suffix = gptMatch[2]?.trim().replace(/[-_]+/gu, " ");
-    return suffix ? `${gptMatch[1]} ${suffix}` : gptMatch[1]!;
-  }
-
-  const claudeMatch = /^Claude(?:\s+(.+))$/iu.exec(trimmed);
-  if (claudeMatch) {
-    return claudeMatch[1]!.trim() || trimmed;
-  }
-
-  return value;
-}
-
-export function getDisplayModelName(
-  model: ModelEsque,
-  options?: { preferShortName?: boolean },
-): string {
-  const name = options?.preferShortName && model.shortName ? model.shortName : model.name;
-  return getModelPickerDisplayAlias(stripLeadingQualifier(name, model.subProvider));
-}
-
-export function getTriggerDisplayModelName(model: ModelEsque): string {
-  return getDisplayModelName(model, { preferShortName: true });
-}
-
-export function getTriggerDisplayModelLabel(model: ModelEsque): string {
-  return getTriggerDisplayModelName(model);
-}
diff --git a/apps/web/src/modelSelection.ts b/apps/web/src/modelSelection.ts
index 7ede9665ac9..70ac7ccc317 100644
--- a/apps/web/src/modelSelection.ts
+++ b/apps/web/src/modelSelection.ts
@@ -21,7 +21,7 @@ import {
   getProviderModels,
   resolveSelectableProvider,
 } from "./providerModels";
-import { ModelEsque } from "./components/chat/providerIconUtils";
+import { ModelEsque } from "./components/chat/modelDisplayNames";
 import { type ProviderInstanceEntry, deriveProviderInstanceEntries } from "./providerInstances";
 import { sortModelsForProviderInstance } from "./modelOrdering";
 

From 249497014128e15b5b0c398764221a7ae1607c95 Mon Sep 17 00:00:00 2001
From: Dara Adedeji <daraadedeji07@gmail.com>
Date: Thu, 16 Jul 2026 16:08:59 -0700
Subject: [PATCH 3/3] fix(model-picker): apply review findings

Correctness/robustness:
- Size the virtualized row estimate at 60 when any filtered model has a
  subProvider (those rows render the two-line layout even in
  single-provider tabs), preventing first-paint mis-measurement
- Include toggleFavorite in LegendList extraData so recycled rows are
  invalidated by construction, not by favoritesSet changing in lockstep
- Read the selected-row key from listExtraData.activeModelKey instead of
  recomputing it inline
- Allow a fused version letter in toCodexShortName (GPT-4o -> "4o",
  GPT-4o-Mini -> "4o Mini") and cover the toDisplayName ->
  toCodexShortName chain with a parser-level test

Dead code removal (pre-existing, surfaced by review):
- Drop the getTriggerDisplayModelLabel pass-through alias and the
  never-true useTriggerLabel prop/branch in ModelListRow
- Remove the unused providerAccentColor/instanceAccentColor plumbing
- Collapse ProviderModelPicker's always-equal triggerLabel into
  triggerTitle

Styling:
- Model-picker scrollbar colors now track the theme border token via
  color-mix (dark-mode overrides removed), with a guarded
  scrollbar-width/scrollbar-color fallback so Firefox gets the shared
  thin treatment without disabling the WebKit inset pill

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../src/provider/Layers/CodexProvider.test.ts | 31 ++++++++++++++++++-
 .../src/provider/Layers/CodexProvider.ts      |  4 +--
 apps/web/src/components/chat/ModelListRow.tsx | 18 +++--------
 .../components/chat/ModelPickerContent.tsx    | 17 ++++++----
 .../components/chat/ProviderModelPicker.tsx   |  9 ++----
 .../src/components/chat/modelDisplayNames.ts  |  4 ---
 apps/web/src/index.css                        | 21 +++++++------
 7 files changed, 62 insertions(+), 42 deletions(-)

diff --git a/apps/server/src/provider/Layers/CodexProvider.test.ts b/apps/server/src/provider/Layers/CodexProvider.test.ts
index 038da870623..46b4a2af18a 100644
--- a/apps/server/src/provider/Layers/CodexProvider.test.ts
+++ b/apps/server/src/provider/Layers/CodexProvider.test.ts
@@ -1,15 +1,44 @@
 import { assert, it } from "@effect/vitest";
 
-import { mapCodexModelCapabilities, toCodexShortName } from "./CodexProvider.ts";
+import {
+  mapCodexModelCapabilities,
+  parseCodexModelListResponse,
+  toCodexShortName,
+} from "./CodexProvider.ts";
 
 it("derives concise names for Codex-owned GPT models", () => {
   assert.strictEqual(toCodexShortName("GPT-5.6-Sol"), "5.6 Sol");
   assert.strictEqual(toCodexShortName("GPT-5.6-Terra"), "5.6 Terra");
   assert.strictEqual(toCodexShortName("GPT-5.4-Mini"), "5.4 Mini");
   assert.strictEqual(toCodexShortName("GPT-5.5"), "5.5");
+  assert.strictEqual(toCodexShortName("GPT-4o"), "4o");
+  assert.strictEqual(toCodexShortName("GPT-4o-Mini"), "4o Mini");
   assert.strictEqual(toCodexShortName("o3"), "o3");
 });
 
+it("derives name and shortName from a raw catalog display name", () => {
+  const [model] = parseCodexModelListResponse({
+    data: [
+      {
+        additionalSpeedTiers: [],
+        defaultReasoningEffort: "medium",
+        defaultServiceTier: null,
+        description: "Test model",
+        displayName: "gpt-5.4-mini",
+        hidden: false,
+        id: "gpt-5.4-mini",
+        isDefault: false,
+        model: "gpt-5.4-mini",
+        serviceTiers: [],
+        supportedReasoningEfforts: [],
+      },
+    ],
+  });
+
+  assert.strictEqual(model?.name, "GPT-5.4-Mini");
+  assert.strictEqual(model?.shortName, "5.4 Mini");
+});
+
 it("maps current Codex model capability fields", () => {
   const capabilities = mapCodexModelCapabilities({
     additionalSpeedTiers: [],
diff --git a/apps/server/src/provider/Layers/CodexProvider.ts b/apps/server/src/provider/Layers/CodexProvider.ts
index df88aa15112..1dfd3b75e30 100644
--- a/apps/server/src/provider/Layers/CodexProvider.ts
+++ b/apps/server/src/provider/Layers/CodexProvider.ts
@@ -182,7 +182,7 @@ const toDisplayName = (model: CodexSchema.V2ModelListResponse__Model): string =>
 };
 
 export const toCodexShortName = (name: string): string => {
-  const match = /^GPT-(\d+(?:\.\d+)*)(?:(?:[-\s]+)(.+))?$/iu.exec(name.trim());
+  const match = /^GPT-(\d+(?:\.\d+)*[a-z]?)(?:(?:[-\s]+)(.+))?$/iu.exec(name.trim());
   const version = match?.[1];
   if (!version) {
     return name;
@@ -191,7 +191,7 @@ export const toCodexShortName = (name: string): string => {
   return suffix ? `${version} ${suffix}` : version;
 };
 
-function parseCodexModelListResponse(
+export function parseCodexModelListResponse(
   response: CodexSchema.V2ModelListResponse,
 ): ReadonlyArray<ServerProviderModel> {
   return response.data.map((model) => {
diff --git a/apps/web/src/components/chat/ModelListRow.tsx b/apps/web/src/components/chat/ModelListRow.tsx
index a9527018158..f66938f4825 100644
--- a/apps/web/src/components/chat/ModelListRow.tsx
+++ b/apps/web/src/components/chat/ModelListRow.tsx
@@ -1,11 +1,7 @@
 import { type ProviderDriverKind, type ProviderInstanceId } from "@t3tools/contracts";
 import { memo } from "react";
 import { CheckIcon, StarIcon } from "lucide-react";
-import {
-  getDisplayModelName,
-  getTriggerDisplayModelLabel,
-  type ModelEsque,
-} from "./modelDisplayNames";
+import { getDisplayModelName, type ModelEsque } from "./modelDisplayNames";
 import { PROVIDER_ICON_BY_PROVIDER } from "./providerIconUtils";
 import { ComboboxItem } from "../ui/combobox";
 import { Button } from "../ui/button";
@@ -26,12 +22,10 @@ export const ModelListRow = memo(function ModelListRow(props: {
    * "Codex Personal" render with their user-authored label.
    */
   providerDisplayName: string;
-  providerAccentColor?: string | undefined;
   isFavorite: boolean;
   isSelected: boolean;
   showProvider: boolean;
   preferShortName?: boolean;
-  useTriggerLabel?: boolean;
   showNewBadge?: boolean;
   jumpLabel?: string | null;
   disabledReason?: string | null;
@@ -59,12 +53,10 @@ export const ModelListRow = memo(function ModelListRow(props: {
       <div className="min-w-0 flex-1 text-left">
         <div className="flex min-w-0 items-center gap-2">
           <div className="min-w-0 truncate text-sm font-medium leading-snug">
-            {props.useTriggerLabel
-              ? getTriggerDisplayModelLabel(props.model)
-              : getDisplayModelName(
-                  props.model,
-                  props.preferShortName ? { preferShortName: true } : undefined,
-                )}
+            {getDisplayModelName(
+              props.model,
+              props.preferShortName ? { preferShortName: true } : undefined,
+            )}
           </div>
           {props.isSelected ? <CheckIcon className="size-3.5 shrink-0 text-blue-400" /> : null}
           {props.showNewBadge ? (
diff --git a/apps/web/src/components/chat/ModelPickerContent.tsx b/apps/web/src/components/chat/ModelPickerContent.tsx
index 11134b9946c..3f38dcbb3a5 100644
--- a/apps/web/src/components/chat/ModelPickerContent.tsx
+++ b/apps/web/src/components/chat/ModelPickerContent.tsx
@@ -37,7 +37,6 @@ type ModelPickerItem = {
   instanceId: ProviderInstanceId;
   driverKind: ProviderDriverKind;
   instanceDisplayName: string;
-  instanceAccentColor?: string | undefined;
   continuationGroupKey?: string | undefined;
 };
 
@@ -210,7 +209,6 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
           instanceId,
           driverKind: entry.driverKind,
           instanceDisplayName: entry.displayName,
-          ...(entry.accentColor ? { instanceAccentColor: entry.accentColor } : {}),
           ...(entry.continuationGroupKey
             ? { continuationGroupKey: entry.continuationGroupKey }
             : {}),
@@ -473,6 +471,13 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
   }, [keybindings, modelJumpCommandByKey, modelJumpShortcutContext]);
 
   const showProviderForEveryRow = isSearching || selectedInstanceId === "favorites";
+  // Rows with a sub-provider render the taller two-line layout even in
+  // single-provider tabs, so size the estimate for them or the list
+  // mis-measures on first paint.
+  const hasSubProviderRows = useMemo(
+    () => filteredModels.some((model) => Boolean(model.subProvider)),
+    [filteredModels],
+  );
 
   useEffect(() => {
     const onWindowKeyDown = (event: globalThis.KeyboardEvent) => {
@@ -519,6 +524,7 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
       filteredModelByKey,
       getModelDisabledReason,
       modelJumpLabelByKey,
+      toggleFavorite,
     }),
     [
       favoritesSet,
@@ -529,6 +535,7 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
       filteredModelByKey,
       getModelDisabledReason,
       modelJumpLabelByKey,
+      toggleFavorite,
     ],
   );
 
@@ -668,9 +675,8 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
                         instanceId={model.instanceId}
                         driverKind={model.driverKind}
                         providerDisplayName={model.instanceDisplayName}
-                        providerAccentColor={model.instanceAccentColor}
                         isFavorite={favoritesSet.has(modelKey)}
-                        isSelected={modelKey === `${props.activeInstanceId}:${props.model}`}
+                        isSelected={modelKey === listExtraData.activeModelKey}
                         showProvider={
                           // When browsing a single provider's tab the sidebar
                           // already says which provider these models belong
@@ -681,7 +687,6 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
                           showProviderForEveryRow || Boolean(model.subProvider)
                         }
                         preferShortName
-                        useTriggerLabel={false}
                         showNewBadge={isModelPickerNewModel(model.driverKind, model.slug)}
                         jumpLabel={modelJumpLabelByKey.get(modelKey) ?? null}
                         disabledReason={disabledReason}
@@ -689,7 +694,7 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
                       />
                     );
                   }}
-                  estimatedItemSize={showProviderForEveryRow ? 60 : 40}
+                  estimatedItemSize={showProviderForEveryRow || hasSubProviderRows ? 60 : 40}
                   drawDistance={480}
                   recycleItems
                   onLayout={updateModelListScrollFades}
diff --git a/apps/web/src/components/chat/ProviderModelPicker.tsx b/apps/web/src/components/chat/ProviderModelPicker.tsx
index 4a812d28548..02daa73519d 100644
--- a/apps/web/src/components/chat/ProviderModelPicker.tsx
+++ b/apps/web/src/components/chat/ProviderModelPicker.tsx
@@ -12,11 +12,7 @@ import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 import { cn } from "~/lib/utils";
 import { ModelPickerContent } from "./ModelPickerContent";
 import { ProviderInstanceIcon } from "./ProviderInstanceIcon";
-import {
-  ModelEsque,
-  getTriggerDisplayModelLabel,
-  getTriggerDisplayModelName,
-} from "./modelDisplayNames";
+import { ModelEsque, getTriggerDisplayModelName } from "./modelDisplayNames";
 import type { ProviderInstanceEntry } from "../../providerInstances";
 
 export const ProviderModelPicker = memo(function ProviderModelPicker(props: {
@@ -65,7 +61,6 @@ export const ProviderModelPicker = memo(function ProviderModelPicker(props: {
     selectedInstanceOptions.find((option) => option.slug === props.model) ??
     selectedInstanceOptions[0];
   const triggerTitle = selectedModel ? getTriggerDisplayModelName(selectedModel) : props.model;
-  const triggerLabel = selectedModel ? getTriggerDisplayModelLabel(selectedModel) : props.model;
   const duplicateDriverCount = props.instanceEntries.filter(
     (entry) => activeEntry !== null && entry.driverKind === activeEntry.driverKind,
   ).length;
@@ -178,7 +173,7 @@ export const ProviderModelPicker = memo(function ProviderModelPicker(props: {
             <TooltipTrigger render={<span className="min-w-0 flex-1 overflow-hidden truncate" />}>
               {triggerTitle}
             </TooltipTrigger>
-            <TooltipPopup side="top">{triggerLabel}</TooltipPopup>
+            <TooltipPopup side="top">{triggerTitle}</TooltipPopup>
           </Tooltip>
         </span>
         <span aria-hidden="true" className="flex items-center">
diff --git a/apps/web/src/components/chat/modelDisplayNames.ts b/apps/web/src/components/chat/modelDisplayNames.ts
index 4e5f054b9e3..a342952b439 100644
--- a/apps/web/src/components/chat/modelDisplayNames.ts
+++ b/apps/web/src/components/chat/modelDisplayNames.ts
@@ -30,7 +30,3 @@ export function getDisplayModelName(
 export function getTriggerDisplayModelName(model: ModelEsque): string {
   return getDisplayModelName(model, { preferShortName: true });
 }
-
-export function getTriggerDisplayModelLabel(model: ModelEsque): string {
-  return getTriggerDisplayModelName(model);
-}
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 76dacbfca21..05faa89a83f 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -933,7 +933,8 @@ label:has(> select#reasoning-effort) select {
   animation: ultrathink-rainbow 10s linear infinite;
 }
 
-/* Center a narrow model-picker thumb inside a forgiving interaction gutter. */
+/* Center a narrow model-picker thumb inside a forgiving interaction gutter.
+   Colors track the theme's border token so light/dark follow automatically. */
 .model-picker-list::-webkit-scrollbar {
   width: 8px;
 }
@@ -943,21 +944,23 @@ label:has(> select#reasoning-effort) select {
 }
 
 .model-picker-list::-webkit-scrollbar-thumb {
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: color-mix(in srgb, var(--border) 78%, transparent);
   background-clip: content-box;
   border: 2px solid transparent;
   border-radius: 999px;
 }
 
 .model-picker-list::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: var(--border);
   background-clip: content-box;
 }
 
-.dark .model-picker-list::-webkit-scrollbar-thumb {
-  background-color: rgba(255, 255, 255, 0.08);
-}
-
-.dark .model-picker-list::-webkit-scrollbar-thumb:hover {
-  background-color: rgba(255, 255, 255, 0.15);
+/* Firefox has no ::-webkit-scrollbar; give it the shared thin treatment.
+   Guarded so Chromium keeps the inset pill above — setting scrollbar-width
+   on the same element would disable the ::-webkit-scrollbar styling. */
+@supports not selector(::-webkit-scrollbar) {
+  .model-picker-list {
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in srgb, var(--border) 78%, transparent) transparent;
+  }
 }