feat(web): reorganize settings pages

[maria-rcks]

summary

settings pages had oversized hierarchy, uneven spacing, and long descriptions that made the layout harder to scan.

• reorganize settings into compact grouped blocks with subsections for the active page
• shorten descriptions so more settings stay on one line
• simplify appearance, source control, integrations, and connections layouts
• keep the provider picker visible beside grouped editor sections, with labels on the left and controls on the right
• preserve redacted account emails and authentication details in the selected provider header
• place the provider color picker beside the name field and keep the full color editor in its popover
• remove the provider environment divider and suppress destination pulses for sidebar subsection navigation

verification

• vp run typecheck in apps/web
• focused settings search tests: 17 passed
• provider component tests: 14 passed
• focused lint and formatting
• browser verification at 1280x800 in light mode
• sidebar subsection navigation scrolls without a pulse
• search-result navigation still pulses the destination

light-mode evidence

general before

general after

appearance before

appearance after

keybindings before

keybindings after

providers before

providers after

integrations before

integrations after

source control before

source control after

connections before

connections after

archive before

archive after

active settings sidebar sections

implemented by gpt-5.6-sol through the Codex harness.

---

Note

Medium Risk
Large UI refactor of provider configuration and global settings section defaults could affect layout or discoverability; accent picker behavior changes (no preset swatches) but does not alter stored settings logic.

Overview
Reorganizes settings UI into smaller, scannable sections with grouped card rows, shorter copy, and in-page subsection links in the sidebar for General, Appearance, Source Control, and Connections.

Layout primitives: SettingsSection now defaults to a bordered grouped card (with optional plain, section descriptions, and hidden titles); sidebar hash jumps scroll without the search pulse, while search still highlights targets. General and Appearance panels are split into named sections; legacy features use the same card treatment.

Providers: The instance editor drops Configuration/Models tabs in favor of stacked SettingsSection blocks (display name + accent, setup, runtime, environment, models) inside a refreshed split list/detail shell; runtime fields use a new settings form variant. Advanced provider health interval is always visible. Accent color picks from a single custom popover (swatches removed) with Clear color and safer hex typing.

Copy-only tweaks across Connections, Integrations, and related rows; search targets Environment identification to the Interface section.

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

Note

Reorganize web settings pages into subsections and grouped card layouts

• Settings sidebar now shows route-specific subsection links for active pages; clicking a subsection scrolls to it without the search pulse, while search results retain highlighting.
• SettingsSection renders by default as bordered grouped cards with row separators and optional descriptions; GeneralSettingsPanel is split into Organization, Behavior, Projects & threads, Confirmations, Text generation, and About sections with stable ids.
• Provider editor in ProviderInstanceCard.tsx switches from Configuration/Models tabs to stacked setup, runtime, environment, and models sections in a split list/editor layout.
• Accent color picker in ProviderAccentColorPicker.tsx removes predefined swatches, uses a single custom-color trigger with a popover Clear action, and preserves invalid hex draft text until a valid value is entered.
• Shortens or rewords many setting descriptions and restyles the theme library to full-width grids with lighter headings.
• Behavioral Change: Environment identification search now targets the appearance-interface subsection instead of the general Appearance target; subsection navigation skips the highlight pulse via a new router history-state flag in settingsLayout.tsx.

^{Macroscope summarized 2df5886.}

[macroscopeapp]

Approvability

Verdict: Not approved

Macroscope's review found this PR not approvable — This is a broad production settings redesign that adds nested navigation and changes the provider editor from tabs to multiple sections, alongside changed color-picker behavior and default section visibility. Because shared settings infrastructure and several existing user-facing flows are affected, the scope warrants 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 96b39ee. Configure here.}