From fc01aeeb0f76f5fb6852a544de6805f5a5f30e2b Mon Sep 17 00:00:00 2001
From: TJ <tracy@coder.com>
Date: Mon, 1 Jun 2026 10:59:13 -0700
Subject: [PATCH] fix(site): show condensed count for multi-provider in
 sessions list (#25705)

The Provider column in the AI sessions list now shows:

- **Multiple providers**: condensed count badge (e.g. `2 providers`)
- **Single provider**: icon + display name badge (e.g. `OpenAI`)
(existing behavior)
- **Empty**: nothing rendered

## Changes

| File | Change |
|------|--------|
| `ListSessionsRow.tsx` | Conditional rendering for the provider cell
based on `providers.length` |
| `ListSessionsRow.stories.tsx` | Added stories: `SingleProvider`,
`MultipleProviders`, `EmptyProviders` |
| `ListSessionsPageView.stories.tsx` | `MultipleSessions` story
alternates single/multi provider rows |

> Generated by Coder Agents on behalf of @tracyjohnsonux
---
 .../ListSessionsPageView.stories.tsx          |  1 +
 .../ListSessionsRow.stories.tsx               | 27 ++++++++++++++++++
 .../ListSessionsPage/ListSessionsRow.tsx      | 28 +++++++++++--------
 3 files changed, 45 insertions(+), 11 deletions(-)

diff --git a/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsPageView.stories.tsx b/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsPageView.stories.tsx
index 0c5f021969..ede9692b8e 100644
--- a/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsPageView.stories.tsx
+++ b/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsPageView.stories.tsx
@@ -92,6 +92,7 @@ export const MultipleSessions: Story = {
 			...MockSession,
 			id: `session-${i}`,
 			threads: i + 1,
+			providers: i % 2 === 0 ? ["anthropic", "openai"] : ["anthropic"],
 			last_prompt: [
 				"But *can* I really fix it?",
 				"Can you refactor the entire authentication module to use JWT tokens instead of session cookies?",
diff --git a/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsRow.stories.tsx b/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsRow.stories.tsx
index 1407977398..18db56d938 100644
--- a/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsRow.stories.tsx
+++ b/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsRow.stories.tsx
@@ -30,6 +30,33 @@ export const Default: Story = {
 	},
 };
 
+export const SingleProvider: Story = {
+	args: {
+		session: {
+			...MockSession,
+			providers: ["anthropic"],
+		},
+	},
+};
+
+export const MultipleProviders: Story = {
+	args: {
+		session: {
+			...MockSession,
+			providers: ["anthropic", "openai", "copilot"],
+		},
+	},
+};
+
+export const EmptyProviders: Story = {
+	args: {
+		session: {
+			...MockSession,
+			providers: [],
+		},
+	},
+};
+
 export const NullClient: Story = {
 	args: {
 		session: { ...MockSession, client: null },
diff --git a/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsRow.tsx b/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsRow.tsx
index a630512b49..92dd035178 100644
--- a/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsRow.tsx
+++ b/site/src/pages/AIBridgePage/ListSessionsPage/ListSessionsRow.tsx
@@ -63,17 +63,23 @@ export const ListSessionsRow: FC<ListSessionsRowProps> = ({
 			</TableCell>
 			<TableCell className="w-40 max-w-40">
 				<div className="min-w-0 overflow-hidden">
-					<Badge className="gap-1.5 max-w-full">
-						<div className="flex-shrink-0 flex items-center">
-							<AIBridgeProviderIcon
-								provider={getProviderIconName(session.providers[0])}
-								className="size-icon-xs"
-							/>
-						</div>
-						<span className="truncate min-w-0">
-							{getProviderDisplayName(session.providers[0])}
-						</span>
-					</Badge>
+					{session.providers.length > 1 ? (
+						<Badge className="max-w-full">
+							{session.providers.length} providers
+						</Badge>
+					) : session.providers.length === 1 ? (
+						<Badge className="gap-1.5 max-w-full">
+							<div className="flex-shrink-0 flex items-center">
+								<AIBridgeProviderIcon
+									provider={getProviderIconName(session.providers[0])}
+									className="size-icon-xs"
+								/>
+							</div>
+							<span className="truncate min-w-0">
+								{getProviderDisplayName(session.providers[0])}
+							</span>
+						</Badge>
+					) : null}
 				</div>
 			</TableCell>
 			<TableCell className="w-40 max-w-40">