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

[rynfar]

Provider settings spread status, switches, and detailed controls down one long page, so scanning providers or moving between configurations was hard. The page becomes two columns: the left keeps every provider and its on/off switch visible, the right edits one provider through Models and Configuration tabs. Device selection moves to compact tabs, and the health check interval moves under Advanced.

Bundled with the redesign upstream, and worth having on its own: ProviderEnvironmentSection never resynced its draft rows when the environment prop changed, so environment-variable edits made elsewhere never appeared. It resyncs now, with equality checks so a resync cannot stomp in-flight typing. Disabled providers also get a muted status dot instead of an amber one that read as a warning.

Adapting it to Pylon

Both files had diverged, so this is a cherry-pick with real resolution rather than a clean apply.

• The device tab bar would not have compiled. It called connectionPhaseDotClassName and connectionPhasePingClassName; Pylon has neither, having replaced ConnectionStatusDot with a DotMatrix-backed component that takes a state. Rewritten against Pylon's API.
• The account email is restored, in the editor header. Upstream deletes ProviderAuthEmail and leaves the email nowhere on the page — fine there, because upstream has one account per driver. Pylon has several per driver with an explicit drain order, so the redacted email is the thing that tells two Claude accounts apart, and it is what the sign-in dialog reads. showEditorStatus now covers any account with an email or a sign-in to offer, not only warning and error states.
• Drain-order controls and the account reset join delete in the editor header, following upstream's own choice to put per-account actions there. Reordering is visible in the left list as it happens.
• The usage summary stays on every list row, not just the selected account. Comparing quota across accounts is why it exists; making you select each one in turn would have quietly removed the feature. ProviderUsageSummary became a block span so it is valid DOM inside the row's select button.
• The detailed usage rows follow the collapsible they lived in, to the top of the Configuration tab.
• The sign-in dialog is now a sibling of the editor rather than the old card, so it renders once for the selected account.

Tests

Adds a focused test that the editor receives drain-order controls for a driver with several accounts, that list rows do not, that a read-only session gets none, and that a move writes the expected priority patch. Both halves were mutation-checked: deleting the drainOrder graft fails it, and so does dropping timestampFormat.

The environment-variable resync fix ships without a new test. apps/web has no DOM test environment — component tests here use renderToStaticMarkup or shallow prop inspection, neither of which runs the effect the fix lives in. Adding jsdom for one test is out of scope for an adoption; flagging it rather than claiming coverage.

Checks

• vp run -F @t3tools/web typecheck — clean
• vp test run apps/web/src/components/settings/ apps/web/src/components/providerUsage/ — 24 files, 151 tests passing
• vp lint --report-unused-disable-directives and vp fmt --check on the six changed files — clean

Verified in the app

Ran a dev server against a copy of a real Pylon database (Codex plus two Claude accounts) and captured Settings → Providers. Re-run on 82edffce2, so it covers the review fixes below, not just the original split. Images attached.

Confirmed live:

• Two-column layout, per-row usage on all three authenticated accounts, Models/Configuration tabs, usage rows at the top of Configuration, and the muted disabled dot replacing the amber one.
• The redacted email in the editor header ("Authenticated as ▒▒▒ · Claude Team Subscription", click to reveal).
• Drain-order controls in the editor header reporting Use Work earlier (currently 1 of 2) / Use Work later (currently 1 of 2).
• The restored update markers: three in the list, one per provider with an advisory, matching the three Update available labels in the DOM.
• A disabled account's editor status line, which previously rendered nothing: Disabled · Cursor is disabled in Pylon settings. — both the un-gated line and the preserved server reason.

The first pass earned its keep by catching a layout bug in my own graft: a Claude account reports three usage windows, each whitespace-nowrap, so the summary line was wider than the 20rem column, could not shrink, and painted under the enable switch. Fixed in 1f1cae8da by truncating the summary.

Device tabs are not exercised: this environment has one primary device, so deviceTabs renders null by design. That path is still unverified visually.

Review fixes

A review of this branch found four defects, all fixed in a9d75ce1e:

• Reordering swapped the editor onto a different account. The editor falls back to rows[0] while nothing has been clicked, and a move rewrites the priorities rows is sorted by — so "use this account later" on the first account made rows[0] the account that took its place, remounting the editor onto it, resetting the tab, discarding environment-variable drafts, and pointing the next click at the wrong account. The selection is pinned before the patch now, and the new test applies the emitted patch and re-renders, so it fails without the pin.
• An outdated provider was invisible from the list. The advisory popover moved to the editor, which only shows the selected account, so finding one meant clicking each provider in turn — and Pylon's bounce cue on the icon went with it. List rows carry a marker again, as static content inside the row's existing button rather than a nested control.
• A disabled account showed nothing in the editor. showEditorStatus required enabled, hiding the account email exactly when you are choosing which of two disabled accounts to re-enable — the case the graft exists for. It also discarded the server's reason, so a disabled provider with a missing CLI said only "Disabled".
• The environment resync spent its echo guard on no-op renders. The card passes instance.environment ?? [], so an instance with no variables allocates a new array every render and the effect runs every render; the guard was cleared unconditionally at the top, so a publish's echo routinely arrived unsuppressed and was treated as an external edit — resyncing mid-edit and remounting the inputs. It is only consumed now when the environment actually changed.

Two findings are recorded but not fixed here, both in code adopted verbatim:

• The resync replaces the whole draft array, so a row added via Add but not yet published is dropped when an unrelated variable publishes. Sensitive values come back redacted, so a publish echo can never compare equal by value — suppressing it reliably needs a name-and-shape comparison, which is a change to upstream's design rather than an adoption.
• The new tab strips are aria-pressed buttons with hidden panels, so assistive tech gets no tab/panel relationship and no arrow-key navigation. Upstream's design; worth a follow-up across both strips.

Upstream

e2d4d12a8 / pingdotgg/t3code#8380.

Built with Opus 5 in the Claude Code harness.

---

^{Need help on this PR? Tag @codesmith-bot with what you need. Autofix is disabled.}

[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	13.3 KiB	13.3 KiB	−7 B (−0.1%)	15.1 KiB	✅
Codex	Thread snapshot wire	6.9 KiB	6.9 KiB	+5 B (+0.1%)	7.3 KiB	✅
Codex	Live turn WebSocket wire	6.4 KiB	6.4 KiB	−12 B (−0.2%)	7.8 KiB	✅
Codex	Live turn WebSocket decoded	55.5 KiB	55.5 KiB	0 B (0.0%)	66.4 KiB	✅
Codex	Live turn messages	9	9	0 (0.0%)	21	✅
Claude	Total thread wire	13.3 KiB	13.3 KiB	+3 B (+0.0%)	15.1 KiB	✅
Claude	Thread snapshot wire	6.9 KiB	6.9 KiB	+5 B (+0.1%)	7.3 KiB	✅
Claude	Live turn WebSocket wire	6.4 KiB	6.4 KiB	−2 B (−0.0%)	7.8 KiB	✅
Claude	Live turn WebSocket decoded	56.3 KiB	56.3 KiB	0 B (0.0%)	66.4 KiB	✅
Claude	Live turn messages	9	9	0 (0.0%)	21	✅

Baseline: 08e9acc · PR result: 82edffc · 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.