@tangle-network/sandbox-ui 0.96.0 → 0.97.0

package/dist/{chunk-I5HGKZCB.js → chunk-A4AABEX4.js}

@@ -191,18 +191,38 @@ import {
   reasoningEffortsFor
 } from "@tangle-network/agent-interface";
 import * as DropdownMenu2 from "@radix-ui/react-dropdown-menu";
-import { ChevronDown as ChevronDown3, Lock, Plus as Plus2, SlidersHorizontal } from "lucide-react";
+import { ChevronDown as ChevronDown3, SlidersHorizontal } from "lucide-react";
+import * as React5 from "react";
+
+// src/chat/harness-model-compat.ts
+import {
+  harnessSupportsModel,
+  snapModelToHarness as snapModelIdToHarness
+} from "@tangle-network/agent-interface";
+import { modelProvider, snapHarnessToModel } from "@tangle-network/agent-interface";
+function isModelCompatibleWithHarness(harness, modelId) {
+  return harnessSupportsModel(harness, modelId);
+}
+function snapModelToHarness(harness, modelId, models) {
+  return snapModelIdToHarness(harness, modelId, models.map(canonicalModelId));
+}
+
+// src/chat/informative-lock.tsx
+import { Lock, Plus } from "lucide-react";
 import * as React3 from "react";
 
 // src/lib/use-click-outside.ts
 import * as React from "react";
-function useClickOutside(onOutside) {
+function useClickOutside(onOutside, extras) {
   const ref = React.useRef(null);
+  const extrasRef = React.useRef(extras);
+  extrasRef.current = extras;
   React.useEffect(() => {
     function handler(event) {
-      if (ref.current && !ref.current.contains(event.target)) {
-        onOutside();
-      }
+      const target = event.target;
+      if (!ref.current || ref.current.contains(target)) return;
+      if (extrasRef.current?.some((extra) => extra.current?.contains(target))) return;
+      onOutside();
     }
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
@@ -210,23 +230,178 @@ function useClickOutside(onOutside) {
   return ref;
 }
 
-// src/chat/harness-model-compat.ts
-import {
-  harnessSupportsModel,
-  snapModelToHarness as snapModelIdToHarness
-} from "@tangle-network/agent-interface";
-import { modelProvider, snapHarnessToModel } from "@tangle-network/agent-interface";
-function isModelCompatibleWithHarness(harness, modelId) {
-  return harnessSupportsModel(harness, modelId);
-}
-function snapModelToHarness(harness, modelId, models) {
-  return snapModelIdToHarness(harness, modelId, models.map(canonicalModelId));
+// src/chat/anchored-popover.tsx
+import * as React2 from "react";
+import { createPortal } from "react-dom";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var AnchoredPopover = React2.forwardRef(
+  function AnchoredPopover2({ anchorRef, side, children, className, style, ...rest }, forwardedRef) {
+    const innerRef = React2.useRef(null);
+    const setRefs = (node) => {
+      innerRef.current = node;
+      if (typeof forwardedRef === "function") forwardedRef(node);
+      else if (forwardedRef) forwardedRef.current = node;
+    };
+    const [position, setPosition] = React2.useState(null);
+    const place = React2.useCallback(() => {
+      const anchor = anchorRef.current;
+      if (!anchor) return;
+      const rect = anchor.getBoundingClientRect();
+      const width = innerRef.current?.offsetWidth ?? 0;
+      const margin = 8;
+      const left = Math.max(
+        margin,
+        Math.min(rect.left, window.innerWidth - width - margin)
+      );
+      setPosition(
+        side === "top" ? { left, bottom: window.innerHeight - rect.top + margin } : { left, top: rect.bottom + margin }
+      );
+    }, [anchorRef, side]);
+    React2.useLayoutEffect(() => {
+      place();
+      window.addEventListener("resize", place);
+      window.addEventListener("scroll", place, true);
+      return () => {
+        window.removeEventListener("resize", place);
+        window.removeEventListener("scroll", place, true);
+      };
+    }, [place]);
+    return createPortal(
+      /* @__PURE__ */ jsx2(
+        "div",
+        {
+          ...rest,
+          ref: setRefs,
+          className: cn("fixed z-50", className),
+          style: {
+            ...style,
+            pointerEvents: "auto",
+            ...position ?? { visibility: "hidden", left: 0, top: 0 }
+          },
+          children
+        }
+      ),
+      document.body
+    );
+  }
+);
+
+// src/chat/informative-lock.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function InformativeLock({
+  children,
+  ariaLabel,
+  lockTitle,
+  lockBody,
+  newChatLabel,
+  onNewChat,
+  className,
+  triggerClassName,
+  popoverClassName,
+  side = "top"
+}) {
+  const [open, setOpen] = React3.useState(false);
+  const closeTimer = React3.useRef(null);
+  const popoverRef = React3.useRef(null);
+  const ref = useClickOutside(() => setOpen(false), [popoverRef]);
+  const cancelClose = React3.useCallback(() => {
+    if (closeTimer.current) {
+      clearTimeout(closeTimer.current);
+      closeTimer.current = null;
+    }
+  }, []);
+  const scheduleClose = React3.useCallback(() => {
+    cancelClose();
+    closeTimer.current = setTimeout(() => setOpen(false), 150);
+  }, [cancelClose]);
+  React3.useEffect(() => cancelClose, [cancelClose]);
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ref,
+      className: cn("relative inline-flex", className),
+      onMouseEnter: () => {
+        cancelClose();
+        setOpen(true);
+      },
+      onMouseLeave: scheduleClose,
+      onKeyDown: (event) => {
+        if (event.key === "Escape") setOpen(false);
+      },
+      children: [
+        /* @__PURE__ */ jsx3(
+          "button",
+          {
+            type: "button",
+            onClick: () => setOpen(true),
+            "data-state": open ? "open" : "closed",
+            "aria-label": ariaLabel,
+            "aria-haspopup": "dialog",
+            "aria-expanded": open,
+            className: cn(
+              "inline-flex h-8 items-center gap-1.5 rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container px-2.5 opacity-60",
+              "text-xs font-medium text-foreground shadow-sm transition-colors",
+              "hover:border-[var(--md3-outline-variant)] hover:bg-surface-container-high focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+              "data-[state=open]:border-[var(--md3-outline-variant)] data-[state=open]:bg-surface-container-high",
+              triggerClassName
+            ),
+            children
+          }
+        ),
+        open && /* @__PURE__ */ jsxs2(
+          AnchoredPopover,
+          {
+            ref: popoverRef,
+            anchorRef: ref,
+            side,
+            role: "dialog",
+            onMouseEnter: () => {
+              cancelClose();
+              setOpen(true);
+            },
+            onMouseLeave: scheduleClose,
+            className: cn(
+              "w-72 rounded-[var(--radius-md)] border border-[var(--md3-outline-variant)] bg-surface-container-highest p-3",
+              "shadow-[0_8px_30px_rgba(0,0,0,0.45)] ring-1 ring-[#ffffff14]",
+              popoverClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxs2("p", { className: "flex items-start gap-2 text-sm font-medium text-foreground", children: [
+                /* @__PURE__ */ jsx3(Lock, { className: "mt-0.5 h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
+                /* @__PURE__ */ jsx3("span", { children: lockTitle })
+              ] }),
+              /* @__PURE__ */ jsx3("p", { className: "mt-1.5 text-xs text-muted-foreground", children: lockBody }),
+              /* @__PURE__ */ jsxs2(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    setOpen(false);
+                    onNewChat();
+                  },
+                  className: cn(
+                    "mt-3 flex w-full items-center justify-center gap-1.5 rounded-md px-2.5 py-2 text-sm font-medium text-foreground",
+                    "bg-primary/10 ring-1 ring-inset ring-primary/25 transition-colors",
+                    "hover:bg-primary/15 focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx3(Plus, { className: "h-4 w-4" }),
+                    newChatLabel
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 
 // src/chat/agent-profile-picker.tsx
-import { Bot, Check, ChevronDown as ChevronDown2, Pencil, Plus, Trash2 } from "lucide-react";
-import * as React2 from "react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Bot, Check, ChevronDown as ChevronDown2, Pencil, Plus as Plus2, Trash2 } from "lucide-react";
+import * as React4 from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function profileSubtitle(profile) {
   if (profile.description) return profile.description;
   const count = profile.capabilities?.length ?? 0;
@@ -241,21 +416,33 @@ function AgentProfilePicker({
   onUpdate,
   onDelete,
   disabled,
+  locked,
+  lockReason,
+  onNewChat,
   className,
+  triggerClassName,
+  popoverClassName,
   side = "top"
 }) {
-  const [open, setOpen] = React2.useState(false);
-  const [composing, setComposing] = React2.useState(
+  const [open, setOpen] = React4.useState(false);
+  const [composing, setComposing] = React4.useState(
     null
   );
+  const popoverRef = React4.useRef(null);
   const ref = useClickOutside(() => {
     setOpen(false);
     setComposing(null);
-  });
+  }, [popoverRef]);
   const canAuthor = Boolean(capabilities && (onCreate || onUpdate));
   const builtins = profiles.filter((profile) => profile.builtin);
   const custom = profiles.filter((profile) => !profile.builtin);
   const selected = profiles.find((profile) => profile.id === value);
+  const selectedName = selected?.name ?? value;
+  React4.useEffect(() => {
+    if (!locked) return;
+    setOpen(false);
+    setComposing(null);
+  }, [locked]);
   function select(id) {
     onChange(id);
     setOpen(false);
@@ -265,38 +452,64 @@ function AgentProfilePicker({
     else await onCreate?.(draft);
     setComposing(null);
   }
-  return /* @__PURE__ */ jsxs2("div", { ref, className: cn("relative inline-flex", className), children: [
-    /* @__PURE__ */ jsxs2(
+  if (locked && onNewChat) {
+    return /* @__PURE__ */ jsxs3(
+      InformativeLock,
+      {
+        ariaLabel: "Agent profile (locked)",
+        lockTitle: `Profile fixed to ${selectedName} for this conversation.`,
+        lockBody: "Conversations stay on one profile.",
+        newChatLabel: "New chat to switch profile",
+        onNewChat,
+        className,
+        triggerClassName,
+        popoverClassName,
+        side,
+        children: [
+          /* @__PURE__ */ jsx4(Bot, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+          /* @__PURE__ */ jsx4("span", { className: "max-w-[140px] truncate", children: selectedName })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs3("div", { ref, className: cn("relative inline-flex", className), children: [
+    /* @__PURE__ */ jsxs3(
       "button",
       {
         type: "button",
-        disabled,
+        disabled: disabled || locked,
+        title: locked ? lockReason : void 0,
         onClick: () => setOpen((v) => !v),
         className: cn(
           "inline-flex h-8 items-center gap-1.5 rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container px-2.5",
           "text-xs font-medium text-foreground shadow-sm transition-colors",
           "hover:border-[var(--md3-outline-variant)] hover:bg-surface-container-high focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
           "data-[state=open]:border-[var(--md3-outline-variant)] data-[state=open]:bg-surface-container-high",
-          "disabled:cursor-not-allowed disabled:opacity-60"
+          "disabled:cursor-not-allowed disabled:opacity-60",
+          triggerClassName
         ),
         "data-state": open ? "open" : "closed",
         "aria-label": "Agent profile",
         children: [
-          /* @__PURE__ */ jsx2(Bot, { className: "h-3.5 w-3.5 text-muted-foreground" }),
-          /* @__PURE__ */ jsx2("span", { className: "max-w-[140px] truncate", children: selected?.name ?? value }),
-          /* @__PURE__ */ jsx2(ChevronDown2, { className: "h-3.5 w-3.5 text-muted-foreground" })
+          /* @__PURE__ */ jsx4(Bot, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+          /* @__PURE__ */ jsx4("span", { className: "max-w-[140px] truncate", children: selectedName }),
+          !locked && /* @__PURE__ */ jsx4(ChevronDown2, { className: "ml-auto h-3.5 w-3.5 shrink-0 text-muted-foreground" })
         ]
       }
     ),
-    open && /* @__PURE__ */ jsx2(
-      "div",
+    open && !locked && /* @__PURE__ */ jsx4(
+      AnchoredPopover,
       {
+        ref: popoverRef,
+        anchorRef: ref,
+        side,
         className: cn(
-          "absolute left-0 z-50 w-[320px] overflow-hidden rounded-[var(--radius-md)] border border-[var(--md3-outline-variant)] bg-surface-container-highest p-1",
+          "w-[min(320px,calc(100vw-2rem))] overflow-hidden rounded-[var(--radius-md)] border border-[var(--md3-outline-variant)] bg-surface-container-highest p-1",
           "shadow-[0_8px_30px_rgba(0,0,0,0.45)] ring-1 ring-[#ffffff14]",
-          side === "top" ? "bottom-full mb-2" : "top-full mt-2"
+          popoverClassName
         ),
-        children: composing ? /* @__PURE__ */ jsx2(
+        "data-testid": "agent-profile-popover",
+        children: composing ? /* @__PURE__ */ jsx4(
           ProfileForm,
           {
             capabilities: capabilities ?? [],
@@ -304,9 +517,9 @@ function AgentProfilePicker({
             onCancel: () => setComposing(null),
             onSave: save
           }
-        ) : /* @__PURE__ */ jsxs2("div", { className: "max-h-[min(60vh,420px)] overflow-y-auto", children: [
-          /* @__PURE__ */ jsx2(SectionHeader, { children: "Modes" }),
-          builtins.map((profile) => /* @__PURE__ */ jsx2(
+        ) : /* @__PURE__ */ jsxs3("div", { className: "max-h-[min(60vh,420px)] overflow-y-auto", children: [
+          /* @__PURE__ */ jsx4(SectionHeader, { children: "Modes" }),
+          builtins.map((profile) => /* @__PURE__ */ jsx4(
             ProfileRow,
             {
               active: profile.id === value,
@@ -316,8 +529,8 @@ function AgentProfilePicker({
             },
             profile.id
           )),
-          custom.length > 0 && /* @__PURE__ */ jsx2(SectionHeader, { children: "Your agents" }),
-          custom.map((profile) => /* @__PURE__ */ jsx2(
+          custom.length > 0 && /* @__PURE__ */ jsx4(SectionHeader, { children: "Your agents" }),
+          custom.map((profile) => /* @__PURE__ */ jsx4(
             ProfileRow,
             {
               active: profile.id === value,
@@ -329,14 +542,14 @@ function AgentProfilePicker({
             },
             profile.id
           )),
-          canAuthor && /* @__PURE__ */ jsxs2(
+          canAuthor && /* @__PURE__ */ jsxs3(
             "button",
             {
               type: "button",
               onClick: () => setComposing("new"),
               className: "mt-1 flex w-full items-center gap-2 rounded-md px-2.5 py-2 text-left text-sm text-[var(--accent-text)] transition-colors hover:bg-accent/40",
               children: [
-                /* @__PURE__ */ jsx2(Plus, { className: "h-4 w-4" }),
+                /* @__PURE__ */ jsx4(Plus2, { className: "h-4 w-4" }),
                 " New agent\u2026"
               ]
             }
@@ -347,7 +560,7 @@ function AgentProfilePicker({
   ] });
 }
 function SectionHeader({ children }) {
-  return /* @__PURE__ */ jsx2("div", { className: "px-2.5 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70", children });
+  return /* @__PURE__ */ jsx4("div", { className: "px-2.5 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70", children });
 }
 function ProfileRow({
   active,
@@ -357,7 +570,7 @@ function ProfileRow({
   onEdit,
   onDelete
 }) {
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "div",
     {
       className: cn(
@@ -365,40 +578,40 @@ function ProfileRow({
         active ? "bg-[var(--accent-surface-soft)] text-[var(--accent-text)]" : "hover:bg-accent/40"
       ),
       children: [
-        /* @__PURE__ */ jsxs2(
+        /* @__PURE__ */ jsxs3(
           "button",
           {
             type: "button",
             onClick: onSelect,
             className: "flex min-w-0 flex-1 items-center gap-2 text-left",
             children: [
-              /* @__PURE__ */ jsx2("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center", children: active && /* @__PURE__ */ jsx2(Check, { className: "h-3.5 w-3.5" }) }),
-              /* @__PURE__ */ jsxs2("span", { className: "min-w-0", children: [
-                /* @__PURE__ */ jsx2("span", { className: "block truncate font-medium", children: title }),
-                /* @__PURE__ */ jsx2("span", { className: "block truncate text-xs text-muted-foreground", children: subtitle })
+              /* @__PURE__ */ jsx4("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center", children: active && /* @__PURE__ */ jsx4(Check, { className: "h-3.5 w-3.5" }) }),
+              /* @__PURE__ */ jsxs3("span", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx4("span", { className: "block truncate font-medium", children: title }),
+                /* @__PURE__ */ jsx4("span", { className: "block truncate text-xs text-muted-foreground", children: subtitle })
               ] })
             ]
           }
         ),
-        (onEdit || onDelete) && /* @__PURE__ */ jsxs2("span", { className: "flex shrink-0 items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100", children: [
-          onEdit && /* @__PURE__ */ jsx2(
+        (onEdit || onDelete) && /* @__PURE__ */ jsxs3("span", { className: "flex shrink-0 items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100", children: [
+          onEdit && /* @__PURE__ */ jsx4(
             "button",
             {
               type: "button",
               onClick: onEdit,
               title: "Edit",
               className: "rounded p-1 text-muted-foreground hover:text-foreground",
-              children: /* @__PURE__ */ jsx2(Pencil, { className: "h-3 w-3" })
+              children: /* @__PURE__ */ jsx4(Pencil, { className: "h-3 w-3" })
             }
           ),
-          onDelete && /* @__PURE__ */ jsx2(
+          onDelete && /* @__PURE__ */ jsx4(
             "button",
             {
               type: "button",
               onClick: onDelete,
               title: "Delete",
               className: "rounded p-1 text-muted-foreground hover:text-[var(--status-error,#ff4d6d)]",
-              children: /* @__PURE__ */ jsx2(Trash2, { className: "h-3 w-3" })
+              children: /* @__PURE__ */ jsx4(Trash2, { className: "h-3 w-3" })
             }
           )
         ] })
@@ -412,16 +625,16 @@ function ProfileForm({
   onCancel,
   onSave
 }) {
-  const [name, setName] = React2.useState(initial?.name ?? "");
-  const [caps, setCaps] = React2.useState(
+  const [name, setName] = React4.useState(initial?.name ?? "");
+  const [caps, setCaps] = React4.useState(
     initial?.capabilities ? [...initial.capabilities] : capabilities.map((c) => c.id)
   );
-  const [instructions, setInstructions] = React2.useState(initial?.instructions ?? "");
+  const [instructions, setInstructions] = React4.useState(initial?.instructions ?? "");
   const toggle = (id) => setCaps(
     (prev) => prev.includes(id) ? prev.filter((c) => c !== id) : [...prev, id]
   );
-  return /* @__PURE__ */ jsxs2("div", { className: "space-y-3 p-2.5", children: [
-    /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsxs3("div", { className: "space-y-3 p-2.5", children: [
+    /* @__PURE__ */ jsx4(
       "input",
       {
         autoFocus: true,
@@ -431,14 +644,14 @@ function ProfileForm({
         className: "w-full rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container px-3 py-2 text-sm outline-none focus:border-primary"
       }
     ),
-    capabilities.length > 0 && /* @__PURE__ */ jsxs2("div", { children: [
-      /* @__PURE__ */ jsx2("p", { className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70", children: "Tools" }),
-      /* @__PURE__ */ jsx2("div", { className: "space-y-0.5", children: capabilities.map((cap) => /* @__PURE__ */ jsxs2(
+    capabilities.length > 0 && /* @__PURE__ */ jsxs3("div", { children: [
+      /* @__PURE__ */ jsx4("p", { className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70", children: "Tools" }),
+      /* @__PURE__ */ jsx4("div", { className: "space-y-0.5", children: capabilities.map((cap) => /* @__PURE__ */ jsxs3(
         "label",
         {
           className: "flex cursor-pointer items-start gap-2 rounded-md px-2 py-1.5 hover:bg-accent/40",
           children: [
-            /* @__PURE__ */ jsx2(
+            /* @__PURE__ */ jsx4(
               "input",
               {
                 type: "checkbox",
@@ -447,16 +660,16 @@ function ProfileForm({
                 className: "mt-0.5"
               }
             ),
-            /* @__PURE__ */ jsxs2("span", { className: "min-w-0", children: [
-              /* @__PURE__ */ jsx2("span", { className: "block text-sm font-medium", children: cap.label }),
-              cap.description && /* @__PURE__ */ jsx2("span", { className: "block text-xs text-muted-foreground", children: cap.description })
+            /* @__PURE__ */ jsxs3("span", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx4("span", { className: "block text-sm font-medium", children: cap.label }),
+              cap.description && /* @__PURE__ */ jsx4("span", { className: "block text-xs text-muted-foreground", children: cap.description })
             ] })
           ]
         },
         cap.id
       )) })
     ] }),
-    /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx4(
       "textarea",
       {
         value: instructions,
@@ -466,8 +679,8 @@ function ProfileForm({
         className: "w-full resize-none rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container px-3 py-2 text-sm outline-none focus:border-primary"
       }
     ),
-    /* @__PURE__ */ jsxs2("div", { className: "flex justify-end gap-2", children: [
-      /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsxs3("div", { className: "flex justify-end gap-2", children: [
+      /* @__PURE__ */ jsx4(
         "button",
         {
           type: "button",
@@ -476,7 +689,7 @@ function ProfileForm({
           children: "Cancel"
         }
       ),
-      /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx4(
         "button",
         {
           type: "button",
@@ -496,7 +709,7 @@ function ProfileForm({
 }
 
 // src/chat/agent-session-controls.tsx
-import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function harnessAutonomyNote(harness) {
   const ownModel = !harnessHonorsModel(harness);
   const ownEffort = !harnessHonorsEffort(harness);
@@ -520,108 +733,6 @@ function harnessGroup(option) {
   return harnessAutonomyNote(option.type) === null ? "steerable" : "fixed";
 }
 var HARNESS_SEARCH_THRESHOLD = 7;
-function InformativeLock({
-  type,
-  label,
-  lockTitle,
-  lockBody,
-  newChatLabel,
-  onNewChat,
-  triggerClassName
-}) {
-  const [open, setOpen] = React3.useState(false);
-  const closeTimer = React3.useRef(null);
-  const ref = useClickOutside(() => setOpen(false));
-  const cancelClose = React3.useCallback(() => {
-    if (closeTimer.current) {
-      clearTimeout(closeTimer.current);
-      closeTimer.current = null;
-    }
-  }, []);
-  const scheduleClose = React3.useCallback(() => {
-    cancelClose();
-    closeTimer.current = setTimeout(() => setOpen(false), 150);
-  }, [cancelClose]);
-  React3.useEffect(() => cancelClose, [cancelClose]);
-  return /* @__PURE__ */ jsxs3(
-    "div",
-    {
-      ref,
-      className: "relative inline-flex",
-      onMouseEnter: () => {
-        cancelClose();
-        setOpen(true);
-      },
-      onMouseLeave: scheduleClose,
-      onKeyDown: (event) => {
-        if (event.key === "Escape") setOpen(false);
-      },
-      children: [
-        /* @__PURE__ */ jsxs3(
-          "button",
-          {
-            type: "button",
-            onClick: () => setOpen(true),
-            "data-state": open ? "open" : "closed",
-            "aria-label": "Agent harness (locked)",
-            "aria-haspopup": "dialog",
-            "aria-expanded": open,
-            className: cn(
-              // Dimmed to read as locked (the harness is bound to this session),
-              // matching the disabled model picker — the logo stays so the chip is
-              // still recognizably this harness; the popover explains the lock.
-              "inline-flex h-8 items-center gap-1.5 rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container px-2.5 opacity-60",
-              "text-xs font-medium text-foreground shadow-sm transition-colors",
-              "hover:border-[var(--md3-outline-variant)] hover:bg-surface-container-high focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-              "data-[state=open]:border-[var(--md3-outline-variant)] data-[state=open]:bg-surface-container-high",
-              triggerClassName
-            ),
-            children: [
-              /* @__PURE__ */ jsx3(HarnessLogo, { type, size: 16 }),
-              /* @__PURE__ */ jsx3("span", { children: label })
-            ]
-          }
-        ),
-        open && /* @__PURE__ */ jsxs3(
-          "div",
-          {
-            role: "dialog",
-            className: cn(
-              "absolute bottom-full left-0 z-50 mb-2 w-72 rounded-[var(--radius-md)] border border-[var(--md3-outline-variant)] bg-surface-container-highest p-3",
-              "shadow-[0_8px_30px_rgba(0,0,0,0.45)] ring-1 ring-[#ffffff14]"
-            ),
-            children: [
-              /* @__PURE__ */ jsxs3("p", { className: "flex items-start gap-2 text-sm font-medium text-foreground", children: [
-                /* @__PURE__ */ jsx3(Lock, { className: "mt-0.5 h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
-                /* @__PURE__ */ jsx3("span", { children: lockTitle ?? `Agent fixed to ${label} for this conversation.` })
-              ] }),
-              /* @__PURE__ */ jsx3("p", { className: "mt-1.5 text-xs text-muted-foreground", children: lockBody ?? "Conversations stay on one agent." }),
-              /* @__PURE__ */ jsxs3(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => {
-                    setOpen(false);
-                    onNewChat();
-                  },
-                  className: cn(
-                    "mt-3 flex w-full items-center justify-center gap-1.5 rounded-md px-2.5 py-2 text-sm font-medium text-foreground",
-                    "bg-primary/10 ring-1 ring-inset ring-primary/25 transition-colors",
-                    "hover:bg-primary/15 focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsx3(Plus2, { className: "h-4 w-4" }),
-                    newChatLabel ?? "New chat to switch agent"
-                  ]
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
 function HarnessDropdown({
   value,
   onChange,
@@ -643,16 +754,16 @@ function HarnessDropdown({
   );
   const options = HARNESS_OPTIONS.filter((h) => allowed.has(h.type));
   const selected = options.find((option) => option.type === value);
-  const [query, setQuery] = React3.useState("");
+  const [query, setQuery] = React5.useState("");
   const showSearch = options.length > HARNESS_SEARCH_THRESHOLD;
-  const filtered = React3.useMemo(() => {
+  const filtered = React5.useMemo(() => {
     const q = query.trim().toLowerCase();
     if (!q) return options;
     return options.filter(
       (o) => o.label.toLowerCase().includes(q) || o.type.toLowerCase().includes(q) || (o.description?.toLowerCase() ?? "").includes(q)
     );
   }, [options, query]);
-  const sections = React3.useMemo(() => {
+  const sections = React5.useMemo(() => {
     const byGroup = /* @__PURE__ */ new Map();
     for (const option of filtered) {
       const key = harnessGroup(option);
@@ -667,27 +778,31 @@ function HarnessDropdown({
     })).filter((section) => section.items.length > 0);
   }, [filtered]);
   if (locked && onNewChat) {
-    return /* @__PURE__ */ jsx3(
+    const label = selected?.label ?? value;
+    return /* @__PURE__ */ jsxs4(
       InformativeLock,
       {
-        type: value,
-        label: selected?.label ?? value,
-        lockTitle,
-        lockBody,
-        newChatLabel,
+        ariaLabel: "Agent harness (locked)",
+        lockTitle: lockTitle ?? `Agent fixed to ${label} for this conversation.`,
+        lockBody: lockBody ?? "Conversations stay on one agent.",
+        newChatLabel: newChatLabel ?? "New chat to switch agent",
         onNewChat,
-        triggerClassName
+        triggerClassName,
+        children: [
+          /* @__PURE__ */ jsx5(HarnessLogo, { type: value, size: 16 }),
+          /* @__PURE__ */ jsx5("span", { children: label })
+        ]
       }
     );
   }
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     DropdownMenu2.Root,
     {
       onOpenChange: (nextOpen) => {
         if (!nextOpen) setQuery("");
       },
       children: [
-        /* @__PURE__ */ jsx3(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs3(
+        /* @__PURE__ */ jsx5(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs4(
           "button",
           {
             type: "button",
@@ -703,13 +818,13 @@ function HarnessDropdown({
             ),
             "aria-label": "Agent harness",
             children: [
-              /* @__PURE__ */ jsx3(HarnessLogo, { type: value, size: 16, className: "shrink-0" }),
-              /* @__PURE__ */ jsx3("span", { className: "truncate", children: selected?.label ?? value }),
-              !locked && /* @__PURE__ */ jsx3(ChevronDown3, { className: "ml-auto h-3.5 w-3.5 shrink-0 text-muted-foreground" })
+              /* @__PURE__ */ jsx5(HarnessLogo, { type: value, size: 16, className: "shrink-0" }),
+              /* @__PURE__ */ jsx5("span", { className: "truncate", children: selected?.label ?? value }),
+              !locked && /* @__PURE__ */ jsx5(ChevronDown3, { className: "ml-auto h-3.5 w-3.5 shrink-0 text-muted-foreground" })
             ]
           }
         ) }),
-        /* @__PURE__ */ jsx3(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsxs3(
+        /* @__PURE__ */ jsx5(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsxs4(
           DropdownMenu2.Content,
           {
             side,
@@ -719,7 +834,7 @@ function HarnessDropdown({
             sideOffset: 6,
             className: pickerMenuContentClass,
             children: [
-              showSearch && /* @__PURE__ */ jsx3(
+              showSearch && /* @__PURE__ */ jsx5(
                 PickerMenuSearch,
                 {
                   value: query,
@@ -727,7 +842,7 @@ function HarnessDropdown({
                   placeholder: "Search agents..."
                 }
               ),
-              /* @__PURE__ */ jsx3("div", { className: pickerMenuBodyClass, children: sections.length === 0 ? /* @__PURE__ */ jsx3("div", { className: "px-3 py-8 text-center text-xs text-muted-foreground", children: "No agents match." }) : sections.map((section) => /* @__PURE__ */ jsx3(PickerMenuSection, { label: section.label, children: section.items.map((option) => /* @__PURE__ */ jsxs3(
+              /* @__PURE__ */ jsx5("div", { className: pickerMenuBodyClass, children: sections.length === 0 ? /* @__PURE__ */ jsx5("div", { className: "px-3 py-8 text-center text-xs text-muted-foreground", children: "No agents match." }) : sections.map((section) => /* @__PURE__ */ jsx5(PickerMenuSection, { label: section.label, children: section.items.map((option) => /* @__PURE__ */ jsxs4(
                 DropdownMenu2.Item,
                 {
                   onSelect: (event) => {
@@ -738,7 +853,7 @@ function HarnessDropdown({
                     active: option.type === value
                   }),
                   children: [
-                    /* @__PURE__ */ jsx3(
+                    /* @__PURE__ */ jsx5(
                       HarnessLogo,
                       {
                         type: option.type,
@@ -746,18 +861,18 @@ function HarnessDropdown({
                         className: "mt-0.5"
                       }
                     ),
-                    /* @__PURE__ */ jsxs3("div", { className: "min-w-0 flex-1", children: [
-                      /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1.5", children: [
-                        /* @__PURE__ */ jsx3("span", { className: "min-w-0 truncate text-sm font-medium", children: option.label }),
-                        harnessAutonomyNote(option.type) && /* @__PURE__ */ jsx3(PickerMenuTag, { children: harnessAutonomyNote(option.type) })
+                    /* @__PURE__ */ jsxs4("div", { className: "min-w-0 flex-1", children: [
+                      /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-1.5", children: [
+                        /* @__PURE__ */ jsx5("span", { className: "min-w-0 truncate text-sm font-medium", children: option.label }),
+                        harnessAutonomyNote(option.type) && /* @__PURE__ */ jsx5(PickerMenuTag, { children: harnessAutonomyNote(option.type) })
                       ] }),
-                      /* @__PURE__ */ jsx3(PickerMenuMeta, { parts: [option.description] })
+                      /* @__PURE__ */ jsx5(PickerMenuMeta, { parts: [option.description] })
                     ] })
                   ]
                 },
                 option.type
               )) }, section.key)) }),
-              showSearch && /* @__PURE__ */ jsxs3(PickerMenuFooter, { children: [
+              showSearch && /* @__PURE__ */ jsxs4(PickerMenuFooter, { children: [
                 filtered.length,
                 " of ",
                 options.length,
@@ -850,7 +965,7 @@ function AgentSessionControls({
   const modelTriggerClass = collapsed ? cn(collapsedTriggerClass, "h-8 rounded-lg px-2.5 text-xs") : void 0;
   const inlineForceDown = menuPlacement === "down" && layout === "inline";
   const avoidCollisions = inlineForceDown ? false : void 0;
-  const harnessNode = harness && /* @__PURE__ */ jsx3(
+  const harnessNode = harness && /* @__PURE__ */ jsx5(
     HarnessDropdown,
     {
       ...harness,
@@ -862,7 +977,7 @@ function AgentSessionControls({
       triggerClassName: secondaryTriggerClass
     }
   );
-  const profileNode = profile && /* @__PURE__ */ jsx3(
+  const profileNode = profile && /* @__PURE__ */ jsx5(
     AgentProfilePicker,
     {
       value: profile.value,
@@ -873,10 +988,15 @@ function AgentSessionControls({
       onUpdate: profile.onUpdate,
       onDelete: profile.onDelete,
       disabled: profile.disabled,
-      side: inlineForceDown || collapsed ? "bottom" : "top"
+      locked: profile.locked,
+      lockReason: profile.lockReason,
+      onNewChat: profile.onNewChat,
+      side: inlineForceDown || collapsed ? "bottom" : "top",
+      triggerClassName: secondaryTriggerClass,
+      popoverClassName: collapsed ? "w-full" : void 0
     }
   );
-  const modelNode = model && /* @__PURE__ */ jsx3(
+  const modelNode = model && /* @__PURE__ */ jsx5(
     ModelPicker,
     {
       variant: "pill",
@@ -897,7 +1017,7 @@ function AgentSessionControls({
   );
   const modelReasoning = modelReasoningCapability(model?.models, model?.value);
   const reasoningOptions = (harness && HARNESS_REASONING_OPTIONS[harness.value]) ?? reasoning?.options;
-  const reasoningNode = reasoning && /* @__PURE__ */ jsx3(
+  const reasoningNode = reasoning && /* @__PURE__ */ jsx5(
     ReasoningLevelPicker,
     {
       value: reasoning.value,
@@ -911,7 +1031,7 @@ function AgentSessionControls({
     }
   );
   if (layout === "gear") {
-    return /* @__PURE__ */ jsx3(
+    return /* @__PURE__ */ jsx5(
       GearControls,
       {
         className,
@@ -930,8 +1050,8 @@ function AgentSessionControls({
       segments.push({
         key: "harness",
         label: harnessLabel,
-        node: /* @__PURE__ */ jsxs3("span", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx3(HarnessLogo, { type: harness.value, size: 16, className: "shrink-0" }),
+        node: /* @__PURE__ */ jsxs4("span", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx5(HarnessLogo, { type: harness.value, size: 16, className: "shrink-0" }),
           harnessLabel
         ] })
       });
@@ -948,8 +1068,8 @@ function AgentSessionControls({
       segments.push({
         key: "model",
         label: modelLabel,
-        node: /* @__PURE__ */ jsxs3("span", { className: "flex items-center gap-1.5", children: [
-          identity && /* @__PURE__ */ jsx3(ModelBrandStack, { identity, size: "sm" }),
+        node: /* @__PURE__ */ jsxs4("span", { className: "flex items-center gap-1.5", children: [
+          identity && /* @__PURE__ */ jsx5(ModelBrandStack, { identity, size: "sm" }),
           modelLabel
         ] })
       });
@@ -961,14 +1081,14 @@ function AgentSessionControls({
       segments.push({
         key: "effort",
         label: effortLabel,
-        node: /* @__PURE__ */ jsxs3("span", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx3("span", { className: "flex w-3.5 shrink-0 justify-center", children: /* @__PURE__ */ jsx3(ReasoningGlyph, { level: reasoning.value }) }),
+        node: /* @__PURE__ */ jsxs4("span", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx5("span", { className: "flex w-3.5 shrink-0 justify-center", children: /* @__PURE__ */ jsx5(ReasoningGlyph, { level: reasoning.value }) }),
           effortLabel
         ] })
       });
     }
-    const summary = /* @__PURE__ */ jsx3("span", { className: "flex items-center gap-1.5", children: segments.map((segment, index) => /* @__PURE__ */ jsxs3(React3.Fragment, { children: [
-      index > 0 && /* @__PURE__ */ jsx3(
+    const summary = /* @__PURE__ */ jsx5("span", { className: "flex items-center gap-1.5", children: segments.map((segment, index) => /* @__PURE__ */ jsxs4(React5.Fragment, { children: [
+      index > 0 && /* @__PURE__ */ jsx5(
         "span",
         {
           className: "text-base leading-none text-muted-foreground/60",
@@ -978,7 +1098,7 @@ function AgentSessionControls({
       ),
       segment.node
     ] }, segment.key)) });
-    return /* @__PURE__ */ jsx3(
+    return /* @__PURE__ */ jsx5(
       SummaryControls,
       {
         className,
@@ -993,7 +1113,7 @@ function AgentSessionControls({
       }
     );
   }
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       className: cn("flex flex-wrap items-center gap-2", className),
@@ -1003,7 +1123,7 @@ function AgentSessionControls({
         harnessNode,
         modelNode,
         reasoningNode,
-        trailing && /* @__PURE__ */ jsx3("div", { className: "ml-auto flex items-center gap-2", children: trailing })
+        trailing && /* @__PURE__ */ jsx5("div", { className: "ml-auto flex items-center gap-2", children: trailing })
       ]
     }
   );
@@ -1016,11 +1136,11 @@ function GearControls({
   reasoningNode,
   trailing
 }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx5(
     CollapsibleControls,
     {
       className,
-      trigger: /* @__PURE__ */ jsx3(SlidersHorizontal, { className: "h-4 w-4 text-muted-foreground" }),
+      trigger: /* @__PURE__ */ jsx5(SlidersHorizontal, { className: "h-4 w-4 text-muted-foreground" }),
       triggerClassName: cn(
         "inline-flex h-8 w-8 items-center justify-center rounded-lg border border-[var(--md3-outline-variant)] bg-surface-container",
         "text-foreground shadow-sm transition-colors",
@@ -1044,8 +1164,8 @@ function GearSection({
   label,
   children
 }) {
-  return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ jsx3("span", { className: "px-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground/70", children: label }),
+  return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsx5("span", { className: "px-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground/70", children: label }),
     children
   ] });
 }
@@ -1060,13 +1180,13 @@ function SummaryControls({
   reasoningNode,
   trailing
 }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx5(
     CollapsibleControls,
     {
       className,
-      trigger: /* @__PURE__ */ jsxs3(Fragment2, { children: [
+      trigger: /* @__PURE__ */ jsxs4(Fragment2, { children: [
         summary,
-        /* @__PURE__ */ jsx3(ChevronDown3, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" })
+        /* @__PURE__ */ jsx5(ChevronDown3, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" })
       ] }),
       triggerTitle: title,
       triggerClassName: cn(
@@ -1101,15 +1221,15 @@ function CollapsibleControls({
   reasoningNode,
   trailing
 }) {
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       className: cn("flex items-center gap-2", className),
       "data-testid": "agent-session-controls",
       children: [
-        trailing && /* @__PURE__ */ jsx3("div", { className: "flex items-center gap-2", children: trailing }),
-        /* @__PURE__ */ jsxs3(DropdownMenu2.Root, { children: [
-          /* @__PURE__ */ jsx3(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsx3(
+        trailing && /* @__PURE__ */ jsx5("div", { className: "flex items-center gap-2", children: trailing }),
+        /* @__PURE__ */ jsxs4(DropdownMenu2.Root, { children: [
+          /* @__PURE__ */ jsx5(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsx5(
             "button",
             {
               type: "button",
@@ -1119,7 +1239,7 @@ function CollapsibleControls({
               children: trigger
             }
           ) }),
-          /* @__PURE__ */ jsx3(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsxs3(
+          /* @__PURE__ */ jsx5(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsxs4(
             DropdownMenu2.Content,
             {
               side: contentSide,
@@ -1141,10 +1261,10 @@ function CollapsibleControls({
                 contentClassName
               ),
               children: [
-                profileNode && /* @__PURE__ */ jsx3(GearSection, { label: "Agent", children: profileNode }),
-                harnessNode && /* @__PURE__ */ jsx3(GearSection, { label: "Harness", children: harnessNode }),
-                modelNode && /* @__PURE__ */ jsx3(GearSection, { label: "Model", children: modelNode }),
-                reasoningNode && /* @__PURE__ */ jsx3(GearSection, { label: "Effort", children: reasoningNode })
+                profileNode && /* @__PURE__ */ jsx5(GearSection, { label: "Agent", children: profileNode }),
+                harnessNode && /* @__PURE__ */ jsx5(GearSection, { label: "Harness", children: harnessNode }),
+                modelNode && /* @__PURE__ */ jsx5(GearSection, { label: "Model", children: modelNode }),
+                reasoningNode && /* @__PURE__ */ jsx5(GearSection, { label: "Effort", children: reasoningNode })
               ]
             }
           ) })
@@ -1165,7 +1285,7 @@ import {
   Upload,
   X
 } from "lucide-react";
-import * as React4 from "react";
+import * as React6 from "react";
 
 // src/chat/attachment-validation.ts
 function isAcceptedType(file, accept) {
@@ -1219,7 +1339,7 @@ function validateComposerFiles(files, config) {
 }
 
 // src/chat/agent-composer.tsx
-import { Fragment as Fragment3, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var IMAGE_EXTENSION_BY_MIME = {
   "image/png": "png",
   "image/jpeg": "jpg",
@@ -1238,7 +1358,7 @@ function imageExtension(file) {
   const fromName = /\.([a-z0-9]+)$/i.exec(file.name)?.[1];
   return fromName?.toLowerCase() ?? "png";
 }
-var MentionEditor = React4.lazy(() => import("./mention-editor-3Q6MYOIU.js"));
+var MentionEditor = React6.lazy(() => import("./mention-editor-3Q6MYOIU.js"));
 function AgentComposer({
   value,
   onChange,
@@ -1273,24 +1393,24 @@ function AgentComposer({
   sendLabel = "Send",
   autoFocus
 }) {
-  const textareaRef = React4.useRef(null);
-  const richFocusRef = React4.useRef(null);
-  const fileInputRef = React4.useRef(null);
-  const folderInputRef = React4.useRef(null);
-  const [dragOver, setDragOver] = React4.useState(false);
-  const dragDepth = React4.useRef(0);
-  const pastedImageCount = React4.useRef(0);
-  const resize = React4.useCallback(
+  const textareaRef = React6.useRef(null);
+  const richFocusRef = React6.useRef(null);
+  const fileInputRef = React6.useRef(null);
+  const folderInputRef = React6.useRef(null);
+  const [dragOver, setDragOver] = React6.useState(false);
+  const dragDepth = React6.useRef(0);
+  const pastedImageCount = React6.useRef(0);
+  const resize = React6.useCallback(
     (el) => {
       el.style.height = "auto";
       el.style.height = `${Math.min(el.scrollHeight, maxHeight)}px`;
     },
     [maxHeight]
   );
-  React4.useEffect(() => {
+  React6.useEffect(() => {
     if (textareaRef.current) resize(textareaRef.current);
   }, [value, resize]);
-  React4.useEffect(() => {
+  React6.useEffect(() => {
     if (!focusShortcut || disabled) return;
     function onKeyDown(event) {
       if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "l") {
@@ -1307,7 +1427,7 @@ function AgentComposer({
     if (!canSend) return;
     onSubmit();
   };
-  const registerRichFocus = React4.useCallback((focus) => {
+  const registerRichFocus = React6.useCallback((focus) => {
     richFocusRef.current = focus;
   }, []);
   const dropEnabled = Boolean(onAttach);
@@ -1382,13 +1502,13 @@ function AgentComposer({
     "hover:bg-surface-container-highest hover:text-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
     "disabled:cursor-not-allowed disabled:opacity-50"
   );
-  return /* @__PURE__ */ jsxs4("div", { className: cn("relative", className), children: [
-    dragOver && /* @__PURE__ */ jsx4("div", { className: "pointer-events-none absolute inset-0 z-10 flex items-center justify-center rounded-2xl border-2 border-dashed border-primary/50 bg-surface-container-high/95", children: /* @__PURE__ */ jsxs4("div", { className: "text-center", children: [
-      /* @__PURE__ */ jsx4("span", { className: "mx-auto mb-2 flex size-11 items-center justify-center rounded-xl bg-primary/10 text-primary", children: /* @__PURE__ */ jsx4(Upload, { className: "size-5" }) }),
-      /* @__PURE__ */ jsx4("p", { className: "font-semibold text-foreground text-sm", children: dropTitle }),
-      /* @__PURE__ */ jsx4("p", { className: "mt-0.5 text-muted-foreground text-xs", children: dropDescription })
+  return /* @__PURE__ */ jsxs5("div", { className: cn("relative", className), children: [
+    dragOver && /* @__PURE__ */ jsx6("div", { className: "pointer-events-none absolute inset-0 z-10 flex items-center justify-center rounded-2xl border-2 border-dashed border-primary/50 bg-surface-container-high/95", children: /* @__PURE__ */ jsxs5("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx6("span", { className: "mx-auto mb-2 flex size-11 items-center justify-center rounded-xl bg-primary/10 text-primary", children: /* @__PURE__ */ jsx6(Upload, { className: "size-5" }) }),
+      /* @__PURE__ */ jsx6("p", { className: "font-semibold text-foreground text-sm", children: dropTitle }),
+      /* @__PURE__ */ jsx6("p", { className: "mt-0.5 text-muted-foreground text-xs", children: dropDescription })
     ] }) }),
-    /* @__PURE__ */ jsxs4(
+    /* @__PURE__ */ jsxs5(
       "div",
       {
         "data-testid": "agent-composer",
@@ -1402,10 +1522,10 @@ function AgentComposer({
           disabled && "opacity-60"
         ),
         children: [
-          attachments.length > 0 && /* @__PURE__ */ jsx4("div", { className: "flex flex-wrap gap-1.5", children: [...folderChips, ...fileChips].map((file) => {
+          attachments.length > 0 && /* @__PURE__ */ jsx6("div", { className: "flex flex-wrap gap-1.5", children: [...folderChips, ...fileChips].map((file) => {
             const isError = file.status === "error";
             const isPending = file.status === "pending";
-            return /* @__PURE__ */ jsxs4(
+            return /* @__PURE__ */ jsxs5(
               "span",
               {
                 title: isError ? file.errorMessage : void 0,
@@ -1415,40 +1535,40 @@ function AgentComposer({
                   isPending && "opacity-60"
                 ),
                 children: [
-                  file.kind !== "folder" && file.previewUrl ? /* @__PURE__ */ jsx4(
+                  file.kind !== "folder" && file.previewUrl ? /* @__PURE__ */ jsx6(
                     "img",
                     {
                       src: file.previewUrl,
                       alt: "",
                       className: "size-8 rounded object-cover"
                     }
-                  ) : file.kind === "folder" ? /* @__PURE__ */ jsx4(Folder, { className: "size-3 shrink-0" }) : /* @__PURE__ */ jsx4(Paperclip, { className: "size-3 shrink-0" }),
-                  /* @__PURE__ */ jsx4("span", { className: "max-w-[150px] truncate", children: file.name }),
-                  file.fileCount !== void 0 && /* @__PURE__ */ jsxs4("span", { className: "text-muted-foreground", children: [
+                  ) : file.kind === "folder" ? /* @__PURE__ */ jsx6(Folder, { className: "size-3 shrink-0" }) : /* @__PURE__ */ jsx6(Paperclip, { className: "size-3 shrink-0" }),
+                  /* @__PURE__ */ jsx6("span", { className: "max-w-[150px] truncate", children: file.name }),
+                  file.fileCount !== void 0 && /* @__PURE__ */ jsxs5("span", { className: "text-muted-foreground", children: [
                     "(",
                     file.fileCount,
                     ")"
                   ] }),
-                  file.status === "uploading" && /* @__PURE__ */ jsx4(Loader2, { className: "size-3 animate-spin" }),
-                  isError && file.errorMessage && /* @__PURE__ */ jsx4("span", { className: "max-w-[150px] truncate text-[var(--status-error,#ff4d6d)]/80", children: file.errorMessage }),
-                  isError && onRetryFile && /* @__PURE__ */ jsx4(
+                  file.status === "uploading" && /* @__PURE__ */ jsx6(Loader2, { className: "size-3 animate-spin" }),
+                  isError && file.errorMessage && /* @__PURE__ */ jsx6("span", { className: "max-w-[150px] truncate text-[var(--status-error,#ff4d6d)]/80", children: file.errorMessage }),
+                  isError && onRetryFile && /* @__PURE__ */ jsx6(
                     "button",
                     {
                       type: "button",
                       "aria-label": `Retry upload ${file.name}`,
                       onClick: () => onRetryFile(file.id),
                       className: "rounded p-0.5 text-muted-foreground transition-colors hover:text-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-                      children: /* @__PURE__ */ jsx4(RotateCcw, { className: "size-3" })
+                      children: /* @__PURE__ */ jsx6(RotateCcw, { className: "size-3" })
                     }
                   ),
-                  onRemoveFile && /* @__PURE__ */ jsx4(
+                  onRemoveFile && /* @__PURE__ */ jsx6(
                     "button",
                     {
                       type: "button",
                       "aria-label": `Remove ${file.name}`,
                       onClick: () => onRemoveFile(file.id),
                       className: "rounded p-0.5 text-muted-foreground transition-colors hover:text-foreground focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-                      children: /* @__PURE__ */ jsx4(X, { className: "size-3" })
+                      children: /* @__PURE__ */ jsx6(X, { className: "size-3" })
                     }
                   )
                 ]
@@ -1456,10 +1576,10 @@ function AgentComposer({
               file.id
             );
           }) }),
-          mention ? /* @__PURE__ */ jsx4(
-            React4.Suspense,
+          mention ? /* @__PURE__ */ jsx6(
+            React6.Suspense,
             {
-              fallback: /* @__PURE__ */ jsx4(
+              fallback: /* @__PURE__ */ jsx6(
                 "textarea",
                 {
                   rows: minRows,
@@ -1473,7 +1593,7 @@ function AgentComposer({
                   )
                 }
               ),
-              children: /* @__PURE__ */ jsx4(
+              children: /* @__PURE__ */ jsx6(
                 MentionEditor,
                 {
                   value,
@@ -1490,7 +1610,7 @@ function AgentComposer({
                 }
               )
             }
-          ) : /* @__PURE__ */ jsx4(
+          ) : /* @__PURE__ */ jsx6(
             "textarea",
             {
               ref: textareaRef,
@@ -1515,9 +1635,9 @@ function AgentComposer({
               )
             }
           ),
-          /* @__PURE__ */ jsxs4("div", { className: "flex items-end gap-2", children: [
-            onAttach && /* @__PURE__ */ jsxs4(Fragment3, { children: [
-              /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsxs5("div", { className: "flex items-end gap-2", children: [
+            onAttach && /* @__PURE__ */ jsxs5(Fragment3, { children: [
+              /* @__PURE__ */ jsx6(
                 "button",
                 {
                   type: "button",
@@ -1526,10 +1646,10 @@ function AgentComposer({
                   "aria-label": "Attach files",
                   title: "Attach files",
                   className: attachButtonClass,
-                  children: /* @__PURE__ */ jsx4(Paperclip, { className: "size-4" })
+                  children: /* @__PURE__ */ jsx6(Paperclip, { className: "size-4" })
                 }
               ),
-              /* @__PURE__ */ jsx4(
+              /* @__PURE__ */ jsx6(
                 "input",
                 {
                   ref: fileInputRef,
@@ -1545,8 +1665,8 @@ function AgentComposer({
                 }
               )
             ] }),
-            onAttachFolder && /* @__PURE__ */ jsxs4(Fragment3, { children: [
-              /* @__PURE__ */ jsx4(
+            onAttachFolder && /* @__PURE__ */ jsxs5(Fragment3, { children: [
+              /* @__PURE__ */ jsx6(
                 "button",
                 {
                   type: "button",
@@ -1555,10 +1675,10 @@ function AgentComposer({
                   "aria-label": "Attach folder",
                   title: "Attach folder",
                   className: attachButtonClass,
-                  children: /* @__PURE__ */ jsx4(Folder, { className: "size-4" })
+                  children: /* @__PURE__ */ jsx6(Folder, { className: "size-4" })
                 }
               ),
-              /* @__PURE__ */ jsx4(
+              /* @__PURE__ */ jsx6(
                 "input",
                 {
                   ref: folderInputRef,
@@ -1574,8 +1694,8 @@ function AgentComposer({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs4("div", { className: "flex min-w-0 flex-1 items-center gap-2 overflow-x-auto overscroll-x-contain [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: [
-              controls ?? /* @__PURE__ */ jsx4(
+            /* @__PURE__ */ jsxs5("div", { className: "flex min-w-0 flex-1 items-center gap-2 overflow-x-auto overscroll-x-contain [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: [
+              controls ?? /* @__PURE__ */ jsx6(
                 AgentSessionControls,
                 {
                   context,
@@ -1585,9 +1705,9 @@ function AgentComposer({
                   reasoning
                 }
               ),
-              trailing && /* @__PURE__ */ jsx4("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: trailing })
+              trailing && /* @__PURE__ */ jsx6("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: trailing })
             ] }),
-            busy && onCancel ? /* @__PURE__ */ jsx4(
+            busy && onCancel ? /* @__PURE__ */ jsx6(
               "button",
               {
                 type: "button",
@@ -1598,9 +1718,9 @@ function AgentComposer({
                   "bg-[var(--status-error,#ff4d6d)]/15 text-[var(--status-error,#ff4d6d)] transition-colors",
                   "hover:bg-[var(--status-error,#ff4d6d)]/25"
                 ),
-                children: /* @__PURE__ */ jsx4(Square, { className: "size-3.5 fill-current" })
+                children: /* @__PURE__ */ jsx6(Square, { className: "size-3.5 fill-current" })
               }
-            ) : /* @__PURE__ */ jsx4(
+            ) : /* @__PURE__ */ jsx6(
               "button",
               {
                 type: "button",
@@ -1611,26 +1731,26 @@ function AgentComposer({
                   "flex size-9 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground",
                   "transition-opacity hover:opacity-90 disabled:opacity-40"
                 ),
-                children: busy ? /* @__PURE__ */ jsx4(Loader2, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsx4(ArrowUp, { className: "size-4" })
+                children: busy ? /* @__PURE__ */ jsx6(Loader2, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsx6(ArrowUp, { className: "size-4" })
               }
             )
           ] })
         ]
       }
     ),
-    focusShortcut && /* @__PURE__ */ jsx4("div", { className: "mt-1.5 flex justify-end px-1", children: /* @__PURE__ */ jsxs4("span", { className: "text-muted-foreground text-xs", children: [
-      /* @__PURE__ */ jsx4("kbd", { className: "rounded border border-[var(--md3-outline-variant)] bg-surface-container px-1 py-0.5 text-[10px]", children: "Cmd" }),
-      /* @__PURE__ */ jsx4("kbd", { className: "ml-0.5 rounded border border-[var(--md3-outline-variant)] bg-surface-container px-1 py-0.5 text-[10px]", children: "L" }),
-      /* @__PURE__ */ jsx4("span", { className: "ml-1", children: "to focus" })
+    focusShortcut && /* @__PURE__ */ jsx6("div", { className: "mt-1.5 flex justify-end px-1", children: /* @__PURE__ */ jsxs5("span", { className: "text-muted-foreground text-xs", children: [
+      /* @__PURE__ */ jsx6("kbd", { className: "rounded border border-[var(--md3-outline-variant)] bg-surface-container px-1 py-0.5 text-[10px]", children: "Cmd" }),
+      /* @__PURE__ */ jsx6("kbd", { className: "ml-0.5 rounded border border-[var(--md3-outline-variant)] bg-surface-container px-1 py-0.5 text-[10px]", children: "L" }),
+      /* @__PURE__ */ jsx6("span", { className: "ml-1", children: "to focus" })
     ] }) })
   ] });
 }
 
 // src/chat/artifact-agent-dock.tsx
-import * as React5 from "react";
+import * as React7 from "react";
 import { Sparkles as Sparkles2, Send, Square as Square2, X as X2 } from "lucide-react";
 import { ChatMessage } from "@tangle-network/ui/chat";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function defaultScopeLabel(scope) {
   if (scope.label) return scope.label;
   switch (scope.kind) {
@@ -1676,23 +1796,23 @@ function ArtifactAgentDock({
   onError,
   className
 }) {
-  const [threadId, setThreadId] = React5.useState(null);
-  const [messages, setMessages] = React5.useState([]);
-  const [composer, setComposer] = React5.useState(defaultPrompt ?? "");
-  const [streamContent, setStreamContent] = React5.useState("");
-  const [sending, setSending] = React5.useState(false);
-  const [loading, setLoading] = React5.useState(false);
-  const abortRef = React5.useRef(null);
-  const scrollRef = React5.useRef(null);
-  const scopeTokenRef = React5.useRef(0);
-  const reportError = React5.useCallback(
+  const [threadId, setThreadId] = React7.useState(null);
+  const [messages, setMessages] = React7.useState([]);
+  const [composer, setComposer] = React7.useState(defaultPrompt ?? "");
+  const [streamContent, setStreamContent] = React7.useState("");
+  const [sending, setSending] = React7.useState(false);
+  const [loading, setLoading] = React7.useState(false);
+  const abortRef = React7.useRef(null);
+  const scrollRef = React7.useRef(null);
+  const scopeTokenRef = React7.useRef(0);
+  const reportError = React7.useCallback(
     (message) => {
       if (onError) onError(message);
       else if (typeof console !== "undefined") console.error("[ArtifactAgentDock]", message);
     },
     [onError]
   );
-  React5.useEffect(() => {
+  React7.useEffect(() => {
     if (!open) return;
     scopeTokenRef.current += 1;
     abortRef.current?.abort();
@@ -1728,11 +1848,11 @@ function ArtifactAgentDock({
       cancelled = true;
     };
   }, [open, scope.kind, scope.key, transport, reportError]);
-  React5.useEffect(() => {
+  React7.useEffect(() => {
     if (!scrollRef.current) return;
     scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
   }, [messages.length, streamContent]);
-  const send = React5.useCallback(async () => {
+  const send = React7.useCallback(async () => {
     const text = composer.trim();
     if (!text || !threadId || sending) return;
     const token = scopeTokenRef.current;
@@ -1782,7 +1902,7 @@ function ArtifactAgentDock({
       if (abortRef.current === controller) abortRef.current = null;
     }
   }, [composer, threadId, sending, transport, reportError]);
-  const cancel = React5.useCallback(() => {
+  const cancel = React7.useCallback(() => {
     if (threadId && transport.cancel) {
       try {
         void Promise.resolve(transport.cancel({ threadId })).catch(() => {
@@ -1796,7 +1916,7 @@ function ArtifactAgentDock({
   }, [threadId, transport]);
   if (!open) return null;
   const heading = defaultScopeLabel(scope);
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "aside",
     {
       className: cn(
@@ -1805,38 +1925,38 @@ function ArtifactAgentDock({
       ),
       "aria-label": `Agent chat about ${heading}`,
       children: [
-        /* @__PURE__ */ jsxs5("header", { className: "flex items-center justify-between border-b border-[var(--md3-outline-variant)] bg-surface-container-low px-4 py-3", children: [
-          /* @__PURE__ */ jsxs5("div", { className: "flex min-w-0 items-center gap-2", children: [
-            /* @__PURE__ */ jsx5(Sparkles2, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
-            /* @__PURE__ */ jsxs5("div", { className: "min-w-0", children: [
-              /* @__PURE__ */ jsx5("div", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground", children: "Discussing" }),
-              /* @__PURE__ */ jsx5("div", { className: "truncate text-sm font-semibold text-foreground", children: heading })
+        /* @__PURE__ */ jsxs6("header", { className: "flex items-center justify-between border-b border-[var(--md3-outline-variant)] bg-surface-container-low px-4 py-3", children: [
+          /* @__PURE__ */ jsxs6("div", { className: "flex min-w-0 items-center gap-2", children: [
+            /* @__PURE__ */ jsx7(Sparkles2, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+            /* @__PURE__ */ jsxs6("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx7("div", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground", children: "Discussing" }),
+              /* @__PURE__ */ jsx7("div", { className: "truncate text-sm font-semibold text-foreground", children: heading })
             ] })
           ] }),
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx7(
             "button",
             {
               type: "button",
               onClick: () => onOpenChange(false),
               "aria-label": "Close artifact chat",
               className: "rounded-md p-1 text-muted-foreground transition-colors hover:bg-surface-container-high hover:text-foreground",
-              children: /* @__PURE__ */ jsx5(X2, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ jsx7(X2, { className: "h-4 w-4" })
             }
           )
         ] }),
-        /* @__PURE__ */ jsx5("div", { ref: scrollRef, className: "flex-1 overflow-y-auto px-3 py-4", children: loading ? /* @__PURE__ */ jsx5("div", { className: "px-3 py-8 text-center text-xs text-muted-foreground", children: "Loading conversation\u2026" }) : messages.length === 0 && !streamContent ? /* @__PURE__ */ jsxs5("div", { className: "px-3 py-12 text-center", children: [
-          /* @__PURE__ */ jsx5(Sparkles2, { className: "mx-auto mb-3 h-5 w-5 text-muted-foreground/40" }),
-          /* @__PURE__ */ jsxs5("p", { className: "text-sm text-foreground", children: [
+        /* @__PURE__ */ jsx7("div", { ref: scrollRef, className: "flex-1 overflow-y-auto px-3 py-4", children: loading ? /* @__PURE__ */ jsx7("div", { className: "px-3 py-8 text-center text-xs text-muted-foreground", children: "Loading conversation\u2026" }) : messages.length === 0 && !streamContent ? /* @__PURE__ */ jsxs6("div", { className: "px-3 py-12 text-center", children: [
+          /* @__PURE__ */ jsx7(Sparkles2, { className: "mx-auto mb-3 h-5 w-5 text-muted-foreground/40" }),
+          /* @__PURE__ */ jsxs6("p", { className: "text-sm text-foreground", children: [
             "Ask the agent about this ",
             scope.kind === "vault-file" ? "document" : scope.kind,
             "."
           ] }),
-          /* @__PURE__ */ jsx5("p", { className: "mt-1 text-xs text-muted-foreground", children: "It can read the current contents and propose edits, rewrites, or follow-ups." })
-        ] }) : /* @__PURE__ */ jsxs5("div", { className: "space-y-3", children: [
-          messages.map((m) => /* @__PURE__ */ jsx5(ChatMessage, { role: m.role, content: m.content, timestamp: m.createdAt }, m.id)),
-          streamContent && /* @__PURE__ */ jsx5(ChatMessage, { role: "assistant", content: streamContent, isStreaming: true })
+          /* @__PURE__ */ jsx7("p", { className: "mt-1 text-xs text-muted-foreground", children: "It can read the current contents and propose edits, rewrites, or follow-ups." })
+        ] }) : /* @__PURE__ */ jsxs6("div", { className: "space-y-3", children: [
+          messages.map((m) => /* @__PURE__ */ jsx7(ChatMessage, { role: m.role, content: m.content, timestamp: m.createdAt }, m.id)),
+          streamContent && /* @__PURE__ */ jsx7(ChatMessage, { role: "assistant", content: streamContent, isStreaming: true })
         ] }) }),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx7(
           "form",
           {
             className: "border-t border-[var(--md3-outline-variant)] bg-surface-container-low p-3",
@@ -1844,8 +1964,8 @@ function ArtifactAgentDock({
               e.preventDefault();
               void send();
             },
-            children: /* @__PURE__ */ jsxs5("div", { className: "flex items-end gap-2", children: [
-              /* @__PURE__ */ jsx5(
+            children: /* @__PURE__ */ jsxs6("div", { className: "flex items-end gap-2", children: [
+              /* @__PURE__ */ jsx7(
                 "textarea",
                 {
                   value: composer,
@@ -1862,23 +1982,23 @@ function ArtifactAgentDock({
                   className: "min-h-[44px] flex-1 resize-none rounded-[20px] border border-[var(--md3-outline-variant)] bg-surface-dim px-3.5 py-2 text-sm text-foreground placeholder:text-muted-foreground transition-colors focus:outline-none focus:border-[var(--border-accent)] disabled:opacity-50"
                 }
               ),
-              sending ? /* @__PURE__ */ jsx5(
+              sending ? /* @__PURE__ */ jsx7(
                 "button",
                 {
                   type: "button",
                   onClick: cancel,
                   "aria-label": "Cancel",
                   className: "inline-flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-surface-container-high hover:text-foreground",
-                  children: /* @__PURE__ */ jsx5(Square2, { className: "h-4 w-4" })
+                  children: /* @__PURE__ */ jsx7(Square2, { className: "h-4 w-4" })
                 }
-              ) : /* @__PURE__ */ jsx5(
+              ) : /* @__PURE__ */ jsx7(
                 "button",
                 {
                   type: "submit",
                   disabled: !composer.trim() || !threadId,
                   "aria-label": "Send",
                   className: "inline-flex h-9 w-9 items-center justify-center rounded-full bg-primary text-primary-foreground transition-colors hover:bg-primary/90 disabled:opacity-50",
-                  children: /* @__PURE__ */ jsx5(Send, { className: "h-4 w-4" })
+                  children: /* @__PURE__ */ jsx7(Send, { className: "h-4 w-4" })
                 }
               )
             ] })