@tangle-network/agent-app 0.45.35 → 0.45.37

package/dist/{chunk-MIZMWCKW.js → chunk-3AXSERRK.js}

@@ -56,7 +56,16 @@ function ProviderLogo({ provider, size = 16 }) {
 }
 
 // src/web-react/controls.tsx
-import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { createPortal } from "react-dom";
 import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function ChevronDown({ className }) {
   return /* @__PURE__ */ jsx2("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx2("path", { d: "m6 9 6 6 6-6" }) });
@@ -88,10 +97,18 @@ function CheckGlyph({ className }) {
 function usePopover(open, setOpen) {
   const containerRef = useRef(null);
   const triggerRef = useRef(null);
+  const panelRef = useRef(null);
   useEffect(() => {
     if (!open) return;
     function onMouseDown(e) {
-      if (containerRef.current && !containerRef.current.contains(e.target)) setOpen(false);
+      const target = e.target;
+      if (containerRef.current?.contains(target)) return;
+      const panel = panelRef.current;
+      if (panel?.contains(target)) return;
+      const ownPath = panel?.getAttribute(POPOVER_SURFACE_ATTR);
+      const hitPath = target instanceof Element ? target.closest(`[${POPOVER_SURFACE_ATTR}]`)?.getAttribute(POPOVER_SURFACE_ATTR) : null;
+      if (ownPath && hitPath && (hitPath === ownPath || hitPath.startsWith(`${ownPath}${POPOVER_PATH_SEPARATOR}`))) return;
+      setOpen(false);
     }
     function onKeyDown(e) {
       if (e.key === "Escape") {
@@ -109,6 +126,7 @@ function usePopover(open, setOpen) {
   return {
     containerRef,
     triggerRef,
+    panelRef,
     triggerProps: {
       ref: triggerRef,
       "aria-haspopup": true,
@@ -116,6 +134,91 @@ function usePopover(open, setOpen) {
     }
   };
 }
+var POPOVER_GAP = 8;
+var POPOVER_VIEWPORT_MARGIN = 16;
+var POPOVER_MIN_HEIGHT = 120;
+var POPOVER_SURFACE_ATTR = "data-agent-app-popover";
+var POPOVER_PATH_SEPARATOR = "/";
+var useBrowserLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
+function PopoverSurface({
+  open,
+  triggerRef,
+  panelRef,
+  className,
+  role,
+  id,
+  matchTriggerWidth,
+  children
+}) {
+  const surfaceId = useId();
+  const [style, setStyle] = useState(() => ({
+    position: "fixed",
+    top: 0,
+    left: 0,
+    visibility: "hidden"
+  }));
+  const place = useCallback(() => {
+    const trigger = triggerRef.current;
+    const panel = panelRef.current;
+    if (!trigger || !panel) return;
+    const anchor = trigger.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    const contentHeight = panel.scrollHeight;
+    const panelWidth = panel.offsetWidth;
+    const roomAbove = anchor.top - POPOVER_GAP - POPOVER_VIEWPORT_MARGIN;
+    const roomBelow = viewportHeight - anchor.bottom - POPOVER_GAP - POPOVER_VIEWPORT_MARGIN;
+    const above = contentHeight <= roomAbove || roomAbove >= roomBelow;
+    const maxHeight = Math.max(POPOVER_MIN_HEIGHT, above ? roomAbove : roomBelow);
+    const height = Math.min(contentHeight, maxHeight);
+    const top = above ? Math.max(POPOVER_VIEWPORT_MARGIN, anchor.top - POPOVER_GAP - height) : anchor.bottom + POPOVER_GAP;
+    const rightBound = Math.max(POPOVER_VIEWPORT_MARGIN, viewportWidth - panelWidth - POPOVER_VIEWPORT_MARGIN);
+    const left = Math.min(Math.max(POPOVER_VIEWPORT_MARGIN, anchor.left), rightBound);
+    setStyle({
+      position: "fixed",
+      top,
+      left,
+      maxHeight,
+      visibility: "visible",
+      ...matchTriggerWidth ? { minWidth: anchor.width } : {}
+    });
+  }, [matchTriggerWidth, panelRef, triggerRef]);
+  useBrowserLayoutEffect(() => {
+    if (!open) {
+      setStyle({ position: "fixed", top: 0, left: 0, visibility: "hidden" });
+      return;
+    }
+    place();
+  }, [open, place]);
+  useEffect(() => {
+    if (!open) return;
+    const onViewportChange = () => place();
+    window.addEventListener("scroll", onViewportChange, true);
+    window.addEventListener("resize", onViewportChange);
+    return () => {
+      window.removeEventListener("scroll", onViewportChange, true);
+      window.removeEventListener("resize", onViewportChange);
+    };
+  }, [open, place]);
+  if (!open || typeof document === "undefined") return null;
+  const ownerPath = triggerRef.current?.closest?.(`[${POPOVER_SURFACE_ATTR}]`)?.getAttribute(POPOVER_SURFACE_ATTR);
+  const path = ownerPath ? `${ownerPath}${POPOVER_PATH_SEPARATOR}${surfaceId}` : surfaceId;
+  return createPortal(
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        ref: panelRef,
+        id,
+        role,
+        style,
+        ...{ [POPOVER_SURFACE_ATTR]: path },
+        className: `z-[1000] ${className ?? ""}`,
+        children
+      }
+    ),
+    document.body
+  );
+}
 var POPOVER_OPTION_FOCUS = "focus-visible:[outline-offset:-2px]";
 var OVERLAY_SHADOW = "shadow-[0_1px_2px_hsl(var(--foreground)/0.05),0_12px_28px_hsl(var(--foreground)/0.07)] dark:shadow-[0_1px_2px_hsl(var(--foreground)/0.14),0_12px_28px_hsl(var(--foreground)/0.22)]";
 function usePending() {
@@ -191,19 +294,12 @@ function ModelRow({
 function ModelPicker({ value, onChange, models, loading, renderProviderBadge, recommendedLabel = "Recommended", priorityGroup }) {
   const [open, setOpen] = useState(false);
   const [query, setQuery] = useState("");
-  const { containerRef, triggerProps } = usePopover(open, setOpen);
+  const { containerRef, triggerRef, panelRef, triggerProps } = usePopover(open, setOpen);
   const inputRef = useRef(null);
-  const popoverRef = useRef(null);
+  const panelId = useId();
   useEffect(() => {
     if (open) inputRef.current?.focus();
   }, [open]);
-  useEffect(() => {
-    if (!open) return;
-    const el = popoverRef.current;
-    if (!el) return;
-    const overflowRight = el.getBoundingClientRect().right - (window.innerWidth - 16);
-    el.style.transform = overflowRight > 0 ? `translateX(-${Math.ceil(overflowRight)}px)` : "";
-  }, [open]);
   const selected = models.find((m) => m.id === value);
   const filtered = useMemo(() => {
     const q = query.trim().toLowerCase();
@@ -236,6 +332,7 @@ function ModelPicker({ value, onChange, models, loading, renderProviderBadge, re
       {
         type: "button",
         ...triggerProps,
+        "aria-controls": open ? panelId : void 0,
         onClick: () => setOpen(!open),
         className: "inline-flex items-center gap-1.5 rounded-full border border-border bg-card px-3 py-1.5 text-sm font-medium text-foreground transition hover:bg-accent",
         children: [
@@ -245,44 +342,54 @@ function ModelPicker({ value, onChange, models, loading, renderProviderBadge, re
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxs2("div", { ref: popoverRef, className: `absolute bottom-full left-0 z-50 mb-2 w-[420px] max-w-[calc(100vw-2rem)] overflow-hidden rounded-xl border border-border bg-popover ${OVERLAY_SHADOW}`, children: [
-      /* @__PURE__ */ jsx2("div", { className: "border-b border-border px-3 py-2", children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 rounded-lg border border-border bg-background px-3 py-2", children: [
-        /* @__PURE__ */ jsx2(SearchGlyph, { className: "h-3.5 w-3.5 text-muted-foreground" }),
-        /* @__PURE__ */ jsx2(
-          "input",
-          {
-            ref: inputRef,
-            type: "text",
-            value: query,
-            onChange: (e) => setQuery(e.target.value),
-            placeholder: "Search models...",
-            className: "flex-1 bg-transparent text-sm placeholder:text-muted-foreground"
-          }
-        )
-      ] }) }),
-      /* @__PURE__ */ jsxs2("div", { className: "max-h-[400px] overflow-y-auto p-1 pb-2", children: [
-        loading && /* @__PURE__ */ jsx2("div", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: "Loading models..." }),
-        !loading && filtered && /* @__PURE__ */ jsxs2(Fragment, { children: [
-          filtered.length === 0 && /* @__PURE__ */ jsx2("div", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: "No models match your search" }),
-          filtered.map((m) => /* @__PURE__ */ jsx2(ModelRow, { model: m, selected: m.id === value, onSelect: () => select(m.id), renderProviderBadge }, m.id))
-        ] }),
-        !loading && !filtered && models.length === 0 && /* @__PURE__ */ jsx2("div", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: "No models available" }),
-        !loading && !filtered && models.length > 0 && /* @__PURE__ */ jsxs2(Fragment, { children: [
-          priorityGroup && sections.priority.length > 0 && /* @__PURE__ */ jsxs2(Fragment, { children: [
-            /* @__PURE__ */ jsx2(SectionHeader, { children: priorityGroup.label }),
-            sections.priority.map((m) => /* @__PURE__ */ jsx2(ModelRow, { model: m, selected: m.id === value, onSelect: () => select(m.id), renderProviderBadge }, m.id))
-          ] }),
-          sections.recommended.length > 0 && /* @__PURE__ */ jsxs2(Fragment, { children: [
-            /* @__PURE__ */ jsx2(SectionHeader, { children: recommendedLabel }),
-            sections.recommended.map((m) => /* @__PURE__ */ jsx2(ModelRow, { model: m, selected: m.id === value, onSelect: () => select(m.id), renderProviderBadge }, m.id))
-          ] }),
-          sections.byProvider.map((g) => /* @__PURE__ */ jsxs2("div", { children: [
-            /* @__PURE__ */ jsx2(SectionHeader, { children: g.provider }),
-            g.items.map((m) => /* @__PURE__ */ jsx2(ModelRow, { model: m, selected: m.id === value, onSelect: () => select(m.id), renderProviderBadge }, m.id))
-          ] }, g.provider))
-        ] })
-      ] })
-    ] })
+    /* @__PURE__ */ jsxs2(
+      PopoverSurface,
+      {
+        open,
+        id: panelId,
+        triggerRef,
+        panelRef,
+        className: `flex w-[420px] max-w-[calc(100vw-2rem)] flex-col overflow-hidden rounded-xl border border-border bg-popover ${OVERLAY_SHADOW}`,
+        children: [
+          /* @__PURE__ */ jsx2("div", { className: "shrink-0 border-b border-border px-3 py-2", children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 rounded-lg border border-border bg-background px-3 py-2", children: [
+            /* @__PURE__ */ jsx2(SearchGlyph, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+            /* @__PURE__ */ jsx2(
+              "input",
+              {
+                ref: inputRef,
+                type: "text",
+                value: query,
+                onChange: (e) => setQuery(e.target.value),
+                placeholder: "Search models...",
+                className: "flex-1 bg-transparent text-sm placeholder:text-muted-foreground"
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsxs2("div", { className: "max-h-[400px] min-h-0 overflow-y-auto p-1 pb-2", children: [
+            loading && /* @__PURE__ */ jsx2("div", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: "Loading models..." }),
+            !loading && filtered && /* @__PURE__ */ jsxs2(Fragment, { children: [
+              filtered.length === 0 && /* @__PURE__ */ jsx2("div", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: "No models match your search" }),
+              filtered.map((m) => /* @__PURE__ */ jsx2(ModelRow, { model: m, selected: m.id === value, onSelect: () => select(m.id), renderProviderBadge }, m.id))
+            ] }),
+            !loading && !filtered && models.length === 0 && /* @__PURE__ */ jsx2("div", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: "No models available" }),
+            !loading && !filtered && models.length > 0 && /* @__PURE__ */ jsxs2(Fragment, { children: [
+              priorityGroup && sections.priority.length > 0 && /* @__PURE__ */ jsxs2(Fragment, { children: [
+                /* @__PURE__ */ jsx2(SectionHeader, { children: priorityGroup.label }),
+                sections.priority.map((m) => /* @__PURE__ */ jsx2(ModelRow, { model: m, selected: m.id === value, onSelect: () => select(m.id), renderProviderBadge }, m.id))
+              ] }),
+              sections.recommended.length > 0 && /* @__PURE__ */ jsxs2(Fragment, { children: [
+                /* @__PURE__ */ jsx2(SectionHeader, { children: recommendedLabel }),
+                sections.recommended.map((m) => /* @__PURE__ */ jsx2(ModelRow, { model: m, selected: m.id === value, onSelect: () => select(m.id), renderProviderBadge }, m.id))
+              ] }),
+              sections.byProvider.map((g) => /* @__PURE__ */ jsxs2("div", { children: [
+                /* @__PURE__ */ jsx2(SectionHeader, { children: g.provider }),
+                g.items.map((m) => /* @__PURE__ */ jsx2(ModelRow, { model: m, selected: m.id === value, onSelect: () => select(m.id), renderProviderBadge }, m.id))
+              ] }, g.provider))
+            ] })
+          ] })
+        ]
+      }
+    )
   ] });
 }
 var DEFAULT_EFFORT_LEVELS = [
@@ -314,7 +421,8 @@ function EffortMeter({ fill, className }) {
 }
 function EffortPicker({ value, onChange, levels = DEFAULT_EFFORT_LEVELS, label = "Thinking" }) {
   const [open, setOpen] = useState(false);
-  const { containerRef, triggerProps } = usePopover(open, setOpen);
+  const { containerRef, triggerRef, panelRef, triggerProps } = usePopover(open, setOpen);
+  const panelId = useId();
   const selected = levels.find((l) => l.id === value) ?? levels[2] ?? levels[0];
   return /* @__PURE__ */ jsxs2("div", { ref: containerRef, className: "relative inline-flex", children: [
     /* @__PURE__ */ jsxs2(
@@ -322,6 +430,7 @@ function EffortPicker({ value, onChange, levels = DEFAULT_EFFORT_LEVELS, label =
       {
         type: "button",
         ...triggerProps,
+        "aria-controls": open ? panelId : void 0,
         onClick: () => setOpen(!open),
         title: label ? `${label} \u2014 how hard the agent reasons before answering` : "Reasoning effort",
         className: "inline-flex min-h-[36px] items-center gap-1.5 rounded-full border border-border bg-card px-3 py-1.5 text-sm font-medium text-foreground transition hover:bg-accent",
@@ -339,31 +448,42 @@ function EffortPicker({ value, onChange, levels = DEFAULT_EFFORT_LEVELS, label =
         ]
       }
     ),
-    open && /* @__PURE__ */ jsx2("div", { role: "menu", className: `absolute bottom-full left-0 z-50 mb-2 w-44 overflow-hidden rounded-xl border border-border bg-popover p-1 ${OVERLAY_SHADOW}`, children: levels.map((l) => /* @__PURE__ */ jsxs2(
-      "button",
+    /* @__PURE__ */ jsx2(
+      PopoverSurface,
       {
-        type: "button",
-        role: "menuitemradio",
-        "aria-checked": l.id === value,
-        onClick: () => {
-          onChange(l.id);
-          setOpen(false);
-        },
-        className: `flex min-h-[40px] w-full items-center gap-2 rounded-md px-3 py-2 text-left text-sm transition ${POPOVER_OPTION_FOCUS} ${l.id === value ? "bg-primary/10 font-medium" : "hover:bg-accent"}`,
-        children: [
-          /* @__PURE__ */ jsx2(BrainGlyph, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
-          /* @__PURE__ */ jsx2("span", { className: "truncate", children: l.label }),
-          /* @__PURE__ */ jsx2(EffortMeter, { fill: effortMeterFill(l.id, levels), className: "ml-auto text-foreground" }),
-          l.id === value && /* @__PURE__ */ jsx2(CheckGlyph, { className: "h-3.5 w-3.5 shrink-0 text-primary" })
-        ]
-      },
-      l.id
-    )) })
+        open,
+        id: panelId,
+        role: "menu",
+        triggerRef,
+        panelRef,
+        className: `w-44 overflow-y-auto rounded-xl border border-border bg-popover p-1 ${OVERLAY_SHADOW}`,
+        children: levels.map((l) => /* @__PURE__ */ jsxs2(
+          "button",
+          {
+            type: "button",
+            role: "menuitemradio",
+            "aria-checked": l.id === value,
+            onClick: () => {
+              onChange(l.id);
+              setOpen(false);
+            },
+            className: `flex min-h-[40px] w-full items-center gap-2 rounded-md px-3 py-2 text-left text-sm transition ${POPOVER_OPTION_FOCUS} ${l.id === value ? "bg-primary/10 font-medium" : "hover:bg-accent"}`,
+            children: [
+              /* @__PURE__ */ jsx2(BrainGlyph, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
+              /* @__PURE__ */ jsx2("span", { className: "truncate", children: l.label }),
+              /* @__PURE__ */ jsx2(EffortMeter, { fill: effortMeterFill(l.id, levels), className: "ml-auto text-foreground" }),
+              l.id === value && /* @__PURE__ */ jsx2(CheckGlyph, { className: "h-3.5 w-3.5 shrink-0 text-primary" })
+            ]
+          },
+          l.id
+        ))
+      }
+    )
   ] });
 }
 
 // src/web-react/use-composer-attachments.ts
-import { useCallback, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
 function newId() {
   const cryptoObject = globalThis.crypto;
   if (typeof cryptoObject?.randomUUID === "function") return cryptoObject.randomUUID();
@@ -416,7 +536,7 @@ function useComposerAttachments(options) {
   const [staged, setStagedState] = useState2([]);
   const stagedRef = useRef2([]);
   const controllersRef = useRef2(/* @__PURE__ */ new Map());
-  const setStaged = useCallback(
+  const setStaged = useCallback2(
     (updater) => {
       const next = typeof updater === "function" ? updater(stagedRef.current) : updater;
       stagedRef.current = next;
@@ -424,7 +544,7 @@ function useComposerAttachments(options) {
     },
     []
   );
-  const upload = useCallback(
+  const upload = useCallback2(
     async (id, file, name) => {
       const opts = optionsRef.current;
       setStaged(
@@ -487,7 +607,7 @@ function useComposerAttachments(options) {
     },
     [setStaged]
   );
-  const addFiles = useCallback(
+  const addFiles = useCallback2(
     async (files) => {
       const opts = optionsRef.current;
       const enabled2 = opts.enabled ?? true;
@@ -567,7 +687,7 @@ function useComposerAttachments(options) {
     },
     [setStaged, upload]
   );
-  const retry = useCallback(
+  const retry = useCallback2(
     (id) => {
       const entry = stagedRef.current.find((s) => s.id === id);
       if (!entry) return;
@@ -575,7 +695,7 @@ function useComposerAttachments(options) {
     },
     [upload]
   );
-  const removeAttachment = useCallback(
+  const removeAttachment = useCallback2(
     (id) => {
       controllersRef.current.get(id)?.abort();
       controllersRef.current.delete(id);
@@ -585,7 +705,7 @@ function useComposerAttachments(options) {
     },
     [setStaged]
   );
-  const clear = useCallback(() => {
+  const clear = useCallback2(() => {
     for (const controller of controllersRef.current.values()) controller.abort();
     controllersRef.current.clear();
     for (const entry of stagedRef.current) {
@@ -723,7 +843,7 @@ function HarnessGlyph({ harness, className }) {
 }
 
 // src/web-react/agent-session-controls.tsx
-import { useMemo as useMemo3, useState as useState3 } from "react";
+import { useId as useId2, useMemo as useMemo3, useState as useState3 } from "react";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var HARNESS_LABELS = {
   opencode: "OpenCode (any model)",
@@ -759,7 +879,8 @@ function HarnessPicker({
   available
 }) {
   const [open, setOpen] = useState3(false);
-  const { containerRef, triggerProps } = usePopover(open, setOpen);
+  const { containerRef, triggerRef, panelRef, triggerProps } = usePopover(open, setOpen);
+  const panelId = useId2();
   const options = available ?? Object.keys(HARNESS_LABELS);
   return /* @__PURE__ */ jsxs4("div", { ref: containerRef, className: "relative inline-flex", children: [
     /* @__PURE__ */ jsxs4(
@@ -767,6 +888,7 @@ function HarnessPicker({
       {
         type: "button",
         ...triggerProps,
+        "aria-controls": open ? panelId : void 0,
         onClick: () => setOpen(!open),
         title: "Agent backend",
         className: `inline-flex w-full items-center justify-between gap-1.5 rounded-lg border border-border bg-card px-3 py-1.5 text-sm font-medium text-foreground transition hover:bg-accent ${FOCUS_RING}`,
@@ -779,25 +901,37 @@ function HarnessPicker({
         ]
       }
     ),
-    open && /* @__PURE__ */ jsx4("div", { role: "menu", className: `absolute bottom-full left-0 z-50 mb-2 max-h-64 w-full min-w-[248px] overflow-y-auto rounded-xl border border-border bg-popover p-1 ${OVERLAY_SHADOW}`, children: options.map((h) => /* @__PURE__ */ jsxs4(
-      "button",
+    /* @__PURE__ */ jsx4(
+      PopoverSurface,
       {
-        type: "button",
-        role: "menuitemradio",
-        "aria-checked": h === value,
-        onClick: () => {
-          onChange(h);
-          setOpen(false);
-        },
-        className: `flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-left text-sm transition ${FOCUS_RING} ${h === value ? "bg-primary/10 font-medium" : "hover:bg-accent"}`,
-        children: [
-          /* @__PURE__ */ jsx4(HarnessGlyph, { harness: h, className: "h-4 w-4 shrink-0 text-foreground" }),
-          /* @__PURE__ */ jsx4("span", { className: "truncate", children: harnessLabel(h) }),
-          h === value && /* @__PURE__ */ jsx4(CheckGlyph, { className: "ml-auto h-3.5 w-3.5 shrink-0 text-primary" })
-        ]
-      },
-      h
-    )) })
+        open,
+        id: panelId,
+        role: "menu",
+        triggerRef,
+        panelRef,
+        matchTriggerWidth: true,
+        className: `max-h-64 min-w-[248px] overflow-y-auto rounded-xl border border-border bg-popover p-1 ${OVERLAY_SHADOW}`,
+        children: options.map((h) => /* @__PURE__ */ jsxs4(
+          "button",
+          {
+            type: "button",
+            role: "menuitemradio",
+            "aria-checked": h === value,
+            onClick: () => {
+              onChange(h);
+              setOpen(false);
+            },
+            className: `flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-left text-sm transition ${FOCUS_RING} ${h === value ? "bg-primary/10 font-medium" : "hover:bg-accent"}`,
+            children: [
+              /* @__PURE__ */ jsx4(HarnessGlyph, { harness: h, className: "h-4 w-4 shrink-0 text-foreground" }),
+              /* @__PURE__ */ jsx4("span", { className: "truncate", children: harnessLabel(h) }),
+              h === value && /* @__PURE__ */ jsx4(CheckGlyph, { className: "ml-auto h-3.5 w-3.5 shrink-0 text-primary" })
+            ]
+          },
+          h
+        ))
+      }
+    )
   ] });
 }
 function useCoherentHandlers(props) {
@@ -832,7 +966,8 @@ function AgentSessionControls(props) {
   } = props;
   const { onModel, onHarness } = useCoherentHandlers(props);
   const [open, setOpen] = useState3(false);
-  const { containerRef: popoverRef, triggerProps } = usePopover(open, setOpen);
+  const { containerRef: popoverRef, triggerRef, panelRef, triggerProps } = usePopover(open, setOpen);
+  const panelId = useId2();
   const selectedModel = models.find((m) => m.id === model);
   const showEffort = selectedModel?.supportsReasoning ?? true;
   const modelPicker = /* @__PURE__ */ jsx4(
@@ -861,6 +996,7 @@ function AgentSessionControls(props) {
         {
           type: "button",
           ...triggerProps,
+          "aria-controls": open ? panelId : void 0,
           onClick: () => setOpen(!open),
           title: "Model settings \u2014 pick the agent backend and how hard it thinks",
           className: `flex h-8 w-8 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground data-[state=open]:bg-muted ${FOCUS_RING}`,
@@ -868,18 +1004,28 @@ function AgentSessionControls(props) {
           children: /* @__PURE__ */ jsx4(GearGlyph, { className: "h-4 w-4" })
         }
       ),
-      open && /* @__PURE__ */ jsxs4("div", { className: `absolute bottom-full left-0 z-50 mb-2 w-72 space-y-3 rounded-xl border border-border bg-popover p-3 ${OVERLAY_SHADOW}`, children: [
-        showHarness && /* @__PURE__ */ jsxs4("div", { className: "space-y-1.5", children: [
-          /* @__PURE__ */ jsx4("p", { className: "text-xs font-medium text-foreground", children: "Agent backend" }),
-          /* @__PURE__ */ jsx4(HarnessPicker, { value: harness, onChange: onHarness, available: availableHarnesses }),
-          /* @__PURE__ */ jsx4("p", { className: "text-[11px] leading-snug text-muted-foreground", children: "The engine that runs the agent. Switching it keeps your model choice compatible." })
-        ] }),
-        showEffort && /* @__PURE__ */ jsxs4("div", { className: "space-y-1.5", children: [
-          /* @__PURE__ */ jsx4("p", { className: "text-xs font-medium text-foreground", children: "Thinking" }),
-          /* @__PURE__ */ jsx4(EffortPicker, { value: effort, onChange: onEffortChange, levels: effortLevels, label: "" }),
-          /* @__PURE__ */ jsx4("p", { className: "text-[11px] leading-snug text-muted-foreground", children: "How hard the agent thinks before answering. Higher is slower but more thorough." })
-        ] })
-      ] })
+      /* @__PURE__ */ jsxs4(
+        PopoverSurface,
+        {
+          open,
+          id: panelId,
+          triggerRef,
+          panelRef,
+          className: `w-72 space-y-3 overflow-y-auto rounded-xl border border-border bg-popover p-3 ${OVERLAY_SHADOW}`,
+          children: [
+            showHarness && /* @__PURE__ */ jsxs4("div", { className: "space-y-1.5", children: [
+              /* @__PURE__ */ jsx4("p", { className: "text-xs font-medium text-foreground", children: "Agent backend" }),
+              /* @__PURE__ */ jsx4(HarnessPicker, { value: harness, onChange: onHarness, available: availableHarnesses }),
+              /* @__PURE__ */ jsx4("p", { className: "text-[11px] leading-snug text-muted-foreground", children: "The engine that runs the agent. Switching it keeps your model choice compatible." })
+            ] }),
+            showEffort && /* @__PURE__ */ jsxs4("div", { className: "space-y-1.5", children: [
+              /* @__PURE__ */ jsx4("p", { className: "text-xs font-medium text-foreground", children: "Thinking" }),
+              /* @__PURE__ */ jsx4(EffortPicker, { value: effort, onChange: onEffortChange, levels: effortLevels, label: "" }),
+              /* @__PURE__ */ jsx4("p", { className: "text-[11px] leading-snug text-muted-foreground", children: "How hard the agent thinks before answering. Higher is slower but more thorough." })
+            ] })
+          ]
+        }
+      )
     ] })
   ] });
 }
@@ -888,6 +1034,8 @@ export {
   ProviderLogo,
   ChevronDown,
   usePopover,
+  POPOVER_SURFACE_ATTR,
+  PopoverSurface,
   POPOVER_OPTION_FOCUS,
   OVERLAY_SHADOW,
   usePending,
@@ -901,4 +1049,4 @@ export {
   HarnessGlyph,
   AgentSessionControls
 };
-//# sourceMappingURL=chunk-MIZMWCKW.js.map
+//# sourceMappingURL=chunk-3AXSERRK.js.map