From cf2103ebf8aab55871dc8d5e2d3f04323fbe0ab2 Mon Sep 17 00:00:00 2001
From: Peter Dave Hello <hsu@peterdavehello.org>
Date: Sun, 12 Jul 2026 03:08:30 +0800
Subject: [PATCH] Preserve API mode selections after default list changes

Keep the configured API mode visible when it is no longer enabled by
default. This prevents the General settings dropdown from appearing to
select an unrelated fallback model.

Show the current mode as a disabled option until the user explicitly
chooses an available mode.
---
 src/popup/sections/GeneralPart.jsx            | 37 +++++--
 .../sections/api-modes-provider-utils.mjs     | 15 ++-
 .../popup/api-modes-provider-utils.test.mjs   | 99 +++++++++++++++++++
 3 files changed, 142 insertions(+), 9 deletions(-)

diff --git a/src/popup/sections/GeneralPart.jsx b/src/popup/sections/GeneralPart.jsx
index 28b51b71e..bf1798b89 100644
--- a/src/popup/sections/GeneralPart.jsx
+++ b/src/popup/sections/GeneralPart.jsx
@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next'
 import { useLayoutEffect, useRef, useState } from 'react'
 import FileSaver from 'file-saver'
-import { isApiModeSelected, getApiModesFromConfig } from '../../utils/index.mjs'
+import { getApiModesFromConfig, modelNameToDesc } from '../../utils/index.mjs'
 import {
   isUsingAzureOpenAiApiModel,
   isUsingClaudeApiModel,
@@ -21,7 +21,11 @@ import { config as menuConfig } from '../../content-script/menu-tools'
 import { PencilIcon } from '@primer/octicons-react'
 import { importDataIntoStorage } from './import-data-cleanup.mjs'
 import { resolveOpenAICompatibleRequest } from '../../services/apis/provider-registry.mjs'
-import { getApiModeDisplayLabel } from './api-modes-provider-utils.mjs'
+import {
+  getApiModeDisplayLabel,
+  getSelectedApiModeOptionValue,
+  UNMATCHED_API_MODE_VALUE,
+} from './api-modes-provider-utils.mjs'
 import {
   buildProviderOverrideFinalConfigUpdate,
   createProviderApiKeyDraftSelectionSignature,
@@ -107,6 +111,14 @@ export function GeneralPart({
     config.apiMode && typeof config.apiMode === 'object'
       ? { apiMode: config.apiMode }
       : { modelName: config.modelName }
+  const selectedApiModeValue = getSelectedApiModeOptionValue(apiModes, config)
+  const currentApiModeLabel = config.apiMode
+    ? getApiModeDisplayLabel(
+        config.apiMode,
+        t,
+        Array.isArray(config.customOpenAIProviders) ? config.customOpenAIProviders : [],
+      ) || t(Models.customModel.desc)
+    : modelNameToDesc(config.modelName, t, config.customModelName)
   const selectedProviderRequest = resolveOpenAICompatibleRequest(config, selectedProviderSession)
   const selectedProviderId = selectedProviderRequest?.providerId || ''
   const selectedProviderSecretTargetId = resolveProviderSecretTargetId(selectedProviderRequest)
@@ -480,15 +492,26 @@ export function GeneralPart({
                 : undefined
             }
             required
+            value={selectedApiModeValue}
             onChange={(e) => {
+              if (e.target.value === UNMATCHED_API_MODE_VALUE) return
               if (e.target.value === '-1') {
                 updateConfig({ modelName: 'customModel', apiMode: null })
                 return
               }
-              const apiMode = apiModes[e.target.value]
-              updateConfig({ apiMode: apiMode })
+              const apiMode = apiModes[Number(e.target.value)]
+              if (!apiMode) {
+                e.currentTarget.value = selectedApiModeValue
+                return
+              }
+              updateConfig({ apiMode })
             }}
           >
+            {selectedApiModeValue === UNMATCHED_API_MODE_VALUE && (
+              <option value={UNMATCHED_API_MODE_VALUE} disabled>
+                {currentApiModeLabel}
+              </option>
+            )}
             {apiModes.map((apiMode, index) => {
               const desc = getApiModeDisplayLabel(
                 apiMode,
@@ -497,15 +520,13 @@ export function GeneralPart({
               )
               if (desc) {
                 return (
-                  <option value={index} key={index} selected={isApiModeSelected(apiMode, config)}>
+                  <option value={index} key={index}>
                     {desc}
                   </option>
                 )
               }
             })}
-            <option value={-1} selected={!config.apiMode && config.modelName === 'customModel'}>
-              {t(Models.customModel.desc)}
-            </option>
+            <option value={-1}>{t(Models.customModel.desc)}</option>
           </select>
           {isUsingMultiModeModel(config) && (
             <select
diff --git a/src/popup/sections/api-modes-provider-utils.mjs b/src/popup/sections/api-modes-provider-utils.mjs
index 59446e463..8fb7e91c4 100644
--- a/src/popup/sections/api-modes-provider-utils.mjs
+++ b/src/popup/sections/api-modes-provider-utils.mjs
@@ -1,5 +1,18 @@
 import { AlwaysCustomGroups } from '../../config/index.mjs'
-import { apiModeToModelName, modelNameToDesc } from '../../utils/model-name-convert.mjs'
+import {
+  apiModeToModelName,
+  getUniquelySelectedApiModeIndex,
+  modelNameToDesc,
+} from '../../utils/model-name-convert.mjs'
+
+export const UNMATCHED_API_MODE_VALUE = '__current-api-mode__'
+
+export function getSelectedApiModeOptionValue(apiModes, configOrSession) {
+  const selectedIndex = getUniquelySelectedApiModeIndex(apiModes, configOrSession)
+  if (selectedIndex !== -1) return String(selectedIndex)
+  if (!configOrSession?.apiMode && configOrSession?.modelName === 'customModel') return '-1'
+  return UNMATCHED_API_MODE_VALUE
+}
 
 function normalizeText(value) {
   return String(value || '').trim()
diff --git a/tests/unit/popup/api-modes-provider-utils.test.mjs b/tests/unit/popup/api-modes-provider-utils.test.mjs
index 3c959be67..167dc4732 100644
--- a/tests/unit/popup/api-modes-provider-utils.test.mjs
+++ b/tests/unit/popup/api-modes-provider-utils.test.mjs
@@ -8,6 +8,7 @@ import {
   createProviderId,
   getConversationAiName,
   getApiModeDisplayLabel,
+  getSelectedApiModeOptionValue,
   getConfiguredCustomApiModesForSessionRecovery,
   getProviderDeleteDisabledReasonKey,
   isProviderEndpointRewriteBlockedBySavedConversations,
@@ -29,9 +30,94 @@ import {
   shouldIncludeSelectedApiModeInReferenceCheck,
   shouldPersistDeletedProviderChanges,
   shouldPersistPendingProviderChanges,
+  UNMATCHED_API_MODE_VALUE,
   validateProviderEndpointDraft,
 } from '../../../src/popup/sections/api-modes-provider-utils.mjs'
 
+test('getSelectedApiModeOptionValue returns the selected active mode index', () => {
+  const apiModes = [
+    {
+      groupName: 'claudeWebModelKeys',
+      itemName: 'claude2WebFree',
+      active: true,
+    },
+    {
+      groupName: 'openRouterApiModelKeys',
+      itemName: 'openRouter_auto',
+      active: true,
+    },
+  ]
+
+  assert.equal(getSelectedApiModeOptionValue(apiModes, { apiMode: { ...apiModes[1] } }), '1')
+})
+
+test('getSelectedApiModeOptionValue preserves an unmatched modelName', () => {
+  const apiModes = [
+    {
+      groupName: 'claudeWebModelKeys',
+      itemName: 'claude2WebFree',
+      active: true,
+    },
+  ]
+
+  assert.equal(
+    getSelectedApiModeOptionValue(apiModes, { modelName: 'chatgptFree35', apiMode: null }),
+    UNMATCHED_API_MODE_VALUE,
+  )
+})
+
+test('getSelectedApiModeOptionValue preserves an unmatched apiMode', () => {
+  const apiModes = [
+    {
+      groupName: 'openRouterApiModelKeys',
+      itemName: 'openRouter_auto',
+      active: true,
+    },
+  ]
+  const selectedApiMode = {
+    groupName: 'openRouterApiModelKeys',
+    itemName: 'openRouter_openai_gpt_5_5',
+    active: true,
+  }
+
+  assert.equal(
+    getSelectedApiModeOptionValue(apiModes, { apiMode: selectedApiMode }),
+    UNMATCHED_API_MODE_VALUE,
+  )
+})
+
+test('getSelectedApiModeOptionValue preserves a selection when no modes are active', () => {
+  const selectedApiMode = {
+    groupName: 'openRouterApiModelKeys',
+    itemName: 'openRouter_openai_gpt_5_5',
+    active: true,
+  }
+
+  assert.equal(
+    getSelectedApiModeOptionValue([], { apiMode: selectedApiMode }),
+    UNMATCHED_API_MODE_VALUE,
+  )
+})
+
+test('getSelectedApiModeOptionValue preserves an ambiguous selection', () => {
+  const duplicateApiMode = {
+    groupName: 'openRouterApiModelKeys',
+    itemName: 'openRouter_auto',
+    active: true,
+  }
+
+  assert.equal(
+    getSelectedApiModeOptionValue([{ ...duplicateApiMode }, { ...duplicateApiMode }], {
+      apiMode: duplicateApiMode,
+    }),
+    UNMATCHED_API_MODE_VALUE,
+  )
+})
+
+test('getSelectedApiModeOptionValue keeps the custom model option selected', () => {
+  assert.equal(getSelectedApiModeOptionValue([], { modelName: 'customModel', apiMode: null }), '-1')
+})
+
 test('createProviderId avoids reserved and existing ids', () => {
   const existingProviders = [{ id: 'foo' }, { id: 'foo-2' }]
   const reservedProviderIds = ['openai', 'deepseek']
@@ -1977,6 +2063,19 @@ test('getApiModeDisplayLabel falls back for legacy custom provider', () => {
   assert.equal(getApiModeDisplayLabel(apiMode, t, []), 'Custom Model (deepseek-v3.2)')
 })
 
+test('getApiModeDisplayLabel falls back when a custom provider is missing', () => {
+  const apiMode = {
+    groupName: 'customApiModelKeys',
+    itemName: 'customModel',
+    isCustom: true,
+    customName: 'deepseek-v3.2',
+    providerId: 'missing-provider',
+  }
+  const t = (value) => value
+
+  assert.equal(getApiModeDisplayLabel(apiMode, t, []), 'Custom Model (deepseek-v3.2)')
+})
+
 test('removePendingProviderDeletion removes a recreated provider id from pending deletions', () => {
   assert.deepEqual(removePendingProviderDeletion(['provider-a', 'provider-b'], ' provider-b '), [
     'provider-a',