fix(gui): render Claude helper model labels (lidge-jun#623)

Co-authored-by: hanbinnoh <282618027+hanbinnoh@users.noreply.github.com>

Author: hanbinnoh

gui/src/pages/ClaudeCode.tsx

@@ -69,7 +69,7 @@ export default function ClaudeCode({ apiBase }: { apiBase: string }) {
   }, [load]);
 
   const modelOptions = useMemo(() => {
-    const options = (state?.available ?? []).map(m => ({ value: m, label: String(modelLabel(m)) }));
+    const options = (state?.available ?? []).map(m => ({ value: m, label: modelLabel(m) }));
     return [{ value: "", label: t("claude.smallFastModelUnsetOption") }, ...options];
   }, [state?.available, t]);
 

gui/tests/claudecode-fetch-errors.test.tsx

@@ -172,3 +172,34 @@ test("ClaudeCode save treats an empty 200 body as success", async () => {
     testWindow.close();
   }
 });
+
+test("ClaudeCode helper model options render icon-backed model names", async () => {
+  globalThis.fetch = (async (input) => {
+    if (String(input).endsWith("/api/claude-code")) {
+      return Response.json({ ...CLAUDE_OK, available: ["gpt-5.6-luna"] });
+    }
+    return new Response(null, { status: 404 });
+  }) as typeof fetch;
+
+  const { container, root, testWindow } = await mountClaudeCode();
+  try {
+    const helperModel = container.querySelector<HTMLButtonElement>(
+      '[role="combobox"][aria-label="Background helper model"]',
+    );
+    expect(helperModel).toBeTruthy();
+
+    await act(async () => {
+      helperModel!.click();
+      await Promise.resolve();
+    });
+
+    const optionText = [...testWindow.document.querySelectorAll<HTMLElement>('[role="option"]')]
+      .map(option => option.textContent)
+      .join("\n");
+    expect(optionText).toContain("gpt-5.6-luna");
+    expect(optionText).not.toContain("[object Object]");
+  } finally {
+    await act(async () => root.unmount());
+    testWindow.close();
+  }
+});