[Bug]: Background helper model dropdown shows "[object Object]" for models with icons

[jhste102lab]

Summary

Claude Code 설정 페이지 (#claude)의 "Background helper model" 드롭다운에서 gpt-5.6-sol, gpt-5.6-terra, gpt-5.6-luna 모델들이 [object Object]로 표시됩니다. 다른 모델들은 정상적으로 이름이 보입니다.

Reproduction

1. ocx start 로 프록시 실행
2. 대시보드 http://localhost:10100/#claude 접속
3. "Background helper model" 드롭다운 클릭
4. [object Object]라고 표시된 옵션 4개 확인

Version

2.7.42

Root cause

gui/src/pages/ClaudeCode.tsx:72:

const options = (state?.available ?? []).map(m => ({ value: m, label: String(modelLabel(m)) }));

modelLabel() (gui/src/model-display.ts:30)은 gpt-5.6-sol, gpt-5.6-terra, gpt-5.6-luna에 대해 SVG 아이콘이 포함된 React element (createElement(...))를 반환합니다. String()으로 감싸면 React element가 [object Object]로 변환됩니다. 다른 모델들은 plain string을 반환하므로 문제없습니다.

Fix

String() 제거 (SelectOption.label 타입이 이미 React.ReactNode):

- .map(m => ({ value: m, label: String(modelLabel(m)) }));
+ .map(m => ({ value: m, label: modelLabel(m) }));

Translated Message

Original language: Korean

Summary

In the Claude Code settings page (#claude), the "Background helper model" dropdown displays the models gpt-5.6-sol, gpt-5.6-terra, gpt-5.6-luna as [object Object]. Other models display their names correctly.

Reproduction

1. Run the proxy with ocx start
2. Access the dashboard at http://localhost:10100/#claude
3. Click on the "Background helper model" dropdown
4. Confirm the presence of 4 options displaying as [object Object]

Version

2.7.42

Root cause

In gui/src/pages/ClaudeCode.tsx:72:

const options = (state?.available ?? []).map(m => ({ value: m, label: String(modelLabel(m)) }));

The function modelLabel() (found in gui/src/model-display.ts:30) returns a React element with an SVG icon for gpt-5.6-sol, gpt-5.6-terra, gpt-5.6-luna. When wrapped with String(), the React element converts to [object Object]. Other models return a plain string, so there is no issue.

Fix

Remove String() (since SelectOption.label type is already React.ReactNode):

- .map(m => ({ value: m, label: String(modelLabel(m)) });
+ .map(m => ({ value: m, label: modelLabel(m) });

[github-actions]

_{Automated translation bookkeeping — detected language: English.}

[lidge-jun]

Fixed, and now pinned by a regression test on dev (438b8dc).

Your root-cause read was exact — String(modelLabel(m)) collapsed the ReactNode that modelLabel() returns for icon-bearing slugs into [object Object]. That String() wrapper is already gone on dev (it landed with #623), so the picker renders correctly today.

What was missing is the part that keeps it correct: nothing in the suite would have noticed the wrapper coming back. Commit d4211b9 extracts the option mapping into gui/src/pages/claude-code-helper-options.ts — it had been inline in the component, so no test could reach it — and adds regressions in gui/tests/claude-code-background-helper.test.tsx covering gpt-5.6-sol, -terra, and -luna.

Verified the test actually bites: reintroducing String(modelLabel(m)) fails 2 cases.

Verification: cd gui && bun test tests 380 pass / 0 fail, bun run test 5970 pass / 0 fail, typecheck / lint:gui green.