feat(web): split provider settings into list and editor

[t3dotgg]

Provider settings spread status, switches, and detailed controls down one long page. It was hard to scan providers or switch between configurations.

This changes the page to a two-column layout. The left side keeps every provider and its on/off switch visible. The right side edits one provider through separate Models and Configuration tabs. Device selection moves to compact tabs, while the health check interval stays available under Advanced.

Before

After

Checks

• vp run --filter @t3tools/web typecheck
• Focused lint for the three changed files
• 6 focused provider settings tests
• Manual browser check for provider selection, independent switches, Models, Configuration, and Advanced

Built with GPT-5.6 Sol in the Codex harness.

---

Note

Medium Risk
UI and props contract changes for provider configuration editing, including environment-variable draft sync; behavior changes for disabled status display but no server-side auth or persistence logic.

Overview
Provider settings move from a single scroll of expandable cards to a master–detail layout: a left Provider list (status, enable switch, selection) and a right editor for the selected instance.

ProviderInstanceCard drops expand/collapse in favor of mode: "list" | "editor" plus selected / onSelect / readOnly. The editor uses Models and Configuration tabs instead of one collapsible block. Disabled instances always show a neutral Disabled summary and muted status dot (not stale server status). Authenticated-email / ProviderAuthEmail UI is removed; warning/error status appears only in the editor header.

ProviderSettingsPanel wires selection state, puts device picking in a horizontal tab bar above Providers (replacing the device card grid), moves health check interval into an Advanced collapsible, and scopes inert to editor/advanced areas so list selection still works in read-only mode.

ProviderEnvironmentSection resyncs local env-var rows when the parent environment prop changes (with equality checks to avoid fighting in-flight edits). Shared tab styling lives in providerSettingsTabs. Tests are updated for list/editor flows and read-only behavior.

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

Note

Split provider settings into master-detail list and editor views

• Replaces the expand/collapse ProviderInstanceCard with two modes: list (compact selectable row with enable switch) and editor (full detail with Models/Configuration tabs). Callers must update to the new mode, selected, onSelect, and readOnly props.
• Reworks EnvironmentProviderSettings into a two-column layout where the left pane lists instances and the right pane shows the selected editor. Devices are selected via a top tab bar instead of a grid, and the page layout is widened.
• Moves health check interval controls into an Advanced collapsible section and relocates refresh/add controls to the list footer and header.
• Fixes ProviderEnvironmentSection to preserve in-progress edits when environment prop re-renders with equivalent data, using the new providerEnvironmentsEqual helper.
• Removes ProviderAuthEmail component and changes disabled provider status dot from amber to muted.
• Risk: ProviderInstanceCardProps interface changed from isExpanded/onExpandedChange to mode/selected/onSelect/readOnly; any out-of-tree callers will break. Read-only mode keeps selection active but disables modification via inert/aria-disabled.

^{Macroscope summarized f6ca5be.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 842e8eec-6090-453c-8169-94f0806cfb8e

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

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

[github-actions]

Thread transfer impact

✅ Thread transfer remains within every enforced ceiling.

ℹ️ The exact PR base did not have a successful artifact. Baseline uses the latest successful main measurement shown below.

Provider	Metric	Main baseline	This PR	Impact	PR ceiling
Codex	Total thread wire	12.6 KiB	13.3 KiB	+745 B (+5.8%)	15.1 KiB	✅
Codex	Thread snapshot wire	6.3 KiB	6.9 KiB	+623 B (+9.7%)	7.3 KiB	✅
Codex	Live turn WebSocket wire	6.3 KiB	6.4 KiB	+122 B (+1.9%)	7.8 KiB	✅
Codex	Live turn WebSocket decoded	51.8 KiB	55.6 KiB	+3.8 KiB (+7.3%)	66.4 KiB	✅
Codex	Live turn messages	16	11	−5 (−31.3%)	21	✅
Claude	Total thread wire	12.6 KiB	13.4 KiB	+792 B (+6.1%)	15.1 KiB	✅
Claude	Thread snapshot wire	6.3 KiB	6.9 KiB	+651 B (+10.1%)	7.3 KiB	✅
Claude	Live turn WebSocket wire	6.3 KiB	6.5 KiB	+141 B (+2.2%)	7.8 KiB	✅
Claude	Live turn WebSocket decoded	52.7 KiB	56.4 KiB	+3.8 KiB (+7.1%)	66.4 KiB	✅
Claude	Live turn messages	16	11	−5 (−31.3%)	21	✅

Baseline: 82b8a93 · PR result: f6ca5be · 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: 109.4 KiB
• Claude decoded thread snapshot: 110.1 KiB

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

[macroscopeapp]

Reviewed the Providers page rework against the shared control system. Five consistency issues in the new interactive markup, mostly around clickable affordances and half-wired ARIA tab semantics. Layout/Tailwind ownership itself looks fine.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

UI consistency review

Five findings, all in the new provider settings layout. The main themes: the new tab bars and the "Advanced" disclosure hand-roll behavior that the shared primitives already own (focus-visible ring, pointer cursor, coarse hit target, trigger/panel ARIA wiring, panel transition), and ARIA tab roles are applied without the panel association or keyboard model they promise.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

One finding: the new editor header drops the provider status/diagnostic line that the removed auth row used to render, so getProviderSummary().detail is no longer rendered anywhere on the page. Everything flagged in earlier runs (tab/tablist ARIA, the hand-rolled Advanced disclosure, the size="sm" override on the Add provider button, the always-empty Models tab) reads as resolved on this head.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Reviewed the providers page rework for shared-primitive ownership, Tailwind ownership, and preserved interaction/accessibility semantics. The earlier ARIA/tab-role, cursor, Collapsible, and Button size findings are addressed in this revision. Three remaining items: status detail that no longer renders anywhere, a status dot that is now explained only to screen readers, and two new tab strips implemented two different ways.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

UI consistency review of the providers settings rework. The earlier ARIA/tab-role, cursor, Collapsible, and button-geometry items are resolved in dd06a1b. Two regressions introduced by the removed header content remain.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Approvability

Verdict: Not approved

Macroscope's review found this PR not approvable — This production-facing redesign changes provider selection, editing, device navigation, read-only behavior, and status presentation across the existing settings flow. Its new master-detail workflow and broad UI/runtime impact are beyond a small isolated adjustment.

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

[macroscopeapp]

One finding: the new device tab strip uses a raw overflow-x-auto lane, unlike the other horizontally-overflowing strips in this app, so a native horizontal scrollbar can land on top of the active-tab underline. Everything else in this revision (tabs now aria-pressed with cursor-pointer + focus ring, tooltip restored on the icon-only refresh action, Collapsible* used for the Advanced disclosure, size="compact" for Add provider, editor-side status line) reads consistently with the shared primitives.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Reviewed the provider settings rework for shared-primitive and Tailwind-ownership consistency. The concerns raised on earlier pushes look addressed: the tab strips now use aria-pressed (no half-implemented role="tab" contract) plus cursor-pointer and a focus-visible ring, the Advanced disclosure is back on the shared Collapsible/CollapsibleTrigger/CollapsibleContent primitives, the refresh action regained its Tooltip, the "Add provider" button uses the named compact size, the device strip hides its scrollbar with the same arbitrary-utility pattern already used by BrowserDeviceToolbar/PullRequestDetailPanel, and ConnectionStatusDot renders a span (no nested button) with the status wording surfaced via the wrapping tooltip. One small layout artifact left, noted inline.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

One finding on the new device tab strip: it copies ScrollArea's hideScrollbars utilities onto a bare overflow-x-auto div without the overflow-aware fade the shared primitive owns.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

One finding: the update-available affordance lost its motion cue during the popover-trigger move. Everything else previously raised (device-strip scroll fade via ScrollArea, list/footer border seam, tooltip on the icon-only refresh action, editor-side status text, Collapsible for the Advanced disclosure, named Button sizes, aria-pressed tab semantics with cursor-pointer + focus ring) now matches the shared component system.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Reviewed the Providers settings redesign for shared-primitive, Tailwind-ownership and accessibility consistency. The earlier tab-semantics, Collapsible, ScrollArea and refresh-tooltip points now look addressed; two remaining items on the device strip and the Advanced disclosure.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Reviewed the providers page restructure for shared-primitive ownership, Tailwind ownership, and interaction preservation. The shared providerSettingsTabClassName helper, the ScrollArea device strip, and the Collapsible-based Advanced disclosure all now route through the shared contracts. Two findings remain, both in ProviderSettingsPanel.tsx.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

Two findings on the read-only handling added in the latest commits.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

One finding: the new shared tab class relies on an outward focus ring inside a clipping scroll viewport, so keyboard focus on the device tabs is nearly invisible. Details inline.

^{Posted via Macroscope — UI Consistency}

[macroscopeapp]

One finding on the new environment-draft resync in ProviderInstanceCard.tsx. Previously flagged issues (tab strip reachable in read-only, greying scoped to the inert subtrees, inset focus ring in providerSettingsTabClassName) look resolved.

^{Posted via Macroscope — UI Consistency}

[cursor]

Cursor Bugbot has reviewed your changes using high 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 123fb56. Configure here.}

[macroscopeapp]

Two regressions in the new provider list/editor split: the read-only wrapper now blocks the editor's tab strip, and the environment-variable section resyncs from prop identity that changes on every parent render.

^{Posted via Macroscope — UI Consistency}