{allBadges.map((badge, i) => { - const isOverflow = overflowCount > 0 && i >= visibleCount; + const isOverflow = i >= adjustedVisibleCount; + const key = badge.kind === "mcp" ? badge.server.id : badge.kind; + if (badge.kind === "attached-workspace") { + if (isOverflow) { + return null; + } + if ( + shouldShowWorkspacePill && + workspace && + workspaceAgent && + chatId + ) { + return ( + + + + ); + } + } return ( Date: Tue, 25 Aug 2026 19:07:07 +0000 Subject: [PATCH 08/11] fix(site): remove the workspace pill's icon-only state in favor of +N overflow The below-md icon-only variant was the remaining tiny state: at narrow viewports the pill collapsed to a bare status icon that always fit, so it never entered the overflow popover. Render name and chevron at every breakpoint with the 8ch floor; when the floored pill no longer fits, the badge overflow system moves it into the +N popover. The pill renders whenever workspace data is present, with attachedWorkspace only enriching its overflow-popover fallback badge. --- .../components/AgentChatInput.stories.tsx | 20 +++-- .../AgentsPage/components/AgentChatInput.tsx | 78 +++++++++---------- .../AgentsPage/components/WorkspacePill.tsx | 26 +++---- 3 files changed, 63 insertions(+), 61 deletions(-) diff --git a/site/src/pages/AgentsPage/components/AgentChatInput.stories.tsx b/site/src/pages/AgentsPage/components/AgentChatInput.stories.tsx index 1b05b4eddf2..7389403ddb5 100644 --- a/site/src/pages/AgentsPage/components/AgentChatInput.stories.tsx +++ b/site/src/pages/AgentsPage/components/AgentChatInput.stories.tsx @@ -1561,7 +1561,7 @@ export const ContextNearLimit: Story = { }, }; -/** Long workspace name at iPhone SE width — verifies truncation. */ +/** Long workspace name at iPhone SE width — collapses into +N overflow. */ export const LongWorkspaceNameMobile: Story = { args: { ...mcpDefaults, @@ -1587,15 +1587,23 @@ export const LongWorkspaceNameMobile: Story = { }, play: async ({ canvasElement }) => { const canvas = within(canvasElement); - // The workspace pill button should be present. - const pill = await canvas.findByRole("button", { - name: /workspace menu/, + // Too narrow for the pill's minimum width: it must collapse into + // the overflow popover instead of clipping to a tiny pill. + const overflowPill = await canvas.findByRole("button", { + name: /more item/, }); await waitFor(() => { - expect(pill).toBeVisible(); + expect(overflowPill).toBeVisible(); }); + await userEvent.click(overflowPill); + const popover = await within(document.body).findByRole("dialog"); + expect( + within(popover).getByText( + "my-super-extremely-long-workspace-name-that-overflows", + ), + ).toBeInTheDocument(); // The toolbar row should not cause horizontal overflow. - const toolbar = pill.closest( + const toolbar = overflowPill.closest( ".flex.items-center.justify-between", ) as HTMLElement; if (toolbar?.parentElement) { diff --git a/site/src/pages/AgentsPage/components/AgentChatInput.tsx b/site/src/pages/AgentsPage/components/AgentChatInput.tsx index 7b107a5cdf7..4d48c3d254b 100644 --- a/site/src/pages/AgentsPage/components/AgentChatInput.tsx +++ b/site/src/pages/AgentsPage/components/AgentChatInput.tsx @@ -584,9 +584,16 @@ export const AgentChatInput: FC = ({ const [overflowPopoverOpen, setOverflowPopoverOpen] = useState(false); const shouldOverflowPlanningBadge = planModeEnabled && contextUsage !== undefined; - const shouldShowWorkspacePill = Boolean( - attachedWorkspace && workspace && workspaceAgent && chatId, - ); + + // When workspace data is available the badge renders as the + // interactive WorkspacePill; its overflow-popover fallback uses the + // richer attachedWorkspace data when present. + let workspacePillBadge: ToolBadgeData | undefined; + if (workspace && workspaceAgent && chatId) { + workspacePillBadge = attachedWorkspace + ? { kind: "attached-workspace", ...attachedWorkspace } + : { kind: "workspace", name: workspace.name }; + } // Ordered list of active tool badge data so we can determine // which ones ended up in the overflow popover. @@ -594,8 +601,8 @@ export const AgentChatInput: FC = ({ if (shouldOverflowPlanningBadge) { allBadges.push({ kind: "planning" }); } - if (shouldShowWorkspacePill) { - allBadges.push({ kind: "attached-workspace", ...attachedWorkspace! }); + if (workspacePillBadge) { + allBadges.push(workspacePillBadge); } else if (attachedWorkspace) { allBadges.push({ kind: "attached-workspace", ...attachedWorkspace }); } @@ -608,11 +615,7 @@ export const AgentChatInput: FC = ({ const overflowCount = useOverflowCount(badgeContainerRef, allBadges.length); const visibleCount = Math.max(0, allBadges.length - overflowCount); - const adjustedVisibleCount = - overflowCount > 0 && shouldShowWorkspacePill - ? Math.max(0, visibleCount - 1) - : visibleCount; - const overflowBadges = allBadges.slice(adjustedVisibleCount); + const overflowBadges = allBadges.slice(visibleCount); const handleRemoveWorkspace = () => onWorkspaceChange?.(null); const removeWorkspaceHandler = onWorkspaceChange @@ -1458,38 +1461,35 @@ export const AgentChatInput: FC = ({ className="flex min-w-0 items-center gap-1 overflow-hidden" > {allBadges.map((badge, i) => { - const isOverflow = i >= adjustedVisibleCount; - const key = badge.kind === "mcp" ? badge.server.id : badge.kind; - if (badge.kind === "attached-workspace") { - if (isOverflow) { - return null; - } - if ( - shouldShowWorkspacePill && - workspace && - workspaceAgent && - chatId - ) { - return ( - - - - ); - } + const isOverflow = overflowCount > 0 && i >= visibleCount; + if ( + badge === workspacePillBadge && + workspace && + workspaceAgent && + chatId + ) { + return ( + + + + ); } return ( = ({ } }} > - {/* md floor: ~8ch of the workspace name + 3.125rem of chrome - * (padding, status icon, gaps, chevron), matching ModelSelector. */} - + {/* Floor of ~8ch of name + 3.125rem chrome (padding, status icon, + * gaps, chevron). Below the floor the overflow system moves the + * pill into the +N popover instead of shrinking it further. */} + setTooltipOpen(v && !open)} @@ -139,29 +140,22 @@ export const WorkspacePill: FC = ({ type="button" aria-label={`${workspace.name} workspace menu`} className={cn( - "inline-flex min-w-0 cursor-pointer items-center justify-center gap-1 rounded-full border-0 bg-transparent p-0 text-xs font-medium text-content-secondary transition-colors hover:bg-surface-tertiary hover:text-content-primary", - "size-7 md:size-auto md:w-full md:max-w-[200px] md:justify-start md:px-2 md:py-0.5", + "inline-flex min-w-0 cursor-pointer items-center justify-start gap-1 rounded-full border-0 bg-transparent p-0 text-xs font-medium text-content-secondary transition-colors hover:bg-surface-tertiary hover:text-content-primary", + "h-7 w-full max-w-[200px] px-2 py-0.5", )} > - - - {workspace.name} - + + {workspace.name} - - {statusLabel} - + {statusLabel} From 6ee9c04a9eed21f4db119f0a7856e629171fd7a8 Mon Sep 17 00:00:00 2001 From: Tracy Johnson Date: Tue, 25 Aug 2026 21:46:27 +0000 Subject: [PATCH 09/11] fix(site): remove emdash from story comment --- site/src/pages/AgentsPage/components/AgentChatInput.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/pages/AgentsPage/components/AgentChatInput.stories.tsx b/site/src/pages/AgentsPage/components/AgentChatInput.stories.tsx index 7389403ddb5..40fe6c53c23 100644 --- a/site/src/pages/AgentsPage/components/AgentChatInput.stories.tsx +++ b/site/src/pages/AgentsPage/components/AgentChatInput.stories.tsx @@ -1561,7 +1561,7 @@ export const ContextNearLimit: Story = { }, }; -/** Long workspace name at iPhone SE width — collapses into +N overflow. */ +/** Long workspace name at iPhone SE width collapses into +N overflow. */ export const LongWorkspaceNameMobile: Story = { args: { ...mcpDefaults, From 88211a4016b7ab64af035bc5c880fdd49940b298 Mon Sep 17 00:00:00 2001 From: TJ Date: Wed, 26 Aug 2026 10:01:38 -0700 Subject: [PATCH 10/11] Update ModelSelector.tsx --- .../components/ChatElements/ModelSelector.tsx | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/site/src/pages/AgentsPage/components/ChatElements/ModelSelector.tsx b/site/src/pages/AgentsPage/components/ChatElements/ModelSelector.tsx index 685c4fbc816..bdce00b8aaf 100644 --- a/site/src/pages/AgentsPage/components/ChatElements/ModelSelector.tsx +++ b/site/src/pages/AgentsPage/components/ChatElements/ModelSelector.tsx @@ -162,9 +162,7 @@ export const ModelSelector: FC = ({ role="combobox" type="button" variant="subtle" - // min-w floor: keep roughly 8ch of the model name visible before - // truncation kicks in. 3.125rem covers the fixed chrome around - // the label (px-2 padding, size-3 provider icon, two gap-1 gaps, + // min-w floor: ~8ch visible before truncation. // size-3.5 chevron) so the label and chevron never get clipped. className={cn( "h-7 min-w-[calc(8ch_+_3.125rem)] shrink justify-start gap-1 rounded-full border-0 bg-surface-secondary px-2 py-0.5 text-xs font-medium shadow-none transition-colors hover:bg-surface-tertiary hover:text-content-primary focus:ring-0 focus-visible:ring-2 focus-visible:ring-content-link [&>svg]:!size-3.5 [&>svg]:p-0 [&>svg]:shrink-0 [&>svg]:transition [&>svg]:hover:text-content-primary [&>img]:!size-3 [&>img]:!p-0", @@ -200,11 +198,8 @@ export const ModelSelector: FC = ({ contentClassName, )} onOpenAutoFocus={(event) => { - // On touch devices, auto-focusing the search input pops the - // software keyboard as soon as the picker opens, hiding the - // model list behind it. Only keep the WAI-ARIA combobox - // focus-into-input behavior for fine pointers (keyboard and - // mouse users on desktop). + // Touch devices on open auto-focus search with sw keyboard, hide model list. + // Keep WAI-ARIA combobox focus-into-input behavior for fine pointers. if (matchMedia("(pointer: coarse)").matches) { event.preventDefault(); } From ff37112666609d9881d18bbaec86cfe81e738df2 Mon Sep 17 00:00:00 2001 From: Tracy Johnson Date: Wed, 26 Aug 2026 17:20:23 +0000 Subject: [PATCH 11/11] fix(site): repair comment fragments and trailing whitespace in ModelSelector --- .../AgentsPage/components/ChatElements/ModelSelector.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/site/src/pages/AgentsPage/components/ChatElements/ModelSelector.tsx b/site/src/pages/AgentsPage/components/ChatElements/ModelSelector.tsx index bdce00b8aaf..d2e53e702dd 100644 --- a/site/src/pages/AgentsPage/components/ChatElements/ModelSelector.tsx +++ b/site/src/pages/AgentsPage/components/ChatElements/ModelSelector.tsx @@ -162,8 +162,8 @@ export const ModelSelector: FC = ({ role="combobox" type="button" variant="subtle" - // min-w floor: ~8ch visible before truncation. - // size-3.5 chevron) so the label and chevron never get clipped. + // min-w floor: ~8ch of the label plus 3.125rem of fixed chrome + // stay visible before truncation kicks in. className={cn( "h-7 min-w-[calc(8ch_+_3.125rem)] shrink justify-start gap-1 rounded-full border-0 bg-surface-secondary px-2 py-0.5 text-xs font-medium shadow-none transition-colors hover:bg-surface-tertiary hover:text-content-primary focus:ring-0 focus-visible:ring-2 focus-visible:ring-content-link [&>svg]:!size-3.5 [&>svg]:p-0 [&>svg]:shrink-0 [&>svg]:transition [&>svg]:hover:text-content-primary [&>img]:!size-3 [&>img]:!p-0", className, @@ -198,8 +198,9 @@ export const ModelSelector: FC = ({ contentClassName, )} onOpenAutoFocus={(event) => { - // Touch devices on open auto-focus search with sw keyboard, hide model list. - // Keep WAI-ARIA combobox focus-into-input behavior for fine pointers. + // Touch devices auto-focus search on open, and the software + // keyboard hides the model list. Keep the WAI-ARIA combobox + // focus-into-input behavior for fine pointers only. if (matchMedia("(pointer: coarse)").matches) { event.preventDefault(); }