Split browser-extension-settings into pairing hook + card components - #866
Merged
Merged
Conversation
browser-extension-settings.tsx had grown to 640 lines mixing the pairing approval flow, connections query/revoke, setup instructions, and the paired-browser list. Extract: - use-extension-pairing.ts: connection query + revoke mutation (useExtensionConnections) and the approval state machine with its refresh-until-connected polling (useExtensionPairing) - browser-extension-pairing-card.tsx: approval card - browser-extension-setup-card.tsx: download + install guide card - browser-extension-connections-card.tsx: paired browsers list The settings component is now a ~115-line shell. useCopyText and the install-guide auto-close effect stay in the shell since the setup card is conditionally mounted. Pure refactor: no behavior change, existing tests untouched and passing. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
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
1 participant
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.
What
browser-extension-settings.tsx(640 lines) was the componentizer backlog's top candidate: one export mixing the pairing-approval state machine, connections query/revoke, setup instructions, and the paired-browser list.Split into:
use-extension-pairing.ts(215) —useExtensionConnections(connections query + revoke mutation) anduseExtensionPairing(approval state machine, URL pairing params, refresh-until-connected polling)browser-extension-pairing-card.tsx(147) — approval cardbrowser-extension-setup-card.tsx(182) — download + install-guide cardbrowser-extension-connections-card.tsx(141) — paired browsers listbrowser-extension-settings.tsx(640 → 111) — thin composition shellNotes
useCopyTextand the install-guide auto-close effect deliberately stay in the shell: the setup card is conditionally mounted, anduseCopyText's pending timer must not move into a component that can unmount (the state-lifetime rule from the agent-card split, PR Split agent-card.tsx into header, status, details, and actions files #803).BrowserExtensionSettings) is untouched and passes.finalize:webgreen, full e2e green (175 passed, incl. the settings pairing/setup specs), plus a Playwright visual pass on both the setup-guide and pairing-approval states.Next run
Queued: re-audit
agents-view.tsx(906 lines, regrew ~130 since the last extraction pass).🤖 Generated with Claude Code