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} />