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
This commit is contained in:
TJ
2026-06-01 10:59:13 -07:00
committed by GitHub
parent 372265a0b5
commit fc01aeeb0f
3 changed files with 45 additions and 11 deletions
@@ -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?",
@@ -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 },
@@ -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">