Model Selector

// Shared motion tokens. Easing curves mirror the CSS custom properties in
// globals.css; springs are the canonical physics used across components.
// Strong custom variants — defaults like `ease-in`/`ease-out` feel weak.

export const EASE_OUT = [0.16, 1, 0.3, 1] as const;
export const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const;
export const EASE_DRAWER = [0.32, 0.72, 0, 1] as const;

/** CSS string form of EASE_OUT for inline style transitions. */
export const EASE_OUT_CSS = "cubic-bezier(0.16, 1, 0.3, 1)";

/** Press feedback on buttons and other tappable surfaces. */
export const SPRING_PRESS = {
  type: "spring",
  stiffness: 500,
  damping: 30,
  mass: 0.6,
} as const;

/** Content swaps — label/icon slots trading places inside a control. */
export const SPRING_SWAP = {
  type: "spring",
  stiffness: 460,
  damping: 30,
  mass: 0.55,
} as const;

/** Overlay panel entrances — modals and sheets summoned by pointer. */
export const SPRING_PANEL = {
  type: "spring",
  stiffness: 420,
  damping: 40,
  mass: 0.5,
} as const;

/** Shared-layout glides — pills, indicators and panels morphing between positions. */
export const SPRING_LAYOUT = {
  type: "spring",
  stiffness: 360,
  damping: 32,
  mass: 0.6,
} as const;

/** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */
export const SPRING_MOUSE = {
  stiffness: 200,
  damping: 15,
  mass: 0.3,
} as const;

/** Dragged handles and fills (sliders) — critically damped `useSpring` config,
 * so the value follows the pointer butterily and never rebounds off an end. */
export const SPRING_GLIDE = {
  stiffness: 700,
  damping: 50,
  mass: 0.5,
} as const;

"use client";

import { useState } from "react";

/**
 * Runs `start` during the render in which `open` becomes true.
 *
 * Opening a list starts a fresh session — an empty query, the highlight back at
 * the top — and that is a resolution, not a side effect: a passive effect runs
 * after the commit, so the new session would carry the last one's state for a
 * window in which a key press can land.
 *
 * `start` may only set state belonging to the calling component. Anything that
 * reaches outside it — a consumer's callback, a DOM write, moving focus — is a
 * side effect, and React rejects a callback that sets another component's state
 * during this one's render. Put those in an effect keyed to `open`.
 */
export function useOnOpen(open: boolean, start: () => void) {
  const [wasOpen, setWasOpen] = useState(open);
  if (open !== wasOpen) {
    setWasOpen(open);
    if (open) start();
  }
}

"use client";

import { type KeyboardEvent, type PointerEvent, useCallback, useRef, useState } from "react";
import { capturePointer, releasePointer } from "@/lib/touch";

const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v));

/** Nearest legal value on [min, max] for the given step. max counts as a
 * candidate when the step does not divide the range, so a pointer near the end
 * does not snap back onto the last whole step. */
export function snapSliderValue(next: number, min: number, max: number, step: number): number {
  // Neither case has a grid to walk. An empty range has exactly one legal
  // point, and a non-positive step only needs a clamp, which also keeps the
  // division below away from zero.
  if (!(max > min)) return min;
  if (!(step > 0)) return clamp(next, min, max);
  const whole = Math.floor(Number(((max - min) / step).toFixed(6)));
  const lastWhole = Number((min + whole * step).toFixed(6));
  const toGrid = clamp(Math.round((next - min) / step) * step + min, min, lastWhole);
  const snapped =
    lastWhole < max && Math.abs(next - max) <= Math.abs(next - toGrid) ? max : toGrid;
  return Number(snapped.toFixed(6));
}

export interface SliderOptions {
  value?: number;
  defaultValue?: number;
  onValueChange?: (value: number) => void;
  min?: number;
  max?: number;
  step?: number;
  disabled?: boolean;
  "aria-label"?: string;
  /** Announced instead of the raw number — pass one when the value carries a
   * unit or a suffix ("72.5 kg", "35%"); a bare number needs no valueText. */
  formatValueText?: (value: number) => string;
}

/**
 * Shared value + input plumbing for slider designs: controlled/uncontrolled
 * value, step snapping, pointer-capture drag along a track and arrow-key
 * control. Visuals and motion live in the component; this only owns the number.
 */
export function useSlider({
  value,
  defaultValue = 0,
  onValueChange,
  min = 0,
  max = 100,
  step = 1,
  disabled = false,
  "aria-label": ariaLabel,
  formatValueText,
}: SliderOptions) {
  const trackRef = useRef<HTMLDivElement>(null);
  const sliderEl = useRef<HTMLElement | null>(null);
  // The state drives visuals. Move reads this ref instead, so the first
  // pointermove after pointerdown does not have to wait on a re-render.
  const draggingRef = useRef(false);
  const [internal, setInternal] = useState(defaultValue);
  const [dragging, setDragging] = useState(false);
  const controlled = value !== undefined;
  // Collapse inverted or empty ranges and non-positive steps here, so that
  // percent, ticks and the keyboard maths never divide by zero or walk a
  // NaN grid.
  const lo = min;
  const hi = max > min ? max : min;
  const stride = step > 0 ? step : 1;
  const current = clamp(controlled ? value : internal, lo, hi);
  const percent = hi > lo ? ((current - lo) / (hi - lo)) * 100 : 0;

  const commit = useCallback(
    (next: number) => {
      const clean = snapSliderValue(next, lo, hi, stride);
      if (!controlled) setInternal(clean);
      onValueChange?.(clean);
    },
    [controlled, onValueChange, lo, hi, stride],
  );

  const commitFromX = useCallback(
    (clientX: number) => {
      const rect = trackRef.current?.getBoundingClientRect();
      if (!rect || rect.width === 0) return;
      const ratio = clamp((clientX - rect.left) / rect.width, 0, 1);
      commit(lo + ratio * (hi - lo));
    },
    [commit, lo, hi],
  );

  const onPointerDown = useCallback(
    (event: PointerEvent<HTMLDivElement>) => {
      if (disabled) return;
      // Start the drag first: capture is a convenience, and a browser that
      // refuses it — or a test DOM that has no pointer capture at all — must
      // not take the drag down with it.
      draggingRef.current = true;
      setDragging(true);
      capturePointer(event.currentTarget, event.pointerId);
      // A click on the track should land keyboard focus on the handle.
      sliderEl.current?.focus({ preventScroll: true });
      commitFromX(event.clientX);
    },
    [disabled, commitFromX],
  );

  const onPointerMove = useCallback(
    (event: PointerEvent<HTMLDivElement>) => {
      if (!draggingRef.current || disabled) return;
      commitFromX(event.clientX);
    },
    [disabled, commitFromX],
  );

  const endDrag = useCallback((event: PointerEvent<HTMLDivElement>) => {
    releasePointer(event.currentTarget, event.pointerId);
    draggingRef.current = false;
    setDragging(false);
  }, []);

  const onKeyDown = useCallback(
    (event: KeyboardEvent<HTMLElement>) => {
      if (disabled) return;
      const map: Record<string, number> = {
        ArrowRight: current + stride,
        ArrowUp: current + stride,
        ArrowLeft: current - stride,
        ArrowDown: current - stride,
        PageUp: current + stride * 10,
        PageDown: current - stride * 10,
        Home: lo,
        End: hi,
      };
      if (event.key in map) {
        event.preventDefault();
        commit(map[event.key]);
      }
    },
    [disabled, current, stride, lo, hi, commit],
  );

  return {
    current,
    percent,
    dragging,
    min: lo,
    max: hi,
    step: stride,
    commit,
    /** Pointer handlers for the track element — drag anywhere on it. */
    trackProps: {
      ref: trackRef,
      onPointerDown,
      onPointerMove,
      onPointerUp: endDrag,
      onPointerCancel: endDrag,
      onLostPointerCapture: endDrag,
    },
    /** ARIA + keyboard props for the focusable slider element. */
    sliderProps: {
      // Callback keeps the handle typed across button/div/motion hosts.
      ref: (node: HTMLElement | null) => {
        sliderEl.current = node;
      },
      role: "slider" as const,
      tabIndex: disabled ? -1 : 0,
      "aria-label": ariaLabel,
      "aria-valuemin": lo,
      "aria-valuemax": hi,
      "aria-valuenow": current,
      "aria-valuetext": formatValueText?.(current),
      "aria-disabled": disabled || undefined,
      onKeyDown,
    },
  };
}

"use client";

import { useIsPresent } from "motion/react";
import type { ReactNode } from "react";

export interface PresenceGateRenderProps {
  /**
   * False from the render that starts the exit animation onward. An overlay
   * kept in the tree by `AnimatePresence` is still the topmost thing on the
   * page, so anything it decides from `open` alone stays true for the whole
   * exit — this is the boolean that already knows the overlay is leaving.
   */
  isPresent: boolean;
  /**
   * Spread onto every layer that takes pointer events while the overlay is
   * open. Interaction releases in the same commit that starts the exit while
   * the visual exit keeps playing: pointer events stop landing, and `inert`
   * drops the subtree from focus order, from tab order and from the
   * accessibility tree — an exiting dialog is not a dialog you can still type
   * into. A layer that never takes pointer events (a wrapper that only centres
   * the panel) takes `inert={!isPresent}` alone, so its own
   * `pointer-events-none` is not overwritten.
   */
  gate: {
    inert: boolean;
    style: { pointerEvents: "auto" | "none" };
  };
}

export interface PresenceGateProps {
  children: (props: PresenceGateRenderProps) => ReactNode;
}

/**
 * Reads the presence of the subtree it renders and hands it down.
 *
 * `useIsPresent` only answers inside the `AnimatePresence` subtree, and the
 * components that own an overlay render the `AnimatePresence` themselves, so
 * the boolean has to be read one component further down: this is that
 * component, and the render prop is how it reaches the layers.
 */
export function PresenceGate({ children }: PresenceGateProps) {
  const isPresent = useIsPresent();

  return children({
    isPresent,
    gate: {
      inert: !isPresent,
      style: { pointerEvents: isPresent ? "auto" : "none" },
    },
  });
}

// Shared touch primitives. iOS and iPadOS run their own gestures on top of the
// page — the long-press selection callout and the selection it drags in with
// it — and they win: once the platform claims a touch it cancels ours
// mid-gesture, so a press-and-hold or a drag simply dies. Surfaces that own
// their gesture have to opt out.
//
// What the two classes below cover, precisely:
// - `-webkit-touch-callout: none` stops iOS's long-press callout. WebKit-only:
//   it is not a property other engines have, so it is inert everywhere else.
// - `user-select: none` stops the long-press selection on every engine,
//   Android included, and stops a drag from painting a selection under the
//   cursor. It is inherited, so it reaches every descendant — which is why the
//   two classes differ only in whether they apply it unconditionally.
// What neither covers:
// - Chrome for Android's long-press menu on a link or an image. No CSS
//   suppresses it; a gesture surface that wraps one needs its own
//   `onContextMenu` with `preventDefault()`.
// - The native drag of an `<img>` or `<a>` descendant. `-webkit-user-drag` is
//   not inherited and plain divs and buttons are not drag sources, so setting
//   it on the surface does nothing — the child itself needs `draggable={false}`.

/**
 * Classes for a surface that *is* the control: a thumb, a drum, a stage, a
 * handle, a hold button. Selection is suppressed on every input, because a
 * drag that highlights the control's own label is wrong on a mouse too.
 * Compose with `touch-none` when the surface also owns the scroll axis — leave
 * it off when the page must still scroll from there.
 */
export const TOUCH_GESTURE_CLASS = "select-none [-webkit-touch-callout:none]";

/**
 * The same opt-out for a gesture surface that wraps content the consumer owns:
 * a scroller, a context-menu trigger, a sheet header, a list row. Selection is
 * suppressed only where the platform runs its own press gestures — a coarse
 * pointer — so a mouse user can still select and copy that content. If the
 * gesture itself would paint a selection under the cursor, add `select-none`
 * for the duration of the gesture rather than reaching for
 * `TOUCH_GESTURE_CLASS`.
 *
 * `pointer: coarse` describes the *primary* pointer and nothing else, so a
 * hybrid machine reads it wrong in both directions: a tablet with a mouse
 * plugged in keeps touch as primary and loses mouse selection, and a laptop
 * with a touchscreen keeps the mouse as primary and leaves selection live
 * under a finger. No media query can answer per interaction — the query is
 * about the device, and the question is about the gesture in progress. The
 * default stays here because it is right on the machines that are one thing or
 * the other, and losing a selection is a nuisance; where the miss costs a
 * *gesture* instead, the surface pairs it with `holdSelection` on the press.
 */
export const TOUCH_GESTURE_CONTENT_CLASS =
  "[-webkit-touch-callout:none] pointer-coarse:select-none";

/**
 * Suppress selection on `element` for as long as a gesture is running on it,
 * whatever the primary pointer of the machine happens to be. Returns the
 * release. Inline, so it wins over the class above and is gone again the
 * moment the gesture ends.
 *
 * For the press gestures a native selection would otherwise steal — a
 * long-press that opens a menu. Elsewhere prefer the classes: a surface that
 * takes selection away for the whole session is a surface whose text nobody
 * can copy.
 */
export function holdSelection(element: HTMLElement) {
  element.style.setProperty("user-select", "none");
  element.style.setProperty("-webkit-user-select", "none");
  return () => {
    element.style.removeProperty("user-select");
    element.style.removeProperty("-webkit-user-select");
  };
}

/**
 * Pointer capture, best effort. WebKit throws `NotFoundError` when the pointer
 * is already gone by the time the handler runs — routine on iOS, where the
 * system can claim the touch first — and an uncaught throw takes the rest of
 * the handler, the gesture included, down with it. Touch pointers carry
 * implicit capture anyway, so losing it is never fatal.
 */
export function capturePointer(element: Element, pointerId: number) {
  try {
    element.setPointerCapture(pointerId);
  } catch {
    // Pointer is no longer active — implicit capture still applies on touch.
  }
}

/** Release a capture taken with `capturePointer`, ignoring a stale pointer. */
export function releasePointer(element: Element, pointerId: number) {
  try {
    if (element.hasPointerCapture(pointerId)) {
      element.releasePointerCapture(pointerId);
    }
  } catch {
    // Capture was already dropped by the browser.
  }
}

/**
 * Whether this event came from a pointer that is *hovering*: not a touch, and
 * not currently pressed. Which input the user is holding right now is not
 * something a device capability can answer — a touchscreen laptop hovers and
 * taps, and iPadOS reports a fine hovering pointer for a finger — so both
 * paths stay live and each handler branches on the event it was given.
 *
 * A pen resting on the glass is making contact, not hovering: `buttons` is the
 * tell, and it sends a pen tap down the same route a finger takes.
 *
 * This answers what an *enter* asks. A leave is the other half of a pair and
 * has to be read against the enter that started it — `useHoverGesture` in
 * `lib/hooks/use-hover-gesture` does that, and hover surfaces should use it
 * rather than asking this question twice.
 */
export const isHoveringPointer = (event: {
  pointerType: string;
  buttons: number;
}) => event.pointerType !== "touch" && event.buttons === 0;

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

"use client";
// www.agentui.pro/components/agents/model-selector

import {
  Check,
  ChevronDown,
  ChevronLeft,
  ChevronRight,
  RotateCcw,
} from "lucide-react";
import {
  AnimatePresence,
  animate,
  motion,
  useMotionTemplate,
  useMotionValue,
  useReducedMotion,
  useTransform,
} from "motion/react";
import {
  type KeyboardEvent,
  type PointerEvent as ReactPointerEvent,
  type ReactNode,
  type RefObject,
  useCallback,
  useEffect,
  useId,
  useLayoutEffect,
  useMemo,
  useRef,
  useState,
} from "react";
import { createPortal } from "react-dom";
import {
  EASE_OUT,
  SPRING_GLIDE,
  SPRING_LAYOUT,
  SPRING_PANEL,
  SPRING_PRESS,
  SPRING_SWAP,
} from "@/lib/ease";
import { useOnOpen } from "@/lib/hooks/use-on-open";
import { useSlider } from "@/lib/hooks/use-slider";
import { PresenceGate } from "@/lib/presence-gate";
import { capturePointer, releasePointer, TOUCH_GESTURE_CLASS } from "@/lib/touch";
import { cn } from "@/lib/utils";

type Side = "top" | "bottom";
type Align = "start" | "end";
type PanelView = "effort" | "models";

const VIEWPORT_PADDING = 12;
const PANEL_WIDTH = 272;
const PANEL_MAX_HEIGHT = 320;

export interface ModelSelectorEffortOption {
  value: string;
  label: string;
  description?: string;
  disabled?: boolean;
}

export const DEFAULT_MODEL_EFFORTS: readonly ModelSelectorEffortOption[] = [
  { value: "low", label: "Low" },
  { value: "medium", label: "Medium" },
  { value: "high", label: "High" },
  { value: "xhigh", label: "X-high" },
  { value: "max", label: "Max" },
  { value: "ultra", label: "Ultra" },
];

export interface ModelSelectorOption {
  value: string;
  label: ReactNode;
  /** Accessible text when `label` is not a string. Falls back to `value`. */
  textValue?: string;
  description?: ReactNode;
  icon?: ReactNode;
  badge?: ReactNode;
  disabled?: boolean;
  /** Model-specific effort choices. Falls back to the root `efforts` prop. */
  efforts?: readonly ModelSelectorEffortOption[];
  defaultEffort?: string;
}

export interface ModelSelectorProps {
  models: readonly ModelSelectorOption[];
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  efforts?: readonly ModelSelectorEffortOption[];
  effort?: string;
  defaultEffort?: string;
  onEffortChange?: (effort: string) => void;
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  disabled?: boolean;
  placeholder?: ReactNode;
  /** Accessible name for the trigger and effort panel. */
  label?: string;
  modelListLabel?: string;
  effortLabel?: string;
  side?: Side;
  align?: Align;
  sideOffset?: number;
  className?: string;
  triggerClassName?: string;
  contentClassName?: string;
}

function optionText(option: ModelSelectorOption | undefined) {
  if (!option) return undefined;
  if (option.textValue) return option.textValue;
  if (typeof option.label === "string" || typeof option.label === "number") {
    return String(option.label);
  }
  return option.value;
}

function enabledModelValue(
  models: readonly ModelSelectorOption[],
  candidate: string | null | undefined,
) {
  return candidate !== null && candidate !== undefined
    ? models.find((model) => model.value === candidate && !model.disabled)?.value ??
        null
    : null;
}

function enabledEffortValue(
  efforts: readonly ModelSelectorEffortOption[],
  candidate: string | null | undefined,
) {
  return candidate !== null && candidate !== undefined
    ? efforts.find((effort) => effort.value === candidate && !effort.disabled)
        ?.value ?? null
    : null;
}

function effortsFor(
  model: ModelSelectorOption | undefined,
  fallback: readonly ModelSelectorEffortOption[],
) {
  return model?.efforts ?? fallback;
}

type TriggerRect = {
  left: number;
  top: number;
  width: number;
  height: number;
  viewportWidth: number;
  viewportHeight: number;
};

function sameTriggerRect(current: TriggerRect | null, next: TriggerRect) {
  return (
    current?.left === next.left &&
    current.top === next.top &&
    current.width === next.width &&
    current.height === next.height &&
    current.viewportWidth === next.viewportWidth &&
    current.viewportHeight === next.viewportHeight
  );
}

/** Measure only the anchor. Panel size changes must never feed positioning. */
function useTriggerRect(
  triggerRef: RefObject<HTMLElement | null>,
  active: boolean,
) {
  const [rect, setRect] = useState<TriggerRect | null>(null);
  const update = useCallback(() => {
    const trigger = triggerRef.current;
    if (!trigger) return;
    const box = trigger.getBoundingClientRect();
    const next = {
      left: box.left,
      top: box.top,
      width: box.width,
      height: box.height,
      viewportWidth: window.innerWidth,
      viewportHeight: window.innerHeight,
    };
    setRect((current) => (sameTriggerRect(current, next) ? current : next));
  }, [triggerRef]);

  useLayoutEffect(() => {
    update();
    if (!active) return;
    const trigger = triggerRef.current;
    const observer = new ResizeObserver(update);
    if (trigger) observer.observe(trigger);
    window.addEventListener("scroll", update, true);
    window.addEventListener("resize", update);
    return () => {
      observer.disconnect();
      window.removeEventListener("scroll", update, true);
      window.removeEventListener("resize", update);
    };
  }, [active, triggerRef, update]);

  return rect;
}

/** Keep the active model valid while a streamed catalog changes identity. */
function useModelCursor({
  open,
  models,
  value,
}: {
  open: boolean;
  models: readonly ModelSelectorOption[];
  value: string | undefined;
}) {
  const [cursor, setCursor] = useState<string | null>(null);
  const enabled = useMemo(
    () => models.filter((model) => !model.disabled),
    [models],
  );
  const liveCursor = enabledModelValue(enabled, cursor);

  if (cursor !== null && liveCursor === null) setCursor(null);

  const fallback = enabledModelValue(enabled, value) ?? enabled[0]?.value ?? null;
  const activeValue = liveCursor ?? fallback;
  const latest = useRef({ open, enabled, value });

  useLayoutEffect(() => {
    latest.current = { open, enabled, value };
  });

  const reset = useCallback(() => setCursor(null), []);
  const moveTo = useCallback(
    (next: string | null) =>
      setCursor((current) => (current === next ? current : next)),
    [],
  );
  const move = useCallback((direction: 1 | -1 | "first" | "last") => {
    const current = latest.current;
    if (!current.open || current.enabled.length === 0) return;

    setCursor((previous) => {
      const rows = current.enabled;
      const last = rows.length - 1;
      const from =
        enabledModelValue(rows, previous) ??
        enabledModelValue(rows, current.value) ??
        rows[0]?.value ??
        null;
      const at = Math.max(
        rows.findIndex((model) => model.value === from),
        0,
      );
      const index =
        direction === "first"
          ? 0
          : direction === "last"
            ? last
            : (at + direction + rows.length) % rows.length;
      return rows[index]?.value ?? null;
    });
  }, []);

  useOnOpen(open, reset);

  return { activeValue, move, moveTo };
}

function EffortSlider({
  efforts,
  value,
  onValueChange,
  label,
  disabled,
  reduce,
}: {
  efforts: readonly ModelSelectorEffortOption[];
  value: string | undefined;
  onValueChange: (value: string) => void;
  label: string;
  disabled: boolean;
  reduce: boolean;
}) {
  const [hovered, setHovered] = useState(false);
  const [focused, setFocused] = useState(false);
  const [dragging, setDragging] = useState(false);
  const activePointer = useRef<number | null>(null);
  const animation = useRef<{ stop: () => void } | null>(null);
  const enabled = efforts.filter((effort) => !effort.disabled);
  const resolved =
    enabled.findIndex((effort) => effort.value === value) >= 0
      ? (value as string)
      : enabled[0]?.value;
  const index = Math.max(
    enabled.findIndex((effort) => effort.value === resolved),
    0,
  );
  const lastEmitted = useRef(value);
  useLayoutEffect(() => {
    lastEmitted.current = value;
  }, [value]);

  const { percent, current, commit, sliderProps } = useSlider({
    value: index,
    min: 0,
    max: Math.max(enabled.length - 1, 0),
    step: 1,
    disabled: disabled || enabled.length < 2,
    "aria-label": label,
    formatValueText: (numeric) => enabled[Math.round(numeric)]?.label ?? "",
    onValueChange: (numeric) => {
      const next = enabled[Math.round(numeric)];
      if (next && next.value !== lastEmitted.current) {
        lastEmitted.current = next.value;
        onValueChange(next.value);
      }
    },
  });
  const position = useMotionValue(percent);
  useLayoutEffect(() => {
    if (dragging || activePointer.current !== null) return;
    if (reduce) {
      position.set(percent);
      return;
    }
    animation.current = animate(position, percent, {
      type: "spring",
      ...SPRING_GLIDE,
    });
    return () => animation.current?.stop();
  }, [dragging, percent, position, reduce]);
  const thumbX = useMotionTemplate`${position}%`;
  const fillScale = useTransform(position, (progress) => progress / 100);
  const currentOption = enabled[Math.round(current)];
  const denominator = Math.max(enabled.length - 1, 1);

  const movePointer = (event: ReactPointerEvent<HTMLDivElement>) => {
    const track = event.currentTarget;
    const rect = track.getBoundingClientRect();
    if (rect.width <= 0) return;
    // Pointer coordinates and the visual thumb share the same inset endpoints,
    // including while the opening panel is still scaled.
    const inset = 14 * (track.offsetWidth ? rect.width / track.offsetWidth : 1);
    const travel = Math.max(rect.width - inset * 2, 1);
    const progress = Math.min(1, Math.max(0, (event.clientX - rect.left - inset) / travel));
    position.set(progress * 100);
    commit(progress * Math.max(enabled.length - 1, 0));
  };
  const endPointer = (event: ReactPointerEvent<HTMLDivElement>) => {
    if (event.pointerId !== activePointer.current) return;
    activePointer.current = null;
    setDragging(false);
    releasePointer(event.currentTarget, event.pointerId);
  };

  if (enabled.length === 0) {
    return (
      <p className="mt-3 text-center text-xs text-muted-foreground">
        Effort is managed automatically for this model.
      </p>
    );
  }

  return (
    <div
      onPointerDown={(event) => {
        if (disabled || enabled.length < 2 || event.button !== 0 || activePointer.current !== null) return;
        event.preventDefault();
        animation.current?.stop();
        activePointer.current = event.pointerId;
        setDragging(true);
        capturePointer(event.currentTarget, event.pointerId);
        event.currentTarget.querySelector<HTMLElement>('[role="slider"]')?.focus({ preventScroll: true });
        movePointer(event);
      }}
      onPointerMove={(event) => {
        if (!disabled && event.pointerId === activePointer.current) movePointer(event);
      }}
      onPointerUp={(event) => {
        if (!disabled && event.pointerId === activePointer.current) movePointer(event);
        endPointer(event);
      }}
      onPointerCancel={endPointer}
      onLostPointerCapture={endPointer}
      className={cn(
        "relative mt-3 h-8 w-full touch-none",
        TOUCH_GESTURE_CLASS,
        disabled || enabled.length < 2
          ? "pointer-events-none opacity-50"
          : "cursor-grab active:cursor-grabbing",
      )}
      onPointerEnter={() => setHovered(true)}
      onPointerLeave={() => setHovered(false)}
    >
      <div className="pointer-events-none absolute inset-x-0 top-1/2 h-6 -translate-y-1/2 overflow-hidden rounded-full bg-foreground/5">
        <motion.span
          className="absolute inset-0 origin-left bg-accent"
          style={{ scaleX: fillScale }}
        />
        <span className="absolute inset-0 rounded-full ring-1 ring-inset ring-border-strong" />
      </div>
      <div className="pointer-events-none absolute inset-x-3.5 inset-y-0">
        {enabled.map((effort, effortIndex) => {
          const tickLeft =
            enabled.length === 1
              ? "0%"
              : `${(effortIndex / denominator) * 100}%`;
          return (
            <span
              key={effort.value}
              style={{ left: tickLeft }}
              className={cn(
                "absolute top-1/2 size-1 -translate-x-1/2 -translate-y-1/2 rounded-full",
                effortIndex <= index
                  ? "bg-accent-foreground/45"
                  : "bg-muted-foreground/55",
              )}
            />
          );
        })}
      </div>
      <motion.div
        className="pointer-events-none absolute inset-y-0 left-0 right-7"
        style={{ x: thumbX }}
      >
      <motion.span
        {...sliderProps}
        className="pointer-events-auto absolute left-0 top-1/2 z-10 size-7 rounded-full outline-none"
        style={{ y: "-50%" }}
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}
      >
        <motion.span
          animate={reduce ? undefined : { scale: dragging ? 1.08 : 1 }}
          transition={SPRING_PRESS}
          className={cn(
            "block size-7 rounded-full bg-foreground shadow-[0_4px_12px_rgba(0,0,0,0.18)]",
            focused && "ring-2 ring-accent ring-offset-2 ring-offset-popover",
          )}
        />
        <AnimatePresence>
          {(hovered || focused || dragging) && currentOption?.description ? (
            <motion.span
              initial={
                reduce
                  ? { opacity: 0 }
                  : { opacity: 0, y: 3, scale: 0.96 }
              }
              animate={{ opacity: 1, y: 0, scale: 1 }}
              exit={{ opacity: 0, y: 2, scale: 0.98 }}
              transition={reduce ? { duration: 0.1 } : SPRING_PANEL}
              className={cn(
                "pointer-events-none absolute top-full mt-2 max-w-48 rounded-xl border border-border bg-popover px-2.5 py-1.5 text-left shadow-lg",
                current === 0
                  ? "left-0"
                  : current === enabled.length - 1
                    ? "right-0"
                    : "left-1/2 -translate-x-1/2",
              )}
            >
              <span className="block truncate text-xs text-foreground">
                {currentOption.description}
              </span>
            </motion.span>
          ) : null}
        </AnimatePresence>
      </motion.span>
      </motion.div>
    </div>
  );
}

export function ModelSelector({
  models,
  value,
  defaultValue,
  onValueChange,
  efforts = DEFAULT_MODEL_EFFORTS,
  effort,
  defaultEffort = "high",
  onEffortChange,
  open: openProp,
  defaultOpen = false,
  onOpenChange,
  disabled = false,
  placeholder = "Select model",
  label = "Model and effort",
  modelListLabel = "Select model",
  effortLabel = "Reasoning effort",
  side = "top",
  align = "end",
  sideOffset = 8,
  className,
  triggerClassName,
  contentClassName,
}: ModelSelectorProps) {
  const reduce = useReducedMotion() ?? false;
  const baseId = useId();
  const triggerId = `${baseId}-trigger`;
  const panelId = `${baseId}-panel`;
  const listId = `${baseId}-list`;
  const triggerRef = useRef<HTMLButtonElement>(null);
  const anchorRef = useRef<HTMLDivElement>(null);
  const panelRef = useRef<HTMLDivElement>(null);
  const modelButtonRef = useRef<HTMLButtonElement>(null);
  const focusActiveModel = useRef(false);
  const focusModelButton = useRef(false);
  const effortByModel = useRef(new Map<string, string>());
  const [portalReady, setPortalReady] = useState(false);
  const [view, setView] = useState<PanelView>("effort");
  const [internalValue, setInternalValue] = useState(defaultValue);
  const [internalEffort, setInternalEffort] = useState(defaultEffort);
  const [internalOpen, setInternalOpen] = useState(defaultOpen);
  const controlledValue = value !== undefined;
  const controlledEffort = effort !== undefined;
  const controlledOpen = openProp !== undefined;
  const currentValue = controlledValue ? value : internalValue;
  const rawEffort = controlledEffort ? effort : internalEffort;
  const open = controlledOpen ? openProp : internalOpen;
  const currentModel = models.find((model) => model.value === currentValue);
  const currentText = optionText(currentModel);
  const currentEfforts = useMemo(
    () => effortsFor(currentModel, efforts),
    [currentModel, efforts],
  );
  const currentEffortValue =
    enabledEffortValue(currentEfforts, rawEffort) ??
    enabledEffortValue(currentEfforts, currentModel?.defaultEffort) ??
    enabledEffortValue(currentEfforts, defaultEffort) ??
    currentEfforts.find((option) => !option.disabled)?.value;
  const currentEffort = currentEfforts.find(
    (option) => option.value === currentEffortValue,
  );
  const resetEffortValue =
    enabledEffortValue(currentEfforts, currentModel?.defaultEffort) ??
    enabledEffortValue(currentEfforts, defaultEffort) ??
    currentEfforts.find((option) => !option.disabled)?.value;

  useLayoutEffect(() => {
    if (currentValue && currentEffortValue) {
      effortByModel.current.set(currentValue, currentEffortValue);
    }
  }, [currentEffortValue, currentValue]);

  const setOpen = useCallback(
    (next: boolean) => {
      if (!controlledOpen) setInternalOpen(next);
      onOpenChange?.(next);
    },
    [controlledOpen, onOpenChange],
  );

  const commitEffort = useCallback(
    (next: string) => {
      if (currentValue) effortByModel.current.set(currentValue, next);
      if (!controlledEffort) setInternalEffort(next);
      onEffortChange?.(next);
    },
    [controlledEffort, currentValue, onEffortChange],
  );

  const { activeValue, move, moveTo } = useModelCursor({
    open,
    models,
    value: currentValue,
  });
  const activeIndex = models.findIndex(
    (model) => model.value === activeValue,
  );

  const resetView = useCallback(() => setView("effort"), []);
  useOnOpen(open, resetView);

  const showModels = useCallback(() => {
    focusActiveModel.current = true;
    setView("models");
  }, []);

  const showEffort = useCallback(() => {
    focusModelButton.current = true;
    setView("effort");
  }, []);

  const choose = useCallback(
    (next: string) => {
      const model = models.find((option) => option.value === next);
      if (!model || model.disabled) return;
      const nextEfforts = effortsFor(model, efforts);
      const nextEffort =
        enabledEffortValue(nextEfforts, effortByModel.current.get(next)) ??
        enabledEffortValue(nextEfforts, currentEffortValue) ??
        enabledEffortValue(nextEfforts, model.defaultEffort) ??
        enabledEffortValue(nextEfforts, defaultEffort) ??
        nextEfforts.find((option) => !option.disabled)?.value;

      if (!controlledValue) setInternalValue(next);
      onValueChange?.(next);
      if (nextEffort && nextEffort !== currentEffortValue) {
        if (!controlledEffort) setInternalEffort(nextEffort);
        onEffortChange?.(nextEffort);
      }
      if (nextEffort) effortByModel.current.set(next, nextEffort);
      focusModelButton.current = true;
      setView("effort");
    },
    [
      controlledEffort,
      controlledValue,
      currentEffortValue,
      defaultEffort,
      efforts,
      models,
      onEffortChange,
      onValueChange,
    ],
  );

  useEffect(() => setPortalReady(true), []);

  useLayoutEffect(() => {
    if (view !== "models" || !focusActiveModel.current || activeIndex < 0) {
      return;
    }
    focusActiveModel.current = false;
    document.getElementById(`${baseId}-option-${activeIndex}`)?.focus();
  }, [activeIndex, baseId, view]);

  useLayoutEffect(() => {
    if (!open || view !== "effort" || !focusModelButton.current) return;
    focusModelButton.current = false;
    modelButtonRef.current?.focus();
  }, [open, view]);

  useEffect(() => {
    if (!open) return;
    const handlePointerDown = (event: PointerEvent) => {
      const target = event.target as Node;
      if (
        !triggerRef.current?.contains(target) &&
        !panelRef.current?.contains(target)
      ) {
        setOpen(false);
      }
    };
    const handleFocus = (event: FocusEvent) => {
      const target = event.target as Node;
      if (
        !triggerRef.current?.contains(target) &&
        !panelRef.current?.contains(target)
      ) {
        setOpen(false);
      }
    };
    const handleEscape = (event: globalThis.KeyboardEvent) => {
      if (event.key !== "Escape") return;
      event.preventDefault();
      if (view === "models") showEffort();
      else {
        setOpen(false);
        triggerRef.current?.focus();
      }
    };

    window.addEventListener("pointerdown", handlePointerDown);
    window.addEventListener("focusin", handleFocus);
    window.addEventListener("keydown", handleEscape);
    return () => {
      window.removeEventListener("pointerdown", handlePointerDown);
      window.removeEventListener("focusin", handleFocus);
      window.removeEventListener("keydown", handleEscape);
    };
  }, [open, setOpen, showEffort, view]);

  // The button scales during a press; its stationary wrapper is the anchor.
  const triggerRect = useTriggerRect(anchorRef, portalReady && open);
  const panelWidth = triggerRect
    ? Math.min(PANEL_WIDTH, window.innerWidth - VIEWPORT_PADDING * 2)
    : PANEL_WIDTH;
  let placement = side;
  if (triggerRect) {
    const above = triggerRect.top - sideOffset - VIEWPORT_PADDING;
    const below =
      window.innerHeight -
      triggerRect.top -
      triggerRect.height -
      sideOffset -
      VIEWPORT_PADDING;
    if (side === "top" && above < PANEL_MAX_HEIGHT && below > above) {
      placement = "bottom";
    } else if (
      side === "bottom" &&
      below < PANEL_MAX_HEIGHT &&
      above > below
    ) {
      placement = "top";
    }
  }

  const panelLeft = triggerRect
    ? Math.min(
        Math.max(
          VIEWPORT_PADDING,
          align === "end"
            ? triggerRect.left + triggerRect.width - panelWidth
            : triggerRect.left,
        ),
        Math.max(
          VIEWPORT_PADDING,
          window.innerWidth - panelWidth - VIEWPORT_PADDING,
        ),
      )
    : 0;
  const panelAnchorTop = triggerRect
    ? placement === "top"
      ? triggerRect.top - sideOffset
      : triggerRect.top + triggerRect.height + sideOffset
    : 0;
  const availablePanelHeight = triggerRect
    ? placement === "top"
      ? triggerRect.top - sideOffset - VIEWPORT_PADDING
      : window.innerHeight -
        triggerRect.top -
        triggerRect.height -
        sideOffset -
        VIEWPORT_PADDING
    : PANEL_MAX_HEIGHT;

  const handleTriggerKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
    if (event.key === "ArrowDown") {
      event.preventDefault();
      focusModelButton.current = true;
      if (!open) setOpen(true);
      else {
        focusModelButton.current = false;
        modelButtonRef.current?.focus();
      }
      return;
    }
    if (event.key === "Tab" && open && !event.shiftKey) {
      event.preventDefault();
      modelButtonRef.current?.focus();
    }
  };

  const handleModelKeyDown = (
    event: KeyboardEvent<HTMLButtonElement>,
    selectedValue: string,
  ) => {
    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
      event.preventDefault();
      focusActiveModel.current = true;
      move(event.key === "ArrowDown" ? 1 : -1);
      return;
    }
    if (event.key === "Home" || event.key === "End") {
      event.preventDefault();
      focusActiveModel.current = true;
      move(event.key === "Home" ? "first" : "last");
      return;
    }
    if (event.key === "Enter" || event.key === " ") {
      event.preventDefault();
      choose(selectedValue);
    }
  };

  const effortView = (
    <PresenceGate key="effort">
      {({ gate, isPresent }) => (
        <motion.div
          inert={gate.inert}
          aria-hidden={!isPresent}
          style={gate.style}
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={
            reduce
              ? { duration: 0.1 }
              : { duration: 0.18, ease: EASE_OUT }
          }
          className={cn(
            "relative px-3 pt-3",
            currentEfforts.some((option) => option.description)
              ? "pb-11"
              : "pb-3",
          )}
        >
      <div className="grid grid-cols-[2rem_1fr_2rem] items-start gap-1">
        <span
          aria-hidden="true"
          className="block size-8"
        />

        <div className="min-w-0 text-center">
          <div className="relative h-5 overflow-hidden">
              <motion.div
                key={currentEffortValue ?? "automatic"}
                initial={reduce ? false : { opacity: 0.65, y: 2 }}
                animate={{ opacity: 1, y: 0 }}
                transition={
                  reduce
                    ? { duration: 0 }
                    : { duration: 0.12, ease: EASE_OUT }
                }
                className="absolute inset-0 text-sm font-medium text-accent"
              >
                {currentEffort?.label ?? "Automatic"}
              </motion.div>
          </div>
          <button
            ref={modelButtonRef}
            type="button"
            onClick={showModels}
            aria-label={`Change model: ${currentText ?? "None selected"}`}
            className="group/model mt-0.5 inline-flex max-w-full items-center gap-0.5 rounded-lg px-1.5 py-0.5 text-xs text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
          >
            <span className="truncate">
              {currentModel?.label ?? placeholder}
            </span>
            <ChevronRight className="size-3 shrink-0 transition-transform group-hover/model:translate-x-0.5" />
          </button>
        </div>

        <motion.button
          type="button"
          aria-label="Reset effort"
          disabled={!resetEffortValue || currentEffortValue === resetEffortValue}
          onClick={() => {
            if (resetEffortValue) commitEffort(resetEffortValue);
          }}
          whileTap={reduce ? undefined : { rotate: -35, scale: 0.92 }}
          transition={SPRING_PRESS}
          className="grid size-8 place-items-center rounded-full text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-35"
        >
          <RotateCcw className="size-3.5" />
        </motion.button>
      </div>

          <EffortSlider
            key={currentValue ?? "no-model"}
            efforts={currentEfforts}
            value={currentEffortValue}
            onValueChange={commitEffort}
            label={effortLabel}
            disabled={disabled}
            reduce={reduce}
          />
        </motion.div>
      )}
    </PresenceGate>
  );

  const modelView = (
    <PresenceGate key="models">
      {({ gate, isPresent }) => (
        <motion.div
          inert={gate.inert}
          aria-hidden={!isPresent}
          style={gate.style}
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          className="relative"
          transition={
            reduce
              ? { duration: 0.1 }
              : { duration: 0.18, ease: EASE_OUT }
          }
        >
      <button
        type="button"
        onClick={showEffort}
        className="group/back mx-1.5 mt-1.5 flex items-center gap-1 rounded-lg px-2 py-1.5 text-xs font-medium text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
      >
        <ChevronLeft className="size-3.5 transition-transform group-hover/back:-translate-x-0.5" />
        {modelListLabel}
      </button>
      <motion.div
        id={listId}
        role="listbox"
        aria-label={modelListLabel}
        style={{ maxHeight: Math.max(48, Math.min(352, availablePanelHeight - 44)) }}
        className="max-h-[min(22rem,calc(100vh-5rem))] overflow-y-auto overscroll-contain px-1.5 pb-1.5 [scrollbar-color:var(--color-border-strong)_transparent] [scrollbar-width:thin]"
      >
        {models.length === 0 ? (
          <p className="px-2 py-4 text-sm text-muted-foreground">
            No models available.
          </p>
        ) : (
          models.map((model, index) => {
            const selected = model.value === currentValue;
            const active = model.value === activeValue;
            const text = optionText(model);
            return (
              <motion.button
                key={model.value}
                id={`${baseId}-option-${index}`}
                type="button"
                role="option"
                tabIndex={active ? 0 : -1}
                aria-selected={selected}
                aria-label={text}
                disabled={model.disabled}
                data-active={active ? "true" : "false"}
                data-selected={selected ? "true" : "false"}
                onFocus={() => {
                  if (!model.disabled) moveTo(model.value);
                }}
                onPointerMove={() => {
                  if (!model.disabled) moveTo(model.value);
                }}
                onKeyDown={(event) => handleModelKeyDown(event, model.value)}
                onClick={() => choose(model.value)}
                className="relative flex min-h-8 w-full items-center gap-2 rounded-xl px-2.5 py-1 text-left outline-none disabled:pointer-events-none disabled:opacity-40"
              >
                {active ? (
                  <motion.span
                    layoutId={`${baseId}-active-row`}
                    aria-hidden="true"
                    transition={reduce ? { duration: 0 } : SPRING_LAYOUT}
                    className="absolute inset-0 rounded-xl bg-background"
                  />
                ) : null}
                {model.icon ? (
                  <span
                    aria-hidden="true"
                    className="relative grid size-7 shrink-0 place-items-center rounded-lg border border-border bg-background text-muted-foreground [&_svg]:size-3.5"
                  >
                    {model.icon}
                  </span>
                ) : null}
                <span className="relative min-w-0 flex-1">
                  <span className="flex min-w-0 items-center gap-2">
                    <span className="truncate text-sm font-medium text-foreground">
                      {model.label}
                    </span>
                    {model.badge ? (
                      <span className="shrink-0 rounded-md bg-background px-1.5 py-0.5 text-[0.625rem] font-medium text-muted-foreground">
                        {model.badge}
                      </span>
                    ) : null}
                  </span>
                  {model.description ? (
                    <span className="mt-0.5 block truncate text-xs leading-4 text-muted-foreground">
                      {model.description}
                    </span>
                  ) : null}
                </span>
                <span className="relative grid size-5 shrink-0 place-items-center text-foreground">
                  <AnimatePresence initial={false}>
                    {selected ? (
                      <motion.span
                        initial={
                          reduce
                            ? { opacity: 0 }
                            : { opacity: 0, scale: 0.5, rotate: -18 }
                        }
                        animate={{ opacity: 1, scale: 1, rotate: 0 }}
                        exit={
                          reduce
                            ? { opacity: 0 }
                            : { opacity: 0, scale: 0.65, rotate: 12 }
                        }
                        transition={reduce ? { duration: 0.1 } : SPRING_SWAP}
                      >
                        <Check className="size-3.5" />
                      </motion.span>
                    ) : null}
                  </AnimatePresence>
                </span>
              </motion.button>
            );
          })
        )}
          </motion.div>
        </motion.div>
      )}
    </PresenceGate>
  );

  const panel = portalReady
    ? createPortal(
        <AnimatePresence>
          {open ? (
            <PresenceGate>
              {({ gate }) => (
                <motion.div
                  data-model-selector-portal=""
                  data-side={placement}
                  inert={gate.inert}
                  initial={
                    reduce
                      ? { opacity: 0 }
                      : {
                          opacity: 0,
                          y: placement === "top" ? 7 : -7,
                          scale: 0.97,
                        }
                  }
                  animate={{ opacity: 1, y: 0, scale: 1 }}
                  exit={
                    reduce
                      ? { opacity: 0 }
                      : {
                          opacity: 0,
                          y: placement === "top" ? 4 : -4,
                          scale: 0.985,
                        }
                  }
                  transition={reduce ? { duration: 0.12 } : SPRING_PANEL}
                  style={{
                    ...gate.style,
                    left: panelLeft,
                    top: panelAnchorTop,
                    visibility: triggerRect ? "visible" : "hidden",
                    transformOrigin: "0 0",
                  }}
                  className="fixed z-[9999] size-0"
                >
                  <div
                    ref={panelRef}
                    id={panelId}
                    role="dialog"
                    aria-label={label}
                    className={cn(
                      "absolute left-0 w-[min(17rem,calc(100vw-1.5rem))] rounded-2xl text-popover-foreground",
                      placement === "top" ? "bottom-0" : "top-0",
                      contentClassName,
                    )}
                  >
                    <motion.div
                      aria-hidden="true"
                      layout={reduce ? undefined : true}
                      layoutDependency={view}
                      transition={{ layout: SPRING_PANEL }}
                      className="pointer-events-none absolute inset-0 rounded-2xl border border-border bg-popover shadow-[0_18px_50px_rgba(0,0,0,0.16)]"
                    />
                    {view === "effort" ? effortView : modelView}
                  </div>
                </motion.div>
              )}
            </PresenceGate>
          ) : null}
        </AnimatePresence>,
        document.body,
      )
    : null;

  return (
    <>
      <div ref={anchorRef} className={cn("relative inline-flex", className)}>
        <motion.button
          ref={triggerRef}
          id={triggerId}
          type="button"
          disabled={disabled}
          aria-label={`${label}: ${currentText ?? "None selected"}, ${currentEffort?.label ?? "automatic"} effort`}
          aria-haspopup="dialog"
          aria-expanded={open}
          aria-controls={panelId}
          onClick={(event) => {
            const next = !open;
            setOpen(next);
            if (next && event.detail === 0) {
              focusModelButton.current = true;
            }
          }}
          onKeyDown={handleTriggerKeyDown}
          whileTap={reduce || disabled ? undefined : { scale: 0.97 }}
          transition={SPRING_SWAP}
          className={cn(
            "group flex h-8 min-w-40 max-w-56 items-center gap-1.5 rounded-xl px-2 text-xs font-medium text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
            open && "bg-muted text-foreground",
            triggerClassName,
          )}
        >
          <span
            aria-hidden="true"
            className="flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden"
          >
            {currentModel?.icon ? (
              <span
                aria-hidden="true"
                className="grid size-4 shrink-0 place-items-center [&_svg]:size-3.5"
              >
                {currentModel.icon}
              </span>
            ) : null}
            <span className="min-w-0 flex-1 truncate text-left">
              {currentModel?.label ?? placeholder}
            </span>
            {currentEffort ? (
              <span className="w-12 shrink-0 text-left text-muted-foreground/65">
                {currentEffort.label}
              </span>
            ) : null}
          </span>
          <motion.span
            aria-hidden="true"
            animate={{ rotate: open ? 180 : 0 }}
            transition={reduce ? { duration: 0 } : SPRING_SWAP}
            className="shrink-0 text-muted-foreground/70"
          >
            <ChevronDown className="size-3.5" />
          </motion.span>
        </motion.button>
      </div>
      {panel}
    </>
  );
}