fix(renderer): Settings active card no longer misrepresents model when not in fetched list (#136) (#166)

## Summary

Fixes #136. Related: #124, #134.

The active-provider card in Settings was displaying the wrong model
whenever `config.modelPrimary` was not in the list returned by the
provider's `/models` endpoint. The native `<select
value={config.modelPrimary}>` silently fell back to rendering
`options[0]` — so the card visually claimed the active model was, say,
`claude-3-5-haiku-20241022`, while:

- the top-bar `ModelSwitcher` correctly read `config.modelPrimary` (e.g.
`opus-4-7`)
- the main process snapped requests to the canonical `cfg.activeModel`
(also `opus-4-7`)

Pure UI inconsistency, but seriously misleading when debugging 4xx
failures ("I thought I was using opus-4-7 but the card says haiku — am
I?"), which is exactly the debugging loop #124/#134 are stuck in.

## Fix

`RowModelSelector` now injects the active model id at the top of the
options list with an `(active, not in provider list)` hint whenever it's
missing from the fetched list. The dropdown always matches reality, and
users can spot at a glance that their configured model is not one the
provider's `/models` returned — a useful diagnostic signal.

Extracted the option-building logic into a pure `computeModelOptions`
helper and covered it with deterministic unit tests (loading / empty /
active-in-list / active-not-in-list / inactive-row).

## Files

- `apps/desktop/src/renderer/src/components/Settings.tsx` — inject
pinned active option, exported helper
- `apps/desktop/src/renderer/src/components/Settings.test.ts` — 5 new
tests for `computeModelOptions`
- `packages/i18n/src/locales/{en,zh-CN}.json` — new
`settings.providers.activeNotInList` key

## PRINCIPLES §5b

- Compatibility: green — pure UI fix, no schema / IPC / storage changes
- Upgradeability: green — no new abstractions, helper is trivially
inlinable later
- No bloat: green — net +41 lines in Settings.tsx, +1 i18n key per
locale
- Elegance: green — helper is pure and framework-free; dropdown tells
the truth regardless of what the provider returns

## Test plan

- [x] `pnpm --filter @open-codesign/desktop` vitest: 875/875 pass
(includes 5 new)
- [x] `pnpm typecheck`: 10/10 pass
- [x] `pnpm lint` (biome): clean
- [ ] Manual: activate a custom OpenAI-compatible provider whose
`/models` hides your configured model id; open Settings; confirm the
card's `<select>` shows the active id with the hint, top-bar and card
agree
- [ ] Manual: repro #136's original case (Anthropic + opus-4-7 with a
list that only returns haiku/sonnet) and verify card no longer lies

Signed-off-by: hqhq1025 <1506751656@qq.com>

Author: hqhq1025

.changeset/settings-active-model-dropdown-truth.md

@@ -0,0 +1,10 @@
+---
+'@open-codesign/desktop': patch
+'@open-codesign/i18n': patch
+---
+
+fix(renderer): Settings active-provider card no longer misrepresents the current model
+
+When the `/models` endpoint returns a partial list (or one that does not include the currently-active model id — common with custom gateways, manually-edited TOML, or provider-specific aliasing), the native `<select>` fell back to rendering `options[0]`. The card then visually claimed the active model was whatever happened to sit at the top of the fetched list, while the top-bar `ModelSwitcher` and the actual generation request still used the real active id (see issue #136).
+
+Now when `config.modelPrimary` is not in the fetched list, the active id is pinned at the top of the dropdown with an `(active, not in provider list)` hint. The select always matches reality, and users can see at a glance that their configured model is not one the provider advertised — a useful signal when debugging 4xx errors (related: #124, #134).

apps/desktop/src/renderer/src/components/Settings.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it, vi } from 'vitest';
-import { applyLocaleChange } from './Settings';
+import { applyLocaleChange, computeModelOptions } from './Settings';
 
 vi.mock('@open-codesign/i18n', () => ({
   setLocale: vi.fn((locale: string) => Promise.resolve(locale)),
@@ -34,3 +34,57 @@ describe('applyLocaleChange', () => {
     expect(result).toBe('zh-CN');
   });
 });
+
+describe('computeModelOptions', () => {
+  const suffix = '(active, not in provider list)';
+
+  it('returns null while the list is still loading', () => {
+    expect(
+      computeModelOptions({ models: null, activeModelId: 'opus-4-7', notInListSuffix: suffix }),
+    ).toBeNull();
+  });
+
+  it('returns null when the provider returned an empty list', () => {
+    expect(
+      computeModelOptions({ models: [], activeModelId: 'opus-4-7', notInListSuffix: suffix }),
+    ).toBeNull();
+  });
+
+  it('returns the fetched list unchanged when the active model is in it', () => {
+    const result = computeModelOptions({
+      models: ['haiku', 'sonnet', 'opus-4-7'],
+      activeModelId: 'opus-4-7',
+      notInListSuffix: suffix,
+    });
+    expect(result).toEqual([
+      { value: 'haiku', label: 'haiku' },
+      { value: 'sonnet', label: 'sonnet' },
+      { value: 'opus-4-7', label: 'opus-4-7' },
+    ]);
+  });
+
+  it('pins the active model at the top when it is not in the fetched list (issue #136)', () => {
+    const result = computeModelOptions({
+      models: ['haiku', 'sonnet'],
+      activeModelId: 'opus-4-7',
+      notInListSuffix: suffix,
+    });
+    expect(result).toEqual([
+      { value: 'opus-4-7', label: `opus-4-7 ${suffix}` },
+      { value: 'haiku', label: 'haiku' },
+      { value: 'sonnet', label: 'sonnet' },
+    ]);
+  });
+
+  it('does not inject anything for inactive rows (activeModelId = null)', () => {
+    const result = computeModelOptions({
+      models: ['haiku', 'sonnet'],
+      activeModelId: null,
+      notInListSuffix: suffix,
+    });
+    expect(result).toEqual([
+      { value: 'haiku', label: 'haiku' },
+      { value: 'sonnet', label: 'sonnet' },
+    ]);
+  });
+});

apps/desktop/src/renderer/src/components/Settings.tsx

@@ -23,7 +23,7 @@ import {
   Sliders,
   Trash2,
 } from 'lucide-react';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import type { AppPaths, Preferences, ProviderRow, StorageKind } from '../../../preload/index';
 import { recordAction } from '../lib/action-timeline';
 import { useCodesignStore } from '../store';
@@ -483,8 +483,16 @@ function RowModelSelector({
     });
   }
 
-  const options =
-    models !== null && models.length > 0 ? models.map((m) => ({ value: m, label: m })) : null;
+  const notInListSuffix = t('settings.providers.activeNotInList');
+  const options = useMemo(
+    () =>
+      computeModelOptions({
+        models,
+        activeModelId: isActive ? primary : null,
+        notInListSuffix,
+      }),
+    [models, isActive, primary, notInListSuffix],
+  );
 
   return (
     <div className="mt-[var(--space-2)] flex items-center gap-[var(--space-2)] text-[var(--text-xs)] text-[var(--color-text-muted)]">
@@ -1609,6 +1617,33 @@ export async function applyLocaleChange(
   return applied;
 }
 
+/**
+ * Build the <select> options for the active-provider model dropdown.
+ *
+ * The /models endpoint may return a partial list (or none at all), and the
+ * active model id may have been set via TOML import or a previous list that
+ * the gateway no longer returns. If the active id is not in `models`, the
+ * native <select> would silently fall back to options[0] and lie about which
+ * model is in use (issue #136). Pin the active id at the top with a hint so
+ * the UI always matches reality.
+ *
+ * Returns null when there is nothing to render (loading completed, no models,
+ * no active id) so the caller can fall back to a plain text label.
+ */
+export function computeModelOptions(input: {
+  models: string[] | null;
+  activeModelId: string | null;
+  notInListSuffix: string;
+}): { value: string; label: string }[] | null {
+  const { models, activeModelId, notInListSuffix } = input;
+  if (models === null || models.length === 0) return null;
+  const base = models.map((m) => ({ value: m, label: m }));
+  if (activeModelId && !models.includes(activeModelId)) {
+    return [{ value: activeModelId, label: `${activeModelId} ${notInListSuffix}` }, ...base];
+  }
+  return base;
+}
+
 function AppearanceTab() {
   const t = useT();
   const theme = useCodesignStore((s) => s.theme);

packages/i18n/src/locales/en.json

@@ -187,6 +187,7 @@
       "addCustom": "Add custom",
       "empty": "No providers configured yet. Add one to start generating.",
       "active": "Active",
+      "activeNotInList": "(active, not in provider list)",
       "decryptionFailed": "Decryption failed",
       "setActive": "Set active",
       "reEnterKey": "Re-enter key",

packages/i18n/src/locales/zh-CN.json

@@ -187,6 +187,7 @@
       "addCustom": "添加自定义",
       "empty": "还没有配置任何服务，添加一个即可开始生成。",
       "active": "当前",
+      "activeNotInList": "（当前，不在服务返回的列表中）",
       "decryptionFailed": "解密失败",
       "setActive": "设为当前",
       "reEnterKey": "重新输入 Key",