From 699545a19687ddaf4363e344333e60f77020a3d2 Mon Sep 17 00:00:00 2001
From: Junyan Qin <rockchinq@gmail.com>
Date: Sun, 19 Apr 2026 20:47:51 +0800
Subject: [PATCH] fix(web): fix models dialog provider type select and split
 add/scan popovers

1. Fix provider type select showing blank when editing: await
   loadRequesters() before loadProvider() to ensure options are
   populated before setting the selected value.

2. Split 'Add Model' into two separate entries: a '+ Add Model'
   button for manual add and a Radar icon button for scan. Each
   opens its own popover with only one layer of tabs (model type
   for manual, no tabs for scan since types are auto-detected).

3. Fix popover position: side='bottom' instead of 'left'.

4. Fix popover scroll: model type tabs stay fixed at top, content
   area scrolls independently when it overflows.

5. Scan mode now fetches all model types at once (no modelType
   filter), and routes each scanned model to the correct API
   based on its own type field.
---
 .../components/models-dialog/ModelsDialog.tsx |  13 +-
 .../component/provider-form/ProviderForm.tsx  |   9 +-
 .../components/AddModelPopover.tsx            | 588 +++++++++---------
 .../models-dialog/components/ProviderCard.tsx |  86 ++-
 .../home/components/models-dialog/types.ts    |   2 +-
 5 files changed, 393 insertions(+), 305 deletions(-)

diff --git a/web/src/app/home/components/models-dialog/ModelsDialog.tsx b/web/src/app/home/components/models-dialog/ModelsDialog.tsx
index d1c3e47e..16c6663d 100644
--- a/web/src/app/home/components/models-dialog/ModelsDialog.tsx
+++ b/web/src/app/home/components/models-dialog/ModelsDialog.tsx
@@ -295,7 +295,7 @@ export default function ModelsDialog({
 
   async function handleScanModels(
     providerUuid: string,
-    modelType: ModelType,
+    modelType?: ModelType,
   ): Promise<ScanModelsResult> {
     try {
       const resp = await httpClient.scanProviderModels(providerUuid, modelType);
@@ -319,19 +319,26 @@ export default function ModelsDialog({
     setIsSubmitting(true);
     try {
       for (const item of models) {
-        if (modelType === 'llm') {
+        const effectiveType = item.model.type || modelType;
+        if (effectiveType === 'llm') {
           await httpClient.createProviderLLMModel({
             name: item.model.name,
             provider_uuid: providerUuid,
             abilities: item.abilities,
             extra_args: {},
           } as never);
-        } else {
+        } else if (effectiveType === 'embedding') {
           await httpClient.createProviderEmbeddingModel({
             name: item.model.name,
             provider_uuid: providerUuid,
             extra_args: {},
           } as never);
+        } else {
+          await httpClient.createProviderRerankModel({
+            name: item.model.name,
+            provider_uuid: providerUuid,
+            extra_args: {},
+          } as never);
         }
       }
       setAddModelPopoverOpen(null);
diff --git a/web/src/app/home/components/models-dialog/component/provider-form/ProviderForm.tsx b/web/src/app/home/components/models-dialog/component/provider-form/ProviderForm.tsx
index df3aea26..c596037a 100644
--- a/web/src/app/home/components/models-dialog/component/provider-form/ProviderForm.tsx
+++ b/web/src/app/home/components/models-dialog/component/provider-form/ProviderForm.tsx
@@ -73,10 +73,13 @@ export default function ProviderForm({
   >([]);
 
   useEffect(() => {
-    loadRequesters();
-    if (providerId) {
-      loadProvider(providerId);
+    async function init() {
+      await loadRequesters();
+      if (providerId) {
+        await loadProvider(providerId);
+      }
     }
+    init();
   }, [providerId]);
 
   async function loadRequesters() {
diff --git a/web/src/app/home/components/models-dialog/components/AddModelPopover.tsx b/web/src/app/home/components/models-dialog/components/AddModelPopover.tsx
index c9dab2cd..b4de04dc 100644
--- a/web/src/app/home/components/models-dialog/components/AddModelPopover.tsx
+++ b/web/src/app/home/components/models-dialog/components/AddModelPopover.tsx
@@ -8,7 +8,6 @@ import {
   Wrench,
   Check,
   RefreshCw,
-  Search,
 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -33,6 +32,8 @@ import ExtraArgsEditor from './ExtraArgsEditor';
 
 interface AddModelPopoverProps {
   isOpen: boolean;
+  initialMode?: 'manual' | 'scan';
+  trigger?: React.ReactNode;
   onOpen: () => void;
   onClose: () => void;
   onAddModel: (
@@ -41,7 +42,7 @@ interface AddModelPopoverProps {
     abilities: string[],
     extraArgs: ExtraArg[],
   ) => Promise<void>;
-  onScanModels: (modelType: ModelType) => Promise<ScanModelsResult>;
+  onScanModels: (modelType?: ModelType) => Promise<ScanModelsResult>;
   onAddScannedModels: (
     modelType: ModelType,
     models: SelectedScannedModel[],
@@ -60,6 +61,8 @@ interface AddModelPopoverProps {
 
 export default function AddModelPopover({
   isOpen,
+  initialMode = 'manual',
+  trigger,
   onOpen,
   onClose,
   onAddModel,
@@ -80,9 +83,7 @@ export default function AddModelPopover({
   const [abilities, setAbilities] = useState<string[]>([]);
   const [extraArgs, setExtraArgs] = useState<ExtraArg[]>([]);
   const [scanLoading, setScanLoading] = useState(false);
-  const [scannedModels, setScannedModels] = useState<ScannedProviderModel[]>(
-    [],
-  );
+  const [scannedModels, setScannedModels] = useState<ScannedProviderModel[]>([]);
   const [selectedScannedModels, setSelectedScannedModels] = useState<
     Record<string, SelectedScannedModel>
   >({});
@@ -92,7 +93,7 @@ export default function AddModelPopover({
     const wasOpen = prevIsOpenRef.current;
     if (isOpen && !wasOpen) {
       setTab('llm');
-      setMode('manual');
+      setMode(initialMode);
       setName('');
       setAbilities([]);
       setExtraArgs([]);
@@ -101,8 +102,12 @@ export default function AddModelPopover({
       setSelectedScannedModels({});
       setScanQuery('');
       onResetTestResult();
+      if (initialMode === 'scan') {
+        handleScan();
+      }
     }
     prevIsOpenRef.current = isOpen;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isOpen, onResetTestResult]);
 
   useEffect(() => {
@@ -122,9 +127,8 @@ export default function AddModelPopover({
   const handleScan = async () => {
     setScanLoading(true);
     try {
-      const result = await onScanModels(tab);
+      const result = await onScanModels(trigger ? undefined : tab);
 
-      // Enrich abilities from debug.response.data (e.g. features.tools.function_calling)
       const debugData = (
         result.debug?.response as { data?: Record<string, unknown>[] }
       )?.data;
@@ -143,9 +147,9 @@ export default function AddModelPopover({
             | undefined;
           const tools = features?.tools as Record<string, unknown> | undefined;
           if (tools?.function_calling === true) {
-            const abilities = new Set(model.abilities || []);
-            abilities.add('func_call');
-            model.abilities = [...abilities];
+            const nextAbilities = new Set(model.abilities || []);
+            nextAbilities.add('func_call');
+            model.abilities = [...nextAbilities];
           }
         }
       }
@@ -247,305 +251,321 @@ export default function AddModelPopover({
       onOpenChange={(open) => (open ? onOpen() : onClose())}
     >
       <PopoverTrigger asChild>
-        <Button
-          variant="ghost"
-          size="sm"
-          className="h-6 text-xs"
-          onClick={(e) => e.stopPropagation()}
-        >
-          <Plus className="h-3 w-3 mr-1" />
-          {t('models.addModel')}
-        </Button>
+        {trigger || (
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-6 text-xs"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <Plus className="h-3 w-3 mr-1" />
+            {t('models.addModel')}
+          </Button>
+        )}
       </PopoverTrigger>
       <PopoverContent
-        className="w-[min(24rem,calc(100vw-2rem))] max-h-[70vh] overflow-y-auto overscroll-none focus:outline-none focus-visible:outline-none focus-visible:ring-0"
-        style={{
-          maxHeight: 'min(70vh, var(--radix-popover-content-available-height))',
-        }}
+        className="w-[min(24rem,calc(100vw-2rem))] max-h-[calc(100vh-8rem)] flex flex-col overflow-hidden"
         align="end"
-        side="left"
+        side="bottom"
         sideOffset={8}
         collisionPadding={16}
-        onWheel={(e) => e.stopPropagation()}
-        onTouchMove={(e) => e.stopPropagation()}
         onClick={(e) => e.stopPropagation()}
       >
-        <Tabs value={tab} onValueChange={(v) => setTab(v as ModelType)}>
-          <TabsList className="grid w-full grid-cols-3">
-            <TabsTrigger value="llm">
-              <MessageSquareText className="h-4 w-4 mr-1" />
-              {t('models.chat')}
-            </TabsTrigger>
-            <TabsTrigger value="embedding">
-              <Cpu className="h-4 w-4 mr-1" />
-              {t('models.embedding')}
-            </TabsTrigger>
-            <TabsTrigger value="rerank">
-              <ArrowUpDown className="h-4 w-4 mr-1" />
-              {t('models.rerank')}
-            </TabsTrigger>
-          </TabsList>
+        <Tabs
+          value={tab}
+          onValueChange={(v) => setTab(v as ModelType)}
+          className="flex flex-col min-h-0 flex-1"
+        >
+          <div className="flex-shrink-0">
+            {!(trigger && initialMode === 'scan') && (
+              <TabsList className="grid w-full grid-cols-3">
+                <TabsTrigger value="llm">
+                  <MessageSquareText className="h-4 w-4 mr-1" />
+                  {t('models.chat')}
+                </TabsTrigger>
+                <TabsTrigger value="embedding">
+                  <Cpu className="h-4 w-4 mr-1" />
+                  {t('models.embedding')}
+                </TabsTrigger>
+                <TabsTrigger value="rerank">
+                  <ArrowUpDown className="h-4 w-4 mr-1" />
+                  {t('models.rerank')}
+                </TabsTrigger>
+              </TabsList>
+            )}
+          </div>
 
-          <Tabs
-            value={mode}
-            onValueChange={(v) => setMode(v as 'manual' | 'scan')}
-          >
-            <TabsList className="grid w-full grid-cols-2 mt-3">
-              <TabsTrigger value="manual">{t('models.manualAdd')}</TabsTrigger>
-              <TabsTrigger value="scan">{t('models.scanAdd')}</TabsTrigger>
-            </TabsList>
+          <div className="overflow-y-auto flex-1 min-h-0">
+            <Tabs
+              value={mode}
+              onValueChange={(v) => setMode(v as 'manual' | 'scan')}
+            >
+              {!trigger && (
+                <TabsList className="grid w-full grid-cols-2 mt-3">
+                  <TabsTrigger value="manual">
+                    {t('models.manualAdd')}
+                  </TabsTrigger>
+                  <TabsTrigger value="scan">{t('models.scanAdd')}</TabsTrigger>
+                </TabsList>
+              )}
 
-            <TabsContent value="manual" className="mt-3">
-              <div className="space-y-3">
-                <div className="space-y-2">
-                  <Label>{t('models.modelName')}</Label>
-                  <Input
-                    placeholder={t('models.modelName')}
-                    value={name}
-                    onChange={(e) => setName(e.target.value)}
-                  />
-                </div>
-
-                {tab === 'llm' && (
+              <TabsContent value="manual" className="mt-3">
+                <div className="space-y-3">
                   <div className="space-y-2">
-                    <Label>{t('models.abilities')}</Label>
-                    <div className="flex gap-4">
-                      <div className="flex items-center gap-2">
-                        <Checkbox
-                          id="add-vision"
-                          checked={abilities.includes('vision')}
-                          onCheckedChange={(checked) =>
-                            toggleAbility('vision', checked as boolean)
-                          }
-                        />
-                        <Label htmlFor="add-vision" className="text-sm">
-                          <Eye className="h-3 w-3 inline mr-1" />
-                          {t('models.visionAbility')}
-                        </Label>
-                      </div>
-                      <div className="flex items-center gap-2">
-                        <Checkbox
-                          id="add-func-call"
-                          checked={abilities.includes('func_call')}
-                          onCheckedChange={(checked) =>
-                            toggleAbility('func_call', checked as boolean)
-                          }
-                        />
-                        <Label htmlFor="add-func-call" className="text-sm">
-                          <Wrench className="h-3 w-3 inline mr-1" />
-                          {t('models.functionCallAbility')}
-                        </Label>
+                    <Label>{t('models.modelName')}</Label>
+                    <Input
+                      placeholder={t('models.modelName')}
+                      value={name}
+                      onChange={(e) => setName(e.target.value)}
+                    />
+                  </div>
+
+                  {tab === 'llm' && (
+                    <div className="space-y-2">
+                      <Label>{t('models.abilities')}</Label>
+                      <div className="flex gap-4">
+                        <div className="flex items-center gap-2">
+                          <Checkbox
+                            id="add-vision"
+                            checked={abilities.includes('vision')}
+                            onCheckedChange={(checked) =>
+                              toggleAbility('vision', checked as boolean)
+                            }
+                          />
+                          <Label htmlFor="add-vision" className="text-sm">
+                            <Eye className="h-3 w-3 inline mr-1" />
+                            {t('models.visionAbility')}
+                          </Label>
+                        </div>
+                        <div className="flex items-center gap-2">
+                          <Checkbox
+                            id="add-func-call"
+                            checked={abilities.includes('func_call')}
+                            onCheckedChange={(checked) =>
+                              toggleAbility('func_call', checked as boolean)
+                            }
+                          />
+                          <Label htmlFor="add-func-call" className="text-sm">
+                            <Wrench className="h-3 w-3 inline mr-1" />
+                            {t('models.functionCallAbility')}
+                          </Label>
+                        </div>
                       </div>
                     </div>
+                  )}
+
+                  <ExtraArgsEditor
+                    args={extraArgs}
+                    onChange={setExtraArgs}
+                    modelType={tab}
+                  />
+                  <div className="flex gap-2">
+                    <Button
+                      className="flex-1"
+                      size="sm"
+                      onClick={handleAdd}
+                      disabled={isSubmitting || isTesting}
+                    >
+                      {isSubmitting ? t('common.saving') : t('common.add')}
+                    </Button>
+                    <Button
+                      className="flex-1"
+                      size="sm"
+                      variant="outline"
+                      onClick={handleTest}
+                      disabled={isSubmitting || isTesting}
+                    >
+                      {isTesting ? (
+                        t('common.loading')
+                      ) : testResult?.success ? (
+                        <>
+                          <Check className="h-4 w-4 mr-1 text-green-500" />
+                          {(testResult.duration / 1000).toFixed(1)}s
+                        </>
+                      ) : (
+                        t('common.test')
+                      )}
+                    </Button>
                   </div>
+                </div>
+              </TabsContent>
+
+              <TabsContent value="scan" className="space-y-2 mt-0 pt-0">
+                {scanLoading ? (
+                  <div className="flex items-center justify-center py-4">
+                    <RefreshCw className="h-4 w-4 mr-2 animate-spin text-muted-foreground" />
+                    <span className="text-sm text-muted-foreground">
+                      {t('models.scanModels')}...
+                    </span>
+                  </div>
+                ) : (
+                  <>
+                    <div className="space-y-2">
+                      <Input
+                        placeholder={t('models.searchScannedModels')}
+                        value={scanQuery}
+                        onChange={(e) => setScanQuery(e.target.value)}
+                        disabled={scannedModels.length === 0}
+                      />
+                      {selectableModels.length > 0 && (
+                        <div className="flex items-center gap-2 pt-1">
+                          <Checkbox
+                            id="scan-select-all"
+                            checked={allSelected}
+                            onCheckedChange={toggleSelectAll}
+                          />
+                          <Label
+                            htmlFor="scan-select-all"
+                            className="text-sm font-medium"
+                          >
+                            {t('models.selectAll')}
+                            <span className="text-muted-foreground ml-1">
+                              ({Object.keys(selectedScannedModels).length}/
+                              {selectableModels.length})
+                            </span>
+                          </Label>
+                        </div>
+                      )}
+                    </div>
+
+                    <div
+                      className="h-64 overflow-y-auto overscroll-contain rounded-md border"
+                      onWheel={(e) => e.stopPropagation()}
+                    >
+                      <div className="p-3 space-y-2">
+                        {filteredScannedModels.length === 0 ? (
+                          <p className="text-sm text-muted-foreground">
+                            {scannedModels.length === 0
+                              ? t('models.noScannedModels')
+                              : t('models.noScannedModelsMatch')}
+                          </p>
+                        ) : (
+                          filteredScannedModels.map((model) => {
+                            const isSelected = Boolean(
+                              selectedScannedModels[model.id],
+                            );
+                            const selectedAbilities =
+                              selectedScannedModels[model.id]?.abilities || [];
+                            return (
+                              <div
+                                key={model.id}
+                                className="rounded-md border p-3 space-y-2"
+                              >
+                                <div className="flex items-start gap-3">
+                                  <Checkbox
+                                    checked={isSelected || model.already_added}
+                                    disabled={model.already_added}
+                                    onCheckedChange={(checked) =>
+                                      toggleScannedModel(
+                                        model,
+                                        checked as boolean,
+                                      )
+                                    }
+                                  />
+                                  <div className="min-w-0 flex-1">
+                                    <div className="text-sm font-medium break-all">
+                                      {model.name}
+                                    </div>
+                                    <div className="text-xs text-muted-foreground">
+                                      {model.already_added
+                                        ? t('models.alreadyAdded')
+                                        : model.type === 'llm'
+                                          ? t('models.chat')
+                                          : model.type === 'embedding'
+                                            ? t('models.embedding')
+                                            : t('models.rerank')}
+                                    </div>
+                                  </div>
+                                </div>
+
+                                {model.type === 'llm' &&
+                                  isSelected &&
+                                  !model.already_added && (
+                                    <div className="flex gap-4 pl-7">
+                                      <div className="flex items-center gap-2">
+                                        <Checkbox
+                                          id={`scan-vision-${model.id}`}
+                                          checked={selectedAbilities.includes(
+                                            'vision',
+                                          )}
+                                          onCheckedChange={(checked) =>
+                                            toggleScannedModelAbility(
+                                              model.id,
+                                              'vision',
+                                              checked as boolean,
+                                            )
+                                          }
+                                        />
+                                        <Label
+                                          htmlFor={`scan-vision-${model.id}`}
+                                          className="text-sm"
+                                        >
+                                          <Eye className="h-3 w-3 inline mr-1" />
+                                          {t('models.visionAbility')}
+                                        </Label>
+                                      </div>
+                                      <div className="flex items-center gap-2">
+                                        <Checkbox
+                                          id={`scan-func-${model.id}`}
+                                          checked={selectedAbilities.includes(
+                                            'func_call',
+                                          )}
+                                          onCheckedChange={(checked) =>
+                                            toggleScannedModelAbility(
+                                              model.id,
+                                              'func_call',
+                                              checked as boolean,
+                                            )
+                                          }
+                                        />
+                                        <Label
+                                          htmlFor={`scan-func-${model.id}`}
+                                          className="text-sm"
+                                        >
+                                          <Wrench className="h-3 w-3 inline mr-1" />
+                                          {t('models.functionCallAbility')}
+                                        </Label>
+                                      </div>
+                                    </div>
+                                  )}
+                              </div>
+                            );
+                          })
+                        )}
+                      </div>
+                    </div>
+                  </>
                 )}
 
-                <ExtraArgsEditor
-                  args={extraArgs}
-                  onChange={setExtraArgs}
-                  modelType={tab}
-                />
                 <div className="flex gap-2">
                   <Button
                     className="flex-1"
                     size="sm"
-                    onClick={handleAdd}
-                    disabled={isSubmitting || isTesting}
+                    onClick={handleAddScanned}
+                    disabled={
+                      isSubmitting ||
+                      scanLoading ||
+                      Object.keys(selectedScannedModels).length === 0
+                    }
                   >
-                    {isSubmitting ? t('common.saving') : t('common.add')}
+                    {isSubmitting
+                      ? t('common.saving')
+                      : t('models.addSelectedModels')}
                   </Button>
                   <Button
-                    className="flex-1"
-                    size="sm"
                     variant="outline"
-                    onClick={handleTest}
-                    disabled={isSubmitting || isTesting}
+                    size="sm"
+                    onClick={handleScan}
+                    disabled={scanLoading || isSubmitting}
                   >
-                    {isTesting ? (
-                      t('common.loading')
-                    ) : testResult?.success ? (
-                      <>
-                        <Check className="h-4 w-4 mr-1 text-green-500" />
-                        {(testResult.duration / 1000).toFixed(1)}s
-                      </>
-                    ) : (
-                      t('common.test')
-                    )}
+                    <RefreshCw
+                      className={`h-3.5 w-3.5 ${scanLoading ? 'animate-spin' : ''}`}
+                    />
                   </Button>
                 </div>
-              </div>
-            </TabsContent>
-
-            <TabsContent value="scan" className="space-y-3 mt-3">
-              <div className="text-xs text-muted-foreground">
-                {t('models.scanModelsHint')}
-              </div>
-
-              <div className="flex gap-2">
-                <Button
-                  className="flex-1"
-                  size="sm"
-                  variant="outline"
-                  onClick={handleScan}
-                  disabled={scanLoading || isSubmitting}
-                >
-                  {scanLoading ? (
-                    <RefreshCw className="h-4 w-4 mr-1 animate-spin" />
-                  ) : (
-                    <Search className="h-4 w-4 mr-1" />
-                  )}
-                  {t('models.scanModels')}
-                </Button>
-                <Button
-                  className="flex-1"
-                  size="sm"
-                  onClick={handleAddScanned}
-                  disabled={
-                    isSubmitting ||
-                    scanLoading ||
-                    Object.keys(selectedScannedModels).length === 0
-                  }
-                >
-                  {isSubmitting
-                    ? t('common.saving')
-                    : t('models.addSelectedModels')}
-                </Button>
-              </div>
-
-              <div className="space-y-2">
-                <Label>{t('models.scannedModels')}</Label>
-                <Input
-                  placeholder={t('models.searchScannedModels')}
-                  value={scanQuery}
-                  onChange={(e) => setScanQuery(e.target.value)}
-                  disabled={scannedModels.length === 0}
-                />
-                {selectableModels.length > 0 && (
-                  <div className="flex items-center gap-2 pt-1">
-                    <Checkbox
-                      id="scan-select-all"
-                      checked={allSelected}
-                      onCheckedChange={toggleSelectAll}
-                    />
-                    <Label
-                      htmlFor="scan-select-all"
-                      className="text-sm font-medium"
-                    >
-                      {t('models.selectAll')}
-                      <span className="text-muted-foreground ml-1">
-                        ({Object.keys(selectedScannedModels).length}/
-                        {selectableModels.length})
-                      </span>
-                    </Label>
-                  </div>
-                )}
-              </div>
-
-              <div
-                className="h-64 overflow-y-auto overscroll-none rounded-md border"
-                onWheel={(e) => e.stopPropagation()}
-              >
-                <div className="p-3 space-y-2">
-                  {filteredScannedModels.length === 0 ? (
-                    <p className="text-sm text-muted-foreground">
-                      {scannedModels.length === 0
-                        ? t('models.noScannedModels')
-                        : t('models.noScannedModelsMatch')}
-                    </p>
-                  ) : (
-                    filteredScannedModels.map((model) => {
-                      const isSelected = Boolean(
-                        selectedScannedModels[model.id],
-                      );
-                      const selectedAbilities =
-                        selectedScannedModels[model.id]?.abilities || [];
-                      return (
-                        <div
-                          key={model.id}
-                          className="rounded-md border p-3 space-y-2"
-                        >
-                          <div className="flex items-start gap-3">
-                            <Checkbox
-                              checked={isSelected || model.already_added}
-                              disabled={model.already_added}
-                              onCheckedChange={(checked) =>
-                                toggleScannedModel(model, checked as boolean)
-                              }
-                            />
-                            <div className="min-w-0 flex-1">
-                              <div className="text-sm font-medium break-all">
-                                {model.name}
-                              </div>
-                              <div className="text-xs text-muted-foreground">
-                                {model.already_added
-                                  ? t('models.alreadyAdded')
-                                  : model.type === 'llm'
-                                    ? t('models.chat')
-                                    : model.type === 'embedding'
-                                      ? t('models.embedding')
-                                      : t('models.rerank')}
-                              </div>
-                            </div>
-                          </div>
-
-                          {tab === 'llm' &&
-                            isSelected &&
-                            !model.already_added && (
-                              <div className="flex gap-4 pl-7">
-                                <div className="flex items-center gap-2">
-                                  <Checkbox
-                                    id={`scan-vision-${model.id}`}
-                                    checked={selectedAbilities.includes(
-                                      'vision',
-                                    )}
-                                    onCheckedChange={(checked) =>
-                                      toggleScannedModelAbility(
-                                        model.id,
-                                        'vision',
-                                        checked as boolean,
-                                      )
-                                    }
-                                  />
-                                  <Label
-                                    htmlFor={`scan-vision-${model.id}`}
-                                    className="text-sm"
-                                  >
-                                    <Eye className="h-3 w-3 inline mr-1" />
-                                    {t('models.visionAbility')}
-                                  </Label>
-                                </div>
-                                <div className="flex items-center gap-2">
-                                  <Checkbox
-                                    id={`scan-func-${model.id}`}
-                                    checked={selectedAbilities.includes(
-                                      'func_call',
-                                    )}
-                                    onCheckedChange={(checked) =>
-                                      toggleScannedModelAbility(
-                                        model.id,
-                                        'func_call',
-                                        checked as boolean,
-                                      )
-                                    }
-                                  />
-                                  <Label
-                                    htmlFor={`scan-func-${model.id}`}
-                                    className="text-sm"
-                                  >
-                                    <Wrench className="h-3 w-3 inline mr-1" />
-                                    {t('models.functionCallAbility')}
-                                  </Label>
-                                </div>
-                              </div>
-                            )}
-                        </div>
-                      );
-                    })
-                  )}
-                </div>
-              </div>
-            </TabsContent>
-          </Tabs>
+              </TabsContent>
+            </Tabs>
+          </div>
         </Tabs>
       </PopoverContent>
     </Popover>
diff --git a/web/src/app/home/components/models-dialog/components/ProviderCard.tsx b/web/src/app/home/components/models-dialog/components/ProviderCard.tsx
index 4ccaed56..029f5e6f 100644
--- a/web/src/app/home/components/models-dialog/components/ProviderCard.tsx
+++ b/web/src/app/home/components/models-dialog/components/ProviderCard.tsx
@@ -6,6 +6,7 @@ import {
   Trash2,
   Settings,
   LogIn,
+  Radar,
 } from 'lucide-react';
 import { httpClient, systemInfo } from '@/app/infra/http/HttpClient';
 import { ModelProvider } from '@/app/infra/entities/api';
@@ -60,7 +61,7 @@ interface ProviderCardProps {
     abilities: string[],
     extraArgs: ExtraArg[],
   ) => Promise<void>;
-  onScanModels: (modelType: ModelType) => Promise<ScanModelsResult>;
+  onScanModels: (modelType?: ModelType) => Promise<ScanModelsResult>;
   onAddScannedModels: (
     modelType: ModelType,
     models: SelectedScannedModel[],
@@ -130,6 +131,7 @@ export default function ProviderCard({
   const { t } = useTranslation();
   const [deleteProviderConfirmOpen, setDeleteProviderConfirmOpen] =
     useState(false);
+  const [addModelMode, setAddModelMode] = useState<'manual' | 'scan'>('manual');
 
   const canDelete =
     !isLangBotModels &&
@@ -310,19 +312,75 @@ export default function ProviderCard({
               <div />
             )}
             {!isLangBotModels && (
-              <AddModelPopover
-                isOpen={addModelPopoverOpen === provider.uuid}
-                onOpen={onOpenAddModel}
-                onClose={onCloseAddModel}
-                onAddModel={onAddModel}
-                onScanModels={onScanModels}
-                onAddScannedModels={onAddScannedModels}
-                onTestModel={onTestModel}
-                isSubmitting={isSubmitting}
-                isTesting={isTesting}
-                testResult={testResult}
-                onResetTestResult={onResetTestResult}
-              />
+              <div className="flex items-center gap-1">
+                <AddModelPopover
+                  isOpen={
+                    addModelPopoverOpen === provider.uuid &&
+                    addModelMode === 'manual'
+                  }
+                  initialMode="manual"
+                  trigger={
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="h-6 text-xs"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setAddModelMode('manual');
+                      }}
+                    >
+                      <Plus className="h-3 w-3 mr-1" />
+                      {t('models.addModel')}
+                    </Button>
+                  }
+                  onOpen={() => {
+                    setAddModelMode('manual');
+                    onOpenAddModel();
+                  }}
+                  onClose={onCloseAddModel}
+                  onAddModel={onAddModel}
+                  onScanModels={onScanModels}
+                  onAddScannedModels={onAddScannedModels}
+                  onTestModel={onTestModel}
+                  isSubmitting={isSubmitting}
+                  isTesting={isTesting}
+                  testResult={testResult}
+                  onResetTestResult={onResetTestResult}
+                />
+                <AddModelPopover
+                  isOpen={
+                    addModelPopoverOpen === provider.uuid &&
+                    addModelMode === 'scan'
+                  }
+                  initialMode="scan"
+                  trigger={
+                    <Button
+                      variant="ghost"
+                      size="icon"
+                      className="h-6 w-6"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setAddModelMode('scan');
+                      }}
+                    >
+                      <Radar className="h-3 w-3" />
+                    </Button>
+                  }
+                  onOpen={() => {
+                    setAddModelMode('scan');
+                    onOpenAddModel();
+                  }}
+                  onClose={onCloseAddModel}
+                  onAddModel={onAddModel}
+                  onScanModels={onScanModels}
+                  onAddScannedModels={onAddScannedModels}
+                  onTestModel={onTestModel}
+                  isSubmitting={isSubmitting}
+                  isTesting={isTesting}
+                  testResult={testResult}
+                  onResetTestResult={onResetTestResult}
+                />
+              </div>
             )}
           </div>
         </CardHeader>
diff --git a/web/src/app/home/components/models-dialog/types.ts b/web/src/app/home/components/models-dialog/types.ts
index 1fa6d784..d2ecb7f1 100644
--- a/web/src/app/home/components/models-dialog/types.ts
+++ b/web/src/app/home/components/models-dialog/types.ts
@@ -90,7 +90,7 @@ export interface ProviderCardProps {
     abilities: string[],
     extraArgs: ExtraArg[],
   ) => Promise<void>;
-  onScanModels: (modelType: ModelType) => Promise<ScanModelsResult>;
+  onScanModels: (modelType?: ModelType) => Promise<ScanModelsResult>;
   onAddScannedModels: (
     modelType: ModelType,
     models: SelectedScannedModel[],