fix(gui): render Claude helper model labels

[hanbinnoh]

Summary

• preserve the ReactNode returned by modelLabel() in the Claude Code background-helper selector
• prevent icon-backed models from rendering as [object Object]
• add a regression test that opens the real portaled selector and verifies the model slug is visible

Root cause

modelLabel() returns a React element for icon-backed models, but the Claude Code page coerced it with String(...). The shared SelectOption.label already accepts React.ReactNode, so the coercion was unnecessary.

Verification

• bun test ./gui/tests/claudecode-fetch-errors.test.tsx ./gui/tests/claude-code-background-helper.test.tsx
• cd gui && bun run test (354 passed)
• cd gui && bun run lint
• cd gui && bun run build
• bun run typecheck
• bun run privacy:scan
• bun run test (5,722 passed, 1 skipped)
• git diff --check

Summary by CodeRabbit

• Bug Fixes

  • Improved the display of available background helper model names in the Claude Code settings.
  • Prevented non-user-friendly placeholder text from appearing in the model selector.

• Tests

  • Added coverage verifying helper model names render correctly in the selection control.

[coderabbitai]

📝 Walkthrough

Walkthrough

The helper model option mapping now passes modelLabel(m) directly, and an integration test verifies that a readable helper model name renders in the combobox without [object Object].

Changes

Claude Code helper model picker

Layer / File(s)	Summary
Preserve and test helper model labels gui/src/pages/ClaudeCode.tsx, gui/tests/claudecode-fetch-errors.test.tsx	The option mapping uses modelLabel(m) directly, and the integration test checks that gpt-5.6-luna renders while [object Object] does not.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Possibly related PRs

• lidge-jun/opencodex#358: Refactors the helper model picker and adds related rendering and warning tests.

Suggested labels: chore

Suggested reviewers: wibias, lidge-jun

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly matches the main change: rendering Claude helper model labels correctly in the GUI.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install timed out. The project may have too many dependencies for the sandbox.

---

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

[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 `@gui/tests/claudecode-fetch-errors.test.tsx`:
- Around line 177-182: Update the test setup around the globalThis.fetch
override to save the original fetch implementation before assigning the mock,
then restore it in a finally block that encompasses the mount and assertions,
including mount failures. Keep the existing Claude Code response behavior
unchanged while ensuring later tests see the original fetch.

🪄 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: ASSERTIVE

Plan: Pro Plus

Run ID: 17760d33-3647-4bd3-9b3f-6d559af04012

📥 Commits

Reviewing files that changed from the base of the PR and between ca7b104 and c2a30a8.

📒 Files selected for processing (2)

• gui/src/pages/ClaudeCode.tsx
• gui/tests/claudecode-fetch-errors.test.tsx

[Wibias]

Maintainer review (bug + security)

Verdict: APPROVE

Security

No medium+ XSS issues. Helper model options use modelLabel(m) → React text + fixed icon map; no raw HTML sinks.

Bug review / open bot threads

Item	Status
Rabbit: restore global fetch mock	Invalid / already handled — suite keeps originalFetch and restores in shared afterEach (author reply is correct)

Scope

Tiny, correct fix: Claude Code helper model select now renders labels via modelLabel instead of raw ids, with a focused fetch-error regression test.

Notes

• Fork PR: limited checks on head SHA; happy to merge once trusted CI is green or after a maintainer CI nudge.

[Wibias]

Will get merged after interal code work lands on dev.