refactor(web): share settings group surfaces

[juliusmarminge]

Targets main independently. This PR has no dependency on V2 or another UI audit PR.

Settings cards repeated border, surface, and separator rules across current, folded, provider, and legacy settings layouts. SettingsGroup now owns those defaults with explicit grouped/plain and divided choices. Folded state, provider layouts, row behavior, and refs are preserved.

Validation: settingsLayout, SettingsPanels.logic, and ProviderSettingsPanel tests, affected client typecheck, scoped lint, and React Doctor review. React Doctor’s existing consumer findings remain documented from the original audit; no new component findings were identified.

Code-only verification was requested; no browser/device pass or before/after screenshots are included. This remains a draft for visual review. No wire contracts, persisted data, or upgrade migrations change.

Model: GPT-6. Harness: Codex.

Summary by CodeRabbit

• UI Improvements
  • Updated settings sections and provider configuration panels with consistent grouped layouts.
  • Added clearer spacing and dividers between related settings rows.
  • Improved presentation of provider notices, editors, and legacy settings panels while preserving existing sizing and overflow behavior.

[github-actions]

Thread transfer impact

✅ Thread transfer remains within every enforced ceiling.

Provider	Metric	Main baseline	This PR	Impact	PR ceiling
Codex	Total thread wire	13.5 KiB	13.5 KiB	+30 B (+0.2%)	15.1 KiB	✅
Codex	Thread snapshot wire	7.1 KiB	7.1 KiB	+4 B (+0.1%)	7.3 KiB	✅
Codex	Live turn WebSocket wire	6.5 KiB	6.5 KiB	+26 B (+0.4%)	7.8 KiB	✅
Codex	Live turn WebSocket decoded	56.3 KiB	56.3 KiB	0 B (0.0%)	66.4 KiB	✅
Codex	Live turn messages	10	10	0 (0.0%)	21	✅
Claude	Total thread wire	13.5 KiB	13.5 KiB	−2 B (−0.0%)	15.1 KiB	✅
Claude	Thread snapshot wire	7.1 KiB	7.1 KiB	−1 B (−0.0%)	7.3 KiB	✅
Claude	Live turn WebSocket wire	6.4 KiB	6.4 KiB	−1 B (−0.0%)	7.8 KiB	✅
Claude	Live turn WebSocket decoded	57.0 KiB	57.0 KiB	0 B (0.0%)	66.4 KiB	✅
Claude	Live turn messages	9	9	0 (0.0%)	21	✅

Baseline: 53510d4 · PR result: 44471fa · Source CI: success

Scenario and decoded snapshot size

10 historical turns, 5 command tools per turn, 878.9 KiB retained MCP result per historical turn, and a 1.05 MiB retained result in the measured turn.

• Codex decoded thread snapshot: 113.9 KiB
• Claude decoded thread snapshot: 114.6 KiB

Updated in place by a trusted workflow. PR artifacts are strictly validated and never executed.

[macroscopeapp]

Approvability

Verdict: Approved at 44471fa

Macroscope's review found this PR approvable — This PR centralizes existing settings-card styling without changing settings behavior, defaults, data contracts, or production infrastructure. The runtime impact is limited to the web settings surface and is small and self-contained.

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

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Team

Run ID: 63f4fa31-5762-430f-8899-76dd72582fe3

📥 Commits

Reviewing files that changed from the base of the PR and between 53510d4 and 44471fa.

📒 Files selected for processing (5)

• apps/web/src/components/settings/FoldedSettingsSection.tsx
• apps/web/src/components/settings/ProviderSettingsPanel.tsx
• apps/web/src/components/settings/SettingsGroup.tsx
• apps/web/src/components/settings/SettingsPanels.tsx
• apps/web/src/components/settings/settingsLayout.tsx

Included review availability: Your plan provides up to 10 included reviews per hour; 2 remain after this review.

---

📝 Walkthrough

Walkthrough

Added the shared SettingsGroup component. Replaced repeated settings container styling in provider, folded, legacy, and layout settings views with SettingsGroup while preserving existing layout and behavior.

Changes

Settings group consolidation

Layer / File(s)	Summary
Shared SettingsGroup component apps/web/src/components/settings/SettingsGroup.tsx	Added grouped and plain variants, optional dividers, forwarded <div> props, merged class names, and conditional borders between adjacent children.
Provider and folded settings integration apps/web/src/components/settings/FoldedSettingsSection.tsx, apps/web/src/components/settings/ProviderSettingsPanel.tsx	Replaced provider and folded settings container styling with SettingsGroup. Existing sizing, overflow, layout classes, and collapsible behavior remain in place.
Shared settings layout integration apps/web/src/components/settings/SettingsPanels.tsx, apps/web/src/components/settings/settingsLayout.tsx	Replaced legacy and section wrapper <div> elements with SettingsGroup while preserving contained rows, scroll-target attributes, and variants.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~15 minutes

Change: Refactor

Suggested reviewers: t3dotgg

Merge Risk: ⚪ Minimal · up to 44471

The settings layout consolidation preserves the inspected rendering contracts, with no actionable current-head risk identified.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 71.43% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 7 functions across 5 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: sharing settings group surfaces across web settings layouts.
Description check	✅ Passed	The description explains the change, rationale, scope, validation, and UI-review limitation. It does not use the required section headings or include the checklist, but the required information is mos…
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

• Fix all pre-merge checks with AI

✨ Finishing Touches 💡 1

📝 Generate docstrings 💡

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

---

_{Comment @coderabbitai help to get the list of available commands.}