Normalize spacing and controls across Settings panels to the shared design system #4154

Summary

Run a consistency pass over the Settings area so every panel under
app/src/components/settings/panels/ follows the shared design-system ruler:
canonical vertical rhythm, row padding, section cards, and shared form controls.
Keep deeply bespoke layouts structurally intact — this is a spacing + obvious-
control-swap pass, not a ground-up rewrite.

Problem / Context

Settings has ~70 panels and a strong shared system already exists:
SettingsPanel (the routed template, bakes in p-4 space-y-5) plus the
app/src/components/settings/controls/ primitives (SettingsSection,
SettingsRow, SettingsSwitch, SettingsSelect, SettingsNumberField,
SettingsTextArea, SettingsBadge, SettingsListItem, SettingsStatusLine),
with panels/AgentAccessPanel.tsx as the gold-standard reference.

Many panels have drifted from it, producing visible spacing/alignment
inconsistency as you move between Settings pages:

• Inconsistent vertical rhythm — space-y-3 / space-y-4 / space-y-6 instead of canonical space-y-5.
• Ad-hoc row padding — px-4 py-4 / px-4 py-2 instead of px-4 py-3.
• Raw <section className="rounded-2xl border … p-4 space-y-3"> cards re-implementing SettingsSection.
• Raw <input> / <button> / <select> / <textarea> instead of the shared primitives.

Canonical ruler (do not invent values):

Scope

In scope: normalize section-level space-y-*, row padding, section-card
markup, and swap clearly-raw controls (checkbox/toggle → SettingsSwitch,
number → SettingsNumberField, <select> → SettingsSelect, text/textarea →
SettingsTextField/SettingsTextArea, ad-hoc <button> → ui/Button). Add no
i18n keys; preserve data-testid / htmlFor / id wiring.

Out of scope: restructuring genuinely bespoke layouts (state machines like
RecoveryPhrasePanel, custom radio-card pickers like SearchPanel /
AppearancePanel / MascotPanel, confirmation/crypto modals); converting
PanelPage → SettingsPanel; touching redirect-stub panels.

Cleanup noted: panels/autocomplete/CompletionStyleSection.tsx and
AppFilterSection.tsx have no importers (the debug panel inlines its own copies)
— candidates for deletion.

Acceptance criteria

• Spacing — no section-level space-y-3/4/6 or px-4 py-4 / px-4 py-2 row padding remains in settings panels (excl. intentional intra-group space-y-1/2).
• Section cards — hand-rolled rounded-2xl/xl border … p-4 cards re-implementing a section use <SettingsSection>.
• Controls — clearly-raw checkboxes/toggles/number/select/text inputs and ad-hoc <button>s use the shared primitives / ui/Button.
• Bespoke layouts — state machines, radio-card pickers, and modals are left structurally intact (spacing-only).
• No i18n drift — pnpm i18n:check parity holds (no keys added/renamed).
• Green — pnpm typecheck, pnpm lint (no new errors), and the settings Vitest suite pass; test DOM queries updated where a primitive swap changed the role (e.g. input[type=checkbox] → role="switch").
• Dead code — remove unused CompletionStyleSection.tsx / AppFilterSection.tsx (or confirm a keeper).
• Diff coverage ≥ 80% — implementing PR meets the changed-lines coverage gate.

Related

• Reference implementation: app/src/components/settings/panels/AgentAccessPanel.tsx
• Template: app/src/components/settings/layout/SettingsPanel.tsx
• Primitives: app/src/components/settings/controls/