[bobleer]

Summary

Connection and provider capsule actions can obscure short labels. Add a fixed internal action slot that centers the label at rest, then shifts the content aside as the action appears. Capsule width and row placement remain unchanged throughout the interaction.

• Add opt-in Capsule actionPlacement="reserved", with keyboard, touch, reduced-motion, and RTL handling; retain the existing overlay default.
• Use the new presentation for workspace connection editing and restore API/subscription provider capsule deletion. Keep the existing delete button in the provider editor.
• Document and preview the variant, and cover both provider deletion entry points, cancellation, and provider-scoped removal.

Type and Areas

Type: UI/UX, bug fix

Areas: design system, Web UI connection selection, model settings

Motivation / Impact

Labels remain readable when an action is hidden or shown. Hovering a capsule at the end of a wrapped row does not change its width, so the edit/delete target stays in place. Selection/editing and the secondary action remain separate native buttons. Both provider deletion entry points use the existing confirmation flow.

Verification

Passed:

• pnpm run check:web — includes Web UI type checking, Appearance checks, all-surface theme color audits, and theme visual contracts.
• pnpm --dir design-system run build:ui && node --test design-system/packages/ui/tests/capsule.test.mjs — 5 tests.
• pnpm run motion:audit — reviewed inventory; this is not a pass/fail gate.
• git diff --check and node scripts/check-git-object-sizes.mjs --base upstream/main --head HEAD.

Focused provider/settings checks: 34 tests passed:

pnpm --dir src/web-ui run test:run \
  src/app/scenes/settings/pages/ai/ModelSettingsPage.loading.test.tsx \
  src/app/scenes/settings/pages/ai/ModelSettingsPage.presentation.test.ts \
  src/infrastructure/config/components/modelEditorRequestSettings.test.ts \
  src/infrastructure/config/components/subscriptionAccountState.test.ts \
  src/infrastructure/config/components/ModelSettingsDialog.presentation.test.ts \
  src/infrastructure/config/components/common/SettingsControlSizing.test.ts

Focused connection/project checks: 181 tests passed:

pnpm --dir src/web-ui exec vitest run \
  src/app/components/NewProjectDialog/NewProjectDialog.test.tsx \
  src/app/components/NavPanel/MainNav.projectCreation.test.tsx \
  src/app/services/createProject.test.ts \
  src/features/ssh-remote/SSHConnectionDialog.fields.test.tsx \
  src/features/ssh-remote/SSHConnectionDialog.test.tsx \
  src/features/ssh-remote/useWorkspaceSourceOptions.test.tsx \
  src/features/ssh-remote/workspaceSourceError.test.ts \
  src/features/ssh-remote/SSHRemoteProvider.test.tsx \
  src/features/ssh-remote/SSHAuthPromptDialog.test.tsx \
  src/features/ssh-remote/RemoteFileBrowser.test.tsx

Browser geometry/callback checks used the real WorkspaceChoiceCapsules in a temporary fixture: two widths around a wrapping threshold, 24 pointer edits, and a keyboard Tab/Enter edit. All edits reached the intended callback with no selection callbacks; recorded capsule position/size delta was zero. Idle text centers exactly, shifts aside on hover, and returns on pointer exit. This is interaction evidence, not native WebView visual acceptance.

A broader pnpm run design-system:check run encountered two existing failures in packages/flow-chat-presentation/tests/catalog.test.tsx: production adapter/catalog mismatches for AgentDelete/AgentInterrupt, and missing dedicated projections for Task/AgentControl/ListWorkspaces. Those owners are unchanged by this PR.

Reviewer Notes

AI-assisted; testing level: locally tested, with focused behavior and browser geometry checks. No persisted shapes, host operations, or wire protocols change. Live remote workspace, remote control, Peer Device Mode, and Detached Dispatch were not exercised.

For visual review, hover the last connection capsule in a wrapped row and each provider capsule, then move to its action. Text should shift while the pill stays fixed. Tab to the action and check that it is immediately available. Verify provider deletion can still be canceled from either entry point. Native before/after screenshots are not included.

Checklist

• This PR is focused and does not include secrets, temporary prompts, generated scratch files, or unrelated artifacts.
• Relevant verification is recorded above, or skipped checks are explained.
• User-facing strings, docs, and locales are updated where applicable; existing localized action labels are reused.