@tangle-network/sandbox-ui 0.97.0 → 0.99.0

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

@@ -1,29 +1,6 @@
 import {
   formatBytes
 } from "./chunk-TK46XFLM.js";
-import {
-  HARNESS_OPTIONS,
-  HarnessLogo,
-  chatCapableHarnesses
-} from "./chunk-WSN2RZC6.js";
-import {
-  ModelPicker,
-  PickerMenuFooter,
-  PickerMenuMeta,
-  PickerMenuSearch,
-  PickerMenuSection,
-  PickerMenuTag,
-  isTextChatModel,
-  pickerMenuBodyClass,
-  pickerMenuContentClass,
-  pickerMenuItemClass,
-  stripBrandPrefix
-} from "./chunk-WMVUJ5SA.js";
-import {
-  ModelBrandStack,
-  canonicalModelId,
-  resolveModelBrandIdentity
-} from "./chunk-5XRAKVIV.js";
 import {
   cn
 } from "./chunk-EI44GEQ5.js";
@@ -46,22 +23,6 @@ import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import { Brain, ChevronDown, Sparkles } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var REASONING_LADDER = reasoningLadder;
-function clampReasoningLevel(value, available) {
-  if (value === "auto" || !available || available.includes(value)) {
-    return value;
-  }
-  const requestedRank = REASONING_LADDER.indexOf(value);
-  let closest;
-  let closestRank = -1;
-  for (const effort of available) {
-    const rank = REASONING_LADDER.indexOf(effort);
-    if (rank <= requestedRank && rank > closestRank) {
-      closest = effort;
-      closestRank = rank;
-    }
-  }
-  return closest ?? "auto";
-}
 function ReasoningGlyph({ level }) {
   if (level === "auto") {
     return /* @__PURE__ */ jsx(Sparkles, { className: "h-3.5 w-3.5 text-muted-foreground" });
@@ -184,1573 +145,973 @@ function ReasoningLevelPicker({
   ] });
 }
 
-// src/chat/agent-session-controls.tsx
-import {
-  harnessHonorsEffort,
-  harnessHonorsModel,
-  reasoningEffortsFor
-} from "@tangle-network/agent-interface";
-import * as DropdownMenu2 from "@radix-ui/react-dropdown-menu";
-import { ChevronDown as ChevronDown3, SlidersHorizontal } from "lucide-react";
-import * as React5 from "react";
-
-// src/chat/harness-model-compat.ts
+// src/chat/agent-composer.tsx
 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
+  ArrowUp,
+  Folder,
+  Loader2,
+  Paperclip,
+  RotateCcw,
+  Square,
+  Upload,
+  X
+} from "lucide-react";
 import * as React from "react";
-function useClickOutside(onOutside, extras) {
-  const ref = React.useRef(null);
-  const extrasRef = React.useRef(extras);
-  extrasRef.current = extras;
-  React.useEffect(() => {
-    function handler(event) {
-      const target = event.target;
-      if (!ref.current || ref.current.contains(target)) return;
-      if (extrasRef.current?.some((extra) => extra.current?.contains(target))) return;
-      onOutside();
+
+// src/chat/attachment-validation.ts
+function isAcceptedType(file, accept) {
+  if (!accept || accept.trim().length === 0) return true;
+  const patterns = accept.split(",").map((pattern) => pattern.trim()).filter((pattern) => pattern.length > 0);
+  if (patterns.length === 0) return true;
+  const name = file.name.toLowerCase();
+  const type = (file.type || "").toLowerCase();
+  return patterns.some((pattern) => {
+    const lowerPattern = pattern.toLowerCase();
+    if (lowerPattern.startsWith(".")) {
+      return name.endsWith(lowerPattern);
     }
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [onOutside]);
-  return ref;
+    if (lowerPattern.endsWith("/*")) {
+      const prefix = lowerPattern.slice(0, -1);
+      return type.startsWith(prefix);
+    }
+    return type === lowerPattern;
+  });
 }
-
-// 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
-    );
+function validateComposerFiles(files, config) {
+  const { maxSizeBytes, maxCount, currentCount = 0, accept } = config;
+  const list = Array.isArray(files) ? files : Array.from(files);
+  const accepted = [];
+  const rejected = [];
+  for (const file of list) {
+    if (!isAcceptedType(file, accept)) {
+      rejected.push({
+        file,
+        reason: `"${file.name}" is not an accepted file type (${accept}).`
+      });
+      continue;
+    }
+    if (maxSizeBytes !== void 0 && file.size > maxSizeBytes) {
+      rejected.push({
+        file,
+        reason: `"${file.name}" (${formatBytes(file.size)}) exceeds the ${formatBytes(maxSizeBytes)} limit.`
+      });
+      continue;
+    }
+    if (maxCount !== void 0 && currentCount + accepted.length >= maxCount) {
+      rejected.push({
+        file,
+        reason: `"${file.name}" was not added \u2014 the ${maxCount}-file limit is already reached.`
+      });
+      continue;
+    }
+    accepted.push(file);
   }
-);
+  return { accepted, rejected };
+}
 
-// src/chat/informative-lock.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-function InformativeLock({
-  children,
-  ariaLabel,
-  lockTitle,
-  lockBody,
-  newChatLabel,
-  onNewChat,
+// src/chat/agent-composer.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var IMAGE_EXTENSION_BY_MIME = {
+  "image/png": "png",
+  "image/jpeg": "jpg",
+  "image/jpg": "jpg",
+  "image/gif": "gif",
+  "image/webp": "webp",
+  "image/bmp": "bmp",
+  "image/svg+xml": "svg"
+};
+function isGenericImageName(name) {
+  return /^(image)?(\.[a-z0-9]+)?$/i.test(name.trim());
+}
+function imageExtension(file) {
+  const fromMime = IMAGE_EXTENSION_BY_MIME[file.type.toLowerCase()];
+  if (fromMime) return fromMime;
+  const fromName = /\.([a-z0-9]+)$/i.exec(file.name)?.[1];
+  return fromName?.toLowerCase() ?? "png";
+}
+var MentionEditor = React.lazy(() => import("./mention-editor-3Q6MYOIU.js"));
+function AgentComposer({
+  value,
+  onChange,
+  onSubmit,
+  placeholder = "Send a message\u2026",
+  disabled,
+  busy,
+  onCancel,
+  controls,
+  trailing,
+  onAttach,
+  onAttachFolder,
+  attachments = [],
+  onRemoveFile,
+  onRetryFile,
+  accept,
+  onRejectFiles,
+  dropTitle = "Drop files to add context",
+  dropDescription = "They attach to your next message.",
+  canSubmitWhileBusy = false,
+  canSubmitAttachmentsOnly = false,
+  mention,
+  focusShortcut = false,
+  minRows = 2,
+  maxHeight = 200,
   className,
-  triggerClassName,
-  popoverClassName,
-  side = "top"
+  sendLabel = "Send",
+  autoFocus
 }) {
-  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 textareaRef = React.useRef(null);
+  const richFocusRef = React.useRef(null);
+  const fileInputRef = React.useRef(null);
+  const folderInputRef = React.useRef(null);
+  const [dragOver, setDragOver] = React.useState(false);
+  const dragDepth = React.useRef(0);
+  const pastedImageCount = React.useRef(0);
+  const resize = React.useCallback(
+    (el) => {
+      el.style.height = "auto";
+      el.style.height = `${Math.min(el.scrollHeight, maxHeight)}px`;
+    },
+    [maxHeight]
+  );
+  React.useEffect(() => {
+    if (textareaRef.current) resize(textareaRef.current);
+  }, [value, resize]);
+  React.useEffect(() => {
+    if (!focusShortcut || disabled) return;
+    function onKeyDown(event) {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "l") {
+        event.preventDefault();
+        if (mention) richFocusRef.current?.();
+        else textareaRef.current?.focus();
+      }
     }
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [focusShortcut, disabled, mention]);
+  const canSend = !disabled && (!busy || canSubmitWhileBusy) && (value.trim().length > 0 || canSubmitAttachmentsOnly && attachments.length > 0);
+  const submit = () => {
+    if (!canSend) return;
+    onSubmit();
+  };
+  const registerRichFocus = React.useCallback((focus) => {
+    richFocusRef.current = focus;
   }, []);
-  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 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;
-  return `${count} ${count === 1 ? "tool group" : "tool groups"}`;
-}
-function AgentProfilePicker({
-  value,
-  onChange,
-  profiles,
-  capabilities,
-  onCreate,
-  onUpdate,
-  onDelete,
-  disabled,
-  locked,
-  lockReason,
-  onNewChat,
-  className,
-  triggerClassName,
-  popoverClassName,
-  side = "top"
-}) {
-  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);
-  }
-  async function save(draft) {
-    if (draft.id) await onUpdate?.(draft.id, draft);
-    else await onCreate?.(draft);
-    setComposing(null);
-  }
-  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 || 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",
-          triggerClassName
-        ),
-        "data-state": open ? "open" : "closed",
-        "aria-label": "Agent profile",
-        children: [
-          /* @__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 && !locked && /* @__PURE__ */ jsx4(
-      AnchoredPopover,
-      {
-        ref: popoverRef,
-        anchorRef: ref,
-        side,
-        className: cn(
-          "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]",
-          popoverClassName
-        ),
-        "data-testid": "agent-profile-popover",
-        children: composing ? /* @__PURE__ */ jsx4(
-          ProfileForm,
-          {
-            capabilities: capabilities ?? [],
-            initial: composing === "new" ? void 0 : composing,
-            onCancel: () => setComposing(null),
-            onSave: save
-          }
-        ) : /* @__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,
-              title: profile.name,
-              subtitle: profileSubtitle(profile),
-              onSelect: () => select(profile.id)
-            },
-            profile.id
-          )),
-          custom.length > 0 && /* @__PURE__ */ jsx4(SectionHeader, { children: "Your agents" }),
-          custom.map((profile) => /* @__PURE__ */ jsx4(
-            ProfileRow,
-            {
-              active: profile.id === value,
-              title: profile.name,
-              subtitle: profileSubtitle(profile),
-              onSelect: () => select(profile.id),
-              onEdit: canAuthor ? () => setComposing(profile) : void 0,
-              onDelete: onDelete ? () => void onDelete(profile.id) : void 0
-            },
-            profile.id
-          )),
-          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__ */ jsx4(Plus2, { className: "h-4 w-4" }),
-                " New agent\u2026"
-              ]
-            }
-          )
-        ] })
-      }
-    )
-  ] });
-}
-function SectionHeader({ 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,
-  title,
-  subtitle,
-  onSelect,
-  onEdit,
-  onDelete
-}) {
-  return /* @__PURE__ */ jsxs3(
-    "div",
-    {
-      className: cn(
-        "group flex items-center gap-2 rounded-md px-2.5 py-2 text-sm transition-colors",
-        active ? "bg-[var(--accent-surface-soft)] text-[var(--accent-text)]" : "hover:bg-accent/40"
-      ),
-      children: [
-        /* @__PURE__ */ jsxs3(
-          "button",
-          {
-            type: "button",
-            onClick: onSelect,
-            className: "flex min-w-0 flex-1 items-center gap-2 text-left",
-            children: [
-              /* @__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__ */ 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__ */ jsx4(Pencil, { className: "h-3 w-3" })
-            }
-          ),
-          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__ */ jsx4(Trash2, { className: "h-3 w-3" })
-            }
-          )
-        ] })
-      ]
-    }
-  );
-}
-function ProfileForm({
-  capabilities,
-  initial,
-  onCancel,
-  onSave
-}) {
-  const [name, setName] = React4.useState(initial?.name ?? "");
-  const [caps, setCaps] = React4.useState(
-    initial?.capabilities ? [...initial.capabilities] : capabilities.map((c) => c.id)
-  );
-  const [instructions, setInstructions] = React4.useState(initial?.instructions ?? "");
-  const toggle = (id) => setCaps(
-    (prev) => prev.includes(id) ? prev.filter((c) => c !== id) : [...prev, id]
-  );
-  return /* @__PURE__ */ jsxs3("div", { className: "space-y-3 p-2.5", children: [
-    /* @__PURE__ */ jsx4(
-      "input",
-      {
-        autoFocus: true,
-        value: name,
-        onChange: (event) => setName(event.target.value),
-        placeholder: "Agent name (e.g. Tax Reviewer)",
-        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__ */ 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__ */ jsx4(
-              "input",
-              {
-                type: "checkbox",
-                checked: caps.includes(cap.id),
-                onChange: () => toggle(cap.id),
-                className: "mt-0.5"
-              }
-            ),
-            /* @__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__ */ jsx4(
-      "textarea",
-      {
-        value: instructions,
-        onChange: (event) => setInstructions(event.target.value),
-        rows: 2,
-        placeholder: "Instructions (optional) \u2014 how this agent should behave",
-        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__ */ jsxs3("div", { className: "flex justify-end gap-2", children: [
-      /* @__PURE__ */ jsx4(
-        "button",
-        {
-          type: "button",
-          onClick: onCancel,
-          className: "rounded-lg px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent/40",
-          children: "Cancel"
-        }
-      ),
-      /* @__PURE__ */ jsx4(
-        "button",
-        {
-          type: "button",
-          disabled: !name.trim(),
-          onClick: () => onSave({
-            id: initial?.id,
-            name: name.trim(),
-            capabilities: caps,
-            instructions: instructions.trim()
-          }),
-          className: "rounded-lg bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90 disabled:opacity-40",
-          children: "Save agent"
-        }
-      )
-    ] })
-  ] });
-}
-
-// src/chat/agent-session-controls.tsx
-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);
-  if (ownModel && ownEffort) return "own model + thinking";
-  if (ownModel) return "own model";
-  if (ownEffort) return "own thinking";
-  return null;
-}
-var HARNESS_GROUP_LABELS = {
-  steerable: "Uses your model & thinking",
-  fixed: "Brings its own setup",
-  "no-agent": "No agent"
-};
-var HARNESS_GROUP_ORDER = [
-  "steerable",
-  "fixed",
-  "no-agent"
-];
-function harnessGroup(option) {
-  if (!option.chatCapable) return "no-agent";
-  return harnessAutonomyNote(option.type) === null ? "steerable" : "fixed";
-}
-var HARNESS_SEARCH_THRESHOLD = 7;
-function HarnessDropdown({
-  value,
-  onChange,
-  available,
-  disabled,
-  locked,
-  lockReason,
-  onNewChat,
-  lockTitle,
-  lockBody,
-  newChatLabel,
-  side = "bottom",
-  align = "start",
-  avoidCollisions,
-  triggerClassName
-}) {
-  const allowed = new Set(
-    available ?? HARNESS_OPTIONS.map((h) => h.type)
-  );
-  const options = HARNESS_OPTIONS.filter((h) => allowed.has(h.type));
-  const selected = options.find((option) => option.type === value);
-  const [query, setQuery] = React5.useState("");
-  const showSearch = options.length > HARNESS_SEARCH_THRESHOLD;
-  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 = React5.useMemo(() => {
-    const byGroup = /* @__PURE__ */ new Map();
-    for (const option of filtered) {
-      const key = harnessGroup(option);
-      const bucket = byGroup.get(key);
-      if (bucket) bucket.push(option);
-      else byGroup.set(key, [option]);
-    }
-    return HARNESS_GROUP_ORDER.map((key) => ({
-      key,
-      label: HARNESS_GROUP_LABELS[key],
-      items: byGroup.get(key) ?? []
-    })).filter((section) => section.items.length > 0);
-  }, [filtered]);
-  if (locked && onNewChat) {
-    const label = selected?.label ?? value;
-    return /* @__PURE__ */ jsxs4(
-      InformativeLock,
-      {
-        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,
-        children: [
-          /* @__PURE__ */ jsx5(HarnessLogo, { type: value, size: 16 }),
-          /* @__PURE__ */ jsx5("span", { children: label })
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs4(
-    DropdownMenu2.Root,
-    {
-      onOpenChange: (nextOpen) => {
-        if (!nextOpen) setQuery("");
-      },
-      children: [
-        /* @__PURE__ */ jsx5(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs4(
-          "button",
-          {
-            type: "button",
-            disabled: disabled || locked,
-            title: locked ? lockReason : void 0,
-            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",
-              triggerClassName
-            ),
-            "aria-label": "Agent harness",
-            children: [
-              /* @__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__ */ jsx5(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsxs4(
-          DropdownMenu2.Content,
-          {
-            side,
-            align,
-            avoidCollisions,
-            collisionPadding: 24,
-            sideOffset: 6,
-            className: pickerMenuContentClass,
-            children: [
-              showSearch && /* @__PURE__ */ jsx5(
-                PickerMenuSearch,
-                {
-                  value: query,
-                  onChange: setQuery,
-                  placeholder: "Search agents..."
-                }
-              ),
-              /* @__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) => {
-                    event.preventDefault();
-                    onChange(option.type);
-                  },
-                  className: pickerMenuItemClass({
-                    active: option.type === value
-                  }),
-                  children: [
-                    /* @__PURE__ */ jsx5(
-                      HarnessLogo,
-                      {
-                        type: option.type,
-                        size: 20,
-                        className: "mt-0.5"
-                      }
-                    ),
-                    /* @__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__ */ jsx5(PickerMenuMeta, { parts: [option.description] })
-                    ] })
-                  ]
-                },
-                option.type
-              )) }, section.key)) }),
-              showSearch && /* @__PURE__ */ jsxs4(PickerMenuFooter, { children: [
-                filtered.length,
-                " of ",
-                options.length,
-                " agent",
-                options.length === 1 ? "" : "s"
-              ] })
-            ]
-          }
-        ) })
-      ]
-    }
-  );
-}
-function modelReasoningCapability(models, canonicalId) {
-  if (!models || !canonicalId) return null;
-  const entry = models.find((m) => canonicalModelId(m) === canonicalId);
-  return entry ? {
-    supportsReasoning: entry.supportsReasoning,
-    maxEffort: entry.maxReasoningEffort
-  } : null;
-}
-function AgentSessionControls({
-  harness,
-  profile,
-  model,
-  reasoning,
-  filterModelsToHarness,
-  trailing,
-  className,
-  context = "chat",
-  layout = "inline",
-  menuPlacement = "auto"
-}) {
-  if (!harness && !profile && !model && !reasoning && !trailing) return null;
-  const restrictModelsToHarness = Boolean(
-    harness && (harness.locked || filterModelsToHarness)
-  );
-  const selectorHonorsModel = !harness || harnessHonorsModel(harness.value);
-  const selectorHonorsEffort = !harness || harnessHonorsEffort(harness.value);
-  const clampEffort = (harnessValue, modelId) => {
-    if (!reasoning) return;
-    const available = reasoningEffortsFor(
-      harnessValue,
-      modelReasoningCapability(model?.models, modelId)
-    );
-    const clamped = clampReasoningLevel(reasoning.value, available);
-    if (clamped !== reasoning.value) reasoning.onChange(clamped);
+  const dropEnabled = Boolean(onAttach);
+  const handleDragEnter = (event) => {
+    if (!dropEnabled) return;
+    event.preventDefault();
+    event.stopPropagation();
+    dragDepth.current++;
+    if (event.dataTransfer?.types.includes("Files")) setDragOver(true);
   };
-  const handleHarnessChange = (next) => {
-    harness?.onChange(next);
-    let nextModelId = model?.value;
-    if (model) {
-      const snapped = snapModelToHarness(next, model.value, model.models);
-      if (snapped !== model.value) {
-        model.onChange(snapped);
-        nextModelId = snapped;
-      }
+  const handleDragLeave = (event) => {
+    if (!dropEnabled) return;
+    event.preventDefault();
+    event.stopPropagation();
+    dragDepth.current--;
+    if (dragDepth.current <= 0) {
+      dragDepth.current = 0;
+      setDragOver(false);
     }
-    clampEffort(next, nextModelId);
   };
-  const handleModelChange = (nextModelId) => {
-    model?.onChange(nextModelId);
-    let nextHarness = harness?.value;
-    if (harness && !restrictModelsToHarness) {
-      const snapped = snapHarnessToModel(harness.value, nextModelId);
-      if (snapped !== harness.value) {
-        harness.onChange(snapped);
-        nextHarness = snapped;
-      }
-    }
-    if (nextHarness) clampEffort(nextHarness, nextModelId);
+  const handleDragOver = (event) => {
+    if (!dropEnabled) return;
+    event.preventDefault();
+    event.stopPropagation();
+    if (event.dataTransfer) event.dataTransfer.dropEffect = "copy";
   };
-  const chatModels = model && context === "chat" && model.modalities === void 0 ? model.models.filter(isTextChatModel) : model?.models;
-  const visibleModels = model && restrictModelsToHarness && harness ? (chatModels ?? []).filter(
-    (entry) => isModelCompatibleWithHarness(
-      harness.value,
-      canonicalModelId(entry)
-    )
-  ) : chatModels;
-  const harnessAvailable = harness?.available ?? (context === "chat" ? chatCapableHarnesses : void 0);
-  const collapsed = layout === "gear" || layout === "combined";
-  const menuSide = collapsed ? "left" : "bottom";
-  const menuAlign = collapsed ? "end" : "start";
-  const collapsedTriggerClass = layout === "combined" ? "w-full bg-transparent shadow-none hover:bg-muted/60 data-[state=open]:bg-muted/60" : collapsed ? "w-full" : void 0;
-  const secondaryTriggerClass = collapsed ? collapsedTriggerClass : cn(
-    "border-transparent bg-transparent text-muted-foreground shadow-none",
-    "hover:border-transparent hover:bg-muted/50 hover:text-foreground",
-    "data-[state=open]:border-transparent data-[state=open]:bg-muted/50 data-[state=open]:text-foreground"
-  );
-  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__ */ jsx5(
-    HarnessDropdown,
-    {
-      ...harness,
-      available: harnessAvailable,
-      onChange: handleHarnessChange,
-      side: menuSide,
-      align: menuAlign,
-      avoidCollisions,
-      triggerClassName: secondaryTriggerClass
-    }
-  );
-  const profileNode = profile && /* @__PURE__ */ jsx5(
-    AgentProfilePicker,
-    {
-      value: profile.value,
-      onChange: profile.onChange,
-      profiles: profile.profiles,
-      capabilities: profile.capabilities,
-      onCreate: profile.onCreate,
-      onUpdate: profile.onUpdate,
-      onDelete: profile.onDelete,
-      disabled: profile.disabled,
-      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__ */ jsx5(
-    ModelPicker,
-    {
-      variant: "pill",
-      label: "",
-      value: model.value,
-      onChange: handleModelChange,
-      models: visibleModels ?? [],
-      loading: model.loading,
-      popular: model.popular,
-      recents: model.recents,
-      modalities: model.modalities,
-      excludeProviders: model.excludeProviders,
-      disabled: model.disabled || (visibleModels ?? []).length === 0 || !selectorHonorsModel,
-      side: collapsed ? void 0 : "bottom",
-      avoidCollisions,
-      triggerClassName: modelTriggerClass
-    }
-  );
-  const modelReasoning = modelReasoningCapability(model?.models, model?.value);
-  const reasoningOptions = (harness && HARNESS_REASONING_OPTIONS[harness.value]) ?? reasoning?.options;
-  const reasoningNode = reasoning && /* @__PURE__ */ jsx5(
-    ReasoningLevelPicker,
-    {
-      value: reasoning.value,
-      onChange: reasoning.onChange,
-      options: reasoningOptions,
-      disabled: reasoning.disabled || !selectorHonorsEffort,
-      available: harness ? reasoningEffortsFor(harness.value, modelReasoning) : reasoning.available,
-      side: collapsed ? void 0 : "bottom",
-      avoidCollisions,
-      triggerClassName: secondaryTriggerClass
-    }
-  );
-  if (layout === "gear") {
-    return /* @__PURE__ */ jsx5(
-      GearControls,
-      {
-        className,
-        profileNode,
-        harnessNode,
-        modelNode,
-        reasoningNode,
-        trailing
-      }
-    );
-  }
-  if (layout === "combined") {
-    const segments = [];
-    if (harness) {
-      const harnessLabel = HARNESS_OPTIONS.find((option) => option.type === harness.value)?.label ?? harness.value;
-      segments.push({
-        key: "harness",
-        label: harnessLabel,
-        node: /* @__PURE__ */ jsxs4("span", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx5(HarnessLogo, { type: harness.value, size: 16, className: "shrink-0" }),
-          harnessLabel
-        ] })
-      });
-    }
-    if (model && selectorHonorsModel) {
-      const current = (model.models ?? []).find(
-        (entry) => canonicalModelId(entry) === model.value
-      );
-      const identity = current ? resolveModelBrandIdentity(current) : null;
-      const modelLabel = stripBrandPrefix(
-        current?.name ?? current?.id ?? model.value,
-        identity
-      );
-      segments.push({
-        key: "model",
-        label: modelLabel,
-        node: /* @__PURE__ */ jsxs4("span", { className: "flex items-center gap-1.5", children: [
-          identity && /* @__PURE__ */ jsx5(ModelBrandStack, { identity, size: "sm" }),
-          modelLabel
-        ] })
-      });
-    }
-    if (reasoning && selectorHonorsEffort) {
-      const effortLabel = (reasoningOptions ?? DEFAULT_REASONING_LEVEL_OPTIONS).find(
-        (option) => option.value === reasoning.value
-      )?.label ?? "Auto";
-      segments.push({
-        key: "effort",
-        label: effortLabel,
-        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__ */ 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",
-          "aria-hidden": true,
-          children: "\xB7"
-        }
-      ),
-      segment.node
-    ] }, segment.key)) });
-    return /* @__PURE__ */ jsx5(
-      SummaryControls,
-      {
-        className,
-        summary,
-        title: segments.map((segment) => segment.label).join(" \xB7 "),
-        contentSide: menuPlacement === "down" ? "bottom" : "top",
-        profileNode,
-        harnessNode,
-        modelNode,
-        reasoningNode,
-        trailing
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs4(
-    "div",
-    {
-      className: cn("flex flex-wrap items-center gap-2", className),
-      "data-testid": "agent-session-controls",
-      children: [
-        profileNode,
-        harnessNode,
-        modelNode,
-        reasoningNode,
-        trailing && /* @__PURE__ */ jsx5("div", { className: "ml-auto flex items-center gap-2", children: trailing })
-      ]
-    }
-  );
-}
-function GearControls({
-  className,
-  profileNode,
-  harnessNode,
-  modelNode,
-  reasoningNode,
-  trailing
-}) {
-  return /* @__PURE__ */ jsx5(
-    CollapsibleControls,
-    {
-      className,
-      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",
-        "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"
-      ),
-      contentSide: "top",
-      contentClassName: cn(
-        "w-56 gap-2 border-[var(--md3-outline-variant)] bg-surface-container-highest p-2",
-        "shadow-[0_8px_30px_rgba(0,0,0,0.45)] ring-1 ring-[#ffffff14]"
-      ),
-      profileNode,
-      harnessNode,
-      modelNode,
-      reasoningNode,
-      trailing
-    }
-  );
-}
-function GearSection({
-  label,
-  children
-}) {
-  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
-  ] });
-}
-function SummaryControls({
-  className,
-  summary,
-  title,
-  contentSide,
-  profileNode,
-  harnessNode,
-  modelNode,
-  reasoningNode,
-  trailing
-}) {
-  return /* @__PURE__ */ jsx5(
-    CollapsibleControls,
-    {
-      className,
-      trigger: /* @__PURE__ */ jsxs4(Fragment2, { children: [
-        summary,
-        /* @__PURE__ */ jsx5(ChevronDown3, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" })
-      ] }),
-      triggerTitle: title,
-      triggerClassName: cn(
-        // Container-less trigger (Codex-style): bare label + chevron docked in
-        // the composer footer, no border/card/shadow. Only a subtle rounded
-        // hover/open tint marks it as interactive.
-        "inline-flex h-8 items-center gap-1.5 rounded-md px-1.5",
-        "whitespace-nowrap text-xs font-medium text-foreground transition-colors",
-        "hover:bg-muted/50 focus:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-        "data-[state=open]:bg-muted/50"
-      ),
-      contentSide,
-      contentClassName: "w-64 gap-2.5 border-border bg-popover p-2.5 text-popover-foreground shadow-lg",
-      profileNode,
-      harnessNode,
-      modelNode,
-      reasoningNode,
-      trailing
+  const deliverFiles = (files) => {
+    if (!onAttach || files.length === 0) return;
+    const { accepted, rejected } = validateComposerFiles(files, { accept });
+    if (rejected.length > 0) onRejectFiles?.(rejected);
+    if (accepted.length === 0) return;
+    const dt = new DataTransfer();
+    for (const file of accepted) dt.items.add(file);
+    onAttach(dt.files);
+  };
+  const handleDrop = (event) => {
+    if (!dropEnabled) return;
+    event.preventDefault();
+    event.stopPropagation();
+    dragDepth.current = 0;
+    setDragOver(false);
+    const files = event.dataTransfer?.files;
+    if (files?.length) deliverFiles(Array.from(files));
+  };
+  const renamePastedFiles = (files) => files.map((file) => {
+    if (file.type.startsWith("image/") && isGenericImageName(file.name)) {
+      pastedImageCount.current += 1;
+      return new File(
+        [file],
+        `pasted-image-${pastedImageCount.current}.${imageExtension(file)}`,
+        { type: file.type }
+      );
     }
+    return file;
+  });
+  const handlePaste = (event) => {
+    if (!onAttach) return;
+    const clipboardFiles = event.clipboardData?.files;
+    if (!clipboardFiles || clipboardFiles.length === 0) return;
+    event.preventDefault();
+    deliverFiles(renamePastedFiles(Array.from(clipboardFiles)));
+  };
+  const handleEditorPasteFiles = (clipboardFiles) => {
+    if (!onAttach || clipboardFiles.length === 0) return false;
+    deliverFiles(renamePastedFiles(Array.from(clipboardFiles)));
+    return true;
+  };
+  const folderChips = attachments.filter((file) => file.kind === "folder");
+  const fileChips = attachments.filter((file) => file.kind !== "folder");
+  const attachButtonClass = cn(
+    "flex size-8 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors",
+    "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"
   );
-}
-function CollapsibleControls({
-  className,
-  trigger,
-  triggerTitle,
-  triggerClassName,
-  contentSide,
-  contentClassName,
-  profileNode,
-  harnessNode,
-  modelNode,
-  reasoningNode,
-  trailing
-}) {
-  return /* @__PURE__ */ jsxs4(
-    "div",
-    {
-      className: cn("flex items-center gap-2", className),
-      "data-testid": "agent-session-controls",
-      children: [
-        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",
+  return /* @__PURE__ */ jsxs2("div", { className: cn("relative", className), children: [
+    dragOver && /* @__PURE__ */ jsx2("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__ */ jsxs2("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsx2("span", { className: "mx-auto mb-2 flex size-11 items-center justify-center rounded-xl bg-primary/10 text-primary", children: /* @__PURE__ */ jsx2(Upload, { className: "size-5" }) }),
+      /* @__PURE__ */ jsx2("p", { className: "font-semibold text-foreground text-sm", children: dropTitle }),
+      /* @__PURE__ */ jsx2("p", { className: "mt-0.5 text-muted-foreground text-xs", children: dropDescription })
+    ] }) }),
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        "data-testid": "agent-composer",
+        onDragEnter: handleDragEnter,
+        onDragLeave: handleDragLeave,
+        onDragOver: handleDragOver,
+        onDrop: handleDrop,
+        className: cn(
+          "flex flex-col gap-2 rounded-2xl border border-[var(--md3-outline-variant)] bg-surface-container-high p-2.5 shadow-sm transition-colors",
+          "focus-within:border-primary/60",
+          disabled && "opacity-60"
+        ),
+        children: [
+          attachments.length > 0 && /* @__PURE__ */ jsx2("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__ */ jsxs2(
+              "span",
+              {
+                title: isError ? file.errorMessage : void 0,
+                className: cn(
+                  "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs",
+                  isError ? "border-[var(--status-error,#ff4d6d)]/40 text-[var(--status-error,#ff4d6d)]" : "border-[var(--md3-outline-variant)] bg-surface-container text-foreground",
+                  isPending && "opacity-60"
+                ),
+                children: [
+                  file.kind !== "folder" && file.previewUrl ? /* @__PURE__ */ jsx2(
+                    "img",
+                    {
+                      src: file.previewUrl,
+                      alt: "",
+                      className: "size-8 rounded object-cover"
+                    }
+                  ) : file.kind === "folder" ? /* @__PURE__ */ jsx2(Folder, { className: "size-3 shrink-0" }) : /* @__PURE__ */ jsx2(Paperclip, { className: "size-3 shrink-0" }),
+                  /* @__PURE__ */ jsx2("span", { className: "max-w-[150px] truncate", children: file.name }),
+                  file.fileCount !== void 0 && /* @__PURE__ */ jsxs2("span", { className: "text-muted-foreground", children: [
+                    "(",
+                    file.fileCount,
+                    ")"
+                  ] }),
+                  file.status === "uploading" && /* @__PURE__ */ jsx2(Loader2, { className: "size-3 animate-spin" }),
+                  isError && file.errorMessage && /* @__PURE__ */ jsx2("span", { className: "max-w-[150px] truncate text-[var(--status-error,#ff4d6d)]/80", children: file.errorMessage }),
+                  isError && onRetryFile && /* @__PURE__ */ jsx2(
+                    "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__ */ jsx2(RotateCcw, { className: "size-3" })
+                    }
+                  ),
+                  onRemoveFile && /* @__PURE__ */ jsx2(
+                    "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__ */ jsx2(X, { className: "size-3" })
+                    }
+                  )
+                ]
+              },
+              file.id
+            );
+          }) }),
+          mention ? /* @__PURE__ */ jsx2(
+            React.Suspense,
             {
-              type: "button",
-              "aria-label": "Session controls",
-              title: triggerTitle,
-              className: triggerClassName,
-              children: trigger
+              fallback: /* @__PURE__ */ jsx2(
+                "textarea",
+                {
+                  rows: minRows,
+                  value,
+                  disabled: true,
+                  placeholder,
+                  "aria-label": "Message input",
+                  className: cn(
+                    "w-full resize-none bg-transparent px-2 py-1 text-sm leading-relaxed text-foreground outline-none",
+                    "placeholder:text-muted-foreground"
+                  )
+                }
+              ),
+              children: /* @__PURE__ */ jsx2(
+                MentionEditor,
+                {
+                  value,
+                  onChange,
+                  onSubmit: submit,
+                  placeholder,
+                  disabled,
+                  autoFocus,
+                  minRows,
+                  maxHeight,
+                  mention,
+                  registerFocus: registerRichFocus,
+                  onPasteFiles: onAttach ? handleEditorPasteFiles : void 0
+                }
+              )
             }
-          ) }),
-          /* @__PURE__ */ jsx5(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsxs4(
-            DropdownMenu2.Content,
+          ) : /* @__PURE__ */ jsx2(
+            "textarea",
             {
-              side: contentSide,
-              align: "end",
-              sideOffset: 8,
-              onInteractOutside: (event) => {
-                const target = event.target;
-                if (target?.closest(
-                  "[data-radix-popper-content-wrapper],[data-radix-menu-content],[role=menu],[role=listbox]"
-                )) {
+              ref: textareaRef,
+              rows: minRows,
+              value,
+              disabled,
+              autoFocus,
+              onChange: (event) => onChange(event.target.value),
+              onInput: (event) => resize(event.currentTarget),
+              onPaste: handlePaste,
+              onKeyDown: (event) => {
+                if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing && event.keyCode !== 229) {
                   event.preventDefault();
+                  submit();
                 }
               },
+              placeholder,
+              "aria-label": "Message input",
               className: cn(
-                "z-50 flex flex-col rounded-[var(--radius-md)] border",
-                "data-[state=open]:animate-in data-[state=closed]:animate-out",
-                "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-                "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-                contentClassName
-              ),
-              children: [
-                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 })
-              ]
+                "w-full resize-none bg-transparent px-2 py-1 text-sm leading-relaxed text-foreground outline-none",
+                "placeholder:text-muted-foreground"
+              )
             }
-          ) })
-        ] })
-      ]
-    }
-  );
+          ),
+          /* @__PURE__ */ jsxs2("div", { className: "flex items-end gap-2", children: [
+            onAttach && /* @__PURE__ */ jsxs2(Fragment, { children: [
+              /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => fileInputRef.current?.click(),
+                  disabled,
+                  "aria-label": "Attach files",
+                  title: "Attach files",
+                  className: attachButtonClass,
+                  children: /* @__PURE__ */ jsx2(Paperclip, { className: "size-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                "input",
+                {
+                  ref: fileInputRef,
+                  type: "file",
+                  multiple: true,
+                  className: "hidden",
+                  accept,
+                  onChange: (event) => {
+                    if (event.target.files?.length)
+                      deliverFiles(Array.from(event.target.files));
+                    event.target.value = "";
+                  }
+                }
+              )
+            ] }),
+            onAttachFolder && /* @__PURE__ */ jsxs2(Fragment, { children: [
+              /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => folderInputRef.current?.click(),
+                  disabled,
+                  "aria-label": "Attach folder",
+                  title: "Attach folder",
+                  className: attachButtonClass,
+                  children: /* @__PURE__ */ jsx2(Folder, { className: "size-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                "input",
+                {
+                  ref: folderInputRef,
+                  type: "file",
+                  multiple: true,
+                  className: "hidden",
+                  onChange: (event) => {
+                    if (event.target.files?.length)
+                      (onAttachFolder ?? onAttach)?.(event.target.files);
+                    event.target.value = "";
+                  },
+                  ...{ webkitdirectory: "" }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs2("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,
+              trailing && /* @__PURE__ */ jsx2("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: trailing })
+            ] }),
+            busy && onCancel ? /* @__PURE__ */ jsx2(
+              "button",
+              {
+                type: "button",
+                onClick: onCancel,
+                "aria-label": "Stop response",
+                className: cn(
+                  "flex size-9 shrink-0 items-center justify-center rounded-full",
+                  "bg-[var(--status-error,#ff4d6d)]/15 text-[var(--status-error,#ff4d6d)] transition-colors",
+                  "hover:bg-[var(--status-error,#ff4d6d)]/25"
+                ),
+                children: /* @__PURE__ */ jsx2(Square, { className: "size-3.5 fill-current" })
+              }
+            ) : /* @__PURE__ */ jsx2(
+              "button",
+              {
+                type: "button",
+                onClick: submit,
+                disabled: !canSend,
+                "aria-label": sendLabel,
+                className: cn(
+                  "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__ */ jsx2(Loader2, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsx2(ArrowUp, { className: "size-4" })
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    focusShortcut && /* @__PURE__ */ jsx2("div", { className: "mt-1.5 flex justify-end px-1", children: /* @__PURE__ */ jsxs2("span", { className: "text-muted-foreground text-xs", children: [
+      /* @__PURE__ */ jsx2("kbd", { className: "rounded border border-[var(--md3-outline-variant)] bg-surface-container px-1 py-0.5 text-[10px]", children: "Cmd" }),
+      /* @__PURE__ */ jsx2("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__ */ jsx2("span", { className: "ml-1", children: "to focus" })
+    ] }) })
+  ] });
 }
 
-// src/chat/agent-composer.tsx
-import {
-  ArrowUp,
-  Folder,
-  Loader2,
-  Paperclip,
-  RotateCcw,
-  Square,
-  Upload,
-  X
-} from "lucide-react";
-import * as React6 from "react";
+// src/chat/agent-profile-picker.tsx
+import { Bot, Check, ChevronDown as ChevronDown2, Pencil, Plus as Plus2, Trash2 } from "lucide-react";
+import * as React5 from "react";
 
-// src/chat/attachment-validation.ts
-function isAcceptedType(file, accept) {
-  if (!accept || accept.trim().length === 0) return true;
-  const patterns = accept.split(",").map((pattern) => pattern.trim()).filter((pattern) => pattern.length > 0);
-  if (patterns.length === 0) return true;
-  const name = file.name.toLowerCase();
-  const type = (file.type || "").toLowerCase();
-  return patterns.some((pattern) => {
-    const lowerPattern = pattern.toLowerCase();
-    if (lowerPattern.startsWith(".")) {
-      return name.endsWith(lowerPattern);
-    }
-    if (lowerPattern.endsWith("/*")) {
-      const prefix = lowerPattern.slice(0, -1);
-      return type.startsWith(prefix);
+// src/lib/use-click-outside.ts
+import * as React2 from "react";
+function useClickOutside(onOutside, extras) {
+  const ref = React2.useRef(null);
+  const extrasRef = React2.useRef(extras);
+  extrasRef.current = extras;
+  React2.useEffect(() => {
+    function handler(event) {
+      const target = event.target;
+      if (!ref.current || ref.current.contains(target)) return;
+      if (extrasRef.current?.some((extra) => extra.current?.contains(target))) return;
+      onOutside();
     }
-    return type === lowerPattern;
-  });
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [onOutside]);
+  return ref;
 }
-function validateComposerFiles(files, config) {
-  const { maxSizeBytes, maxCount, currentCount = 0, accept } = config;
-  const list = Array.isArray(files) ? files : Array.from(files);
-  const accepted = [];
-  const rejected = [];
-  for (const file of list) {
-    if (!isAcceptedType(file, accept)) {
-      rejected.push({
-        file,
-        reason: `"${file.name}" is not an accepted file type (${accept}).`
-      });
-      continue;
-    }
-    if (maxSizeBytes !== void 0 && file.size > maxSizeBytes) {
-      rejected.push({
-        file,
-        reason: `"${file.name}" (${formatBytes(file.size)}) exceeds the ${formatBytes(maxSizeBytes)} limit.`
-      });
-      continue;
-    }
-    if (maxCount !== void 0 && currentCount + accepted.length >= maxCount) {
-      rejected.push({
-        file,
-        reason: `"${file.name}" was not added \u2014 the ${maxCount}-file limit is already reached.`
-      });
-      continue;
-    }
-    accepted.push(file);
+
+// src/chat/anchored-popover.tsx
+import * as React3 from "react";
+import { createPortal } from "react-dom";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var AnchoredPopover = React3.forwardRef(
+  function AnchoredPopover2({ anchorRef, side, children, className, style, ...rest }, forwardedRef) {
+    const innerRef = React3.useRef(null);
+    const setRefs = (node) => {
+      innerRef.current = node;
+      if (typeof forwardedRef === "function") forwardedRef(node);
+      else if (forwardedRef) forwardedRef.current = node;
+    };
+    const [position, setPosition] = React3.useState(null);
+    const place = React3.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]);
+    React3.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__ */ jsx3(
+        "div",
+        {
+          ...rest,
+          ref: setRefs,
+          className: cn("fixed z-50", className),
+          style: {
+            ...style,
+            pointerEvents: "auto",
+            ...position ?? { visibility: "hidden", left: 0, top: 0 }
+          },
+          children
+        }
+      ),
+      document.body
+    );
   }
-  return { accepted, rejected };
-}
+);
 
-// src/chat/agent-composer.tsx
-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",
-  "image/jpg": "jpg",
-  "image/gif": "gif",
-  "image/webp": "webp",
-  "image/bmp": "bmp",
-  "image/svg+xml": "svg"
-};
-function isGenericImageName(name) {
-  return /^(image)?(\.[a-z0-9]+)?$/i.test(name.trim());
-}
-function imageExtension(file) {
-  const fromMime = IMAGE_EXTENSION_BY_MIME[file.type.toLowerCase()];
-  if (fromMime) return fromMime;
-  const fromName = /\.([a-z0-9]+)$/i.exec(file.name)?.[1];
-  return fromName?.toLowerCase() ?? "png";
-}
-var MentionEditor = React6.lazy(() => import("./mention-editor-3Q6MYOIU.js"));
-function AgentComposer({
-  value,
-  onChange,
-  onSubmit,
-  placeholder = "Send a message\u2026",
-  disabled,
-  busy,
-  onCancel,
-  harness,
-  profile,
-  model,
-  reasoning,
-  context = "chat",
-  controls,
-  trailing,
-  onAttach,
-  onAttachFolder,
-  attachments = [],
-  onRemoveFile,
-  onRetryFile,
-  accept,
-  onRejectFiles,
-  dropTitle = "Drop files to add context",
-  dropDescription = "They attach to your next message.",
-  canSubmitWhileBusy = false,
-  canSubmitAttachmentsOnly = false,
-  mention,
-  focusShortcut = false,
-  minRows = 2,
-  maxHeight = 200,
+// src/chat/informative-lock.tsx
+import { Lock, Plus } from "lucide-react";
+import * as React4 from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function InformativeLock({
+  children,
+  ariaLabel,
+  lockTitle,
+  lockBody,
+  newChatLabel,
+  onNewChat,
   className,
-  sendLabel = "Send",
-  autoFocus
+  triggerClassName,
+  popoverClassName,
+  side = "top"
 }) {
-  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]
-  );
-  React6.useEffect(() => {
-    if (textareaRef.current) resize(textareaRef.current);
-  }, [value, resize]);
-  React6.useEffect(() => {
-    if (!focusShortcut || disabled) return;
-    function onKeyDown(event) {
-      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "l") {
-        event.preventDefault();
-        if (mention) richFocusRef.current?.();
-        else textareaRef.current?.focus();
-      }
+  const [open, setOpen] = React4.useState(false);
+  const closeTimer = React4.useRef(null);
+  const popoverRef = React4.useRef(null);
+  const ref = useClickOutside(() => setOpen(false), [popoverRef]);
+  const cancelClose = React4.useCallback(() => {
+    if (closeTimer.current) {
+      clearTimeout(closeTimer.current);
+      closeTimer.current = null;
     }
-    document.addEventListener("keydown", onKeyDown);
-    return () => document.removeEventListener("keydown", onKeyDown);
-  }, [focusShortcut, disabled, mention]);
-  const canSend = !disabled && (!busy || canSubmitWhileBusy) && (value.trim().length > 0 || canSubmitAttachmentsOnly && attachments.length > 0);
-  const submit = () => {
-    if (!canSend) return;
-    onSubmit();
-  };
-  const registerRichFocus = React6.useCallback((focus) => {
-    richFocusRef.current = focus;
   }, []);
-  const dropEnabled = Boolean(onAttach);
-  const handleDragEnter = (event) => {
-    if (!dropEnabled) return;
-    event.preventDefault();
-    event.stopPropagation();
-    dragDepth.current++;
-    if (event.dataTransfer?.types.includes("Files")) setDragOver(true);
-  };
-  const handleDragLeave = (event) => {
-    if (!dropEnabled) return;
-    event.preventDefault();
-    event.stopPropagation();
-    dragDepth.current--;
-    if (dragDepth.current <= 0) {
-      dragDepth.current = 0;
-      setDragOver(false);
-    }
-  };
-  const handleDragOver = (event) => {
-    if (!dropEnabled) return;
-    event.preventDefault();
-    event.stopPropagation();
-    if (event.dataTransfer) event.dataTransfer.dropEffect = "copy";
-  };
-  const deliverFiles = (files) => {
-    if (!onAttach || files.length === 0) return;
-    const { accepted, rejected } = validateComposerFiles(files, { accept });
-    if (rejected.length > 0) onRejectFiles?.(rejected);
-    if (accepted.length === 0) return;
-    const dt = new DataTransfer();
-    for (const file of accepted) dt.items.add(file);
-    onAttach(dt.files);
-  };
-  const handleDrop = (event) => {
-    if (!dropEnabled) return;
-    event.preventDefault();
-    event.stopPropagation();
-    dragDepth.current = 0;
-    setDragOver(false);
-    const files = event.dataTransfer?.files;
-    if (files?.length) deliverFiles(Array.from(files));
-  };
-  const renamePastedFiles = (files) => files.map((file) => {
-    if (file.type.startsWith("image/") && isGenericImageName(file.name)) {
-      pastedImageCount.current += 1;
-      return new File(
-        [file],
-        `pasted-image-${pastedImageCount.current}.${imageExtension(file)}`,
-        { type: file.type }
-      );
+  const scheduleClose = React4.useCallback(() => {
+    cancelClose();
+    closeTimer.current = setTimeout(() => setOpen(false), 150);
+  }, [cancelClose]);
+  React4.useEffect(() => cancelClose, [cancelClose]);
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      ref,
+      className: cn("relative inline-flex", className),
+      onMouseEnter: () => {
+        cancelClose();
+        setOpen(true);
+      },
+      onMouseLeave: scheduleClose,
+      onKeyDown: (event) => {
+        if (event.key === "Escape") setOpen(false);
+      },
+      children: [
+        /* @__PURE__ */ jsx4(
+          "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__ */ jsxs3(
+          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__ */ jsxs3("p", { className: "flex items-start gap-2 text-sm font-medium text-foreground", children: [
+                /* @__PURE__ */ jsx4(Lock, { className: "mt-0.5 h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
+                /* @__PURE__ */ jsx4("span", { children: lockTitle })
+              ] }),
+              /* @__PURE__ */ jsx4("p", { className: "mt-1.5 text-xs text-muted-foreground", children: lockBody }),
+              /* @__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__ */ jsx4(Plus, { className: "h-4 w-4" }),
+                    newChatLabel
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
     }
-    return file;
-  });
-  const handlePaste = (event) => {
-    if (!onAttach) return;
-    const clipboardFiles = event.clipboardData?.files;
-    if (!clipboardFiles || clipboardFiles.length === 0) return;
-    event.preventDefault();
-    deliverFiles(renamePastedFiles(Array.from(clipboardFiles)));
-  };
-  const handleEditorPasteFiles = (clipboardFiles) => {
-    if (!onAttach || clipboardFiles.length === 0) return false;
-    deliverFiles(renamePastedFiles(Array.from(clipboardFiles)));
-    return true;
-  };
-  const folderChips = attachments.filter((file) => file.kind === "folder");
-  const fileChips = attachments.filter((file) => file.kind !== "folder");
-  const attachButtonClass = cn(
-    "flex size-8 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors",
-    "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__ */ 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__ */ jsxs5(
-      "div",
+}
+
+// src/chat/agent-profile-picker.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function profileSubtitle(profile) {
+  if (profile.description) return profile.description;
+  const count = profile.capabilities?.length ?? 0;
+  return `${count} ${count === 1 ? "tool group" : "tool groups"}`;
+}
+function AgentProfilePicker({
+  value,
+  onChange,
+  profiles,
+  capabilities,
+  onCreate,
+  onUpdate,
+  onDelete,
+  disabled,
+  locked,
+  lockReason,
+  onNewChat,
+  className,
+  triggerClassName,
+  popoverClassName,
+  side = "top"
+}) {
+  const [open, setOpen] = React5.useState(false);
+  const [composing, setComposing] = React5.useState(
+    null
+  );
+  const popoverRef = React5.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;
+  React5.useEffect(() => {
+    if (!locked) return;
+    setOpen(false);
+    setComposing(null);
+  }, [locked]);
+  function select(id) {
+    onChange(id);
+    setOpen(false);
+  }
+  async function save(draft) {
+    if (draft.id) await onUpdate?.(draft.id, draft);
+    else await onCreate?.(draft);
+    setComposing(null);
+  }
+  if (locked && onNewChat) {
+    return /* @__PURE__ */ jsxs4(
+      InformativeLock,
       {
-        "data-testid": "agent-composer",
-        onDragEnter: handleDragEnter,
-        onDragLeave: handleDragLeave,
-        onDragOver: handleDragOver,
-        onDrop: handleDrop,
+        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__ */ jsx5(Bot, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+          /* @__PURE__ */ jsx5("span", { className: "max-w-[140px] truncate", children: selectedName })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs4("div", { ref, className: cn("relative inline-flex", className), children: [
+    /* @__PURE__ */ jsxs4(
+      "button",
+      {
+        type: "button",
+        disabled: disabled || locked,
+        title: locked ? lockReason : void 0,
+        onClick: () => setOpen((v) => !v),
         className: cn(
-          "flex flex-col gap-2 rounded-2xl border border-[var(--md3-outline-variant)] bg-surface-container-high p-2.5 shadow-sm transition-colors",
-          "focus-within:border-primary/60",
-          disabled && "opacity-60"
+          "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",
+          triggerClassName
         ),
+        "data-state": open ? "open" : "closed",
+        "aria-label": "Agent profile",
         children: [
-          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__ */ jsxs5(
-              "span",
-              {
-                title: isError ? file.errorMessage : void 0,
-                className: cn(
-                  "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs",
-                  isError ? "border-[var(--status-error,#ff4d6d)]/40 text-[var(--status-error,#ff4d6d)]" : "border-[var(--md3-outline-variant)] bg-surface-container text-foreground",
-                  isPending && "opacity-60"
-                ),
-                children: [
-                  file.kind !== "folder" && file.previewUrl ? /* @__PURE__ */ jsx6(
-                    "img",
-                    {
-                      src: file.previewUrl,
-                      alt: "",
-                      className: "size-8 rounded object-cover"
-                    }
-                  ) : 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__ */ 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__ */ jsx6(RotateCcw, { className: "size-3" })
-                    }
-                  ),
-                  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__ */ jsx6(X, { className: "size-3" })
-                    }
-                  )
-                ]
-              },
-              file.id
-            );
-          }) }),
-          mention ? /* @__PURE__ */ jsx6(
-            React6.Suspense,
+          /* @__PURE__ */ jsx5(Bot, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+          /* @__PURE__ */ jsx5("span", { className: "max-w-[140px] truncate", children: selectedName }),
+          !locked && /* @__PURE__ */ jsx5(ChevronDown2, { className: "ml-auto h-3.5 w-3.5 shrink-0 text-muted-foreground" })
+        ]
+      }
+    ),
+    open && !locked && /* @__PURE__ */ jsx5(
+      AnchoredPopover,
+      {
+        ref: popoverRef,
+        anchorRef: ref,
+        side,
+        className: cn(
+          "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]",
+          popoverClassName
+        ),
+        "data-testid": "agent-profile-popover",
+        children: composing ? /* @__PURE__ */ jsx5(
+          ProfileForm,
+          {
+            capabilities: capabilities ?? [],
+            initial: composing === "new" ? void 0 : composing,
+            onCancel: () => setComposing(null),
+            onSave: save
+          }
+        ) : /* @__PURE__ */ jsxs4("div", { className: "max-h-[min(60vh,420px)] overflow-y-auto", children: [
+          /* @__PURE__ */ jsx5(SectionHeader, { children: "Modes" }),
+          builtins.map((profile) => /* @__PURE__ */ jsx5(
+            ProfileRow,
             {
-              fallback: /* @__PURE__ */ jsx6(
-                "textarea",
-                {
-                  rows: minRows,
-                  value,
-                  disabled: true,
-                  placeholder,
-                  "aria-label": "Message input",
-                  className: cn(
-                    "w-full resize-none bg-transparent px-2 py-1 text-sm leading-relaxed text-foreground outline-none",
-                    "placeholder:text-muted-foreground"
-                  )
-                }
-              ),
-              children: /* @__PURE__ */ jsx6(
-                MentionEditor,
-                {
-                  value,
-                  onChange,
-                  onSubmit: submit,
-                  placeholder,
-                  disabled,
-                  autoFocus,
-                  minRows,
-                  maxHeight,
-                  mention,
-                  registerFocus: registerRichFocus,
-                  onPasteFiles: onAttach ? handleEditorPasteFiles : void 0
-                }
-              )
+              active: profile.id === value,
+              title: profile.name,
+              subtitle: profileSubtitle(profile),
+              onSelect: () => select(profile.id)
+            },
+            profile.id
+          )),
+          custom.length > 0 && /* @__PURE__ */ jsx5(SectionHeader, { children: "Your agents" }),
+          custom.map((profile) => /* @__PURE__ */ jsx5(
+            ProfileRow,
+            {
+              active: profile.id === value,
+              title: profile.name,
+              subtitle: profileSubtitle(profile),
+              onSelect: () => select(profile.id),
+              onEdit: canAuthor ? () => setComposing(profile) : void 0,
+              onDelete: onDelete ? () => void onDelete(profile.id) : void 0
+            },
+            profile.id
+          )),
+          canAuthor && /* @__PURE__ */ jsxs4(
+            "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__ */ jsx5(Plus2, { className: "h-4 w-4" }),
+                " New agent\u2026"
+              ]
             }
-          ) : /* @__PURE__ */ jsx6(
-            "textarea",
+          )
+        ] })
+      }
+    )
+  ] });
+}
+function SectionHeader({ children }) {
+  return /* @__PURE__ */ jsx5("div", { className: "px-2.5 pb-1 pt-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70", children });
+}
+function ProfileRow({
+  active,
+  title,
+  subtitle,
+  onSelect,
+  onEdit,
+  onDelete
+}) {
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      className: cn(
+        "group flex items-center gap-2 rounded-md px-2.5 py-2 text-sm transition-colors",
+        active ? "bg-[var(--accent-surface-soft)] text-[var(--accent-text)]" : "hover:bg-accent/40"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs4(
+          "button",
+          {
+            type: "button",
+            onClick: onSelect,
+            className: "flex min-w-0 flex-1 items-center gap-2 text-left",
+            children: [
+              /* @__PURE__ */ jsx5("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center", children: active && /* @__PURE__ */ jsx5(Check, { className: "h-3.5 w-3.5" }) }),
+              /* @__PURE__ */ jsxs4("span", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx5("span", { className: "block truncate font-medium", children: title }),
+                /* @__PURE__ */ jsx5("span", { className: "block truncate text-xs text-muted-foreground", children: subtitle })
+              ] })
+            ]
+          }
+        ),
+        (onEdit || onDelete) && /* @__PURE__ */ jsxs4("span", { className: "flex shrink-0 items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100", children: [
+          onEdit && /* @__PURE__ */ jsx5(
+            "button",
             {
-              ref: textareaRef,
-              rows: minRows,
-              value,
-              disabled,
-              autoFocus,
-              onChange: (event) => onChange(event.target.value),
-              onInput: (event) => resize(event.currentTarget),
-              onPaste: handlePaste,
-              onKeyDown: (event) => {
-                if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing && event.keyCode !== 229) {
-                  event.preventDefault();
-                  submit();
-                }
-              },
-              placeholder,
-              "aria-label": "Message input",
-              className: cn(
-                "w-full resize-none bg-transparent px-2 py-1 text-sm leading-relaxed text-foreground outline-none",
-                "placeholder:text-muted-foreground"
-              )
+              type: "button",
+              onClick: onEdit,
+              title: "Edit",
+              className: "rounded p-1 text-muted-foreground hover:text-foreground",
+              children: /* @__PURE__ */ jsx5(Pencil, { className: "h-3 w-3" })
             }
           ),
-          /* @__PURE__ */ jsxs5("div", { className: "flex items-end gap-2", children: [
-            onAttach && /* @__PURE__ */ jsxs5(Fragment3, { children: [
-              /* @__PURE__ */ jsx6(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => fileInputRef.current?.click(),
-                  disabled,
-                  "aria-label": "Attach files",
-                  title: "Attach files",
-                  className: attachButtonClass,
-                  children: /* @__PURE__ */ jsx6(Paperclip, { className: "size-4" })
-                }
-              ),
-              /* @__PURE__ */ jsx6(
-                "input",
-                {
-                  ref: fileInputRef,
-                  type: "file",
-                  multiple: true,
-                  className: "hidden",
-                  accept,
-                  onChange: (event) => {
-                    if (event.target.files?.length)
-                      deliverFiles(Array.from(event.target.files));
-                    event.target.value = "";
-                  }
-                }
-              )
-            ] }),
-            onAttachFolder && /* @__PURE__ */ jsxs5(Fragment3, { children: [
-              /* @__PURE__ */ jsx6(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => folderInputRef.current?.click(),
-                  disabled,
-                  "aria-label": "Attach folder",
-                  title: "Attach folder",
-                  className: attachButtonClass,
-                  children: /* @__PURE__ */ jsx6(Folder, { className: "size-4" })
-                }
-              ),
-              /* @__PURE__ */ jsx6(
-                "input",
-                {
-                  ref: folderInputRef,
-                  type: "file",
-                  multiple: true,
-                  className: "hidden",
-                  onChange: (event) => {
-                    if (event.target.files?.length)
-                      (onAttachFolder ?? onAttach)?.(event.target.files);
-                    event.target.value = "";
-                  },
-                  ...{ webkitdirectory: "" }
-                }
-              )
-            ] }),
-            /* @__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,
-                  harness,
-                  profile,
-                  model,
-                  reasoning
-                }
-              ),
-              trailing && /* @__PURE__ */ jsx6("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: trailing })
-            ] }),
-            busy && onCancel ? /* @__PURE__ */ jsx6(
-              "button",
-              {
-                type: "button",
-                onClick: onCancel,
-                "aria-label": "Stop response",
-                className: cn(
-                  "flex size-9 shrink-0 items-center justify-center rounded-full",
-                  "bg-[var(--status-error,#ff4d6d)]/15 text-[var(--status-error,#ff4d6d)] transition-colors",
-                  "hover:bg-[var(--status-error,#ff4d6d)]/25"
-                ),
-                children: /* @__PURE__ */ jsx6(Square, { className: "size-3.5 fill-current" })
-              }
-            ) : /* @__PURE__ */ jsx6(
-              "button",
+          onDelete && /* @__PURE__ */ jsx5(
+            "button",
+            {
+              type: "button",
+              onClick: onDelete,
+              title: "Delete",
+              className: "rounded p-1 text-muted-foreground hover:text-[var(--status-error,#ff4d6d)]",
+              children: /* @__PURE__ */ jsx5(Trash2, { className: "h-3 w-3" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function ProfileForm({
+  capabilities,
+  initial,
+  onCancel,
+  onSave
+}) {
+  const [name, setName] = React5.useState(initial?.name ?? "");
+  const [caps, setCaps] = React5.useState(
+    initial?.capabilities ? [...initial.capabilities] : capabilities.map((c) => c.id)
+  );
+  const [instructions, setInstructions] = React5.useState(initial?.instructions ?? "");
+  const toggle = (id) => setCaps(
+    (prev) => prev.includes(id) ? prev.filter((c) => c !== id) : [...prev, id]
+  );
+  return /* @__PURE__ */ jsxs4("div", { className: "space-y-3 p-2.5", children: [
+    /* @__PURE__ */ jsx5(
+      "input",
+      {
+        autoFocus: true,
+        value: name,
+        onChange: (event) => setName(event.target.value),
+        placeholder: "Agent name (e.g. Tax Reviewer)",
+        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__ */ jsxs4("div", { children: [
+      /* @__PURE__ */ jsx5("p", { className: "mb-1.5 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground/70", children: "Tools" }),
+      /* @__PURE__ */ jsx5("div", { className: "space-y-0.5", children: capabilities.map((cap) => /* @__PURE__ */ jsxs4(
+        "label",
+        {
+          className: "flex cursor-pointer items-start gap-2 rounded-md px-2 py-1.5 hover:bg-accent/40",
+          children: [
+            /* @__PURE__ */ jsx5(
+              "input",
               {
-                type: "button",
-                onClick: submit,
-                disabled: !canSend,
-                "aria-label": sendLabel,
-                className: cn(
-                  "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__ */ jsx6(Loader2, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsx6(ArrowUp, { className: "size-4" })
+                type: "checkbox",
+                checked: caps.includes(cap.id),
+                onChange: () => toggle(cap.id),
+                className: "mt-0.5"
               }
-            )
-          ] })
-        ]
+            ),
+            /* @__PURE__ */ jsxs4("span", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx5("span", { className: "block text-sm font-medium", children: cap.label }),
+              cap.description && /* @__PURE__ */ jsx5("span", { className: "block text-xs text-muted-foreground", children: cap.description })
+            ] })
+          ]
+        },
+        cap.id
+      )) })
+    ] }),
+    /* @__PURE__ */ jsx5(
+      "textarea",
+      {
+        value: instructions,
+        onChange: (event) => setInstructions(event.target.value),
+        rows: 2,
+        placeholder: "Instructions (optional) \u2014 how this agent should behave",
+        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"
       }
     ),
-    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" })
-    ] }) })
+    /* @__PURE__ */ jsxs4("div", { className: "flex justify-end gap-2", children: [
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          type: "button",
+          onClick: onCancel,
+          className: "rounded-lg px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent/40",
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsx5(
+        "button",
+        {
+          type: "button",
+          disabled: !name.trim(),
+          onClick: () => onSave({
+            id: initial?.id,
+            name: name.trim(),
+            capabilities: caps,
+            instructions: instructions.trim()
+          }),
+          className: "rounded-lg bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90 disabled:opacity-40",
+          children: "Save agent"
+        }
+      )
+    ] })
   ] });
 }
 
+// src/chat/harness-model-compat.ts
+import { modelProvider, snapHarnessToModel } from "@tangle-network/agent-interface";
+
 // src/chat/artifact-agent-dock.tsx
-import * as React7 from "react";
+import * as React6 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 jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function defaultScopeLabel(scope) {
   if (scope.label) return scope.label;
   switch (scope.kind) {
@@ -1796,23 +1157,23 @@ function ArtifactAgentDock({
   onError,
   className
 }) {
-  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(
+  const [threadId, setThreadId] = React6.useState(null);
+  const [messages, setMessages] = React6.useState([]);
+  const [composer, setComposer] = React6.useState(defaultPrompt ?? "");
+  const [streamContent, setStreamContent] = React6.useState("");
+  const [sending, setSending] = React6.useState(false);
+  const [loading, setLoading] = React6.useState(false);
+  const abortRef = React6.useRef(null);
+  const scrollRef = React6.useRef(null);
+  const scopeTokenRef = React6.useRef(0);
+  const reportError = React6.useCallback(
     (message) => {
       if (onError) onError(message);
       else if (typeof console !== "undefined") console.error("[ArtifactAgentDock]", message);
     },
     [onError]
   );
-  React7.useEffect(() => {
+  React6.useEffect(() => {
     if (!open) return;
     scopeTokenRef.current += 1;
     abortRef.current?.abort();
@@ -1848,11 +1209,11 @@ function ArtifactAgentDock({
       cancelled = true;
     };
   }, [open, scope.kind, scope.key, transport, reportError]);
-  React7.useEffect(() => {
+  React6.useEffect(() => {
     if (!scrollRef.current) return;
     scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
   }, [messages.length, streamContent]);
-  const send = React7.useCallback(async () => {
+  const send = React6.useCallback(async () => {
     const text = composer.trim();
     if (!text || !threadId || sending) return;
     const token = scopeTokenRef.current;
@@ -1902,7 +1263,7 @@ function ArtifactAgentDock({
       if (abortRef.current === controller) abortRef.current = null;
     }
   }, [composer, threadId, sending, transport, reportError]);
-  const cancel = React7.useCallback(() => {
+  const cancel = React6.useCallback(() => {
     if (threadId && transport.cancel) {
       try {
         void Promise.resolve(transport.cancel({ threadId })).catch(() => {
@@ -1916,7 +1277,7 @@ function ArtifactAgentDock({
   }, [threadId, transport]);
   if (!open) return null;
   const heading = defaultScopeLabel(scope);
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs5(
     "aside",
     {
       className: cn(
@@ -1925,38 +1286,38 @@ function ArtifactAgentDock({
       ),
       "aria-label": `Agent chat about ${heading}`,
       children: [
-        /* @__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__ */ 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__ */ jsx6(Sparkles2, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+            /* @__PURE__ */ jsxs5("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx6("div", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground", children: "Discussing" }),
+              /* @__PURE__ */ jsx6("div", { className: "truncate text-sm font-semibold text-foreground", children: heading })
             ] })
           ] }),
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx6(
             "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__ */ jsx7(X2, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ jsx6(X2, { className: "h-4 w-4" })
             }
           )
         ] }),
-        /* @__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: [
+        /* @__PURE__ */ jsx6("div", { ref: scrollRef, className: "flex-1 overflow-y-auto px-3 py-4", children: loading ? /* @__PURE__ */ jsx6("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__ */ jsx6(Sparkles2, { className: "mx-auto mb-3 h-5 w-5 text-muted-foreground/40" }),
+          /* @__PURE__ */ jsxs5("p", { className: "text-sm text-foreground", children: [
             "Ask the agent about this ",
             scope.kind === "vault-file" ? "document" : scope.kind,
             "."
           ] }),
-          /* @__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__ */ jsx6("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__ */ jsx6(ChatMessage, { role: m.role, content: m.content, timestamp: m.createdAt }, m.id)),
+          streamContent && /* @__PURE__ */ jsx6(ChatMessage, { role: "assistant", content: streamContent, isStreaming: true })
         ] }) }),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx6(
           "form",
           {
             className: "border-t border-[var(--md3-outline-variant)] bg-surface-container-low p-3",
@@ -1964,8 +1325,8 @@ function ArtifactAgentDock({
               e.preventDefault();
               void send();
             },
-            children: /* @__PURE__ */ jsxs6("div", { className: "flex items-end gap-2", children: [
-              /* @__PURE__ */ jsx7(
+            children: /* @__PURE__ */ jsxs5("div", { className: "flex items-end gap-2", children: [
+              /* @__PURE__ */ jsx6(
                 "textarea",
                 {
                   value: composer,
@@ -1982,23 +1343,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__ */ jsx7(
+              sending ? /* @__PURE__ */ jsx6(
                 "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__ */ jsx7(Square2, { className: "h-4 w-4" })
+                  children: /* @__PURE__ */ jsx6(Square2, { className: "h-4 w-4" })
                 }
-              ) : /* @__PURE__ */ jsx7(
+              ) : /* @__PURE__ */ jsx6(
                 "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__ */ jsx7(Send, { className: "h-4 w-4" })
+                  children: /* @__PURE__ */ jsx6(Send, { className: "h-4 w-4" })
                 }
               )
             ] })
@@ -2088,15 +1449,12 @@ export {
   DEFAULT_REASONING_LEVEL_OPTIONS,
   HARNESS_REASONING_OPTIONS,
   ReasoningLevelPicker,
-  isModelCompatibleWithHarness,
-  snapModelToHarness,
-  modelProvider,
-  snapHarnessToModel,
-  AgentProfilePicker,
-  AgentSessionControls,
   isAcceptedType,
   validateComposerFiles,
   AgentComposer,
+  AgentProfilePicker,
+  modelProvider,
+  snapHarnessToModel,
   ArtifactAgentDock,
   createFetchTransport,
   AgentTimeline,