test: add helper text visibility tests for model selector popup

- Implemented tests to verify the display of the compatible-only helper text based on the presence of scope features.
- Updated the Popup component to conditionally render a banner when scope features are applied.
- Added localization for the new helper text in English, Japanese, and Simplified Chinese.

web/app/components/header/account-setting/model-provider-page/model-selector/popup.spec.tsx

@@ -200,6 +200,33 @@ describe('Popup', () => {
     expect((input as HTMLInputElement).value).toBe('')
   })
 
+  it('should not show compatible-only helper text when no scope features are applied', () => {
+    render(
+      <Popup
+        modelList={[makeModel()]}
+        onSelect={vi.fn()}
+        onHide={vi.fn()}
+      />,
+    )
+
+    expect(screen.queryByText('common.modelProvider.selector.onlyCompatibleModelsShown')).not.toBeInTheDocument()
+  })
+
+  it('should show compatible-only helper banner when scope features are applied', () => {
+    const { container } = render(
+      <Popup
+        modelList={[makeModel()]}
+        onSelect={vi.fn()}
+        onHide={vi.fn()}
+        scopeFeatures={[ModelFeatureEnum.vision]}
+      />,
+    )
+
+    expect(screen.getByTestId('compatible-models-banner')).toBeInTheDocument()
+    expect(screen.getByText('common.modelProvider.selector.onlyCompatibleModelsShown')).toBeInTheDocument()
+    expect(container.querySelector('.i-ri-information-2-fill')).toBeInTheDocument()
+  })
+
   it('should filter by scope features including toolCall and non-toolCall checks', () => {
     const modelList = [
       makeModel({ models: [makeModelItem({ features: [ModelFeatureEnum.toolCall, ModelFeatureEnum.vision] })] }),

web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx

@@ -179,6 +179,17 @@ const Popup: FC<PopupProps> = ({
             )
           }
         </div>
+        {scopeFeatures.length > 0 && (
+          <div
+            data-testid="compatible-models-banner"
+            className="mt-2 flex items-center gap-1 rounded-lg bg-background-section-burn px-2.5 py-2"
+          >
+            <span className="i-ri-information-2-fill h-4 w-4 shrink-0 text-text-accent" />
+            <p className="text-text-secondary system-xs-medium">
+              {t('modelProvider.selector.onlyCompatibleModelsShown', { ns: 'common' })}
+            </p>
+          </div>
+        )}
       </div>
       {showCreditsExhaustedAlert && (
         <CreditsExhaustedAlert hasApiKeyFallback={hasApiKeyFallback} />

web/i18n/en-US/common.json

@@ -442,6 +442,7 @@
   "modelProvider.selector.modelProviderSettings": "Model Provider Settings",
   "modelProvider.selector.noProviderConfigured": "No model provider configured",
   "modelProvider.selector.noProviderConfiguredDesc": "Browse Marketplace to install one, or configure providers in settings.",
+  "modelProvider.selector.onlyCompatibleModelsShown": "Only compatible models are shown",
   "modelProvider.selector.rerankTip": "Please set up the Rerank model",
   "modelProvider.selector.tip": "This model has been removed. Please add a model or select another model.",
   "modelProvider.setupModelFirst": "Please set up your model first",

web/i18n/ja-JP/common.json

@@ -340,11 +340,24 @@
   "modelProvider.auth.unAuthorized": "無許可",
   "modelProvider.buyQuota": "クォータ購入",
   "modelProvider.callTimes": "呼び出し回数",
+  "modelProvider.card.aiCreditsInUse": "AI クレジットを使用中",
+  "modelProvider.card.aiCreditsOption": "AI クレジット",
+  "modelProvider.card.apiKeyOption": "API キー",
+  "modelProvider.card.apiKeyRequired": "API キーの設定が必要です",
+  "modelProvider.card.apiKeyUnavailableFallback": "API キーが利用できないため、AI クレジットを使用しています",
+  "modelProvider.card.apiKeyUnavailableFallbackDescription": "API キーの設定を確認して元に戻してください",
   "modelProvider.card.buyQuota": "クォータを購入",
   "modelProvider.card.callTimes": "通話回数",
+  "modelProvider.card.creditsExhaustedDescription": "プランを<upgradeLink>アップグレード</upgradeLink>するか、API キーを設定してください",
+  "modelProvider.card.creditsExhaustedFallback": "AI クレジットを使い切ったため、API キーを使用しています",
+  "modelProvider.card.creditsExhaustedFallbackDescription": "AI クレジットの優先利用を再開するには、<upgradeLink>プランをアップグレード</upgradeLink>してください。",
+  "modelProvider.card.creditsExhaustedMessage": "AI クレジットを使い切りました",
   "modelProvider.card.modelAPI": "{{modelName}} は現在 APIキーを使用しています。",
   "modelProvider.card.modelNotSupported": "{{modelName}} 未インストール。",
   "modelProvider.card.modelSupported": "このクォータは現在{{modelName}}に使用されています。",
+  "modelProvider.card.noApiKeysDescription": "独自のモデル認証情報を使用するには、API キーを追加してください。",
+  "modelProvider.card.noApiKeysFallback": "API キーが未設定のため、AI クレジットを使用しています",
+  "modelProvider.card.noApiKeysTitle": "API キーはまだ設定されていません",
   "modelProvider.card.onTrial": "トライアル中",
   "modelProvider.card.paid": "有料",
   "modelProvider.card.priorityUse": "優先利用",
@@ -353,6 +366,7 @@
   "modelProvider.card.removeKey": "API キーを削除",
   "modelProvider.card.tip": "メッセージ枠は{{modelNames}}のモデルを使用することをサポートしています。無料枠は有料枠が使い果たされた後に消費されます。",
   "modelProvider.card.tokens": "トークン",
+  "modelProvider.card.usagePriority": "使用優先順位",
   "modelProvider.card.usagePriorityTip": "モデル実行時に優先して使用するリソースを設定します。",
   "modelProvider.collapse": "折り畳み",
   "modelProvider.config": "設定",
@@ -404,8 +418,18 @@
   "modelProvider.resetDate": "{{date}} にリセット",
   "modelProvider.searchModel": "検索モデル",
   "modelProvider.selectModel": "モデルを選択",
+  "modelProvider.selector.aiCredits": "AI クレジット",
+  "modelProvider.selector.apiKeyUnavailable": "API キーが利用できません",
+  "modelProvider.selector.apiKeyUnavailableTip": "API キーは削除されました。新しい API キーを設定してください。",
+  "modelProvider.selector.configureRequired": "設定が必要です",
+  "modelProvider.selector.creditsExhausted": "クレジットを使い切りました",
+  "modelProvider.selector.creditsExhaustedTip": "AI クレジットを使い切りました。プランをアップグレードするか、API キーを追加してください。",
   "modelProvider.selector.emptySetting": "設定に移動して構成してください",
   "modelProvider.selector.emptyTip": "利用可能なモデルはありません",
+  "modelProvider.selector.fromMarketplace": "マーケットプレイスから",
+  "modelProvider.selector.incompatible": "非互換",
+  "modelProvider.selector.incompatibleTip": "このモデルは現在のバージョンでは利用できません。別の利用可能なモデルを選択してください。",
+  "modelProvider.selector.onlyCompatibleModelsShown": "互換性のあるモデルのみが表示されます",
   "modelProvider.selector.rerankTip": "Rerank モデルを設定してください",
   "modelProvider.selector.tip": "このモデルは削除されました。別のモデルを追加するか、別のモデルを選択してください。",
   "modelProvider.setupModelFirst": "まずモデルをセットアップしてください",

web/i18n/zh-Hans/common.json

@@ -442,6 +442,7 @@
   "modelProvider.selector.modelProviderSettings": "模型供应商设置",
   "modelProvider.selector.noProviderConfigured": "未配置模型提供商",
   "modelProvider.selector.noProviderConfiguredDesc": "前往插件市场安装，或在设置中配置提供商。",
+  "modelProvider.selector.onlyCompatibleModelsShown": "仅显示兼容的模型",
   "modelProvider.selector.rerankTip": "请设置 Rerank 模型",
   "modelProvider.selector.tip": "该模型已被删除。请添模型或选择其他模型。",
   "modelProvider.setupModelFirst": "请先设置您的模型",