refactor(gui): split ClaudeCode and ApiKeys for react-doctor

[Wibias]

Summary

• Split ClaudeCode and ApiKeys into focused section/panel modules.
• Apply react-doctor 0.9.1 fetch/status and maintainability cleanup on those pages.

Stack

• Depends on fix(gui): react-doctor shared foundations #466 (foundations).

Test plan

• bun x tsc -b in gui/
• Smoke Claude Code and API Keys pages (load/save)

Summary by CodeRabbit

• New Features

  • Added API key management panels for endpoints, authentication, key creation/deletion, models, and usage examples.
  • Added Claude Code settings for sidecar backends, model mappings, aliases, auto-connect, and quickstart guidance.
  • Added localized labels and error messages across supported languages.

• Bug Fixes

  • Preserved previously loaded API key data when refreshes fail.
  • Improved error reporting for API key and Claude Code operations.
  • Improved date, currency, and compact-number formatting.
  • Invalid JSON responses are now handled safely.

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

📝 Walkthrough

Walkthrough

The PR decomposes API key and Claude Code pages into reusable panels and sections, adds shared endpoint, sidecar, state, and JSON-response helpers, improves API failure handling and state preservation, expands localization, and adds focused UI, unit, and timing tests.

Changes

API key management

Layer / File(s)	Summary
Shared API key contracts and panels gui/src/pages/api-keys-utils.ts, gui/src/pages/api-keys-panels.tsx	Adds endpoint/key types, endpoint derivation, localized date formatting, and composed endpoint, auth, management, models, and usage panels.
API key loading and actions gui/src/pages/ApiKeys.tsx	Preserves last-good data after failed refreshes, validates creation responses, prevents concurrent creation, reports action failures, and wires page state into the panels.
API key validation and localization gui/tests/apikeys-*, gui/src/i18n/{de,en,ja,ko,ru,zh}.ts	Updates layout assertions, covers failed refreshes after create/delete, and adds localized API key failure messages.

Claude Code configuration

Layer / File(s)	Summary
Claude Code contracts and controls gui/src/pages/claude-code-types.ts, gui/src/pages/claude-code-settings.tsx, gui/src/pages/claude-code-sidecar.ts	Adds shared state/types, compact-window formatting, reusable settings controls, and sidecar selection/serialization helpers.
Claude Code sections gui/src/pages/claude-code-sections.tsx	Adds settings, quickstart, model-map, and provider-grouped alias sections, including sidecar override controls.
Claude Code page integration gui/src/pages/ClaudeCode.tsx	Uses shared JSON handling and sidecar serialization, localizes compact-window labels, handles load/save failures, and renders the extracted sections.
Claude Code validation and localization gui/tests/claude-code-*, gui/tests/claudecode-*, gui/src/i18n/{de,en,ja,ko,ru,zh}.ts	Adds coverage for formatting, sidecar drafts and serialization, fetch errors, section order, and the “Other” provider label.

Shared helpers and test stability

Layer / File(s)	Summary
JSON response handling gui/src/fetch-json.ts, gui/tests/fetch-json.test.ts	Treats malformed successful JSON as an unusable payload and tests empty-body and server-error behavior.
Date and currency formatting gui/src/intl-formatters.ts	Handles invalid dates and formats estimated USD values through Intl.NumberFormat.
Runtime timing coverage tests/codex-v2-gate.test.ts, tests/web-search-progress-stream.test.ts	Extends the Codex transition timeout and replaces jitter-sensitive stream timing with gated byte delivery.

Estimated code review effort: 4 (Complex) | ~60 minutes

Possibly related PRs

• lidge-jun/opencodex#392: Provides the API Access endpoint and external model catalog behavior used by this refactor.
• lidge-jun/opencodex#444: Also modifies API key creation flow and related ApiKeys state wiring.
• lidge-jun/opencodex#466: Introduces the shared JSON fetch helpers consumed by the updated pages.

Suggested labels: bug

Suggested reviewers: ingwannu, 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
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: splitting ClaudeCode and ApiKeys into focused modules for react-doctor cleanup.
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.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

[Wibias]

Rebased onto upstream/dev (foundations from #466). Old pre-#392 split was obsolete after API Access landed, so re-applied the ClaudeCode/ApiKeys module split against current stacked pages.

Fixed

• API key load/create/delete failures now surface in UI state (no empty-keys-as-success on 401/500)
• Curl sample input stays on localized api.usageSampleInput
• Simplified Claude aliases provider-grouping Map lookup

Skipped (already in #466 / not in this PR diff): CodeRabbit notes on client-resource.ts, fetch-json.ts, intl-formatters.ts

Commit: d0d03bed

[Wibias]

Fix: preserve last-good API keys on refresh failure

fetchKeys() no longer clears keys/endpoints/Claude setting when /api/keys returns non-2xx, malformed JSON, or a network error. It sets keysLoadFailed and keeps the prior list visible (manage panel prefers showing keys when any remain).

Verification

• bun test ./gui/tests/apikeys-refresh-preserve.test.tsx ./gui/tests/apikeys-layout.test.ts — pass
• bun test ./gui/tests — 171 pass
• bun x tsc -b (gui/) — pass
• bun run typecheck — pass
• bun run privacy:scan — pass

Commit: aafe67bf

[coderabbitai]

♻️ Duplicate comments (1)

gui/src/intl-formatters.ts (1)

30-30: ⚠️ Potential issue | 🟡 Minor

Keep display markers in the i18n layer.

The hardcoded em dash and ~ bypass the selected locale when rendered by CodexAccountPool.tsx and Logs.tsx. Provide localized fallback/approximation text or a locale-aware wrapper instead of embedding these user-visible markers in the formatter. This also leaves the earlier formatEstimatedUsdValue localization finding unresolved.

As per path instructions, files under gui/** must route user-visible strings through i18n locale files rather than hardcoded text.

Also applies to: 36-43

🤖 Prompt for 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.

In `@gui/src/intl-formatters.ts` at line 30, The date formatter and
formatEstimatedUsdValue still hardcode user-visible fallback and approximation
markers, bypassing localization in CodexAccountPool.tsx and Logs.tsx. Update
these formatter APIs to use the selected locale’s i18n messages for invalid-date
fallback and estimated-value text, and route the localized values through the
existing callers instead of embedding em dash or tilde characters. Preserve the
current formatting behavior for valid, non-estimated values.

Source: Path instructions

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

Duplicate comments:
In `@gui/src/intl-formatters.ts`:
- Line 30: The date formatter and formatEstimatedUsdValue still hardcode
user-visible fallback and approximation markers, bypassing localization in
CodexAccountPool.tsx and Logs.tsx. Update these formatter APIs to use the
selected locale’s i18n messages for invalid-date fallback and estimated-value
text, and route the localized values through the existing callers instead of
embedding em dash or tilde characters. Preserve the current formatting behavior
for valid, non-estimated values.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: d1792cc2-7e05-409d-bd7e-a6aad33e741c

📥 Commits

Reviewing files that changed from the base of the PR and between e404398 and 372877e.

📒 Files selected for processing (10)

• gui/src/fetch-json.ts
• gui/src/intl-formatters.ts
• gui/src/pages/ClaudeCode.tsx
• gui/src/pages/claude-code-sidecar.ts
• gui/src/pages/claude-code-types.ts
• gui/tests/claude-code-sidecar-draft.test.tsx
• gui/tests/claude-code-sidecar.test.ts
• gui/tests/claude-code-types.test.ts
• gui/tests/claudecode-fetch-errors.test.tsx
• gui/tests/fetch-json.test.ts