refactor(app): extract provider connect auth views

[Astro-Han]

Summary

Extracts owner files from the oversized provider connection dialog:

• dialog-connect-provider-auth-views.tsx owns API-key and OAuth code auth views
• dialog-connect-provider-api-auth.ts owns API-key auth submit success/failure handling
• dialog-connect-provider-auto-view.tsx owns OAuth auto-code completion
• dialog-connect-provider-prompt-view.tsx owns OAuth prompt sequencing UI
• dialog-connect-provider-prompt-state.ts owns prompt select transition state
• dialog-connect-provider-error.ts owns provider auth error formatting
• dialog-connect-provider-source.test.ts and focused helper tests lock moved behavior and source boundaries

dialog-connect-provider.tsx drops from 654 LOC on dev to 352 LOC in this PR. The new production owner files are all under 200 LOC.

Why

This is a #604 settings-lane frontend governance slice. The provider connection dialog mixed provider/method state, prompt sequencing, API-key auth, OAuth code auth, auto OAuth completion, and error formatting in one file. This PR keeps the state machine and navigation in the parent while moving auth views/helpers into small owner files.

Related Issue

Part of #604.

Human Review Status

Ready for merge. Review follow-ups from Gemini and CodeRabbit were addressed, all review threads are resolved, and the latest fresh-eyes review found no actionable P0/P1/P2/P3 issues.

Review Focus

• Confirm this stays within provider connection dialog extraction and review follow-up scope.
• Confirm DialogConnectProvider still owns method selection, auth state, back navigation, and completion toast.
• Confirm prompt/API/OAuth/auto views own only their local UI/helper responsibilities.
• Confirm API-key auth errors surface in the form without calling completion on failure.

Topology

• Base: dev
• Head: codex/dialog-connect-provider-owners
• Dependency status: independent flat PR. It does not depend on chore: add frontend architecture governance baseline #667, chore(ui): add shared tool contract export #669, refactor(app): extract timeline staging helper #670-refactor(app): remove orphaned timeline header code #675, refactor(ui): extract session turn changes panel #676-refactor(ui): extract session turn diffs #677, fix(ui): harden theme typography follow-ups #673, refactor(app): extract session share command owner #678, refactor(app): extract settings general section owners #679, or refactor(app): extract server dialog owners #680.
• Review order: can be reviewed after or alongside refactor(app): extract settings general section owners #679 and refactor(app): extract server dialog owners #680; all are [Task] UI rewrite v2 Area D: settings modular rollout #604 but touch different files.

Touched Files

• packages/app/src/components/dialog-connect-provider.tsx
• packages/app/src/components/dialog-connect-provider-auth-views.tsx
• packages/app/src/components/dialog-connect-provider-api-auth.ts
• packages/app/src/components/dialog-connect-provider-api-auth.test.ts
• packages/app/src/components/dialog-connect-provider-auto-view.tsx
• packages/app/src/components/dialog-connect-provider-error.ts
• packages/app/src/components/dialog-connect-provider-prompt-state.ts
• packages/app/src/components/dialog-connect-provider-prompt-view.tsx
• packages/app/src/components/dialog-connect-provider-prompt-view.test.ts
• packages/app/src/components/dialog-connect-provider-source.test.ts

Risk Notes

Risk is prop wiring between the parent auth state machine and the extracted prompt/API/OAuth views. Review follow-ups also touched API-key submit failure behavior and OAuth prompt select transition state. No dependency, migration, credential format, persistence, or platform behavior changes are intended.

How To Verify

Install: completed with frozen lockfile
Command: bun install --frozen-lockfile

Focused app tests: 1123 pass, 0 fail
Command: bun --cwd packages/app test --preload ./happydom.ts src/components/dialog-connect-provider-api-auth.test.ts src/components/dialog-connect-provider-source.test.ts src/components/dialog-connect-provider-prompt-view.test.ts src/components/dialog-custom-provider.test.ts src/hooks/use-providers.test.ts

Typecheck: 8 successful, 8 total
Command: bun run typecheck

Lint: passed
Command: bun run lint:ci

Diff check: no whitespace errors
Command: git diff --check origin/dev...HEAD && git diff --cached --check

Provider behavior E2E: 1 passed
Command: bun --cwd packages/app test:e2e e2e/settings/settings-providers.spec.ts -g "api key connect flow"

GitHub CI: all green on latest head, including perf-probe-baseline, CodeQL, desktop smoke, e2e artifacts, lint, typecheck, and unit jobs.

Screenshots or Recordings

Not captured. Electron manual verification was not run; this PR is a component extraction plus error-handling review follow-up with no Electron/preload/native surface change. The provider API-key connect user path was covered by the web E2E listed above.

Checklist

• Human review status is stated above as pending, approved, or not required
• I linked the related issue, or stated why there is no issue
• This PR has type, primary area, and priority labels, or I requested maintainer labeling
• I described the review focus and any meaningful risks
• I listed the relevant verification steps and the key result for each
• I did not introduce unrelated refactors, dependencies, generated files, or file changes beyond the stated scope
• I manually checked visible UI or copy changes when needed, with screenshots or recordings
• I considered macOS and Windows impact for platform, packaging, updater, signing, paths, shell, or permissions changes
• I called out docs, release notes, dependencies, permissions, credentials, deletion behavior, generated content, or local file changes when relevant
• I reviewed the final diff for unrelated changes and suspicious dependency changes
• I am targeting dev, and my PR title and commit messages use Conventional Commits in English

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request extracts OAuth/API authentication views, OAuth auto-callback handling, and prompt form logic from DialogConnectProvider into five separate reusable components and utilities. A shared error formatter normalizes error handling across all views, and integration tests verify the extraction preserves wiring and exports.

Changes

Provider connection flow extraction

Layer / File(s)	Summary
Shared error formatter packages/app/src/components/dialog-connect-provider-error.ts	formatProviderConnectError utility normalizes error objects (including nested and deeply nested forms), Error instances, and strings into fallback-safe messages for consistent error handling across all auth views.
API and OAuth code auth views packages/app/src/components/dialog-connect-provider-auth-views.tsx	ProviderApiAuthView renders API key input with validation and SDK submission; ProviderOAuthCodeView renders OAuth code input, calls the callback endpoint, formats errors, and signals completion.
OAuth automatic callback flow packages/app/src/components/dialog-connect-provider-auto-view.tsx	ProviderOAuthAutoView automatically invokes OAuth callback on mount, extracts confirmation code from authorization instructions, handles success/error with liveness checks, and renders instruction text with copyable code.
OAuth prompt state and form view packages/app/src/components/dialog-connect-provider-prompt-state.ts, packages/app/src/components/dialog-connect-provider-prompt-view.tsx, packages/app/src/components/dialog-connect-provider-prompt-view.test.ts	getProviderOAuthSelectPromptState helper conditionally builds select-prompt state by merging values; ProviderOAuthPromptsView renders text and select prompt fields, tracks input in a store, advances through applicable prompts, and submits collected values. Test covers state helper with select and non-select prompt cases.
Main component refactoring packages/app/src/components/dialog-connect-provider.tsx	DialogConnectProvider imports and composes the five extracted components, replacing ~302 lines of inline implementations with prop-wired subcomponents. Imports updated to include new components and shared error formatter, local formatError removed.
Integration test suite packages/app/src/components/dialog-connect-provider-source.test.ts	Test file validates extracted modules preserve exported auth views and error formatter, confirm provider auth wiring remains intact, and verify error formatting handles nested/deep objects and fallback correctly.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Suggested labels

enhancement, P3

🐰 Five components hopped right out,
Error messages now without doubt,
Prompts and auth so neat,
Refactored and complete,
Dialog connects without a pout! 🌟

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely summarizes the main change: extracting provider auth-related views into separate files, which is the primary objective of the refactoring.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description check	✅ Passed	The PR description is comprehensive and follows the template structure with all major sections completed.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/dialog-connect-provider-owners

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[github-actions]

Suggested priority: P2 (includes user-path files (packages/app/src/components/dialog-connect-provider-auth-views.tsx, packages/app/src/components/dialog-connect-provider-auto-view.tsx, packages/app/src/components/dialog-connect-provider-error.ts, packages/app/src/components/dialog-connect-provider-prompt-view.tsx, packages/app/src/components/dialog-connect-provider-source.test.ts, packages/app/src/components/dialog-connect-provider.tsx)).

P1/P0 are reserved for maintainer confirmation. Please relabel manually if this is a release blocker, security issue, data-loss risk, or updater/runtime failure.

[gemini-code-assist]

Code Review

This pull request refactors the DialogConnectProvider component by modularizing its internal view components and error formatting logic into separate files, including ProviderApiAuthView, ProviderOAuthCodeView, ProviderOAuthAutoView, and ProviderOAuthPromptsView. A new test suite was also introduced to verify the extraction. A high-severity reactivity issue was identified in ProviderOAuthPromptsView where synchronous store updates could cause the item() memo to re-compute prematurely, leading to incorrect indexing during prompt transitions.

[github-actions]

Perf delta summary

Comparator: pass

Profile / Scenario	interaction median	interaction worst	long task max	tbt	frame gap p95	frame gap max	jank count	cls	status
default / homepage-cold	32 -> 32 (0)	56 -> 40 (-16)	99 -> 69 (-30)	49 -> 19 (-30)	16.8 -> 16.8 (0)	166.6 -> 133.4 (-33.2)	4 -> 3 (-1)	0 -> 0 (0)	pass
default / long-session-input-lag	40 -> 48 (+8)	48 -> 64 (+16)	0 -> 0 (0)	0 -> 0 (0)	16.7 -> 16.8 (+0.1)	16.8 -> 16.8 (0)	0 -> 0 (0)	0 -> 0 (0)	pass
default / session-streaming-long	40 -> 48 (+8)	64 -> 64 (0)	0 -> 0 (0)	0 -> 0 (0)	16.7 -> 16.8 (+0.1)	16.8 -> 33.3 (+16.5)	0 -> 0 (0)	0 -> 0 (0)	pass
default / tool-call-expand	16 -> 16 (0)	24 -> 16 (-8)	0 -> 0 (0)	0 -> 0 (0)	16.8 -> 16.7 (-0.1)	16.8 -> 16.7 (-0.1)	0 -> 0 (0)	0 -> 0 (0)	pass
default / tool-default-open-heavy-bash	24 -> 24 (0)	24 -> 32 (+8)	67 -> 66 (-1)	17 -> 16 (-1)	66.6 -> 33.4 (-33.2)	116.6 -> 116.7 (+0.1)	4 -> 3 (-1)	0 -> 0 (0)	pass
default / terminal-side-panel-open	48 -> 56 (+8)	56 -> 88 (+32)	0 -> 0 (0)	0 -> 0 (0)	33.4 -> 33.3 (-0.1)	33.4 -> 33.4 (0)	0 -> 0 (0)	0 -> 0 (0)	pass
default / session-scroll-reading	24 -> 24 (0)	24 -> 32 (+8)	0 -> 0 (0)	0 -> 0 (0)	16.7 -> 16.8 (+0.1)	16.7 -> 16.8 (+0.1)	0 -> 0 (0)	0.505 -> 0.505 (0)	warn: cls

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/app/src/components/dialog-connect-provider-auth-views.tsx`:
- Around line 36-45: The API auth submit block should be wrapped in a try-catch
so errors are surfaced to the form; around the call to
globalSDK.client.auth.set(...) (the block using props.provider().id and apiKey)
add a try block and catch any thrown error, and in the catch call
setFormStore("error", formatProviderConnectError(err, props.provider(), "api"))
to mirror the OAuth path, then return (or exit) without calling
props.onComplete() on failure so the form shows the error.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: c0fce2f9-93fd-4e82-8fa5-092b3f8e4115

📥 Commits

Reviewing files that changed from the base of the PR and between a696ede and dc563b2.

📒 Files selected for processing (8)

• packages/app/src/components/dialog-connect-provider-auth-views.tsx
• packages/app/src/components/dialog-connect-provider-auto-view.tsx
• packages/app/src/components/dialog-connect-provider-error.ts
• packages/app/src/components/dialog-connect-provider-prompt-state.ts
• packages/app/src/components/dialog-connect-provider-prompt-view.test.ts
• packages/app/src/components/dialog-connect-provider-prompt-view.tsx
• packages/app/src/components/dialog-connect-provider-source.test.ts
• packages/app/src/components/dialog-connect-provider.tsx