fix(multi-model): replace React pointer handlers with window listeners for carousel drag

setPointerCapture + React synthetic event delegation conflict caused both
click-to-select and drag-scroll to break in selection mode. Replace
onPointerMove/onPointerUp React handlers with native window.addEventListener
closures created inside onPointerDown — window listeners fire regardless of
cursor position and don't require pointer capture.

- Removes dragStartX, baseTranslateX, dragCurrentDelta, isDraggingRef refs
- Adds dragCleanupRef for unmount-safe listener removal
- Adds e.preventDefault() in pointerdown to block text-selection drag
- Captures preferredIndex/responses/hiddenPanels at press time to avoid stale closures

web/src/app/app/interfaces.ts

@@ -159,6 +159,10 @@ export interface Message {
   overridden_model?: string;
   stopReason?: StreamStopReason | null;
 
+  // Multi-model answer generation
+  preferredResponseId?: number | null;
+  modelDisplayName?: string | null;
+
   // new gen
   packets: Packet[];
   packetCount?: number; // Tracks packet count for React memo comparison (avoids reading from mutated array)
@@ -231,13 +235,28 @@ export interface BackendMessage {
   parentMessageId: number | null;
   refined_answer_improvement: boolean | null;
   is_agentic: boolean | null;
+  // Multi-model answer generation
+  preferred_response_id: number | null;
+  model_display_name: string | null;
 }
 
 export interface MessageResponseIDInfo {
+  type: "message_id_info";
   user_message_id: number | null;
   reserved_assistant_message_id: number; // TODO: rename to agent — https://linear.app/onyx-app/issue/ENG-3766
 }
 
+export interface ModelResponseSlot {
+  message_id: number;
+  model_name: string;
+}
+
+export interface MultiModelMessageResponseIDInfo {
+  type: "multi_model_message_id_info";
+  user_message_id: number | null;
+  responses: ModelResponseSlot[];
+}
+
 export interface UserKnowledgeFilePacket {
   user_files: FileDescriptor[];
 }

web/src/app/app/message/MultiModelPanel.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import { useCallback } from "react";
+import { Button } from "@opal/components";
+import { Text } from "@opal/components";
+import { ContentAction } from "@opal/layouts";
+import { SvgEyeClosed, SvgEyeOff, SvgX } from "@opal/icons";
+import { getProviderIcon } from "@/app/admin/configuration/llm/utils";
+import AgentMessage, {
+  AgentMessageProps,
+} from "@/app/app/message/messageComponents/AgentMessage";
+import { cn } from "@/lib/utils";
+import { markdown } from "@opal/utils";
+
+export interface MultiModelPanelProps {
+  modelIndex: number;
+  /** Provider name for icon lookup */
+  provider: string;
+  /** Model name for icon lookup and display */
+  modelName: string;
+  /** Display-friendly model name */
+  displayName: string;
+  /** Whether this panel is the preferred/selected response */
+  isPreferred: boolean;
+  /** Whether this panel is currently hidden */
+  isHidden: boolean;
+  /** Whether this is a non-preferred panel in selection mode (pushed off-screen) */
+  isNonPreferredInSelection: boolean;
+  /** Callback when user clicks this panel to select as preferred */
+  onSelect: () => void;
+  /** Callback to hide/show this panel */
+  onToggleVisibility: () => void;
+  /** Props to pass through to AgentMessage */
+  agentMessageProps: AgentMessageProps;
+}
+
+/**
+ * A single model's response panel within the multi-model view.
+ *
+ * Renders in two states:
+ * - **Hidden** — compact header strip only (provider icon + strikethrough name + show button).
+ * - **Visible** — full header plus `AgentMessage` body. Clicking anywhere on a
+ *   visible non-preferred panel marks it as preferred.
+ *
+ * The `isNonPreferredInSelection` flag disables pointer events on the body and
+ * hides the footer so the panel acts as a passive comparison surface.
+ */
+export default function MultiModelPanel({
+  modelIndex,
+  provider,
+  modelName,
+  displayName,
+  isPreferred,
+  isHidden,
+  isNonPreferredInSelection,
+  onSelect,
+  onToggleVisibility,
+  agentMessageProps,
+}: MultiModelPanelProps) {
+  const ProviderIcon = getProviderIcon(provider, modelName);
+
+  const handlePanelClick = useCallback(() => {
+    if (!isHidden) onSelect();
+  }, [isHidden, onSelect]);
+
+  const header = (
+    <div
+      className={cn(
+        "rounded-12",
+        isPreferred ? "bg-background-tint-02" : "bg-background-tint-00"
+      )}
+    >
+      <ContentAction
+        sizePreset="main-ui"
+        variant="body"
+        paddingVariant="lg"
+        icon={ProviderIcon}
+        title={isHidden ? markdown(`~~${displayName}~~`) : displayName}
+        rightChildren={
+          <div className="flex items-center gap-1 px-2">
+            {isPreferred && (
+              <span className="text-action-link-05 shrink-0">
+                <Text font="secondary-body" color="inherit" nowrap>
+                  Preferred Response
+                </Text>
+              </span>
+            )}
+            {!isPreferred && (
+              <Button
+                prominence="tertiary"
+                icon={isHidden ? SvgEyeOff : SvgX}
+                size="md"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onToggleVisibility();
+                }}
+                tooltip={isHidden ? "Show response" : "Hide response"}
+              />
+            )}
+          </div>
+        }
+      />
+    </div>
+  );
+
+  // Hidden/collapsed panel — just the header row
+  if (isHidden) {
+    return header;
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex flex-col gap-3 min-w-0 cursor-pointer rounded-16 transition-colors",
+        !isPreferred && "hover:bg-background-tint-02"
+      )}
+      onClick={handlePanelClick}
+    >
+      {header}
+      <div className={cn(isNonPreferredInSelection && "pointer-events-none")}>
+        <AgentMessage
+          {...agentMessageProps}
+          hideFooter={isNonPreferredInSelection}
+        />
+      </div>
+    </div>
+  );
+}

web/src/app/app/message/MultiModelResponseView.tsx

@@ -0,0 +1,475 @@
+"use client";
+
+import { useState, useCallback, useMemo, useEffect, useRef } from "react";
+import { FullChatState } from "@/app/app/message/messageComponents/interfaces";
+import { Message } from "@/app/app/interfaces";
+import { LlmManager } from "@/lib/hooks";
+import { RegenerationFactory } from "@/app/app/message/messageComponents/AgentMessage";
+import MultiModelPanel from "@/app/app/message/MultiModelPanel";
+import { MultiModelResponse } from "@/app/app/message/interfaces";
+import { cn } from "@/lib/utils";
+
+export interface MultiModelResponseViewProps {
+  responses: MultiModelResponse[];
+  chatState: FullChatState;
+  llmManager: LlmManager | null;
+  onRegenerate?: RegenerationFactory;
+  parentMessage?: Message | null;
+  otherMessagesCanSwitchTo?: number[];
+  onMessageSelection?: (nodeId: number) => void;
+  /** Called whenever the set of hidden panel indices changes */
+  onHiddenPanelsChange?: (hidden: Set<number>) => void;
+}
+
+// How many pixels of a non-preferred panel are visible at the viewport edge
+const PEEK_W = 64;
+// Uniform panel width used in the selection-mode carousel
+const SELECTION_PANEL_W = 400;
+// Compact width for hidden panels in the carousel track
+const HIDDEN_PANEL_W = 220;
+// Generation-mode panel widths (from Figma)
+const GEN_PANEL_W_2 = 640; // 2 panels side-by-side
+const GEN_PANEL_W_3 = 436; // 3 panels side-by-side
+// Gap between panels — matches CSS gap-6 (24px)
+const PANEL_GAP = 24;
+// Minimum panel width before horizontal scroll kicks in
+const MIN_PANEL_W = 300;
+
+/**
+ * Renders N model responses side-by-side with two layout modes:
+ *
+ * **Generation mode** — equal-width panels in a horizontally-scrollable row.
+ * Panel width is determined by the number of visible (non-hidden) panels.
+ *
+ * **Selection mode** — activated when the user clicks a panel to mark it as
+ * preferred. All panels (including hidden ones) sit in a fixed-width carousel
+ * track. A CSS `translateX` transform slides the track so the preferred panel
+ * is centered in the viewport; the other panels peek in from the edges through
+ * a mask gradient. Non-preferred visible panels are height-capped to the
+ * preferred panel's measured height, dimmed at 50% opacity, and receive a
+ * bottom fade-out overlay.
+ *
+ * Hidden panels render as a compact header-only strip at `HIDDEN_PANEL_W` in
+ * both modes and are excluded from layout width calculations.
+ */
+export default function MultiModelResponseView({
+  responses,
+  chatState,
+  llmManager,
+  onRegenerate,
+  parentMessage,
+  otherMessagesCanSwitchTo,
+  onMessageSelection,
+  onHiddenPanelsChange,
+}: MultiModelResponseViewProps) {
+  const [preferredIndex, setPreferredIndex] = useState<number | null>(null);
+  const [hiddenPanels, setHiddenPanels] = useState<Set<number>>(new Set());
+  // Controls animation: false = panels at start position, true = panels at peek position
+  const [selectionEntered, setSelectionEntered] = useState(false);
+  // Measures the overflow-hidden carousel container for responsive preferred-panel sizing.
+  const [trackContainerW, setTrackContainerW] = useState(0);
+  const roRef = useRef<ResizeObserver | null>(null);
+  const trackContainerRef = useCallback((el: HTMLDivElement | null) => {
+    carouselContainerRef.current = el;
+    if (roRef.current) {
+      roRef.current.disconnect();
+      roRef.current = null;
+    }
+    if (!el) return;
+    const ro = new ResizeObserver(([entry]) => {
+      setTrackContainerW(entry?.contentRect.width ?? 0);
+    });
+    ro.observe(el);
+    setTrackContainerW(el.offsetWidth);
+    roRef.current = ro;
+  }, []);
+
+  // Measures the preferred panel's height to cap non-preferred panels in selection mode.
+  const [preferredPanelHeight, setPreferredPanelHeight] = useState<
+    number | null
+  >(null);
+  const preferredRoRef = useRef<ResizeObserver | null>(null);
+
+  // Drag-scroll state — refs used across handlers
+  const trackRef = useRef<HTMLDivElement | null>(null);
+  const carouselContainerRef = useRef<HTMLDivElement | null>(null);
+  const justDraggedRef = useRef(false);
+  // Kept in sync during render so pointer-up snap-back can read without stale closure
+  const preferredCenterRef = useRef(0);
+  // Cleanup fn for native window pointer listeners — called on unmount to prevent leaks
+  const dragCleanupRef = useRef<(() => void) | null>(null);
+
+  const preferredPanelRef = useCallback((el: HTMLDivElement | null) => {
+    if (preferredRoRef.current) {
+      preferredRoRef.current.disconnect();
+      preferredRoRef.current = null;
+    }
+    if (!el) {
+      setPreferredPanelHeight(null);
+      return;
+    }
+    const ro = new ResizeObserver(([entry]) => {
+      setPreferredPanelHeight(entry?.contentRect.height ?? 0);
+    });
+    ro.observe(el);
+    setPreferredPanelHeight(el.offsetHeight);
+    preferredRoRef.current = ro;
+  }, []);
+
+  const isGenerating = useMemo(
+    () => responses.some((r) => r.isGenerating),
+    [responses]
+  );
+
+  // Non-hidden responses — used for layout width decisions and selection-mode gating
+  const visibleResponses = useMemo(
+    () => responses.filter((r) => !hiddenPanels.has(r.modelIndex)),
+    [responses, hiddenPanels]
+  );
+
+  const toggleVisibility = useCallback(
+    (modelIndex: number) => {
+      setHiddenPanels((prev) => {
+        const next = new Set(prev);
+        if (next.has(modelIndex)) {
+          next.delete(modelIndex);
+        } else {
+          // Don't hide the last visible panel
+          const visibleCount = responses.length - next.size;
+          if (visibleCount <= 1) return prev;
+          next.add(modelIndex);
+        }
+        onHiddenPanelsChange?.(next);
+        return next;
+      });
+    },
+    [responses.length, onHiddenPanelsChange]
+  );
+
+  const handleSelectPreferred = useCallback(
+    (modelIndex: number, fromDrag = false) => {
+      if (isGenerating) return;
+      if (!fromDrag && justDraggedRef.current) return;
+      setPreferredIndex(modelIndex);
+      const response = responses[modelIndex];
+      if (!response) return;
+      if (onMessageSelection) {
+        onMessageSelection(response.nodeId);
+      }
+    },
+    [isGenerating, responses, onMessageSelection]
+  );
+
+  // Unmount safety: remove any active window listeners if the component is torn down mid-drag
+  useEffect(
+    () => () => {
+      dragCleanupRef.current?.();
+    },
+    []
+  );
+
+  const handleCarouselPointerDown = useCallback(
+    (e: React.PointerEvent<HTMLDivElement>) => {
+      const track = trackRef.current;
+      const container = carouselContainerRef.current;
+      if (!track || !container) return;
+      // Ignore non-primary pointer (e.g. right-click, secondary touch)
+      if (e.button !== 0) return;
+      // Prevent text-selection drag from interfering with our drag logic
+      e.preventDefault();
+      // Clean up any prior drag that didn't finish (e.g. two fingers)
+      dragCleanupRef.current?.();
+
+      const startX = e.clientX;
+      // Capture current track position so drag feels anchored to the grab point
+      const baseX = new DOMMatrix(getComputedStyle(track).transform).m41;
+      let delta = 0;
+      let isDragging = false;
+
+      // Capture selection state at press time — these won't change during a drag
+      const capturedPreferredIndex = preferredIndex;
+      const capturedResponses = responses;
+      const capturedHiddenPanels = hiddenPanels;
+
+      function onMove(evt: PointerEvent) {
+        delta = evt.clientX - startX;
+        if (Math.abs(delta) > 5 && !isDragging) {
+          isDragging = true;
+          container!.style.cursor = "grabbing";
+        }
+        if (!isDragging) return;
+        track!.style.transition = "none";
+        track!.style.transform = `translateX(${baseX + delta}px)`;
+      }
+
+      function onUp() {
+        cleanup();
+        container!.style.cursor = "";
+
+        if (!isDragging) return;
+
+        // Block the click event that fires right after pointer-release
+        justDraggedRef.current = true;
+        requestAnimationFrame(() =>
+          requestAnimationFrame(() => {
+            justDraggedRef.current = false;
+          })
+        );
+
+        if (capturedPreferredIndex === null) return;
+        const currentPrefIdx = capturedResponses.findIndex(
+          (r) => r.modelIndex === capturedPreferredIndex
+        );
+        let nextModelIndex = capturedPreferredIndex;
+        if (delta < -80) {
+          // Dragged left — advance to next visible panel
+          for (let i = currentPrefIdx + 1; i < capturedResponses.length; i++) {
+            if (!capturedHiddenPanels.has(capturedResponses[i]!.modelIndex)) {
+              nextModelIndex = capturedResponses[i]!.modelIndex;
+              break;
+            }
+          }
+        } else if (delta > 80) {
+          // Dragged right — go to previous visible panel
+          for (let i = currentPrefIdx - 1; i >= 0; i--) {
+            if (!capturedHiddenPanels.has(capturedResponses[i]!.modelIndex)) {
+              nextModelIndex = capturedResponses[i]!.modelIndex;
+              break;
+            }
+          }
+        }
+
+        if (nextModelIndex !== capturedPreferredIndex) {
+          // React will re-render and animate the track to the new preferred center
+          handleSelectPreferred(nextModelIndex, true);
+        } else {
+          // Snap back to current preferred panel center
+          const snapX = trackContainerW / 2 - preferredCenterRef.current;
+          track!.style.transition =
+            "transform 0.45s cubic-bezier(0.2, 0, 0, 1)";
+          track!.style.transform = `translateX(${snapX}px)`;
+        }
+      }
+
+      function cleanup() {
+        window.removeEventListener("pointermove", onMove);
+        window.removeEventListener("pointerup", onUp);
+        dragCleanupRef.current = null;
+      }
+
+      dragCleanupRef.current = cleanup;
+      window.addEventListener("pointermove", onMove);
+      window.addEventListener("pointerup", onUp);
+    },
+    [
+      preferredIndex,
+      responses,
+      hiddenPanels,
+      handleSelectPreferred,
+      trackContainerW,
+    ]
+  );
+
+  // Clear preferred selection when generation starts
+  useEffect(() => {
+    if (isGenerating) {
+      setPreferredIndex(null);
+    }
+  }, [isGenerating]);
+
+  // Selection mode when preferred is set, not generating, and at least 2 visible panels
+  const showSelectionMode =
+    preferredIndex !== null && !isGenerating && visibleResponses.length > 1;
+
+  // Trigger the slide-out animation one frame after entering selection mode
+  useEffect(() => {
+    if (!showSelectionMode) {
+      setSelectionEntered(false);
+      return;
+    }
+    const raf = requestAnimationFrame(() => setSelectionEntered(true));
+    return () => cancelAnimationFrame(raf);
+  }, [showSelectionMode]);
+
+  // Build panel props — isHidden reflects actual hidden state
+  const buildPanelProps = useCallback(
+    (response: MultiModelResponse, isNonPreferred: boolean) => ({
+      modelIndex: response.modelIndex,
+      provider: response.provider,
+      modelName: response.modelName,
+      displayName: response.displayName,
+      isPreferred: preferredIndex === response.modelIndex,
+      isHidden: hiddenPanels.has(response.modelIndex),
+      isNonPreferredInSelection: isNonPreferred,
+      onSelect: () => handleSelectPreferred(response.modelIndex),
+      onToggleVisibility: () => toggleVisibility(response.modelIndex),
+      agentMessageProps: {
+        rawPackets: response.packets,
+        packetCount: response.packetCount,
+        chatState,
+        nodeId: response.nodeId,
+        messageId: response.messageId,
+        currentFeedback: response.currentFeedback,
+        llmManager,
+        otherMessagesCanSwitchTo,
+        onMessageSelection,
+        onRegenerate,
+        parentMessage,
+      },
+    }),
+    [
+      preferredIndex,
+      hiddenPanels,
+      handleSelectPreferred,
+      toggleVisibility,
+      chatState,
+      llmManager,
+      otherMessagesCanSwitchTo,
+      onMessageSelection,
+      onRegenerate,
+      parentMessage,
+    ]
+  );
+
+  if (showSelectionMode) {
+    // ── Selection Layout (transform-based carousel) ──
+    //
+    // All panels (including hidden) sit in the track at their original A/B/C positions.
+    // Hidden panels use HIDDEN_PANEL_W; non-preferred use SELECTION_PANEL_W;
+    // preferred uses dynamicPrefW (up to GEN_PANEL_W_2).
+    const preferredIdx = responses.findIndex(
+      (r) => r.modelIndex === preferredIndex
+    );
+    const n = responses.length;
+
+    const dynamicPrefW =
+      trackContainerW > 0
+        ? Math.min(trackContainerW - 2 * (PEEK_W + PANEL_GAP), GEN_PANEL_W_2)
+        : GEN_PANEL_W_2;
+
+    const selectionWidths = responses.map((r, i) => {
+      if (hiddenPanels.has(r.modelIndex)) return HIDDEN_PANEL_W;
+      if (i === preferredIdx) return dynamicPrefW;
+      return SELECTION_PANEL_W;
+    });
+
+    const panelLeftEdges = selectionWidths.reduce<number[]>((acc, w, i) => {
+      acc.push(i === 0 ? 0 : acc[i - 1]! + selectionWidths[i - 1]! + PANEL_GAP);
+      return acc;
+    }, []);
+
+    const preferredCenterInTrack =
+      panelLeftEdges[preferredIdx]! + selectionWidths[preferredIdx]! / 2;
+    // Keep in sync for pointer-up snap-back without stale closures
+    preferredCenterRef.current = preferredCenterInTrack;
+
+    // Start position: hidden panels at HIDDEN_PANEL_W, visible at SELECTION_PANEL_W
+    const uniformTrackW =
+      responses.reduce(
+        (sum, r) =>
+          sum +
+          (hiddenPanels.has(r.modelIndex) ? HIDDEN_PANEL_W : SELECTION_PANEL_W),
+        0
+      ) +
+      (n - 1) * PANEL_GAP;
+
+    const trackTransform = selectionEntered
+      ? `translateX(calc(50% - ${preferredCenterInTrack}px))`
+      : `translateX(calc(50% - ${uniformTrackW / 2}px))`;
+
+    return (
+      <div
+        ref={trackContainerRef}
+        className="w-full overflow-hidden cursor-grab"
+        onPointerDown={handleCarouselPointerDown}
+        style={{
+          maskImage: `linear-gradient(to right, transparent 0px, black ${PEEK_W}px, black calc(100% - ${PEEK_W}px), transparent 100%)`,
+          WebkitMaskImage: `linear-gradient(to right, transparent 0px, black ${PEEK_W}px, black calc(100% - ${PEEK_W}px), transparent 100%)`,
+        }}
+      >
+        <div
+          ref={trackRef}
+          className="flex items-start"
+          style={{
+            gap: `${PANEL_GAP}px`,
+            transition: selectionEntered
+              ? "transform 0.45s cubic-bezier(0.2, 0, 0, 1)"
+              : "none",
+            transform: trackTransform,
+          }}
+        >
+          {responses.map((r, i) => {
+            const isHidden = hiddenPanels.has(r.modelIndex);
+            const isPref = r.modelIndex === preferredIndex;
+            const isNonPref = !isHidden && !isPref;
+            const finalW = selectionWidths[i]!;
+            const startW = isHidden ? HIDDEN_PANEL_W : SELECTION_PANEL_W;
+            const capped = isNonPref && preferredPanelHeight != null;
+            return (
+              <div
+                key={r.modelIndex}
+                ref={isPref ? preferredPanelRef : undefined}
+                style={{
+                  width: `${selectionEntered ? finalW : startW}px`,
+                  flexShrink: 0,
+                  transition: selectionEntered
+                    ? "width 0.45s cubic-bezier(0.2, 0, 0, 1)"
+                    : "none",
+                  maxHeight: capped ? preferredPanelHeight : undefined,
+                  overflow: capped ? "hidden" : undefined,
+                  position: capped ? "relative" : undefined,
+                }}
+              >
+                <div className={cn(capped && "opacity-50")}>
+                  <MultiModelPanel {...buildPanelProps(r, isNonPref)} />
+                </div>
+                {capped && (
+                  <div
+                    className="absolute inset-x-0 bottom-0 h-24 pointer-events-none"
+                    style={{
+                      background:
+                        "linear-gradient(to top, var(--background-tint-01) 0%, transparent 100%)",
+                    }}
+                  />
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+
+  // ── Generation Layout (equal panels side-by-side) ──
+  // Panel width based on number of visible (non-hidden) panels.
+  const panelWidth =
+    visibleResponses.length <= 2 ? GEN_PANEL_W_2 : GEN_PANEL_W_3;
+
+  return (
+    <div className="overflow-x-auto">
+      <div className="flex gap-6 items-start w-fit mx-auto">
+        {responses.map((r) => {
+          const isHidden = hiddenPanels.has(r.modelIndex);
+          return (
+            <div
+              key={r.modelIndex}
+              style={
+                isHidden
+                  ? {
+                      width: HIDDEN_PANEL_W,
+                      minWidth: HIDDEN_PANEL_W,
+                      maxWidth: HIDDEN_PANEL_W,
+                      flexShrink: 0,
+                      overflow: "hidden" as const,
+                    }
+                  : { width: panelWidth, minWidth: MIN_PANEL_W }
+              }
+            >
+              <MultiModelPanel {...buildPanelProps(r, false)} />
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

web/src/app/app/message/interfaces.ts

@@ -0,0 +1,16 @@
+import { Packet } from "@/app/app/services/streamingModels";
+import { FeedbackType } from "@/app/app/interfaces";
+
+export interface MultiModelResponse {
+  modelIndex: number;
+  provider: string;
+  modelName: string;
+  displayName: string;
+  packets: Packet[];
+  packetCount: number;
+  nodeId: number;
+  messageId?: number;
+  isHighlighted?: boolean;
+  currentFeedback?: FeedbackType | null;
+  isGenerating?: boolean;
+}

web/src/app/app/message/messageComponents/AgentMessage.tsx

@@ -49,6 +49,8 @@ export interface AgentMessageProps {
   parentMessage?: Message | null;
   // Duration in seconds for processing this message (agent messages only)
   processingDurationSeconds?: number;
+  /** Hide the feedback/toolbar footer (used in multi-model non-preferred panels) */
+  hideFooter?: boolean;
 }
 
 // TODO: Consider more robust comparisons:
@@ -76,7 +78,8 @@ function arePropsEqual(
     prev.parentMessage?.messageId === next.parentMessage?.messageId &&
     prev.llmManager?.isLoadingProviders ===
       next.llmManager?.isLoadingProviders &&
-    prev.processingDurationSeconds === next.processingDurationSeconds
+    prev.processingDurationSeconds === next.processingDurationSeconds &&
+    prev.hideFooter === next.hideFooter
     // Skip: chatState.regenerate, chatState.setPresentingDocument,
     //       most of llmManager, onMessageSelection (function/object props)
   );
@@ -95,6 +98,7 @@ const AgentMessage = React.memo(function AgentMessage({
   onRegenerate,
   parentMessage,
   processingDurationSeconds,
+  hideFooter,
 }: AgentMessageProps) {
   const markdownRef = useRef<HTMLDivElement>(null);
   const finalAnswerRef = useRef<HTMLDivElement>(null);
@@ -326,7 +330,7 @@ const AgentMessage = React.memo(function AgentMessage({
       </div>
 
       {/* Feedback buttons - only show when streaming and rendering complete */}
-      {isComplete && (
+      {isComplete && !hideFooter && (
         <MessageToolbar
           nodeId={nodeId}
           messageId={messageId}

web/src/app/app/services/lib.tsx

@@ -12,6 +12,7 @@ import {
   FileChatDisplay,
   Message,
   MessageResponseIDInfo,
+  MultiModelMessageResponseIDInfo,
   ResearchType,
   RetrievalType,
   StreamingError,
@@ -96,6 +97,7 @@ export type PacketType =
   | FileChatDisplay
   | StreamingError
   | MessageResponseIDInfo
+  | MultiModelMessageResponseIDInfo
   | StreamStopInfo
   | UserKnowledgeFilePacket
   | Packet;
@@ -109,6 +111,13 @@ export type MessageOrigin =
   | "slackbot"
   | "unknown";
 
+export interface LLMOverride {
+  model_provider: string;
+  model_version: string;
+  temperature?: number;
+  display_name?: string;
+}
+
 export interface SendMessageParams {
   message: string;
   fileDescriptors?: FileDescriptor[];
@@ -124,6 +133,8 @@ export interface SendMessageParams {
   modelProvider?: string;
   modelVersion?: string;
   temperature?: number;
+  // Multi-model: send multiple LLM overrides for parallel generation
+  llmOverrides?: LLMOverride[];
   // Origin of the message for telemetry tracking
   origin?: MessageOrigin;
   // Additional context injected into the LLM call but not stored/shown in chat.
@@ -144,6 +155,7 @@ export async function* sendMessage({
   modelProvider,
   modelVersion,
   temperature,
+  llmOverrides,
   origin,
   additionalContext,
 }: SendMessageParams): AsyncGenerator<PacketType, void, unknown> {
@@ -165,6 +177,8 @@ export async function* sendMessage({
             model_version: modelVersion,
           }
         : null,
+    // Multi-model: list of LLM overrides for parallel generation
+    llm_overrides: llmOverrides ?? null,
     // Default to "unknown" for consistency with backend; callers should set explicitly
     origin: origin ?? "unknown",
     additional_context: additionalContext ?? null,
@@ -189,6 +203,20 @@ export async function* sendMessage({
   yield* handleSSEStream<PacketType>(response, signal);
 }
 
+export async function setPreferredResponse(
+  userMessageId: number,
+  preferredResponseId: number
+): Promise<Response> {
+  return fetch("/api/chat/set-preferred-response", {
+    method: "PUT",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      user_message_id: userMessageId,
+      preferred_response_id: preferredResponseId,
+    }),
+  });
+}
+
 export async function nameChatSession(chatSessionId: string) {
   const response = await fetch("/api/chat/rename-chat-session", {
     method: "PUT",
@@ -358,6 +386,9 @@ export function processRawChatHistory(
       overridden_model: messageInfo.overridden_model,
       packets: packetsForMessage || [],
       currentFeedback: messageInfo.current_feedback as FeedbackType | null,
+      // Multi-model answer generation
+      preferredResponseId: messageInfo.preferred_response_id ?? null,
+      modelDisplayName: messageInfo.model_display_name ?? null,
     };
 
     messages.set(messageInfo.message_id, message);

web/src/app/app/services/streamingModels.ts

@@ -403,6 +403,7 @@ export interface Placement {
   turn_index: number;
   tab_index?: number; // For parallel tool calls - tools with same turn_index but different tab_index run in parallel
   sub_turn_index?: number | null;
+  model_index?: number | null; // For multi-model answer generation - identifies which model produced this packet
 }
 
 // Packet wrapper for streaming objects

web/src/hooks/useMultiModelChat.test.tsx

@@ -0,0 +1,232 @@
+import { renderHook, act } from "@tests/setup/test-utils";
+import useMultiModelChat from "@/hooks/useMultiModelChat";
+import { LlmManager } from "@/lib/hooks";
+import { SelectedModel } from "@/refresh-components/popovers/ModelSelector";
+
+// Mock buildLlmOptions — hook uses it internally for initialization.
+// Tests here focus on CRUD operations, not the initialization side-effect.
+jest.mock("@/refresh-components/popovers/LLMPopover", () => ({
+  buildLlmOptions: jest.fn(() => []),
+}));
+
+const makeLlmManager = (): LlmManager =>
+  ({
+    llmProviders: [],
+    currentLlm: { modelName: null, provider: null },
+    isLoadingProviders: false,
+  }) as unknown as LlmManager;
+
+const makeModel = (provider: string, modelName: string): SelectedModel => ({
+  name: provider,
+  provider,
+  modelName,
+  displayName: `${provider}/${modelName}`,
+});
+
+const GPT4 = makeModel("openai", "gpt-4");
+const CLAUDE = makeModel("anthropic", "claude-opus-4-6");
+const GEMINI = makeModel("google", "gemini-pro");
+const GPT4_TURBO = makeModel("openai", "gpt-4-turbo");
+
+// ---------------------------------------------------------------------------
+// addModel
+// ---------------------------------------------------------------------------
+
+describe("addModel", () => {
+  it("adds a model to an empty selection", () => {
+    const { result } = renderHook(() => useMultiModelChat(makeLlmManager()));
+
+    act(() => {
+      result.current.addModel(GPT4);
+    });
+
+    expect(result.current.selectedModels).toHaveLength(1);
+    expect(result.current.selectedModels[0]).toEqual(GPT4);
+  });
+
+  it("does not add a duplicate model", () => {
+    const { result } = renderHook(() => useMultiModelChat(makeLlmManager()));
+
+    act(() => {
+      result.current.addModel(GPT4);
+      result.current.addModel(GPT4); // duplicate
+    });
+
+    expect(result.current.selectedModels).toHaveLength(1);
+  });
+
+  it("enforces MAX_MODELS (3) cap", () => {
+    const { result } = renderHook(() => useMultiModelChat(makeLlmManager()));
+
+    act(() => {
+      result.current.addModel(GPT4);
+      result.current.addModel(CLAUDE);
+      result.current.addModel(GEMINI);
+      result.current.addModel(GPT4_TURBO); // should be ignored
+    });
+
+    expect(result.current.selectedModels).toHaveLength(3);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// removeModel
+// ---------------------------------------------------------------------------
+
+describe("removeModel", () => {
+  it("removes a model by index", () => {
+    const { result } = renderHook(() => useMultiModelChat(makeLlmManager()));
+
+    act(() => {
+      result.current.addModel(GPT4);
+      result.current.addModel(CLAUDE);
+    });
+
+    act(() => {
+      result.current.removeModel(0); // remove GPT4
+    });
+
+    expect(result.current.selectedModels).toHaveLength(1);
+    expect(result.current.selectedModels[0]).toEqual(CLAUDE);
+  });
+
+  it("handles out-of-range index gracefully", () => {
+    const { result } = renderHook(() => useMultiModelChat(makeLlmManager()));
+
+    act(() => {
+      result.current.addModel(GPT4);
+    });
+
+    act(() => {
+      result.current.removeModel(99); // no-op
+    });
+
+    expect(result.current.selectedModels).toHaveLength(1);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// replaceModel
+// ---------------------------------------------------------------------------
+
+describe("replaceModel", () => {
+  it("replaces the model at the given index", () => {
+    const { result } = renderHook(() => useMultiModelChat(makeLlmManager()));
+
+    act(() => {
+      result.current.addModel(GPT4);
+      result.current.addModel(CLAUDE);
+    });
+
+    act(() => {
+      result.current.replaceModel(0, GEMINI);
+    });
+
+    expect(result.current.selectedModels[0]).toEqual(GEMINI);
+    expect(result.current.selectedModels[1]).toEqual(CLAUDE);
+  });
+
+  it("does not replace with a model already selected at another index", () => {
+    const { result } = renderHook(() => useMultiModelChat(makeLlmManager()));
+
+    act(() => {
+      result.current.addModel(GPT4);
+      result.current.addModel(CLAUDE);
+    });
+
+    act(() => {
+      result.current.replaceModel(0, CLAUDE); // CLAUDE is already at index 1
+    });
+
+    // Should be a no-op — GPT4 stays at index 0
+    expect(result.current.selectedModels[0]).toEqual(GPT4);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// isMultiModelActive
+// ---------------------------------------------------------------------------
+
+describe("isMultiModelActive", () => {
+  it("is false with zero models", () => {
+    const { result } = renderHook(() => useMultiModelChat(makeLlmManager()));
+    expect(result.current.isMultiModelActive).toBe(false);
+  });
+
+  it("is false with exactly one model", () => {
+    const { result } = renderHook(() => useMultiModelChat(makeLlmManager()));
+
+    act(() => {
+      result.current.addModel(GPT4);
+    });
+
+    expect(result.current.isMultiModelActive).toBe(false);
+  });
+
+  it("is true with two or more models", () => {
+    const { result } = renderHook(() => useMultiModelChat(makeLlmManager()));
+
+    act(() => {
+      result.current.addModel(GPT4);
+      result.current.addModel(CLAUDE);
+    });
+
+    expect(result.current.isMultiModelActive).toBe(true);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// buildLlmOverrides
+// ---------------------------------------------------------------------------
+
+describe("buildLlmOverrides", () => {
+  it("returns empty array when no models selected", () => {
+    const { result } = renderHook(() => useMultiModelChat(makeLlmManager()));
+    expect(result.current.buildLlmOverrides()).toEqual([]);
+  });
+
+  it("maps selectedModels to LLMOverride format", () => {
+    const { result } = renderHook(() => useMultiModelChat(makeLlmManager()));
+
+    act(() => {
+      result.current.addModel(GPT4);
+      result.current.addModel(CLAUDE);
+    });
+
+    const overrides = result.current.buildLlmOverrides();
+
+    expect(overrides).toHaveLength(2);
+    expect(overrides[0]).toEqual({
+      model_provider: "openai",
+      model_version: "gpt-4",
+      display_name: "openai/gpt-4",
+    });
+    expect(overrides[1]).toEqual({
+      model_provider: "anthropic",
+      model_version: "claude-opus-4-6",
+      display_name: "anthropic/claude-opus-4-6",
+    });
+  });
+});
+
+// ---------------------------------------------------------------------------
+// clearModels
+// ---------------------------------------------------------------------------
+
+describe("clearModels", () => {
+  it("empties the selection", () => {
+    const { result } = renderHook(() => useMultiModelChat(makeLlmManager()));
+
+    act(() => {
+      result.current.addModel(GPT4);
+      result.current.addModel(CLAUDE);
+    });
+
+    act(() => {
+      result.current.clearModels();
+    });
+
+    expect(result.current.selectedModels).toHaveLength(0);
+    expect(result.current.isMultiModelActive).toBe(false);
+  });
+});

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, llmManager]);
+
+  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);
+        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.name,
+      model_version: m.modelName,
+      display_name: m.displayName,
+    }));
+  }, [selectedModels]);
+
+  return {
+    selectedModels,
+    isMultiModelActive,
+    addModel,
+    removeModel,
+    replaceModel,
+    clearModels,
+    buildLlmOverrides,
+    restoreFromModelNames,
+    selectSingleModel,
+  };
+}

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

@@ -0,0 +1,459 @@
+"use client";
+
+import { useState, useMemo, useRef } from "react";
+import Popover, { PopoverMenu } from "@/refresh-components/Popover";
+import { LlmManager } from "@/lib/hooks";
+import { getProviderIcon } from "@/app/admin/configuration/llm/utils";
+import InputTypeIn from "@/refresh-components/inputs/InputTypeIn";
+import { Text } from "@opal/components";
+import { Button } from "@opal/components";
+import {
+  SvgCheck,
+  SvgChevronDown,
+  SvgChevronRight,
+  SvgPlusCircle,
+  SvgX,
+} from "@opal/icons";
+import { Section } from "@/layouts/general-layouts";
+import {
+  LLMOption,
+  LLMOptionGroup,
+} from "@/refresh-components/popovers/interfaces";
+import {
+  buildLlmOptions,
+  groupLlmOptions,
+} from "@/refresh-components/popovers/LLMPopover";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { cn } from "@/lib/utils";
+
+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;
+}
+
+/** Vertical 1px divider between model bar elements */
+function BarDivider() {
+  return <div className="h-9 w-px bg-border-01 shrink-0" />;
+}
+
+/** Individual model pill in the model bar */
+function ModelPill({
+  model,
+  isMultiModel,
+  onRemove,
+  onClick,
+}: {
+  model: SelectedModel;
+  isMultiModel: boolean;
+  onRemove?: () => void;
+  onClick?: () => void;
+}) {
+  const ProviderIcon = getProviderIcon(model.provider, model.modelName);
+
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      onClick={onClick}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick?.();
+        }
+      }}
+      className={cn(
+        "flex items-center gap-0.5 rounded-12 p-2 shrink-0 cursor-pointer",
+        "hover:bg-background-tint-02 transition-colors",
+        isMultiModel && "bg-background-tint-02"
+      )}
+    >
+      <div className="flex items-center justify-center size-5 shrink-0 p-0.5">
+        <ProviderIcon size={16} />
+      </div>
+      <span className="px-1">
+        <Text font="main-ui-action" color="text-04" nowrap>
+          {model.displayName}
+        </Text>
+      </span>
+      {isMultiModel ? (
+        <Button
+          prominence="tertiary"
+          icon={SvgX}
+          size="2xs"
+          onClick={(e) => {
+            e.stopPropagation();
+            onRemove?.();
+          }}
+          tooltip="Remove model"
+        />
+      ) : (
+        <SvgChevronDown className="size-4 stroke-text-03 shrink-0" />
+      )}
+    </div>
+  );
+}
+
+/** Model item row inside the add-model popover */
+function ModelItem({
+  option,
+  isSelected,
+  isDisabled,
+  onToggle,
+}: {
+  option: LLMOption;
+  isSelected: boolean;
+  isDisabled: boolean;
+  onToggle: () => void;
+}) {
+  const ProviderIcon = getProviderIcon(option.provider, option.modelName);
+
+  // Build subtitle from model capabilities
+  const subtitle = useMemo(() => {
+    const parts: string[] = [];
+    if (option.supportsReasoning) parts.push("reasoning");
+    if (option.supportsImageInput) parts.push("multi-modal");
+    if (parts.length === 0 && option.modelName) return option.modelName;
+    return parts.join(", ");
+  }, [option]);
+
+  return (
+    <button
+      type="button"
+      disabled={isDisabled}
+      onClick={onToggle}
+      className={cn(
+        "flex items-center gap-1.5 w-full rounded-08 p-1.5 text-left transition-colors",
+        isSelected ? "bg-action-link-01" : "hover:bg-background-tint-02",
+        isDisabled && !isSelected && "opacity-50 cursor-not-allowed"
+      )}
+    >
+      <div className="flex items-center justify-center size-5 shrink-0 p-0.5">
+        <ProviderIcon size={16} />
+      </div>
+      <div className="flex flex-col flex-1 min-w-0">
+        <span
+          className={cn(isSelected ? "text-action-link-03" : "text-text-04")}
+        >
+          <Text font="main-ui-action" color="inherit" nowrap>
+            {option.displayName}
+          </Text>
+        </span>
+        {subtitle && (
+          <Text font="secondary-body" color="text-03" nowrap>
+            {subtitle}
+          </Text>
+        )}
+      </div>
+      {isSelected && (
+        <span className="text-action-link-05 shrink-0">
+          <Text font="secondary-body" color="inherit" nowrap>
+            Added
+          </Text>
+        </span>
+      )}
+    </button>
+  );
+}
+
+export default function ModelSelector({
+  llmManager,
+  selectedModels,
+  onAdd,
+  onRemove,
+  onReplace,
+}: ModelSelectorProps) {
+  const [open, setOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState("");
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  // null = add mode (via + button), number = replace mode (via pill click)
+  const [replacingIndex, setReplacingIndex] = useState<number | null>(null);
+
+  const isMultiModel = selectedModels.length > 1;
+  const atMax = selectedModels.length >= MAX_MODELS;
+
+  const llmOptions = useMemo(
+    () => buildLlmOptions(llmManager.llmProviders),
+    [llmManager.llmProviders]
+  );
+
+  const selectedKeys = useMemo(
+    () => new Set(selectedModels.map((m) => `${m.provider}:${m.modelName}`)),
+    [selectedModels]
+  );
+
+  const filteredOptions = useMemo(() => {
+    if (!searchQuery.trim()) return llmOptions;
+    const query = searchQuery.toLowerCase();
+    return llmOptions.filter(
+      (opt) =>
+        opt.displayName.toLowerCase().includes(query) ||
+        opt.modelName.toLowerCase().includes(query) ||
+        (opt.vendor && opt.vendor.toLowerCase().includes(query))
+    );
+  }, [llmOptions, searchQuery]);
+
+  const groupedOptions = useMemo(
+    () => groupLlmOptions(filteredOptions),
+    [filteredOptions]
+  );
+
+  const isSearching = searchQuery.trim().length > 0;
+
+  // In replace mode, other selected models (not the one being replaced) are disabled
+  const otherSelectedKeys = useMemo(() => {
+    if (replacingIndex === null) return new Set<string>();
+    return new Set(
+      selectedModels
+        .filter((_, i) => i !== replacingIndex)
+        .map((m) => `${m.provider}:${m.modelName}`)
+    );
+  }, [selectedModels, replacingIndex]);
+
+  // Current model at the replacing index (shows as "selected" in replace mode)
+  const replacingKey = useMemo(() => {
+    if (replacingIndex === null) return null;
+    const m = selectedModels[replacingIndex];
+    return m ? `${m.provider}:${m.modelName}` : null;
+  }, [selectedModels, replacingIndex]);
+
+  const getItemState = (optKey: string) => {
+    if (replacingIndex !== null) {
+      // Replace mode
+      return {
+        isSelected: optKey === replacingKey,
+        isDisabled: otherSelectedKeys.has(optKey),
+      };
+    }
+    // Add mode
+    return {
+      isSelected: selectedKeys.has(optKey),
+      isDisabled: !selectedKeys.has(optKey) && atMax,
+    };
+  };
+
+  const handleSelectModel = (option: LLMOption) => {
+    const model: SelectedModel = {
+      name: option.name,
+      provider: option.provider,
+      modelName: option.modelName,
+      displayName: option.displayName,
+    };
+
+    if (replacingIndex !== null) {
+      // Replace mode: swap the model at the clicked pill's index
+      onReplace(replacingIndex, model);
+      setOpen(false);
+      setReplacingIndex(null);
+      setSearchQuery("");
+      return;
+    }
+
+    // Add mode: toggle (add/remove)
+    const key = `${option.provider}:${option.modelName}`;
+    const existingIndex = selectedModels.findIndex(
+      (m) => `${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);
+      setSearchQuery("");
+    }
+  };
+
+  const handlePillClick = (index: number) => {
+    setReplacingIndex(index);
+    setOpen(true);
+  };
+
+  return (
+    <div className="flex items-center justify-end gap-1 p-1">
+      {/* (+) Add model button — hidden at max models */}
+      {!atMax && (
+        <Popover open={open} onOpenChange={handleOpenChange}>
+          <Popover.Trigger asChild>
+            <Button
+              prominence="tertiary"
+              icon={SvgPlusCircle}
+              size="sm"
+              tooltip="Add Model"
+            />
+          </Popover.Trigger>
+
+          <Popover.Content side="top" align="start" width="lg">
+            <Section gap={0.25}>
+              <InputTypeIn
+                leftSearchIcon
+                variant="internal"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder="Search models..."
+              />
+
+              <PopoverMenu scrollContainerRef={scrollContainerRef}>
+                {groupedOptions.length === 0
+                  ? [
+                      <div key="empty" className="py-3 px-2">
+                        <Text font="secondary-body" color="text-03">
+                          No models found
+                        </Text>
+                      </div>,
+                    ]
+                  : groupedOptions.length === 1
+                    ? [
+                        <div key="single" className="flex flex-col gap-0.5">
+                          {groupedOptions[0]!.options.map((opt) => {
+                            const key = `${opt.provider}:${opt.modelName}`;
+                            const state = getItemState(key);
+                            return (
+                              <ModelItem
+                                key={opt.modelName}
+                                option={opt}
+                                isSelected={state.isSelected}
+                                isDisabled={state.isDisabled}
+                                onToggle={() => handleSelectModel(opt)}
+                              />
+                            );
+                          })}
+                        </div>,
+                      ]
+                    : [
+                        <ModelGroupAccordion
+                          key="accordion"
+                          groups={groupedOptions}
+                          isSearching={isSearching}
+                          getItemState={getItemState}
+                          onToggle={handleSelectModel}
+                        />,
+                      ]}
+              </PopoverMenu>
+            </Section>
+          </Popover.Content>
+        </Popover>
+      )}
+
+      {/* Divider + model pills */}
+      {selectedModels.length > 0 && (
+        <>
+          <BarDivider />
+          {selectedModels.map((model, index) => (
+            <div
+              key={`${model.provider}:${model.modelName}`}
+              className="flex items-center gap-1"
+            >
+              {index > 0 && <BarDivider />}
+              <ModelPill
+                model={model}
+                isMultiModel={isMultiModel}
+                onRemove={() => onRemove(index)}
+                onClick={() => handlePillClick(index)}
+              />
+            </div>
+          ))}
+        </>
+      )}
+    </div>
+  );
+}
+
+interface ModelGroupAccordionProps {
+  groups: LLMOptionGroup[];
+  isSearching: boolean;
+  getItemState: (key: string) => { isSelected: boolean; isDisabled: boolean };
+  onToggle: (option: LLMOption) => void;
+}
+
+function ModelGroupAccordion({
+  groups,
+  isSearching,
+  getItemState,
+  onToggle,
+}: ModelGroupAccordionProps) {
+  const allKeys = groups.map((g) => g.key);
+  const [expandedGroups, setExpandedGroups] = useState<string[]>([
+    allKeys[0] ?? "",
+  ]);
+
+  const effectiveExpanded = isSearching ? allKeys : expandedGroups;
+
+  return (
+    <AccordionPrimitive.Root
+      type="multiple"
+      value={effectiveExpanded}
+      onValueChange={(value) => {
+        if (!isSearching) setExpandedGroups(value);
+      }}
+      className="w-full flex flex-col"
+    >
+      {groups.map((group) => {
+        const isExpanded = effectiveExpanded.includes(group.key);
+        return (
+          <AccordionPrimitive.Item
+            key={group.key}
+            value={group.key}
+            className="pt-1"
+          >
+            <AccordionPrimitive.Header className="flex">
+              <AccordionPrimitive.Trigger className="flex items-center rounded-08 hover:bg-background-tint-02 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>
+                  <span className="px-0.5">
+                    <Text font="secondary-body" color="text-03" nowrap>
+                      {group.displayName}
+                    </Text>
+                  </span>
+                </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>
+              </AccordionPrimitive.Trigger>
+            </AccordionPrimitive.Header>
+            <AccordionPrimitive.Content className="overflow-hidden data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down">
+              <div className="flex flex-col gap-0.5 pt-0 pb-0">
+                {group.options.map((opt) => {
+                  const key = `${opt.provider}:${opt.modelName}`;
+                  const state = getItemState(key);
+                  return (
+                    <ModelItem
+                      key={key}
+                      option={opt}
+                      isSelected={state.isSelected}
+                      isDisabled={state.isDisabled}
+                      onToggle={() => onToggle(opt)}
+                    />
+                  );
+                })}
+              </div>
+            </AccordionPrimitive.Content>
+          </AccordionPrimitive.Item>
+        );
+      })}
+    </AccordionPrimitive.Root>
+  );
+}