fix(web): clean up the provider settings list and editor - #186
Merged
Conversation
The provider settings page was hard to scan: a "Provider / On" column header over a handful of rows, a separate bottom refresh bar, 11px truncated status text, a Configuration tab listed second but selected by default, and an Advanced toggle that did nothing on read-only sessions because its trigger sat inside the inert wrapper. Rebuilds the layout: "Checked Xs ago", refresh, and add-provider move into the section header as compact icon actions; the list scrolls and uses rounded bg-foreground/8 selection with 13px two-line-clamped status text; status dots appear only for warning and error; a failed probe's message shows in the list row and on its own line in the editor header; tabs read Configuration first; Advanced opens on read-only sessions with only its health-interval controls inert; list, device strip, and editor share one 16px gutter. Manual port of pingdotgg/t3code#8504 (5e63aea2d). Pylon's card diverges from upstream's by the drain-order chevrons, the environmentId-driven in-app sign-in, the animated list update marker, and the provider usage rows, so upstream's rewritten card was re-implemented on Pylon's rather than taken. Pylon keeps a minimum list-row height instead of upstream's fixed one because a row may also carry the usage summary, and the sign-in button gets its own inert fence so the read-only editor header stays honest while its email reveal keeps working. Built with Claude Opus 5 in the Claude Code harness.
The fork-only guard case added with the port rendered with the default `readOnly`, so it proved the drain-order chevrons and the in-app sign-in still render but not that the rebuilt inert fences actually cover them — and its `position: 0, total: 2` fixture left the "earlier" chevron disabled by position, so a permanently disabled control would still have passed on the strength of its aria-label. Renders the card three ways instead: middle of three accounts with both handlers (both chevrons must be enabled), first of three (only "earlier" is disabled), and read-only, where the drain-order controls and the sign-in button must sit inside `inert` fences while the status line's email reveal must not. Adds two markup helpers, since these tests render to a string with no DOM: one balances tags to return the contents of each inert fence, the other extracts a button's opening tag with its class attribute stripped so an assertion on `disabled=""` cannot be satisfied by the `disabled:` variants baked into the button's class list. Also asserts in the panel's read-only case that the Advanced trigger stays outside the inert fence, which is what makes Advanced openable on a read-only session. Every new assertion was checked against a deliberate mutation of the source: permanently disabled chevrons, a sign-in button outside its fence, the email reveal pulled inside the header fence, and the Advanced trigger moved inside the fence each fail exactly one case. Built with Claude Opus 5 in the Claude Code harness.
Thread transfer impact✅ Thread transfer remains within every enforced ceiling.
Baseline: Scenario and decoded snapshot size10 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.
Updated in place by a trusted workflow. PR artifacts are strictly validated and never executed. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
The Providers settings page carried a "Provider / On" header row, a bottom refresh bar, 11px status text that overflowed, a fixed 64px row height, status dots on every row regardless of health, and an Advanced section that could not even be opened on a read-only session.
Fix
Manual port of upstream
#8504(5e63aea2d) from thef94a0d646..1f8ed54adT3 review. PR #172 had already taken its connected-dot hunk; this brings the rest: header row and bottom bar removed, "Checked Xs ago" plus refresh and add-provider as labelled icon buttons in the section header, Configuration tab first, 13px two-line-clamped status text with the probe error inline (and unclamped in the editor), roundedbg-foreground/8selection, status dots only for warning and error, Advanced openable read-only, one 16px gutter.ProviderSettingsPanel.tsxis byte-identical to upstream's ported region.ProviderInstanceCard.tsxwas re-implemented on Pylon's card rather than merged, because Pylon's version carries drain-order chevrons,environmentId-driven in-app sign-in, and the redacted "Authenticated as" header with reveal — all of which survive and are tested.Three deliberate deviations, each commented in source:
min-h-19instead of upstream's fixedh-19, because Pylon rows can also carryProviderUsageSummary, which a hard height would clip.inertfence. Upstream leaves the whole status line outside the read-only fence because its status line holds no write action; Pylon's does, and a literal port would have made a write clickable on a read-only session.Dropping
width="expanded"narrows the page frommax-w-6xltomax-w-4xl, as upstream did.Verification
vp test runonProviderInstanceCard.test.ts,ProviderSettingsPanel.environment.test.tsx,SettingsPanels.logic.test.ts— 37 passed initially, then a review round added read-only coverage: the drain-order chevrons and Sign in each sit inside aninertfence while the email reveal does not; the Advanced trigger is outside the panel's fence; chevron disabled state is pinned to handler presence rather than list edges. Every new assertion was mutation-checked (each of four source mutations fails exactly one case).@t3tools/webtypecheck, lint, format, andgit diff --checkclean.ProviderSettingsPanelhas a single caller and no prop change.Claude Fable 5 in Pylon.
Need help on this PR? Tag
@codesmith-botwith what you need. Autofix is disabled.