From 229068404c520218ff0f60bbb90cdbc84f4a5475 Mon Sep 17 00:00:00 2001
From: Bilal Irfan <bilalirfancontact@gmail.com>
Date: Tue, 27 Oct 2026 16:34:55 +0500
Subject: [PATCH 1/3] fix(web): Favorites and search rows stay one line like
 provider tabs

---
 apps/web/src/components/chat/ModelListRow.tsx | 42 +++++++++++++------
 .../components/chat/ModelPickerContent.tsx    | 15 +++++--
 2 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/apps/web/src/components/chat/ModelListRow.tsx b/apps/web/src/components/chat/ModelListRow.tsx
index 1d318443e0891..0a929d9f83012 100644
--- a/apps/web/src/components/chat/ModelListRow.tsx
+++ b/apps/web/src/components/chat/ModelListRow.tsx
@@ -24,7 +24,8 @@ export const ModelListRow = memo(function ModelListRow(props: {
   acpRegistryIconUrl?: string | undefined;
   isFavorite: boolean;
   isSelected: boolean;
-  showProvider: boolean;
+  inlineProviderIcon: boolean;
+  showInstanceBadge: boolean;
   showNewBadge?: boolean;
   unavailable?: boolean;
   jumpLabel?: string | null;
@@ -37,6 +38,27 @@ export const ModelListRow = memo(function ModelListRow(props: {
     subProvider: props.subProvider,
   };
   const providerLabel = getProviderRowLabel(props.providerDisplayName, props.subProvider);
+  const providerIcon = props.inlineProviderIcon ? (
+    <ProviderInstanceIcon
+      driverKind={props.driverKind}
+      displayName={props.providerDisplayName}
+      accentColor={props.providerAccentColor}
+      acpRegistryAgentId={props.acpRegistryAgentId}
+      acpRegistryIconUrl={props.acpRegistryIconUrl}
+      showBadge={props.showInstanceBadge}
+      size="compact"
+      className="size-3.5"
+    />
+  ) : (
+    <ProviderInstanceIcon
+      driverKind={props.driverKind}
+      displayName={props.providerDisplayName}
+      acpRegistryAgentId={props.acpRegistryAgentId}
+      acpRegistryIconUrl={props.acpRegistryIconUrl}
+      className="size-3"
+      iconClassName="size-3"
+    />
+  );
 
   const row = (
     <ComboboxItem
@@ -52,6 +74,7 @@ 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">
+          {props.inlineProviderIcon ? providerIcon : null}
           <div className="min-w-0 truncate text-sm font-normal leading-snug">
             {getDisplayModelName(model)}
           </div>
@@ -69,21 +92,16 @@ export const ModelListRow = memo(function ModelListRow(props: {
             </Badge>
           ) : null}
         </div>
-        {props.showProvider && (
-          <div className="mt-1 flex items-center gap-1.5">
-            <ProviderInstanceIcon
-              driverKind={props.driverKind}
-              displayName={props.providerDisplayName}
-              acpRegistryAgentId={props.acpRegistryAgentId}
-              acpRegistryIconUrl={props.acpRegistryIconUrl}
-              className="size-3"
-              iconClassName="size-3"
-            />
+        {props.subProvider ? (
+          <div
+            className={cn("mt-1 flex items-center gap-1.5", props.inlineProviderIcon && "pl-5.5")}
+          >
+            {props.inlineProviderIcon ? null : providerIcon}
             <span className="truncate text-xs font-normal leading-snug text-muted-foreground/70">
               {providerLabel}
             </span>
           </div>
-        )}
+        ) : null}
       </div>
 
       <div className="flex shrink-0 items-center gap-1.5">
diff --git a/apps/web/src/components/chat/ModelPickerContent.tsx b/apps/web/src/components/chat/ModelPickerContent.tsx
index 2f2c91bc4e862..8ff7ab9c6a541 100644
--- a/apps/web/src/components/chat/ModelPickerContent.tsx
+++ b/apps/web/src/components/chat/ModelPickerContent.tsx
@@ -60,6 +60,7 @@ import { InlineButton } from "../ui/button";
 import {
   isProviderInstancePickerReady,
   isProviderInstancePickerVisible,
+  shouldShowInstanceBadge,
   type ProviderInstanceEntry,
 } from "../../providerInstances";
 import { providerModelKey, sortProviderModelItems } from "../../modelOrdering";
@@ -575,8 +576,8 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
 
   const isLocked = lockedProvider !== null;
   const isSearching = searchQuery.trim().length > 0;
-  // Inside one provider's tab the provider line repeats the selected rail icon on every row.
-  const rowsMixProviders = isSearching || selectedInstanceId === "favorites";
+  // Rows that mix providers mark each with an inline icon; a provider's own tab already shows it on the rail.
+  const inlineProviderIcon = isSearching || selectedInstanceId === "favorites";
   // Fit the tallest tab so switching tabs never resizes the popup and moves the rail under the cursor.
   const tallestTabUnits = (() => {
     const unitsByTab = new Map<ProviderInstanceId | "favorites", number>();
@@ -592,7 +593,7 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
     for (const model of flatModels) {
       if (!matchesLockedProvider(model)) continue;
       const isFavorite = favoritesSet.has(providerModelKey(model.instanceId, model.slug));
-      if (isFavorite) addRow("favorites", true);
+      if (isFavorite) addRow("favorites", Boolean(model.subProvider));
       if (model.isLegacy && !isFavorite) {
         tabsWithLegacyRow.add(model.instanceId);
       } else {
@@ -993,6 +994,7 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
                 }
                 const disabledReason =
                   getModelDisabledReason?.(model.instanceId, model.slug) ?? null;
+                const entry = entryByInstanceId.get(model.instanceId);
                 return (
                   <ModelListRow
                     key={modelKey}
@@ -1012,7 +1014,12 @@ export const ModelPickerContent = memo(function ModelPickerContent(props: {
                         ? selectedModelKeySet.has(modelKey)
                         : modelKey === activeModelKey
                     }
-                    showProvider={rowsMixProviders || Boolean(model.subProvider)}
+                    inlineProviderIcon={inlineProviderIcon}
+                    showInstanceBadge={
+                      inlineProviderIcon &&
+                      entry !== undefined &&
+                      shouldShowInstanceBadge(entry, instanceEntries)
+                    }
                     showNewBadge={model.badge === "new"}
                     unavailable={model.isUnavailable === true}
                     jumpLabel={modelJumpLabelByKey.get(modelKey) ?? null}

From 205663376ea416bbe3ff58c4178386b9d66ce075 Mon Sep 17 00:00:00 2001
From: Bilal Irfan <bilalirfancontact@gmail.com>
Date: Tue, 27 Oct 2026 16:48:18 +0500
Subject: [PATCH 2/3] fix(web): screen readers hear the provider on Favorites
 and search rows

---
 apps/web/src/components/chat/ModelListRow.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/apps/web/src/components/chat/ModelListRow.tsx b/apps/web/src/components/chat/ModelListRow.tsx
index 0a929d9f83012..9844aa4b383f7 100644
--- a/apps/web/src/components/chat/ModelListRow.tsx
+++ b/apps/web/src/components/chat/ModelListRow.tsx
@@ -77,6 +77,10 @@ export const ModelListRow = memo(function ModelListRow(props: {
           {props.inlineProviderIcon ? providerIcon : null}
           <div className="min-w-0 truncate text-sm font-normal leading-snug">
             {getDisplayModelName(model)}
+            {/* The inline icon is decorative, so name the provider for screen readers. */}
+            {props.inlineProviderIcon ? (
+              <span className="sr-only">, {props.providerDisplayName}</span>
+            ) : null}
           </div>
           {props.showNewBadge ? (
             <span

From c342d5224e044e7827e398b0625ccdc354b3ac6d Mon Sep 17 00:00:00 2001
From: Bilal Irfan <bilalirfancontact@gmail.com>
Date: Tue, 27 Oct 2026 20:35:21 +0500
Subject: [PATCH 3/3] fix(web): avoid announcing decorative provider initials

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

diff --git a/apps/web/src/components/chat/ModelListRow.tsx b/apps/web/src/components/chat/ModelListRow.tsx
index 9844aa4b383f7..bb1676272acf0 100644
--- a/apps/web/src/components/chat/ModelListRow.tsx
+++ b/apps/web/src/components/chat/ModelListRow.tsx
@@ -74,7 +74,7 @@ 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">
-          {props.inlineProviderIcon ? providerIcon : null}
+          {props.inlineProviderIcon ? <span aria-hidden="true">{providerIcon}</span> : null}
           <div className="min-w-0 truncate text-sm font-normal leading-snug">
             {getDisplayModelName(model)}
             {/* The inline icon is decorative, so name the provider for screen readers. */}