fix(web): use segmented controls for mode switches

[maria-rcks]

compact mode switches used several different styles across settings and panels. this makes the existing segmented control the shared default and applies it to machines, diagnostics periods, theme appearance, diff layouts, markdown write/preview, and publish protocol selection while preserving their actions and disabled states.

the toolbar prerequisite landed in #9769; this pr now contains only the segmented-control rollout. verified with 39 focused tests, web typecheck, targeted lint and formatting, plus real-app checks at 1280px and 640px in dark and light appearances.

before and after, same diagnostics view:

built with gpt-5.6-sol through the codex harness.

---

Note

Low Risk
Mostly visual and component wiring; behavior is preserved, though any ToggleGroup that relied on the old implicit default variant would now look segmented.

Overview
Standardizes mode switches across the web app by making segmented ToggleGroup the shared pattern instead of one-off button rows, ghost toggles, and custom radio styling.

ToggleGroup now defaults to variant="segmented" (with matching segmented sizing), so new callers get the compact pill control without extra props. Diff toolbars (stacked/split), PR markdown Write/Preview, diagnostics history windows, provider device tabs, theme Light/Dark, and publish SSH/HTTPS all use labelled segmented groups while keeping the same handlers, validation, and disabled behavior.

Publish protocol keeps RadioGroup semantics but renders options with toggleVariants({ variant: "segmented" }). The unused providerSettingsTabClassName helper is removed in favor of Toggle styling.

^{Reviewed by Cursor Bugbot for commit a879bfa. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Replace mode switches with segmented controls across web components

• Migrates layout, protocol, editor mode, window, device, and appearance selectors to shared ToggleGroup segmented controls in DiffPanel.tsx, GitActionsControl.tsx, PullRequestCodeTab.tsx, PullRequestMarkdownEditor.tsx, DiagnosticsSettings.tsx, ProviderSettingsPanel.tsx, ResourceTelemetryDiagnostics.tsx, and ThemeEditorPanel.tsx
• Deletes the now-unused providerSettingsTabClassName helper in providerSettingsTabs.ts
• Risk: ToggleGroup in toggle-group.tsx now defaults to the segmented variant and its associated size when both variant and size are omitted, changing rendering for any other consumers that relied on the previous default variant

^{Macroscope summarized a879bfa.}

[macroscopeapp]

Approvability

Verdict: Not approved

Macroscope's review found this PR not approvable — This PR broadly restyles existing customer-facing mode controls and changes the default variant of the shared ToggleGroup primitive from standard to segmented. The implementation is otherwise bounded and non-sensitive, but the product-default change requires human review.

^{You can add or adjust custom eligibility rules. Learn more.}

[cursor]

Cursor Bugbot has reviewed your changes using default effort and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 28c3ae7. Configure here.}