feat(gui): add manual paste fallback for OAuth add-account

[dbc-hbin]

Summary

Minimal add-account fix split out of #1552. Keeps no pool rotation — only the failure that blocks adding a second Command Code account: the localhost callback can't be reached from a remote GUI, so we surface the existing /api/oauth/login/code path in the account panel.

• While a login is in progress the panel shows a paste box that accepts a redirect URL / authorization code / raw Command Code API key (user_… from ~/.commandcode/auth.json). Command Code uses type="password".
• Clicking Add account opens the provider's login link (same as before) and shows a small text input next to it — paste the redirect URL or API key there and hit Submit / Enter. No separate page needed.
• Uses the existing server route POST /api/oauth/login/code → submitManualLoginCode(provider, input) → OAuthController.onManualCodeInput; no new backend surface. Backed by the Command Code provider's parsePastedCommandCodeInput / validatePastedApiKey (already on dev).
• Feedback uses role="status" / role="alert" + aria-atomic, covered by gui/tests/provider-auth-manual-code.test.tsx.

Screenshot (dogfooding build 58be5e6e0 — feat/command-code-add-account-minimal on dev@c71c827, proxy 2.18.0 @ 127.0.0.1:10100)

docs/screenshots/command-code-add-account-paste.png — Providers → Command Code - Auth → Accounts → after Add account: the waiting state shows the auth link + link-copy + "didn't open?" and the paste hint + password input (Command Code API 키 또는 리다이렉트 URL 붙여넣기) + Submit button. This is the requested small text box next to the link.

What is dropped vs #1552

• Entire pool/rotation stack: oauth-pool-routing, command-code-routing, pool GET/PUT/PATCH + priority + clear-cooldown, quota fiveHourPercent/weeklyPercent probing, responses/core 429 failover, CLI auto-switch/priority/clear-cooldown. Those can return in a dedicated follow-up once the rotation design is approved; this PR does not touch src/server/management/oauth-account-routes.ts, src/oauth/*, src/providers/quota.ts, src/types.ts, src/codex/pool-rotation.ts.

Design (only what ships)

• gui/src/components/provider-workspace/* — new onSubmitManualCode handler, ProviderAuthPanel paste UI.
• gui/src/pages/use-providers-oauth.ts + gui/src/pages/Providers.tsx — hook wired through fetch(.../api/oauth/login/code) with error propagation.
• gui/src/styles/provider-workspace-settings.css — pwi-auth-paste layout.
• i18n en/de/ja/ko/ru/tr/zh/zh-TW — pasteCommandCodePlaceholder / pasteCommandCodeHint plus the refined pasteRedirectHint from feat: Command Code OAuth account pool with Codex-style rotation #1552.

Verification

• Dogfooding: rebuilt gui/dist (index-DjmiLvzJ.js) carries the paste strings, restarted proxy (PID 80594) serves it (index-DjmiLvzJ.js confirmed via curl /), Chrome dogfooding to / #providers → Command Code → Accounts → Add account verified: shows Waiting for browser… + link + paste box (password) simultaneously (screenshot above, ko locale).
• tsc --noEmit clean (root).
• gui/tests/provider-auth-manual-code.test.tsx — masks Command Code input as password and asserts rejection/success roles.

Relates to #1552 (closed, superseded).

Review readiness checklist

This PR stays in draft until every box below is ticked. Tick all four boxes once the requirements are met:

• All CI tests are green on my local testing.

• I pushed my PR to the latest dev commit.

• I resolved all correct Codex and CodeRabbit findings.

• My PR is ready for review.

[github-actions]

✅ Deterministic PR hygiene checks passed.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 0dad231d-b5a4-47eb-912c-ffe4047ba9a8

📥 Commits

Reviewing files that changed from the base of the PR and between c71c827 and a8535a7.

📒 Files selected for processing (14)

• gui/src/components/provider-workspace/ProviderAuthPanel.tsx
• gui/src/components/provider-workspace/types.ts
• gui/src/i18n/de.ts
• gui/src/i18n/en.ts
• gui/src/i18n/ja.ts
• gui/src/i18n/ko.ts
• gui/src/i18n/ru.ts
• gui/src/i18n/tr.ts
• gui/src/i18n/zh-TW.ts
• gui/src/i18n/zh.ts
• gui/src/pages/Providers.tsx
• gui/src/pages/use-providers-oauth.ts
• gui/src/styles/provider-workspace-settings.css
• gui/tests/provider-auth-manual-code.test.tsx

---

📝 Walkthrough

Walkthrough

The provider workspace now accepts manual Command Code API keys, authorization codes, or redirect URLs. The OAuth hook submits these values to the provider login-code endpoint and reports success or errors. Localization, styling, and integration tests support the new flow.

Changes

Manual authentication flow

Layer / File(s)	Summary
Authentication input and submission UI gui/src/components/provider-workspace/ProviderAuthPanel.tsx, gui/src/components/provider-workspace/types.ts	ProviderAuthPanel manages manual input, submission state, validation, feedback, Enter-key submission, and masked Command Code values. ProviderAuthHandlers exposes the optional onSubmitManualCode handler.
OAuth submission endpoint and provider wiring gui/src/pages/use-providers-oauth.ts, gui/src/pages/Providers.tsx	useProvidersOAuth posts manual credentials to /api/oauth/login/code, handles response errors, suppresses errors after unmount, and exposes submitManualCode. Providers passes the handler to ProviderDetails.
Localized UI support and validation gui/src/i18n/*.ts, gui/src/styles/provider-workspace-settings.css, gui/tests/provider-auth-manual-code.test.tsx	Supported locales include manual-authentication labels and guidance. The paste area receives layout styling. Tests cover input behavior, successful submission, Error rejection, fallback errors, and cleanup.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Merge Risk: ⚪ Minimal · up to a8535

This change adds a localized manual OAuth fallback for remote GUI account setup, with focused accessibility and behavior tests; no actionable merge-blocking risk remains after normal checks and review.

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant ProviderAuthPanel
  participant useProvidersOAuth
  participant OAuthAPI
  User->>ProviderAuthPanel: Enter code or redirect URL
  User->>ProviderAuthPanel: Submit value
  ProviderAuthPanel->>useProvidersOAuth: submitManualCode(provider, input)
  useProvidersOAuth->>OAuthAPI: POST /api/oauth/login/code
  OAuthAPI-->>useProvidersOAuth: Success or error response
  useProvidersOAuth-->>ProviderAuthPanel: Completion or error
  ProviderAuthPanel-->>User: Display status feedback

Loading

Possibly related PRs

• lidge-jun/opencodex#1066: Introduces the Command Code OAuth provider extended by this GUI submission flow.
• lidge-jun/opencodex#1476: Adds the backend fallback flow that consumes manual OAuth code or redirect-URL submissions.
• lidge-jun/opencodex#544: Modifies ProviderAuthPanel.tsx and related provider authentication interactions.

Suggested reviewers: wibias, lidge-jun

🚥 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
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	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main change: adding a manual paste fallback for OAuth account setup in the GUI.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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.}

[github-actions]

⏳ DRAFT

• hygiene: new_suppression.

What to do

• Fix new_suppression — A new TypeScript, lint, formatter, or similar suppression was added. Fix the underlying issue or obtain suppression-approved. Paths: gui/src/components/provider-workspace/ProviderAuthPanel.tsx.

Review readiness checklist

• ✅ All CI tests are green on my local testing.
• ✅ I pushed my PR to the latest dev commit.
• ✅ I resolved all correct Codex and CodeRabbit findings.
• ✅ My PR is ready for review.

✅ 4/4 boxes ticked.

This pull request was already a draft. Its draft status will be preserved after every issue above is resolved.

[Wibias]

Requesting changes based on the current head (58be5e6).

[P2] The manual credential/code survives cancellation and a new login attempt for the same provider. ProviderAuthPanel keeps manualCode, manualCodeMsg, and manualCodeOk in local state. When the login hint disappears, the paste UI is only removed from the DOM; that state is not cleared. Starting Add account again on the same mounted provider panel can therefore re-render the previous raw user_… API key / OAuth code and stale feedback. Since Command Code intentionally uses a password input here, this is credential-bearing state and should not persist across login generations.

Please reset the manual input and feedback when the login flow is cancelled/ends and when a fresh login generation starts. Add a regression along the lines of: start Command Code Add account → enter a key → cancel/end the flow → start Add account again → input is empty and no prior success/error message is present.

Also refresh onto current dev. French localization was added after this branch point with strict locale-key parity; this PR adds prov.pasteCommandCodePlaceholder and prov.pasteCommandCodeHint to the existing locales but not the new French dictionary. Add the French strings so the updated branch satisfies the locale contracts, then rerun full CI.

[lidge-jun]

리뷰 · 우선순위 38 / 80

dev 기준 이 PR은 새 backend 없이 기존 POST /api/oauth/login/code를 GUI 계정 패널에 연결합니다. 로그인 대기 중에 redirect URL/authorization code/Command Code user_… 키를 붙여 넣을 수 있습니다. ProviderAuthPanel이 onSubmitManualCode를 받고, useProvidersOAuth.submitManualCode가 { provider, input }을 보냅니다. dev의 submitManualLoginCode는 raw 입력을 parseCallbackInput의 kind: "raw"로 받아 user_…를 code로 통과시키고, command-code.ts의 parsePastedCommandCodeInput이 그 값을 apiKey로 씁니다. 동작 연결은 맞습니다. 다만 Draft, intake: hygiene-blocked, mergeable: UNKNOWN이라 우선순위는 낮습니다.

패널은 item.name === "command-code"일 때만 type="password"와 Command Code 힌트를 씁니다. 다른 provider는 text + redirect 힌트입니다. loginHint가 바뀌거나 provider가 바뀌면 useEffect가 입력/메시지를 지워 자격 증명이 다음 플로우에 남지 않습니다. Cancel도 resetManualCode를 먼저 호출합니다. 피드백은 role="status"/role="alert" + aria-atomic이고 테스트가 있습니다. input에 maxLength는 없습니다. 서버는 4096자를 거절하지만, 그 전에 React state에 큰 붙여넣기가 들어갑니다.

submitManualCode는 !res.ok이면 data.error || res.statusText를 throw하고, 패널이 prov.pasteFail에 그대로 넣습니다. dev의 /api/oauth/login/code 에러는 empty code/no login in progress/state mismatch 같은 고정 문자열이라 지금은 안전합니다. 성공 후 aliveRef가 false면 hook은 return만 하고, 패널은 이미 언마운트됐을 수 있는데 setManualCodeOk를 호출합니다. 실패 경로의 unmount는 throw를 삼킵니다.

풀 로테이션을 빼서 #1552를 줄인 범위는 맞습니다. src/oauth/*와 management route는 안 건드립니다. 스크린샷과 9개 locale 문자열, hygiene-blocked가 같이 와 있습니다. checklist는 채워져 있지만 Draft가 그대로입니다.

해결방안: (1) hygiene를 재실행하고 Draft를 Ready로 올린 뒤 mergeability를 확인하십시오. (2) paste input에 maxLength={4096}을 두십시오. (3) Command Code 판별을 item.name === "command-code" 문자열 비교가 아니라 provider id/adapter 계약으로 하십시오. (4) unmount 뒤에는 setState하지 마십시오. (5) 서버 error를 그대로 보여도 되는 이유는 고정 문자열뿐이라는 점을 테스트에 남기십시오.

이 댓글은 grok-bot이 작성했습니다