Optimize add provider dialog render flow

[cursor]

What Changed

• Removed the direct useEffect chain in AddProviderInstanceDialog that reset dialog state on open and copied the derived instance ID into state after label/driver changes.
• Mount the dialog form content fresh per open, derive the instance ID during render until the user edits it manually, and group related draft state in a reducer.
• Split the dialog header, panel steps, and footer into smaller components and added explicit label/input associations.

Why

react-doctor flagged the old derived-state effect chain as a render-cost issue. Typing in the label field previously caused React to render with the stale instance ID and then render again after the effect copied the derived ID into state. Deriving the ID from current draft state removes that cascading update while preserving the same visible behavior.

UI Changes

Before/after React Scan recordings captured for the Add provider instance dialog Identity step:

• Before: react_scan_add_provider_before_slow.mp4
• After: react_scan_add_provider_after_slow.mp4

Caveat: the React Scan counter text is difficult to read in the recordings, but React Scan highlights are visible during the typed interaction and the Instance ID updates to codex_workbench in both recordings. react-doctor --diff main no longer reports AddProviderInstanceDialog.tsx; remaining diff findings are pre-existing elsewhere on the branch.

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

Validation:

• corepack pnpm dlx react-doctor@latest . --verbose --project @t3tools/web --diff main --no-telemetry (non-zero due to unrelated existing branch findings; no AddProviderInstanceDialog findings remain)
• corepack pnpm exec vp check
• corepack pnpm exec vp run typecheck

  

Note

Refactor add provider instance dialog to use reducer-driven state and split into sub-components

• Replaces multiple useState hooks in AddProviderInstanceDialog with a single useReducer using a new addProviderInstanceDraftReducer and createInitialAddProviderInstanceDraftState factory.
• Extracts dialog content into a new AddProviderInstanceDialogContent component that only mounts when the dialog is open, avoiding unnecessary renders.
• Splits the dialog UI into dedicated sub-components: AddProviderInstanceDialogHeader, AddProviderInstanceDialogPanel, AddProviderInstanceDialogFooter, and step components for driver, identity, and config.
• Adds a WIZARD_STEPS constant (["Driver", "Identity", "Config"]) and associated TypeScript types to formalize the wizard flow.

^{Macroscope summarized e07e155.}

---

Note

Low Risk
Settings UI refactor only; same validation and updateSettings save path, with low regression risk if derived instance ID behavior matches prior effects.

Overview
Refactors Add provider instance to cut extra renders when typing on the Identity step (e.g. label → instance ID).

State & lifecycle: Replaces many useState hooks and useEffect chains (open reset + syncing derived instance ID into state) with a single useReducer draft model. Instance ID is derived during render from driver/label until the user edits it (manualInstanceId + instanceIdDirty). Form content mounts only while the dialog is open ({open ? <AddProviderInstanceDialogContent /> : null}), so each open starts fresh without a reset effect.

Structure: Splits the monolithic dialog into header, panel, footer, and per-step components (Driver, Identity, Config). Adds WIZARD_STEPS and explicit htmlFor / input ids on Identity fields.

Behavior and save path are unchanged; the goal is fewer cascading updates and clearer component boundaries.

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

[github-actions]

🚀 Expo continuous deployment is ready!

• Project → t3-code
• Platforms → android, ios
• Scheme → t3code-preview

	🤖 Android	🍎 iOS
Fingerprint	ae17d94b35f91f9c608a63dadbc3ddd9f4ba056e	313e506a7f15a9c3f15b01d787d68a12382432bf
Build Details	Build Permalink Details Distribution: INTERNAL Build profile: preview:dev Runtime version: ae17d94b35f91f9c608a63dadbc3ddd9f4ba056e App version: 0.1.0 Git commit: fc4e47c3b3e2838592b2b9a464ae17a69403ff4f	Build Permalink Details Distribution: INTERNAL Build profile: preview:dev Runtime version: 313e506a7f15a9c3f15b01d787d68a12382432bf App version: 0.1.0 Git commit: fc4e47c3b3e2838592b2b9a464ae17a69403ff4f
Update Details	Update Permalink Details Branch: pr-3031 Runtime version: ae17d94b35f91f9c608a63dadbc3ddd9f4ba056e Git commit: fc4e47c3b3e2838592b2b9a464ae17a69403ff4f	Update Permalink Details Branch: pr-3031 Runtime version: 313e506a7f15a9c3f15b01d787d68a12382432bf Git commit: fc4e47c3b3e2838592b2b9a464ae17a69403ff4f
Update QR

[macroscopeapp]

Approvability

Verdict: Approved

Pure React refactor that consolidates useState hooks into useReducer, extracts sub-components, and optimizes render flow. No behavioral changes - same UI and functionality, just reorganized code structure.

^{You can customize Macroscope's approvability policy. Learn more.}