fix(site): show condensed count for multi-provider in sessions list (#25705) (#25932)

Cherry-pick of https://github.com/coder/coder/pull/25705

Original PR: #25705 — fix(site): show condensed count for multi-provider
in sessions list
Merge commit: fc01aeeb0f
Requested by: @tracyjohnsonux

Co-authored-by: TJ <tracy@coder.com>

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?",

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 },

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">