refactor(LLMPopover): use ModelListContent for model list rendering

LLMPopover now delegates search, grouping, and model list rendering
to ModelListContent, eliminating duplicated code. Keeps popover
wrapper, trigger button, and temperature slider.

web/src/hooks/useMultiModelChat.ts

@@ -0,0 +1,192 @@
+"use client";
+
+import { useState, useCallback, useEffect, useMemo } from "react";
+import {
+  MAX_MODELS,
+  SelectedModel,
+} from "@/refresh-components/popovers/ModelSelector";
+import { LLMOverride } from "@/app/app/services/lib";
+import { LlmManager } from "@/lib/hooks";
+import { buildLlmOptions } from "@/refresh-components/popovers/LLMPopover";
+
+export interface UseMultiModelChatReturn {
+  /** Currently selected models for multi-model comparison. */
+  selectedModels: SelectedModel[];
+  /** Whether multi-model mode is active (>1 model selected). */
+  isMultiModelActive: boolean;
+  /** Add a model to the selection. */
+  addModel: (model: SelectedModel) => void;
+  /** Remove a model by index. */
+  removeModel: (index: number) => void;
+  /** Replace a model at a specific index with a new one. */
+  replaceModel: (index: number, model: SelectedModel) => void;
+  /** Clear all selected models. */
+  clearModels: () => void;
+  /** Build the LLMOverride[] array from selectedModels. */
+  buildLlmOverrides: () => LLMOverride[];
+  /**
+   * Restore multi-model selection from model version strings (e.g. from chat history).
+   * Matches against available llmOptions to reconstruct full SelectedModel objects.
+   */
+  restoreFromModelNames: (modelNames: string[]) => void;
+  /**
+   * Switch to a single model by name (after user picks a preferred response).
+   * Matches against llmOptions to find the full SelectedModel.
+   */
+  selectSingleModel: (modelName: string) => void;
+}
+
+export default function useMultiModelChat(
+  llmManager: LlmManager
+): UseMultiModelChatReturn {
+  const [selectedModels, setSelectedModels] = useState<SelectedModel[]>([]);
+  const [defaultInitialized, setDefaultInitialized] = useState(false);
+
+  // Initialize with the default model from llmManager once providers load
+  const llmOptions = useMemo(
+    () =>
+      llmManager.llmProviders ? buildLlmOptions(llmManager.llmProviders) : [],
+    [llmManager.llmProviders]
+  );
+
+  useEffect(() => {
+    if (defaultInitialized) return;
+    if (llmOptions.length === 0) return;
+    const { currentLlm } = llmManager;
+    // Don't initialize if currentLlm hasn't loaded yet
+    if (!currentLlm.modelName) return;
+    const match = llmOptions.find(
+      (opt) =>
+        opt.provider === currentLlm.provider &&
+        opt.modelName === currentLlm.modelName
+    );
+    if (match) {
+      setSelectedModels([
+        {
+          name: match.name,
+          provider: match.provider,
+          modelName: match.modelName,
+          displayName: match.displayName,
+        },
+      ]);
+      setDefaultInitialized(true);
+    }
+  }, [llmOptions, llmManager.currentLlm, defaultInitialized]);
+
+  const isMultiModelActive = selectedModels.length > 1;
+
+  const addModel = useCallback((model: SelectedModel) => {
+    setSelectedModels((prev) => {
+      if (prev.length >= MAX_MODELS) return prev;
+      if (
+        prev.some(
+          (m) =>
+            m.provider === model.provider && m.modelName === model.modelName
+        )
+      ) {
+        return prev;
+      }
+      return [...prev, model];
+    });
+  }, []);
+
+  const removeModel = useCallback((index: number) => {
+    setSelectedModels((prev) => prev.filter((_, i) => i !== index));
+  }, []);
+
+  const replaceModel = useCallback((index: number, model: SelectedModel) => {
+    setSelectedModels((prev) => {
+      // Don't replace with a model that's already selected elsewhere
+      if (
+        prev.some(
+          (m, i) =>
+            i !== index &&
+            m.provider === model.provider &&
+            m.modelName === model.modelName
+        )
+      ) {
+        return prev;
+      }
+      const next = [...prev];
+      next[index] = model;
+      return next;
+    });
+  }, []);
+
+  const clearModels = useCallback(() => {
+    setSelectedModels([]);
+  }, []);
+
+  const restoreFromModelNames = useCallback(
+    (modelNames: string[]) => {
+      if (modelNames.length < 2 || llmOptions.length === 0) return;
+      const restored: SelectedModel[] = [];
+      for (const name of modelNames) {
+        // Try matching by modelName (raw version string like "claude-opus-4-6")
+        // or by displayName (friendly name like "Claude Opus 4.6")
+        const match = llmOptions.find(
+          (opt) =>
+            opt.modelName === name ||
+            opt.displayName === name ||
+            opt.name === name
+        );
+        if (match) {
+          restored.push({
+            name: match.name,
+            provider: match.provider,
+            modelName: match.modelName,
+            displayName: match.displayName,
+          });
+        }
+      }
+      if (restored.length >= 2) {
+        setSelectedModels(restored.slice(0, MAX_MODELS));
+        setDefaultInitialized(true);
+      }
+    },
+    [llmOptions]
+  );
+
+  const selectSingleModel = useCallback(
+    (modelName: string) => {
+      if (llmOptions.length === 0) return;
+      const match = llmOptions.find(
+        (opt) =>
+          opt.modelName === modelName ||
+          opt.displayName === modelName ||
+          opt.name === modelName
+      );
+      if (match) {
+        setSelectedModels([
+          {
+            name: match.name,
+            provider: match.provider,
+            modelName: match.modelName,
+            displayName: match.displayName,
+          },
+        ]);
+      }
+    },
+    [llmOptions]
+  );
+
+  const buildLlmOverrides = useCallback((): LLMOverride[] => {
+    return selectedModels.map((m) => ({
+      model_provider: m.provider,
+      model_version: m.modelName,
+      display_name: m.displayName,
+    }));
+  }, [selectedModels]);
+
+  return {
+    selectedModels,
+    isMultiModelActive,
+    addModel,
+    removeModel,
+    replaceModel,
+    clearModels,
+    buildLlmOverrides,
+    restoreFromModelNames,
+    selectSingleModel,
+  };
+}

web/src/refresh-components/popovers/LLMPopover.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useEffect, useCallback, useMemo, useRef } from "react";
-import Popover, { PopoverMenu } from "@/refresh-components/Popover";
+import Popover from "@/refresh-components/Popover";
 import { LlmDescriptor, LlmManager } from "@/lib/hooks";
 import { structureValue } from "@/lib/llmConfig/utils";
 import {
@@ -11,26 +11,12 @@ import {
 import { LLMProviderDescriptor } from "@/interfaces/llm";
 import { Slider } from "@/components/ui/slider";
 import { useUser } from "@/providers/UserProvider";
-import LineItem from "@/refresh-components/buttons/LineItem";
-import InputTypeIn from "@/refresh-components/inputs/InputTypeIn";
 import Text from "@/refresh-components/texts/Text";
-import SimpleLoader from "@/refresh-components/loaders/SimpleLoader";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion";
-import {
-  SvgCheck,
-  SvgChevronDown,
-  SvgChevronRight,
-  SvgRefreshCw,
-} from "@opal/icons";
-import { Section } from "@/layouts/general-layouts";
+import { SvgRefreshCw } from "@opal/icons";
 import { OpenButton } from "@opal/components";
 import { Disabled } from "@opal/core";
 import { LLMOption, LLMOptionGroup } from "./interfaces";
+import ModelListContent from "./ModelListContent";
 
 export interface LLMPopoverProps {
   llmManager: LlmManager;
@@ -151,7 +137,6 @@ export default function LLMPopover({
   const isLoadingProviders = llmManager.isLoadingProviders;
 
   const [open, setOpen] = useState(false);
-  const [searchQuery, setSearchQuery] = useState("");
   const { user } = useUser();
 
   const [localTemperature, setLocalTemperature] = useState(
@@ -162,9 +147,7 @@ export default function LLMPopover({
     setLocalTemperature(llmManager.temperature ?? 0.5);
   }, [llmManager.temperature]);
 
-  const searchInputRef = useRef<HTMLInputElement>(null);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
-  const selectedItemRef = useRef<HTMLDivElement>(null);
 
   const handleGlobalTemperatureChange = useCallback((value: number[]) => {
     const value_0 = value[0];
@@ -183,39 +166,28 @@ export default function LLMPopover({
     [llmManager]
   );
 
-  const llmOptions = useMemo(
-    () => buildLlmOptions(llmProviders, currentModelName),
-    [llmProviders, currentModelName]
+  const isSelected = useCallback(
+    (option: LLMOption) =>
+      option.modelName === llmManager.currentLlm.modelName &&
+      option.provider === llmManager.currentLlm.provider,
+    [llmManager.currentLlm.modelName, llmManager.currentLlm.provider]
   );
 
-  // Filter options by vision capability (when images are uploaded) and search query
-  const filteredOptions = useMemo(() => {
-    let result = llmOptions;
-    if (requiresImageInput) {
-      result = result.filter((opt) => opt.supportsImageInput);
-    }
-    if (searchQuery.trim()) {
-      const query = searchQuery.toLowerCase();
-      result = result.filter(
-        (opt) =>
-          opt.displayName.toLowerCase().includes(query) ||
-          opt.modelName.toLowerCase().includes(query) ||
-          (opt.vendor && opt.vendor.toLowerCase().includes(query))
+  const handleSelectModel = useCallback(
+    (option: LLMOption) => {
+      llmManager.updateCurrentLlm({
+        modelName: option.modelName,
+        provider: option.provider,
+        name: option.name,
+      } as LlmDescriptor);
+      onSelect?.(
+        structureValue(option.name, option.provider, option.modelName)
       );
-    }
-    return result;
-  }, [llmOptions, searchQuery, requiresImageInput]);
-
-  // Group options by provider using backend-provided display names and ordering
-  // For aggregator providers (bedrock, openrouter, vertex_ai), flatten to "Provider/Vendor" format
-  const groupedOptions = useMemo(
-    () => groupLlmOptions(filteredOptions),
-    [filteredOptions]
+      setOpen(false);
+    },
+    [llmManager, onSelect]
   );
 
-  // Get display name for the model to show in the button
-  // Use currentModelName prop if provided (e.g., for regenerate showing the model used),
-  // otherwise fall back to the globally selected model
   const currentLlmDisplayName = useMemo(() => {
     // Only use currentModelName if it's a non-empty string
     const currentModel =
@@ -235,122 +207,30 @@ export default function LLMPopover({
     return currentModel;
   }, [llmProviders, currentModelName, llmManager.currentLlm.modelName]);
 
-  // Determine which group the current model belongs to (for auto-expand)
-  const currentGroupKey = useMemo(() => {
-    const currentModel = llmManager.currentLlm.modelName;
-    const currentProvider = llmManager.currentLlm.provider;
-    // Match by both modelName AND provider to handle same model name across providers
-    const option = llmOptions.find(
-      (o) => o.modelName === currentModel && o.provider === currentProvider
-    );
-    if (!option) return "openai";
-
-    const provider = option.provider.toLowerCase();
-    const isAggregator = AGGREGATOR_PROVIDERS.has(provider);
-
-    if (isAggregator && option.vendor) {
-      return `${provider}/${option.vendor.toLowerCase()}`;
-    }
-    return provider;
-  }, [
-    llmOptions,
-    llmManager.currentLlm.modelName,
-    llmManager.currentLlm.provider,
-  ]);
-
-  // Track expanded groups - initialize with current model's group
-  const [expandedGroups, setExpandedGroups] = useState<string[]>([
-    currentGroupKey,
-  ]);
-
-  // Reset state when popover closes/opens
-  useEffect(() => {
-    if (!open) {
-      setSearchQuery("");
-    } else {
-      // Reset expanded groups to only show the selected model's group
-      setExpandedGroups([currentGroupKey]);
-    }
-  }, [open, currentGroupKey]);
-
-  // Auto-scroll to selected model when popover opens
-  useEffect(() => {
-    if (open) {
-      // Small delay to let accordion content render
-      const timer = setTimeout(() => {
-        selectedItemRef.current?.scrollIntoView({
-          behavior: "instant",
-          block: "center",
-        });
-      }, 50);
-      return () => clearTimeout(timer);
-    }
-  }, [open]);
-
-  const isSearching = searchQuery.trim().length > 0;
-
-  // Compute final expanded groups
-  const effectiveExpandedGroups = useMemo(() => {
-    if (isSearching) {
-      // Force expand all when searching
-      return groupedOptions.map((g) => g.key);
-    }
-    return expandedGroups;
-  }, [isSearching, groupedOptions, expandedGroups]);
-
-  // Handler for accordion changes
-  const handleAccordionChange = (value: string[]) => {
-    // Only update state when not searching (force-expanding)
-    if (!isSearching) {
-      setExpandedGroups(value);
-    }
-  };
-
-  const handleSelectModel = (option: LLMOption) => {
-    llmManager.updateCurrentLlm({
-      modelName: option.modelName,
-      provider: option.provider,
-      name: option.name,
-    } as LlmDescriptor);
-    onSelect?.(structureValue(option.name, option.provider, option.modelName));
-    setOpen(false);
-  };
-
-  const renderModelItem = (option: LLMOption) => {
-    const isSelected =
-      option.modelName === llmManager.currentLlm.modelName &&
-      option.provider === llmManager.currentLlm.provider;
-
-    const capabilities: string[] = [];
-    if (option.supportsReasoning) {
-      capabilities.push("Reasoning");
-    }
-    if (option.supportsImageInput) {
-      capabilities.push("Vision");
-    }
-    const description =
-      capabilities.length > 0 ? capabilities.join(", ") : undefined;
-
-    return (
-      <div
-        key={`${option.name}-${option.modelName}`}
-        ref={isSelected ? selectedItemRef : undefined}
-      >
-        <LineItem
-          selected={isSelected}
-          description={description}
-          onClick={() => handleSelectModel(option)}
-          rightChildren={
-            isSelected ? (
-              <SvgCheck className="h-4 w-4 stroke-action-link-05 shrink-0" />
-            ) : null
-          }
-        >
-          {option.displayName}
-        </LineItem>
+  const temperatureFooter = user?.preferences?.temperature_override_enabled ? (
+    <>
+      <div className="border-t border-border-02 mx-2" />
+      <div className="flex flex-col w-full py-2 gap-2">
+        <Slider
+          value={[localTemperature]}
+          max={llmManager.maxTemperature}
+          min={0}
+          step={0.01}
+          onValueChange={handleGlobalTemperatureChange}
+          onValueCommit={handleGlobalTemperatureCommit}
+          className="w-full"
+        />
+        <div className="flex flex-row items-center justify-between">
+          <Text secondaryBody text03>
+            Temperature (creativity)
+          </Text>
+          <Text secondaryBody text03>
+            {localTemperature.toFixed(1)}
+          </Text>
+        </div>
       </div>
-    );
-  };
+    </>
+  ) : undefined;
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
@@ -375,129 +255,16 @@ export default function LLMPopover({
       </div>
 
       <Popover.Content side="top" align="end" width="xl">
-        <Section gap={0.5}>
-          {/* Search Input */}
-          <InputTypeIn
-            ref={searchInputRef}
-            leftSearchIcon
-            variant="internal"
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            placeholder="Search models..."
-          />
-
-          {/* Model List with Vendor Groups */}
-          <PopoverMenu scrollContainerRef={scrollContainerRef}>
-            {isLoadingProviders
-              ? [
-                  <div key="loading" className="flex items-center gap-2 py-3">
-                    <SimpleLoader />
-                    <Text secondaryBody text03>
-                      Loading models...
-                    </Text>
-                  </div>,
-                ]
-              : groupedOptions.length === 0
-                ? [
-                    <div key="empty" className="py-3">
-                      <Text secondaryBody text03>
-                        No models found
-                      </Text>
-                    </div>,
-                  ]
-                : groupedOptions.length === 1
-                  ? // Single provider - show models directly without accordion
-                    [
-                      <div
-                        key="single-provider"
-                        className="flex flex-col gap-1"
-                      >
-                        {groupedOptions[0]!.options.map(renderModelItem)}
-                      </div>,
-                    ]
-                  : // Multiple providers - show accordion with groups
-                    [
-                      <Accordion
-                        key="accordion"
-                        type="multiple"
-                        value={effectiveExpandedGroups}
-                        onValueChange={handleAccordionChange}
-                        className="w-full flex flex-col"
-                      >
-                        {groupedOptions.map((group) => {
-                          const isExpanded = effectiveExpandedGroups.includes(
-                            group.key
-                          );
-                          return (
-                            <AccordionItem
-                              key={group.key}
-                              value={group.key}
-                              className="border-none pt-1"
-                            >
-                              {/* Group Header */}
-                              <AccordionTrigger className="flex items-center rounded-08 hover:no-underline hover:bg-background-tint-02 group [&>svg]:hidden w-full py-1">
-                                <div className="flex items-center gap-1 shrink-0">
-                                  <div className="flex items-center justify-center size-5 shrink-0">
-                                    <group.Icon size={16} />
-                                  </div>
-                                  <Text
-                                    secondaryBody
-                                    text03
-                                    nowrap
-                                    className="px-0.5"
-                                  >
-                                    {group.displayName}
-                                  </Text>
-                                </div>
-                                <div className="flex-1" />
-                                <div className="flex items-center justify-center size-6 shrink-0">
-                                  {isExpanded ? (
-                                    <SvgChevronDown className="h-4 w-4 stroke-text-04 shrink-0" />
-                                  ) : (
-                                    <SvgChevronRight className="h-4 w-4 stroke-text-04 shrink-0" />
-                                  )}
-                                </div>
-                              </AccordionTrigger>
-
-                              {/* Model Items - full width highlight */}
-                              <AccordionContent className="pb-0 pt-0">
-                                <div className="flex flex-col gap-1">
-                                  {group.options.map(renderModelItem)}
-                                </div>
-                              </AccordionContent>
-                            </AccordionItem>
-                          );
-                        })}
-                      </Accordion>,
-                    ]}
-          </PopoverMenu>
-
-          {/* Global Temperature Slider (shown if enabled in user prefs) */}
-          {user?.preferences?.temperature_override_enabled && (
-            <>
-              <div className="border-t border-border-02 mx-2" />
-              <div className="flex flex-col w-full py-2 gap-2">
-                <Slider
-                  value={[localTemperature]}
-                  max={llmManager.maxTemperature}
-                  min={0}
-                  step={0.01}
-                  onValueChange={handleGlobalTemperatureChange}
-                  onValueCommit={handleGlobalTemperatureCommit}
-                  className="w-full"
-                />
-                <div className="flex flex-row items-center justify-between">
-                  <Text secondaryBody text03>
-                    Temperature (creativity)
-                  </Text>
-                  <Text secondaryBody text03>
-                    {localTemperature.toFixed(1)}
-                  </Text>
-                </div>
-              </div>
-            </>
-          )}
-        </Section>
+        <ModelListContent
+          llmProviders={llmProviders}
+          currentModelName={currentModelName}
+          requiresImageInput={requiresImageInput}
+          isLoading={isLoadingProviders}
+          onSelect={handleSelectModel}
+          isSelected={isSelected}
+          scrollContainerRef={scrollContainerRef}
+          footer={temperatureFooter}
+        />
       </Popover.Content>
     </Popover>
   );

web/src/refresh-components/popovers/ModelListContent.tsx

@@ -0,0 +1,200 @@
+"use client";
+
+import { useState, useMemo, useRef, useEffect } from "react";
+import { PopoverMenu } from "@/refresh-components/Popover";
+import InputTypeIn from "@/refresh-components/inputs/InputTypeIn";
+import { Text } from "@opal/components";
+import { SvgCheck, SvgChevronDown, SvgChevronRight } from "@opal/icons";
+import { Section } from "@/layouts/general-layouts";
+import { LLMOption } from "./interfaces";
+import { buildLlmOptions, groupLlmOptions } from "./LLMPopover";
+import LineItem from "@/refresh-components/buttons/LineItem";
+import { LLMProviderDescriptor } from "@/interfaces/llm";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/refresh-components/Collapsible";
+
+export interface ModelListContentProps {
+  llmProviders: LLMProviderDescriptor[] | undefined;
+  currentModelName?: string;
+  requiresImageInput?: boolean;
+  onSelect: (option: LLMOption) => void;
+  isSelected: (option: LLMOption) => boolean;
+  isDisabled?: (option: LLMOption) => boolean;
+  scrollContainerRef?: React.RefObject<HTMLDivElement | null>;
+  isLoading?: boolean;
+  footer?: React.ReactNode;
+}
+
+export default function ModelListContent({
+  llmProviders,
+  currentModelName,
+  requiresImageInput,
+  onSelect,
+  isSelected,
+  isDisabled,
+  scrollContainerRef: externalScrollRef,
+  isLoading,
+  footer,
+}: ModelListContentProps) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const internalScrollRef = useRef<HTMLDivElement>(null);
+  const scrollContainerRef = externalScrollRef ?? internalScrollRef;
+
+  const llmOptions = useMemo(
+    () => buildLlmOptions(llmProviders, currentModelName),
+    [llmProviders, currentModelName]
+  );
+
+  const filteredOptions = useMemo(() => {
+    let result = llmOptions;
+    if (requiresImageInput) {
+      result = result.filter((opt) => opt.supportsImageInput);
+    }
+    if (searchQuery.trim()) {
+      const query = searchQuery.toLowerCase();
+      result = result.filter(
+        (opt) =>
+          opt.displayName.toLowerCase().includes(query) ||
+          opt.modelName.toLowerCase().includes(query) ||
+          (opt.vendor && opt.vendor.toLowerCase().includes(query))
+      );
+    }
+    return result;
+  }, [llmOptions, searchQuery, requiresImageInput]);
+
+  const groupedOptions = useMemo(
+    () => groupLlmOptions(filteredOptions),
+    [filteredOptions]
+  );
+
+  // Find which group contains a currently-selected model (for auto-expand)
+  const defaultGroupKey = useMemo(() => {
+    for (const group of groupedOptions) {
+      if (group.options.some((opt) => isSelected(opt))) {
+        return group.key;
+      }
+    }
+    return groupedOptions[0]?.key ?? "";
+  }, [groupedOptions, isSelected]);
+
+  const [expandedGroups, setExpandedGroups] = useState<Set<string>>(
+    new Set([defaultGroupKey])
+  );
+
+  // Reset expanded groups when default changes (e.g. popover re-opens)
+  useEffect(() => {
+    setExpandedGroups(new Set([defaultGroupKey]));
+  }, [defaultGroupKey]);
+
+  const isSearching = searchQuery.trim().length > 0;
+
+  const toggleGroup = (key: string) => {
+    if (isSearching) return;
+    setExpandedGroups((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  };
+
+  const isGroupOpen = (key: string) => isSearching || expandedGroups.has(key);
+
+  const renderModelItem = (option: LLMOption) => {
+    const selected = isSelected(option);
+    const disabled = isDisabled?.(option) ?? false;
+
+    const capabilities: string[] = [];
+    if (option.supportsReasoning) capabilities.push("Reasoning");
+    if (option.supportsImageInput) capabilities.push("Vision");
+    const description =
+      capabilities.length > 0 ? capabilities.join(", ") : undefined;
+
+    return (
+      <LineItem
+        key={`${option.provider}:${option.modelName}`}
+        selected={selected}
+        disabled={disabled}
+        description={description}
+        onClick={() => onSelect(option)}
+        rightChildren={
+          selected ? (
+            <SvgCheck className="h-4 w-4 stroke-action-link-05 shrink-0" />
+          ) : null
+        }
+      >
+        {option.displayName}
+      </LineItem>
+    );
+  };
+
+  return (
+    <Section gap={0.5}>
+      <InputTypeIn
+        leftSearchIcon
+        variant="internal"
+        value={searchQuery}
+        onChange={(e) => setSearchQuery(e.target.value)}
+        placeholder="Search models..."
+      />
+
+      <PopoverMenu scrollContainerRef={scrollContainerRef}>
+        {isLoading
+          ? [
+              <Text key="loading" font="secondary-body" color="text-03">
+                Loading models...
+              </Text>,
+            ]
+          : groupedOptions.length === 0
+            ? [
+                <Text key="empty" font="secondary-body" color="text-03">
+                  No models found
+                </Text>,
+              ]
+            : groupedOptions.length === 1
+              ? [
+                  <Section key="single-provider" gap={0.25}>
+                    {groupedOptions[0]!.options.map(renderModelItem)}
+                  </Section>,
+                ]
+              : groupedOptions.map((group) => {
+                  const open = isGroupOpen(group.key);
+                  return (
+                    <Collapsible
+                      key={group.key}
+                      open={open}
+                      onOpenChange={() => toggleGroup(group.key)}
+                    >
+                      <CollapsibleTrigger asChild>
+                        <LineItem
+                          muted
+                          icon={group.Icon}
+                          rightChildren={
+                            open ? (
+                              <SvgChevronDown className="h-4 w-4 stroke-text-04 shrink-0" />
+                            ) : (
+                              <SvgChevronRight className="h-4 w-4 stroke-text-04 shrink-0" />
+                            )
+                          }
+                        >
+                          {group.displayName}
+                        </LineItem>
+                      </CollapsibleTrigger>
+
+                      <CollapsibleContent>
+                        <Section gap={0.25}>
+                          {group.options.map(renderModelItem)}
+                        </Section>
+                      </CollapsibleContent>
+                    </Collapsible>
+                  );
+                })}
+      </PopoverMenu>
+
+      {footer}
+    </Section>
+  );
+}

web/src/refresh-components/popovers/ModelSelector.tsx

@@ -0,0 +1,230 @@
+"use client";
+
+import { useState, useMemo, useRef } from "react";
+import Popover from "@/refresh-components/Popover";
+import { LlmManager } from "@/lib/hooks";
+import { getProviderIcon } from "@/app/admin/configuration/llm/utils";
+import { Button, SelectButton, OpenButton } from "@opal/components";
+import { SvgPlusCircle, SvgX } from "@opal/icons";
+import { LLMOption } from "@/refresh-components/popovers/interfaces";
+import ModelListContent from "@/refresh-components/popovers/ModelListContent";
+import Separator from "@/refresh-components/Separator";
+
+export const MAX_MODELS = 3;
+
+export interface SelectedModel {
+  name: string;
+  provider: string;
+  modelName: string;
+  displayName: string;
+}
+
+export interface ModelSelectorProps {
+  llmManager: LlmManager;
+  selectedModels: SelectedModel[];
+  onAdd: (model: SelectedModel) => void;
+  onRemove: (index: number) => void;
+  onReplace: (index: number, model: SelectedModel) => void;
+}
+
+function modelKey(provider: string, modelName: string): string {
+  return `${provider}:${modelName}`;
+}
+
+export default function ModelSelector({
+  llmManager,
+  selectedModels,
+  onAdd,
+  onRemove,
+  onReplace,
+}: ModelSelectorProps) {
+  const [open, setOpen] = useState(false);
+  // null = add mode (via + button), number = replace mode (via pill click)
+  const [replacingIndex, setReplacingIndex] = useState<number | null>(null);
+  // Virtual anchor ref — points to the clicked pill so the popover positions above it
+  const anchorRef = useRef<HTMLElement | null>(null);
+
+  const isMultiModel = selectedModels.length > 1;
+  const atMax = selectedModels.length >= MAX_MODELS;
+
+  const selectedKeys = useMemo(
+    () => new Set(selectedModels.map((m) => modelKey(m.provider, m.modelName))),
+    [selectedModels]
+  );
+
+  const otherSelectedKeys = useMemo(() => {
+    if (replacingIndex === null) return new Set<string>();
+    return new Set(
+      selectedModels
+        .filter((_, i) => i !== replacingIndex)
+        .map((m) => modelKey(m.provider, m.modelName))
+    );
+  }, [selectedModels, replacingIndex]);
+
+  const replacingKey =
+    replacingIndex !== null
+      ? (() => {
+          const m = selectedModels[replacingIndex];
+          return m ? modelKey(m.provider, m.modelName) : null;
+        })()
+      : null;
+
+  const isSelected = (option: LLMOption) => {
+    const key = modelKey(option.provider, option.modelName);
+    if (replacingIndex !== null) return key === replacingKey;
+    return selectedKeys.has(key);
+  };
+
+  const isDisabled = (option: LLMOption) => {
+    const key = modelKey(option.provider, option.modelName);
+    if (replacingIndex !== null) return otherSelectedKeys.has(key);
+    return !selectedKeys.has(key) && atMax;
+  };
+
+  const handleSelect = (option: LLMOption) => {
+    const model: SelectedModel = {
+      name: option.name,
+      provider: option.provider,
+      modelName: option.modelName,
+      displayName: option.displayName,
+    };
+
+    if (replacingIndex !== null) {
+      onReplace(replacingIndex, model);
+      setOpen(false);
+      setReplacingIndex(null);
+      return;
+    }
+
+    const key = modelKey(option.provider, option.modelName);
+    const existingIndex = selectedModels.findIndex(
+      (m) => modelKey(m.provider, m.modelName) === key
+    );
+    if (existingIndex >= 0) {
+      onRemove(existingIndex);
+    } else if (!atMax) {
+      onAdd(model);
+    }
+  };
+
+  const handleOpenChange = (nextOpen: boolean) => {
+    setOpen(nextOpen);
+    if (!nextOpen) setReplacingIndex(null);
+  };
+
+  const handlePillClick = (index: number, element: HTMLElement) => {
+    anchorRef.current = element;
+    setReplacingIndex(index);
+    setOpen(true);
+  };
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <div className="flex items-center justify-end gap-1 p-1">
+        {!atMax && (
+          <Button
+            prominence="tertiary"
+            icon={SvgPlusCircle}
+            size="sm"
+            tooltip="Add Model"
+            onClick={(e: React.MouseEvent) => {
+              anchorRef.current = e.currentTarget as HTMLElement;
+              setReplacingIndex(null);
+              setOpen(true);
+            }}
+          />
+        )}
+
+        <Popover.Anchor
+          virtualRef={anchorRef as React.RefObject<HTMLElement>}
+        />
+        {selectedModels.length > 0 && (
+          <>
+            {!atMax && (
+              <Separator
+                orientation="vertical"
+                paddingXRem={0.5}
+                paddingYRem={0.5}
+              />
+            )}
+            <div className="flex items-center">
+              {selectedModels.map((model, index) => {
+                const ProviderIcon = getProviderIcon(
+                  model.provider,
+                  model.modelName
+                );
+
+                if (!isMultiModel) {
+                  return (
+                    <OpenButton
+                      key={modelKey(model.provider, model.modelName)}
+                      icon={ProviderIcon}
+                      onClick={(e: React.MouseEvent) =>
+                        handlePillClick(index, e.currentTarget as HTMLElement)
+                      }
+                    >
+                      {model.displayName}
+                    </OpenButton>
+                  );
+                }
+
+                return (
+                  <div
+                    key={modelKey(model.provider, model.modelName)}
+                    className="flex items-center"
+                  >
+                    {index > 0 && (
+                      <Separator
+                        orientation="vertical"
+                        paddingXRem={0.5}
+                        className="h-5"
+                      />
+                    )}
+                    <SelectButton
+                      icon={ProviderIcon}
+                      rightIcon={SvgX}
+                      state="empty"
+                      variant="select-tinted"
+                      interaction="hover"
+                      size="lg"
+                      onClick={(e: React.MouseEvent) => {
+                        const target = e.target as HTMLElement;
+                        const btn = e.currentTarget as HTMLElement;
+                        const icons = btn.querySelectorAll(
+                          ".interactive-foreground-icon"
+                        );
+                        const lastIcon = icons[icons.length - 1];
+                        if (lastIcon && lastIcon.contains(target)) {
+                          onRemove(index);
+                        } else {
+                          handlePillClick(index, btn);
+                        }
+                      }}
+                    >
+                      {model.displayName}
+                    </SelectButton>
+                  </div>
+                );
+              })}
+            </div>
+          </>
+        )}
+      </div>
+
+      <Popover.Content
+        side="top"
+        align="start"
+        width="lg"
+        avoidCollisions={false}
+      >
+        <ModelListContent
+          llmProviders={llmManager.llmProviders}
+          isLoading={llmManager.isLoadingProviders}
+          onSelect={handleSelect}
+          isSelected={isSelected}
+          isDisabled={isDisabled}
+        />
+      </Popover.Content>
+    </Popover>
+  );
+}