@agents24/chat-react 0.5.29 → 0.5.31

package/dist/scaffold/index.js

@@ -1,3 +1,5 @@
+"use client";
+
 // scaffold/src/app.tsx
 import { createBrowserVisibility } from "@agents24/client/browser";
 import {
@@ -13,7 +15,7 @@ import {
 } from "@agents24/chat-react/runtime";
 import { AgentChatQueue, queuedMessageComposerFiles, useLiveCompletionRuns } from "@agents24/chat-react/ui";
 import { CircleAlert, LoaderCircle as LoaderCircle3, SquarePen as SquarePen2, X } from "lucide-react";
-import * as React8 from "react";
+import * as React9 from "react";
 
 // scaffold/src/components/chat/chat-composer.tsx
 import { ArrowUp, ChevronDown, LoaderCircle, Mic, Square } from "lucide-react";
@@ -21,13 +23,8 @@ import * as React2 from "react";
 import {
   AgentChatContextStatus,
   ChatAttachmentRows,
-  chatComposerAction,
-  createAgentChatComposerFile,
-  revokeAgentChatComposerFiles,
-  useAudioRecorder,
-  useChatComposerFocus
+  useAgentChatComposer
 } from "@agents24/chat-react/ui";
-import { attachmentFileAccept, inputMimeTypes, validateAgentChatSubmission } from "@agents24/chat-react/runtime";
 
 // scaffold/src/components/ui/button.tsx
 import { cva } from "class-variance-authority";
@@ -99,6 +96,21 @@ import { CheckIcon, ChevronRightIcon } from "lucide-react";
 import * as React from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var ThemeContext = React.createContext(null);
+var appearanceEvent = "agents24-chat-appearance-change";
+var subscribeAppearance = (notify) => {
+  window.addEventListener("storage", notify);
+  window.addEventListener(appearanceEvent, notify);
+  return () => {
+    window.removeEventListener("storage", notify);
+    window.removeEventListener(appearanceEvent, notify);
+  };
+};
+var subscribeDarkMode = (notify) => {
+  const media = window.matchMedia?.("(prefers-color-scheme: dark)");
+  media?.addEventListener("change", notify);
+  return () => media?.removeEventListener("change", notify);
+};
+var getDarkMode = () => window.matchMedia?.("(prefers-color-scheme: dark)").matches ?? false;
 var storageKey = "agents24-chat-appearance";
 function storedAppearance() {
   try {
@@ -111,43 +123,33 @@ function storedAppearance() {
 function ThemeProvider({
   children,
   controller,
-  theme = "soft"
+  theme = "soft",
+  mode = "isolated"
 }) {
-  const [internalAppearance, setInternalAppearance] = React.useState("system");
-  const [resolvedAppearance, setResolvedAppearance] = React.useState("light");
-  const [mounted, setMounted] = React.useState(false);
+  const [sessionAppearance, setSessionAppearance] = React.useState(null);
+  const stored = React.useSyncExternalStore(subscribeAppearance, storedAppearance, () => "system");
+  const systemDark = React.useSyncExternalStore(subscribeDarkMode, getDarkMode, () => false);
   const [portalContainer, setPortalContainer] = React.useState(null);
-  const appearance = controller?.appearance ?? internalAppearance;
-  React.useEffect(() => {
-    if (!controller) setInternalAppearance(storedAppearance());
-    setMounted(true);
-  }, [controller]);
-  React.useEffect(() => {
-    if (!mounted || typeof window === "undefined" || typeof window.matchMedia !== "function") return;
-    const media = window.matchMedia("(prefers-color-scheme: dark)");
-    const apply = () => setResolvedAppearance(
-      appearance === "system" ? media.matches ? "dark" : "light" : appearance
-    );
-    apply();
-    media.addEventListener("change", apply);
-    return () => media.removeEventListener("change", apply);
-  }, [appearance, mounted]);
+  const appearance = controller?.appearance ?? sessionAppearance ?? stored;
+  const resolvedAppearance = appearance === "system" ? systemDark ? "dark" : "light" : appearance;
   const change = React.useCallback((next) => {
     if (controller) {
       controller.setAppearance(next);
       return;
     }
+    setSessionAppearance(next);
     try {
       window.localStorage.setItem(storageKey, next);
     } catch {
     }
-    setInternalAppearance(next);
+    window.dispatchEvent(new Event(appearanceEvent));
   }, [controller]);
-  return /* @__PURE__ */ jsx2(ThemeContext.Provider, { value: { appearance, portalContainer, setAppearance: change }, children: /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx2(ThemeContext.Provider, { value: { appearance, portalContainer, setAppearance: change, inherited: mode === "inherit" }, children: /* @__PURE__ */ jsx2(
     "div",
     {
       ref: setPortalContainer,
-      className: `${resolvedAppearance} size-full`,
+      className: mode === "inherit" ? "size-full" : `${resolvedAppearance} size-full`,
+      "data-agents24-theme-mode": mode,
       "data-agents24-theme": theme,
       "data-agents24-theme-root": "",
       children
@@ -449,6 +451,7 @@ function TooltipTrigger({
   asChild: _asChild,
   ...props
 }) {
+  void _asChild;
   return /* @__PURE__ */ jsx6(Slot2.Root, { "data-slot": "tooltip-trigger", ...props });
 }
 function TooltipContent({
@@ -458,6 +461,8 @@ function TooltipContent({
   sideOffset: _sideOffset,
   ...props
 }) {
+  void _align;
+  void _sideOffset;
   return /* @__PURE__ */ jsx6(
     "span",
     {
@@ -481,6 +486,8 @@ function TooltipContent({
 import { Fragment, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 function ChatComposer({
   inputContract,
+  queue,
+  onRecordingStreamChange,
   disabled,
   contextWindow,
   focusKey,
@@ -498,49 +505,35 @@ function ChatComposer({
   restoredDraft,
   utilityRow = "inline"
 }) {
-  const [text, setText] = React2.useState("");
-  const [files, setFiles] = React2.useState([]);
-  const [attachmentError, setAttachmentError] = React2.useState(null);
   const inputRef = React2.useRef(null);
-  const textareaRef = React2.useRef(null);
-  const filesRef = React2.useRef([]);
-  const inFlightFilesRef = React2.useRef([]);
-  const submittingRef = React2.useRef(false);
-  const draftRevisionRef = React2.useRef(0);
-  const attachmentMimeTypes = inputMimeTypes(inputContract);
-  const allowAttachments = attachmentMimeTypes.length > 0;
-  const recordingAllowed = inputContract.modalities.audio.recording_enabled;
-  React2.useEffect(() => {
-    filesRef.current = files;
-  }, [files]);
-  React2.useEffect(() => () => {
-    revokeAgentChatComposerFiles(filesRef.current);
-    revokeAgentChatComposerFiles(inFlightFilesRef.current);
-  }, []);
-  const focusComposer = useChatComposerFocus({
+  const {
+    text,
+    setText,
+    files,
+    removeFile,
+    addFiles,
     textareaRef,
-    disabled: Boolean(disabled),
+    submit,
+    attachmentError,
+    attachmentMimeTypes,
+    allowAttachments,
+    recordingAllowed,
+    recorder,
+    isExpanded,
+    validationError,
+    action,
+    canSubmit
+  } = useAgentChatComposer({
+    inputContract,
+    disabled,
     focusKey,
+    forceExpanded,
+    isCancelling,
+    isRunning,
+    onSubmit,
     restoredDraft,
-    onRestore: (draft) => {
-      draftRevisionRef.current += 1;
-      revokeAgentChatComposerFiles(filesRef.current);
-      setText(draft.text);
-      setFiles(draft.files);
-    }
+    onRecordingStreamChange
   });
-  const addRecording = React2.useCallback((file) => {
-    draftRevisionRef.current += 1;
-    setFiles((current) => [...current, createAgentChatComposerFile(file)]);
-  }, []);
-  const recorder = useAudioRecorder(addRecording);
-  const isExpanded = forceExpanded || text.includes("\n") || text.length > 62;
-  const validationError = validateAgentChatSubmission(
-    inputContract,
-    text,
-    files.map((file) => ({ data: file.source || new Uint8Array(), mediaType: file.mediaType }))
-  );
-  const action = chatComposerAction({ hasDraft: Boolean(text.trim() || files.length), isRunning, isCancelling });
   const selectedAgent = agents.find((item) => item.id === agentId);
   const selectedModel = models.find((item) => item.id === modelId);
   const modelSelector = models.length > 0 ? /* @__PURE__ */ jsx7("div", { className: "w-fit max-w-40", children: /* @__PURE__ */ jsxs3(Select, { disabled: disabled || isRunning, onValueChange: onModelChange, value: modelId || void 0, children: [
@@ -580,66 +573,35 @@ function ChatComposer({
   ] }) : modelSelector;
   const hasContextWindow = Number.isFinite(Number(contextWindow?.max_tokens)) && Number(contextWindow?.max_tokens) > 0;
   const showUtilityRow = utilityRow === "below";
-  const submit = async () => {
-    if (disabled || isCancelling || submittingRef.current || validationError) return;
-    const value = text;
-    const selectedFiles = files;
-    const clearedRevision = draftRevisionRef.current + 1;
-    draftRevisionRef.current = clearedRevision;
-    submittingRef.current = true;
-    inFlightFilesRef.current = selectedFiles;
-    setText("");
-    setFiles([]);
-    focusComposer();
-    try {
-      await onSubmit(value, selectedFiles);
-      revokeAgentChatComposerFiles(selectedFiles);
-      inFlightFilesRef.current = [];
-    } catch {
-      if (draftRevisionRef.current === clearedRevision) {
-        draftRevisionRef.current += 1;
-        setText(value);
-        setFiles(selectedFiles);
-        inFlightFilesRef.current = [];
-      } else {
-        revokeAgentChatComposerFiles(selectedFiles);
-        inFlightFilesRef.current = [];
-      }
-    } finally {
-      submittingRef.current = false;
-    }
-  };
   return /* @__PURE__ */ jsxs3(
     "div",
     {
       className: "relative z-10 w-full pb-[max(1rem,env(safe-area-inset-bottom))]",
       "data-agents24-chat-composer": "",
       children: [
-        allowAttachments && files.length > 0 && /* @__PURE__ */ jsx7("div", { className: "mb-2 min-w-0", children: /* @__PURE__ */ jsx7(
-          ChatAttachmentRows,
-          {
-            attachments: files,
-            onRemove: (attachment) => {
-              if (!attachment.id) return;
-              draftRevisionRef.current += 1;
-              setFiles((current) => {
-                const removed = current.find((file) => file.id === attachment.id);
-                if (removed) revokeAgentChatComposerFiles([removed]);
-                return current.filter((file) => file.id !== attachment.id);
-              });
-            }
-          }
-        ) }),
+        queue,
         attachmentError || recorder.error ? /* @__PURE__ */ jsx7("p", { className: "mb-2 text-xs text-destructive", role: "alert", children: attachmentError || recorder.error }) : null,
         /* @__PURE__ */ jsxs3(
           "div",
           {
             "data-expanded": isExpanded || void 0,
+            "data-attachments": files.length > 0 || void 0,
             className: cn(
               "agents24-composer-grid grid min-w-0 items-center gap-2 rounded-xl border bg-background shadow-sm",
               isExpanded ? "p-2" : "p-1.5"
             ),
             children: [
+              allowAttachments && files.length > 0 && /* @__PURE__ */ jsx7("div", { className: "agents24-composer-attachments min-w-0", children: /* @__PURE__ */ jsx7(
+                ChatAttachmentRows,
+                {
+                  layout: "composer",
+                  attachments: files,
+                  onRemove: (attachment) => {
+                    if (!attachment.id) return;
+                    removeFile(attachment.id);
+                  }
+                }
+              ) }),
               allowAttachments ? /* @__PURE__ */ jsxs3(Fragment, { children: [
                 /* @__PURE__ */ jsx7(
                   "input",
@@ -648,11 +610,9 @@ function ChatComposer({
                     className: "sr-only",
                     type: "file",
                     multiple: true,
-                    accept: attachmentFileAccept(attachmentMimeTypes),
+                    accept: attachmentMimeTypes.join(","),
                     onChange: (event) => {
-                      const selected = Array.from(event.target.files ?? []);
-                      setFiles((current) => [...current, ...selected.map(createAgentChatComposerFile)]);
-                      setAttachmentError(null);
+                      addFiles(Array.from(event.target.files ?? []));
                       event.currentTarget.value = "";
                     }
                   }
@@ -673,7 +633,6 @@ function ChatComposer({
                     isExpanded ? "py-2" : "h-9 py-2"
                   ),
                   onChange: (event) => {
-                    draftRevisionRef.current += 1;
                     setText(event.target.value);
                   },
                   onKeyDown: (event) => {
@@ -713,7 +672,7 @@ function ChatComposer({
                 ) : validationError ? /* @__PURE__ */ jsxs3(Tooltip, { children: [
                   /* @__PURE__ */ jsx7(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx7("span", { tabIndex: 0, "aria-label": validationError, children: /* @__PURE__ */ jsx7(Button, { size: "icon", "aria-label": isRunning ? "Queue message" : "Send message", disabled: true, onClick: () => void submit(), children: /* @__PURE__ */ jsx7(ArrowUp, {}) }) }) }),
                   /* @__PURE__ */ jsx7(TooltipContent, { children: validationError })
-                ] }) : /* @__PURE__ */ jsx7(Button, { size: "icon", "aria-label": isRunning ? "Queue message" : "Send message", disabled, onClick: () => void submit(), children: /* @__PURE__ */ jsx7(ArrowUp, {}) })
+                ] }) : /* @__PURE__ */ jsx7(Button, { size: "icon", "aria-label": isRunning ? "Queue message" : "Send message", disabled: !canSubmit, onClick: () => void submit(), children: /* @__PURE__ */ jsx7(ArrowUp, {}) })
               ] })
             ]
           }
@@ -925,19 +884,20 @@ function DialogDescription({
 import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 function ExternalLinkDialog({ isOpen, onClose, onConfirm, url }) {
   const [copied, setCopied] = React4.useState(false);
-  React4.useEffect(() => {
-    if (!isOpen) setCopied(false);
-  }, [isOpen]);
+  const close = () => {
+    setCopied(false);
+    onClose();
+  };
   const copyUrl = async () => {
     await navigator.clipboard.writeText(url);
     setCopied(true);
   };
   const openUrl = () => {
     onConfirm();
-    onClose();
+    close();
   };
   return /* @__PURE__ */ jsx10(Dialog, { open: isOpen, onOpenChange: (open) => {
-    if (!open) onClose();
+    if (!open) close();
   }, children: /* @__PURE__ */ jsxs6(DialogContent, { className: "max-h-[calc(100dvh-2rem)] min-w-0 overflow-hidden sm:max-w-md", children: [
     /* @__PURE__ */ jsxs6(DialogHeader, { children: [
       /* @__PURE__ */ jsx10(DialogTitle, { children: "Open external link?" }),
@@ -1199,23 +1159,147 @@ function ChatMessage({
   ] }) });
 }
 
-// scaffold/src/components/chat/theme-menu.tsx
-import { Laptop, Moon, Sun } from "lucide-react";
+// scaffold/src/components/chat/subagent-tasks.tsx
 import * as React5 from "react";
+import { useAgentClient, partsFromResponseBlocks } from "@agents24/react";
+import { AgentResponseTimeline as AgentResponseTimeline2 } from "@agents24/chat-react/ui";
+import { useDelegationTasks } from "@agents24/chat-react/runtime";
 import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+function SubagentTasks({ threadId }) {
+  const client = useAgentClient();
+  const source = React5.useMemo(() => ({ events: (input) => client.threads.delegations.events(input) }), [client]);
+  const { tasks, error, refresh } = useDelegationTasks({ threadId, source });
+  const [selection, setSelection] = React5.useState({ threadId: null, handle: null });
+  const selected = selection.threadId === threadId ? selection.handle : null;
+  if (!threadId || !tasks.length && !error) return null;
+  return /* @__PURE__ */ jsx15("section", { "aria-label": "Subagent tasks", className: "mx-auto w-full max-w-3xl px-4 py-2 text-sm", children: /* @__PURE__ */ jsxs9("details", { children: [
+    /* @__PURE__ */ jsxs9("summary", { className: "cursor-pointer font-medium", children: [
+      "Tasks (",
+      tasks.length,
+      ")"
+    ] }),
+    error ? /* @__PURE__ */ jsx15("p", { role: "alert", children: "Task updates are unavailable. Retrying\u2026" }) : null,
+    /* @__PURE__ */ jsx15("ul", { className: "max-h-56 overflow-y-auto", children: tasks.map((task) => /* @__PURE__ */ jsx15("li", { style: { paddingInlineStart: Math.max(0, task.depth - 1) * 12 }, children: /* @__PURE__ */ jsxs9(
+      "button",
+      {
+        type: "button",
+        className: "flex w-full items-center justify-between gap-3 rounded-md px-2 py-2 text-start hover:bg-muted",
+        onClick: () => setSelection({ threadId, handle: selected === task.handle ? null : task.handle }),
+        "aria-expanded": selected === task.handle,
+        children: [
+          /* @__PURE__ */ jsxs9("span", { className: "min-w-0 truncate", children: [
+            task.name,
+            task.background ? " \xB7 Background" : ""
+          ] }),
+          /* @__PURE__ */ jsx15("span", { className: "shrink-0 text-xs text-muted-foreground", children: task.status.replaceAll("_", " ") })
+        ]
+      }
+    ) }, task.handle)) }),
+    tasks.filter((task) => task.handle === selected).map((task) => /* @__PURE__ */ jsx15(TaskConversation, { threadId, task, onChanged: refresh }, `${threadId}:${task.handle}`))
+  ] }) });
+}
+function TaskConversation({ threadId, task, onChanged }) {
+  const client = useAgentClient();
+  const [history, setHistory] = React5.useState(null);
+  const [earlier, setEarlier] = React5.useState([]);
+  const historyInitialized = React5.useRef(false);
+  const [before, setBefore] = React5.useState(null);
+  const [error, setError] = React5.useState(null);
+  const [busy, setBusy] = React5.useState(false);
+  const operation = React5.useRef(null);
+  React5.useEffect(() => {
+    const controller = new AbortController();
+    let timer;
+    const refresh = async () => {
+      try {
+        const page = await client.threads.delegations.history({ threadId, handle: task.handle, signal: controller.signal });
+        if (controller.signal.aborted) return;
+        setHistory(page);
+        if (!historyInitialized.current) {
+          historyInitialized.current = true;
+          setBefore(page.paging.next_before_turn_index);
+        }
+      } catch {
+        if (!controller.signal.aborted) setError("Task history could not be loaded.");
+      } finally {
+        if (!controller.signal.aborted) timer = setTimeout(refresh, 2e3);
+      }
+    };
+    void refresh();
+    return () => {
+      controller.abort();
+      clearTimeout(timer);
+    };
+  }, [client, threadId, task.handle]);
+  const loadEarlier = async () => {
+    if (before === null) return;
+    setBusy(true);
+    try {
+      const page = await client.threads.delegations.history({ threadId, handle: task.handle, before });
+      setEarlier((current) => [...page.turns, ...current]);
+      setBefore(page.paging.next_before_turn_index);
+    } catch {
+      setError("Earlier task history could not be loaded.");
+    } finally {
+      setBusy(false);
+    }
+  };
+  const act = async (action) => {
+    setBusy(true);
+    setError(null);
+    if (operation.current?.action !== action) operation.current = { action, id: crypto.randomUUID() };
+    try {
+      await client.threads.delegations.act({
+        threadId,
+        handle: task.handle,
+        action: { action, operation_id: operation.current.id }
+      });
+      operation.current = null;
+      onChanged();
+    } catch {
+      setError("The task action could not be completed. Try again.");
+    } finally {
+      setBusy(false);
+    }
+  };
+  const turns = Array.from(new Map([...earlier, ...history?.turns || []].map((turn) => [turn.id, turn])).values()).sort((a, b) => a.turn_index - b.turn_index);
+  return /* @__PURE__ */ jsxs9("div", { className: "space-y-3 rounded-md bg-muted/30 p-3", children: [
+    /* @__PURE__ */ jsx15("h3", { className: "font-medium", children: task.name }),
+    error ? /* @__PURE__ */ jsx15("p", { role: "alert", children: error }) : null,
+    /* @__PURE__ */ jsxs9("div", { className: "flex flex-wrap gap-2", children: [
+      task.capabilities.interrupt ? /* @__PURE__ */ jsx15(Button, { variant: "secondary", size: "sm", disabled: busy, onClick: () => void act("interrupt"), children: "Interrupt" }) : null,
+      task.capabilities.cancel ? /* @__PURE__ */ jsx15(Button, { variant: "secondary", size: "sm", disabled: busy, onClick: () => void act("cancel"), children: "Cancel task" }) : null,
+      before !== null ? /* @__PURE__ */ jsx15(Button, { variant: "ghost", size: "sm", disabled: busy, onClick: () => void loadEarlier(), children: "Earlier exchanges" }) : null
+    ] }),
+    /* @__PURE__ */ jsx15("div", { className: "max-h-[55dvh] space-y-4 overflow-y-auto break-words", children: turns.map((turn) => /* @__PURE__ */ jsxs9("article", { className: "space-y-2", children: [
+      turn.assignment_instruction ? /* @__PURE__ */ jsx15("p", { className: "whitespace-pre-wrap text-muted-foreground", children: turn.assignment_instruction }) : null,
+      turn.user_input_text ? /* @__PURE__ */ jsx15("p", { className: "whitespace-pre-wrap", children: turn.user_input_text }) : null,
+      turn.exchanges?.map((exchange) => /* @__PURE__ */ jsxs9("div", { className: "whitespace-pre-wrap break-words text-sm", children: [
+        /* @__PURE__ */ jsx15("p", { className: "text-xs font-medium", children: exchange.sender === "parent" ? "Parent Agent" : "Subagent update" }),
+        exchange.text
+      ] }, exchange.id)),
+      /* @__PURE__ */ jsx15(AgentResponseTimeline2, { message: { id: turn.id, role: "assistant", createdAt: turn.created_at, content: turn.assistant_output_text || "", parts: partsFromResponseBlocks(turn.response_blocks) } })
+    ] }, turn.id)) })
+  ] });
+}
+
+// scaffold/src/components/chat/theme-menu.tsx
+import { Laptop, Moon, Sun } from "lucide-react";
+import * as React6 from "react";
+import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
 var options = [
   { value: "system", label: "System", icon: Laptop },
   { value: "light", label: "Light", icon: Sun },
   { value: "dark", label: "Dark", icon: Moon }
 ];
 function ThemeMenu() {
-  const { appearance, setAppearance } = useTheme();
-  const [open, setOpen] = React5.useState(false);
-  const rootRef = React5.useRef(null);
-  const firstItemRef = React5.useRef(null);
-  const menuId = React5.useId();
+  const { appearance, setAppearance, inherited } = useTheme();
+  const [open, setOpen] = React6.useState(false);
+  const rootRef = React6.useRef(null);
+  const firstItemRef = React6.useRef(null);
+  const menuId = React6.useId();
   const ActiveIcon = options.find((item) => item.value === appearance)?.icon ?? Laptop;
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (!open) return;
     firstItemRef.current?.focus();
     const closeOnOutsidePointer = (event) => {
@@ -1231,9 +1315,10 @@ function ThemeMenu() {
       document.removeEventListener("keydown", closeOnEscape);
     };
   }, [open]);
+  if (inherited) return null;
   const label = appearance === "system" ? "System" : appearance === "light" ? "Light" : "Dark";
-  return /* @__PURE__ */ jsxs9("div", { ref: rootRef, className: "relative", children: [
-    /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsxs10("div", { ref: rootRef, className: "relative", children: [
+    /* @__PURE__ */ jsx16(
       Button,
       {
         "aria-controls": menuId,
@@ -1243,16 +1328,16 @@ function ThemeMenu() {
         onClick: () => setOpen((value) => !value),
         size: "icon-sm",
         variant: "ghost",
-        children: /* @__PURE__ */ jsx15(ActiveIcon, {})
+        children: /* @__PURE__ */ jsx16(ActiveIcon, {})
       }
     ),
-    open ? /* @__PURE__ */ jsx15(
+    open ? /* @__PURE__ */ jsx16(
       "div",
       {
         id: menuId,
         className: "absolute end-0 top-full z-50 mt-1 flex min-w-44 flex-col rounded-xl border bg-popover p-1 text-popover-foreground shadow-md",
         role: "menu",
-        children: options.map(({ value, label: optionLabel, icon: Icon }, index) => /* @__PURE__ */ jsxs9(
+        children: options.map(({ value, label: optionLabel, icon: Icon }, index) => /* @__PURE__ */ jsxs10(
           Button,
           {
             ref: index === 0 ? firstItemRef : void 0,
@@ -1266,7 +1351,7 @@ function ThemeMenu() {
             size: "sm",
             variant: "ghost",
             children: [
-              /* @__PURE__ */ jsx15(Icon, {}),
+              /* @__PURE__ */ jsx16(Icon, {}),
               " ",
               optionLabel
             ]
@@ -1286,16 +1371,16 @@ import { LoaderCircle as LoaderCircle2, SquarePen, Trash2 } from "lucide-react";
 import { LogIn, LogOut, UserRound } from "lucide-react";
 
 // scaffold/src/components/ui/sidebar.tsx
-import * as React7 from "react";
+import * as React8 from "react";
 import { cva as cva3 } from "class-variance-authority";
 import { Slot as Slot4 } from "radix-ui";
 
 // scaffold/src/hooks/use-mobile.ts
-import * as React6 from "react";
+import * as React7 from "react";
 var MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
-  const [isMobile, setIsMobile] = React6.useState(void 0);
-  React6.useEffect(() => {
+  const [isMobile, setIsMobile] = React7.useState(void 0);
+  React7.useEffect(() => {
     const onChange = () => {
       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
     };
@@ -1313,31 +1398,31 @@ function useIsMobile() {
 }
 
 // scaffold/src/components/ui/input.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 
 // scaffold/src/components/ui/separator.tsx
 import { Separator as SeparatorPrimitive } from "radix-ui";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 
 // scaffold/src/components/ui/sheet.tsx
 import { Dialog as SheetPrimitive } from "radix-ui";
 import { XIcon as XIcon2 } from "lucide-react";
-import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
 function Sheet({ ...props }) {
-  return /* @__PURE__ */ jsx18(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
+  return /* @__PURE__ */ jsx19(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
 }
 function SheetPortal({
   container,
   ...props
 }) {
   const themeContainer = useThemePortalContainer();
-  return /* @__PURE__ */ jsx18(SheetPrimitive.Portal, { container: container || themeContainer || void 0, "data-slot": "sheet-portal", ...props });
+  return /* @__PURE__ */ jsx19(SheetPrimitive.Portal, { container: container || themeContainer || void 0, "data-slot": "sheet-portal", ...props });
 }
 function SheetOverlay({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(
     SheetPrimitive.Overlay,
     {
       "data-slot": "sheet-overlay",
@@ -1356,9 +1441,9 @@ function SheetContent({
   showCloseButton = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs10(SheetPortal, { children: [
-    /* @__PURE__ */ jsx18(SheetOverlay, {}),
-    /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(SheetPortal, { children: [
+    /* @__PURE__ */ jsx19(SheetOverlay, {}),
+    /* @__PURE__ */ jsxs11(
       SheetPrimitive.Content,
       {
         "data-slot": "sheet-content",
@@ -1370,18 +1455,18 @@ function SheetContent({
         ...props,
         children: [
           children,
-          showCloseButton && /* @__PURE__ */ jsx18(SheetPrimitive.Close, { "data-slot": "sheet-close", asChild: true, children: /* @__PURE__ */ jsxs10(
+          showCloseButton && /* @__PURE__ */ jsx19(SheetPrimitive.Close, { "data-slot": "sheet-close", asChild: true, children: /* @__PURE__ */ jsxs11(
             Button,
             {
               variant: "ghost",
               className: "absolute top-4 right-4 bg-secondary",
               size: "icon-sm",
               children: [
-                /* @__PURE__ */ jsx18(
+                /* @__PURE__ */ jsx19(
                   XIcon2,
                   {}
                 ),
-                /* @__PURE__ */ jsx18("span", { className: "sr-only", children: "Close" })
+                /* @__PURE__ */ jsx19("span", { className: "sr-only", children: "Close" })
               ]
             }
           ) })
@@ -1391,7 +1476,7 @@ function SheetContent({
   ] });
 }
 function SheetHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(
     "div",
     {
       "data-slot": "sheet-header",
@@ -1404,7 +1489,7 @@ function SheetTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(
     SheetPrimitive.Title,
     {
       "data-slot": "sheet-title",
@@ -1420,7 +1505,7 @@ function SheetDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(
     SheetPrimitive.Description,
     {
       "data-slot": "sheet-description",
@@ -1431,17 +1516,17 @@ function SheetDescription({
 }
 
 // scaffold/src/components/ui/skeleton.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 
 // scaffold/src/components/ui/sidebar.tsx
 import { PanelLeftIcon } from "lucide-react";
-import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
 var SIDEBAR_COOKIE_NAME = "sidebar_state";
 var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
-var SidebarContext = React7.createContext(null);
+var SidebarContext = React8.createContext(null);
 function useSidebar() {
-  const context = React7.useContext(SidebarContext);
+  const context = React8.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
@@ -1456,10 +1541,10 @@ function SidebarProvider({
   ...props
 }) {
   const isMobile = useIsMobile();
-  const [openMobile, setOpenMobile] = React7.useState(false);
-  const [_open, _setOpen] = React7.useState(defaultOpen);
+  const [openMobile, setOpenMobile] = React8.useState(false);
+  const [_open, _setOpen] = React8.useState(defaultOpen);
   const open = openProp ?? _open;
-  const setOpen = React7.useCallback(
+  const setOpen = React8.useCallback(
     (value) => {
       const openState = typeof value === "function" ? value(open) : value;
       if (setOpenProp) {
@@ -1471,10 +1556,10 @@ function SidebarProvider({
     },
     [setOpenProp, open]
   );
-  const toggleSidebar = React7.useCallback(() => {
+  const toggleSidebar = React8.useCallback(() => {
     return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
   }, [isMobile, setOpen, setOpenMobile]);
-  React7.useEffect(() => {
+  React8.useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
         event.preventDefault();
@@ -1485,7 +1570,7 @@ function SidebarProvider({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [toggleSidebar]);
   const state = open ? "expanded" : "collapsed";
-  const contextValue = React7.useMemo(
+  const contextValue = React8.useMemo(
     () => ({
       state,
       open,
@@ -1497,7 +1582,7 @@ function SidebarProvider({
     }),
     [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
   );
-  return /* @__PURE__ */ jsx20(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx21(
     "div",
     {
       "data-slot": "sidebar-wrapper",
@@ -1521,7 +1606,7 @@ function Sidebar({
 }) {
   const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
   if (collapsible === "none") {
-    return /* @__PURE__ */ jsx20(
+    return /* @__PURE__ */ jsx21(
       "div",
       {
         "data-slot": "sidebar",
@@ -1535,7 +1620,7 @@ function Sidebar({
     );
   }
   if (isMobile) {
-    return /* @__PURE__ */ jsx20(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsxs11(
+    return /* @__PURE__ */ jsx21(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsxs12(
       SheetContent,
       {
         dir,
@@ -1545,16 +1630,16 @@ function Sidebar({
         className: "w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [--sidebar-width:18rem] [&>button]:hidden",
         side,
         children: [
-          /* @__PURE__ */ jsxs11(SheetHeader, { className: "sr-only", children: [
-            /* @__PURE__ */ jsx20(SheetTitle, { children: "Sidebar" }),
-            /* @__PURE__ */ jsx20(SheetDescription, { children: "Displays the mobile sidebar." })
+          /* @__PURE__ */ jsxs12(SheetHeader, { className: "sr-only", children: [
+            /* @__PURE__ */ jsx21(SheetTitle, { children: "Sidebar" }),
+            /* @__PURE__ */ jsx21(SheetDescription, { children: "Displays the mobile sidebar." })
           ] }),
-          /* @__PURE__ */ jsx20("div", { className: "flex h-full w-full flex-col", children })
+          /* @__PURE__ */ jsx21("div", { className: "flex h-full w-full flex-col", children })
         ]
       }
     ) });
   }
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     "div",
     {
       className: "group peer hidden text-sidebar-foreground md:block",
@@ -1564,7 +1649,7 @@ function Sidebar({
       "data-side": side,
       "data-slot": "sidebar",
       children: [
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx21(
           "div",
           {
             "data-slot": "sidebar-gap",
@@ -1576,7 +1661,7 @@ function Sidebar({
             )
           }
         ),
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx21(
           "div",
           {
             "data-slot": "sidebar-container",
@@ -1588,7 +1673,7 @@ function Sidebar({
               className
             ),
             ...props,
-            children: /* @__PURE__ */ jsx20(
+            children: /* @__PURE__ */ jsx21(
               "div",
               {
                 "data-sidebar": "sidebar",
@@ -1609,7 +1694,7 @@ function SidebarTrigger({
   ...props
 }) {
   const { toggleSidebar } = useSidebar();
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     Button,
     {
       "data-sidebar": "trigger",
@@ -1623,15 +1708,15 @@ function SidebarTrigger({
       },
       ...props,
       children: [
-        /* @__PURE__ */ jsx20(PanelLeftIcon, {}),
-        /* @__PURE__ */ jsx20("span", { className: "sr-only", children: "Toggle Sidebar" })
+        /* @__PURE__ */ jsx21(PanelLeftIcon, {}),
+        /* @__PURE__ */ jsx21("span", { className: "sr-only", children: "Toggle Sidebar" })
       ]
     }
   );
 }
 function SidebarRail({ className, ...props }) {
   const { toggleSidebar } = useSidebar();
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "button",
     {
       "data-sidebar": "rail",
@@ -1654,7 +1739,7 @@ function SidebarRail({ className, ...props }) {
   );
 }
 function SidebarInset({ className, ...props }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "main",
     {
       "data-slot": "sidebar-inset",
@@ -1667,7 +1752,7 @@ function SidebarInset({ className, ...props }) {
   );
 }
 function SidebarHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "div",
     {
       "data-slot": "sidebar-header",
@@ -1681,7 +1766,7 @@ function SidebarHeader({ className, ...props }) {
   );
 }
 function SidebarFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "div",
     {
       "data-slot": "sidebar-footer",
@@ -1692,7 +1777,7 @@ function SidebarFooter({ className, ...props }) {
   );
 }
 function SidebarContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "div",
     {
       "data-slot": "sidebar-content",
@@ -1706,7 +1791,7 @@ function SidebarContent({ className, ...props }) {
   );
 }
 function SidebarGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "div",
     {
       "data-slot": "sidebar-group",
@@ -1720,7 +1805,7 @@ function SidebarGroupContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "div",
     {
       "data-slot": "sidebar-group-content",
@@ -1731,7 +1816,7 @@ function SidebarGroupContent({
   );
 }
 function SidebarMenu({ className, ...props }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "ul",
     {
       "data-slot": "sidebar-menu",
@@ -1742,7 +1827,7 @@ function SidebarMenu({ className, ...props }) {
   );
 }
 function SidebarMenuItem({ className, ...props }) {
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     "li",
     {
       "data-slot": "sidebar-menu-item",
@@ -1783,7 +1868,7 @@ function SidebarMenuButton({
 }) {
   const Comp = asChild ? Slot4.Root : "button";
   const { isMobile, state } = useSidebar();
-  const button = /* @__PURE__ */ jsx20(
+  const button = /* @__PURE__ */ jsx21(
     Comp,
     {
       "data-slot": "sidebar-menu-button",
@@ -1802,9 +1887,9 @@ function SidebarMenuButton({
       children: tooltip
     };
   }
-  return /* @__PURE__ */ jsxs11(Tooltip, { children: [
-    /* @__PURE__ */ jsx20(TooltipTrigger, { asChild: true, children: button }),
-    /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsxs12(Tooltip, { children: [
+    /* @__PURE__ */ jsx21(TooltipTrigger, { asChild: true, children: button }),
+    /* @__PURE__ */ jsx21(
       TooltipContent,
       {
         side: "right",
@@ -1822,7 +1907,7 @@ function SidebarMenuAction({
   ...props
 }) {
   const Comp = asChild ? Slot4.Root : "button";
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     Comp,
     {
       "data-slot": "sidebar-menu-action",
@@ -1838,7 +1923,7 @@ function SidebarMenuAction({
 }
 
 // scaffold/src/components/chat/identity-control.tsx
-import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
 function identityLabel(identity) {
   if (identity.displayName) return identity.displayName;
   if (identity.state === "authenticated") return "Signed in";
@@ -1848,44 +1933,43 @@ function identityLabel(identity) {
   return "Guest";
 }
 function IdentityAvatar({ identity }) {
-  const label = identityLabel(identity);
   if (identity.avatarUrl) {
-    return /* @__PURE__ */ jsx21("img", { alt: "", className: "size-6 rounded-full object-cover", src: identity.avatarUrl });
+    return /* @__PURE__ */ jsx22("img", { alt: "", className: "size-6 rounded-full object-cover", src: identity.avatarUrl });
   }
-  return /* @__PURE__ */ jsx21("span", { className: "flex size-6 items-center justify-center rounded-full bg-sidebar-accent text-[10px] font-semibold", "aria-hidden": "true", children: identity.displayName ? identity.displayName.slice(0, 1).toUpperCase() : /* @__PURE__ */ jsx21(UserRound, { className: "size-3.5" }) });
+  return /* @__PURE__ */ jsx22("span", { className: "flex size-6 items-center justify-center rounded-full bg-sidebar-accent text-[10px] font-semibold", "aria-hidden": "true", children: identity.displayName ? identity.displayName.slice(0, 1).toUpperCase() : /* @__PURE__ */ jsx22(UserRound, { className: "size-3.5" }) });
 }
 function IdentityControl({ identity }) {
   const label = identityLabel(identity);
   const canSignOut = identity.state === "authenticated" && Boolean(identity.onSignOut);
   const canSignIn = (identity.state === "guest" || identity.state === "signed_out" || identity.state === "error") && Boolean(identity.onSignIn);
-  return /* @__PURE__ */ jsx21(SidebarMenu, { className: "w-full min-w-0", children: /* @__PURE__ */ jsx21(SidebarMenuItem, { className: "w-full min-w-0", children: /* @__PURE__ */ jsxs12(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx21(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsx22(SidebarMenu, { className: "w-full min-w-0", children: /* @__PURE__ */ jsx22(SidebarMenuItem, { className: "w-full min-w-0", children: /* @__PURE__ */ jsxs13(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx22(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs13(
       SidebarMenuButton,
       {
         size: "lg",
         "aria-label": `Account: ${label}`,
         className: "w-full min-w-0 justify-start",
         children: [
-          /* @__PURE__ */ jsx21(IdentityAvatar, { identity }),
-          /* @__PURE__ */ jsxs12("span", { className: "min-w-0 flex-1 overflow-hidden text-start", children: [
-            /* @__PURE__ */ jsx21("span", { className: "block truncate text-sm font-medium", children: label }),
-            identity.secondaryText ? /* @__PURE__ */ jsx21("span", { className: "block truncate text-xs text-muted-foreground", children: identity.secondaryText }) : null
+          /* @__PURE__ */ jsx22(IdentityAvatar, { identity }),
+          /* @__PURE__ */ jsxs13("span", { className: "min-w-0 flex-1 overflow-hidden text-start", children: [
+            /* @__PURE__ */ jsx22("span", { className: "block truncate text-sm font-medium", children: label }),
+            identity.secondaryText ? /* @__PURE__ */ jsx22("span", { className: "block truncate text-xs text-muted-foreground", children: identity.secondaryText }) : null
           ] })
         ]
       }
     ) }),
-    /* @__PURE__ */ jsxs12(DropdownMenuContent, { align: "start", side: "top", sideOffset: 8, children: [
-      /* @__PURE__ */ jsxs12(DropdownMenuLabel, { children: [
-        /* @__PURE__ */ jsx21("span", { className: "block truncate", children: label }),
-        identity.secondaryText ? /* @__PURE__ */ jsx21("span", { className: "mt-0.5 block truncate text-xs font-normal text-muted-foreground", children: identity.secondaryText }) : null
+    /* @__PURE__ */ jsxs13(DropdownMenuContent, { align: "start", side: "top", sideOffset: 8, children: [
+      /* @__PURE__ */ jsxs13(DropdownMenuLabel, { children: [
+        /* @__PURE__ */ jsx22("span", { className: "block truncate", children: label }),
+        identity.secondaryText ? /* @__PURE__ */ jsx22("span", { className: "mt-0.5 block truncate text-xs font-normal text-muted-foreground", children: identity.secondaryText }) : null
       ] }),
-      canSignIn || canSignOut ? /* @__PURE__ */ jsx21(DropdownMenuSeparator, {}) : null,
-      canSignIn ? /* @__PURE__ */ jsxs12(DropdownMenuItem, { onSelect: () => identity.onSignIn?.(), children: [
-        /* @__PURE__ */ jsx21(LogIn, {}),
+      canSignIn || canSignOut ? /* @__PURE__ */ jsx22(DropdownMenuSeparator, {}) : null,
+      canSignIn ? /* @__PURE__ */ jsxs13(DropdownMenuItem, { onSelect: () => identity.onSignIn?.(), children: [
+        /* @__PURE__ */ jsx22(LogIn, {}),
         "Sign in"
       ] }) : null,
-      canSignOut ? /* @__PURE__ */ jsxs12(DropdownMenuItem, { onSelect: () => identity.onSignOut?.(), children: [
-        /* @__PURE__ */ jsx21(LogOut, {}),
+      canSignOut ? /* @__PURE__ */ jsxs13(DropdownMenuItem, { onSelect: () => identity.onSignOut?.(), children: [
+        /* @__PURE__ */ jsx22(LogOut, {}),
         "Sign out"
       ] }) : null
     ] })
@@ -1893,25 +1977,25 @@ function IdentityControl({ identity }) {
 }
 
 // scaffold/src/components/chat/thread-sidebar.tsx
-import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
 function ThreadStatus({ thread }) {
   const activity = getThreadActivity(thread);
   if (!activity.isSpinning) return null;
   const label = activity.status === "cancelling" ? "Cancelling" : activity.status === "queued" ? "Queued" : "Running";
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     "span",
     {
       className: "pointer-events-none absolute end-1 top-1/2 hidden size-5 -translate-y-1/2 items-center justify-center text-muted-foreground transition-opacity group-hover/menu-item:opacity-0 md:flex",
       role: "status",
       "aria-label": label,
       title: label,
-      children: /* @__PURE__ */ jsx22(LoaderCircle2, { className: "size-3.5 animate-spin" })
+      children: /* @__PURE__ */ jsx23(LoaderCircle2, { className: "size-3.5 animate-spin" })
     }
   );
 }
 function ThreadSidebar({ activeThreadId, hasMore, identity, isLoading, isLoadingMore, onDelete, onLoadMore, onNew, onOpen, threads }) {
   const { setOpenMobile } = useSidebar();
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(
     Sidebar,
     {
       "aria-label": "Conversations",
@@ -1919,19 +2003,19 @@ function ThreadSidebar({ activeThreadId, hasMore, identity, isLoading, isLoading
       "data-agents24-chat-sidebar": "",
       role: "navigation",
       children: [
-        /* @__PURE__ */ jsxs13(SidebarHeader, { className: "gap-1 p-2", children: [
-          /* @__PURE__ */ jsx22("div", { className: "h-8 shrink-0", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsxs13(Button, { className: "w-full justify-start", variant: "ghost", onClick: () => {
+        /* @__PURE__ */ jsxs14(SidebarHeader, { className: "gap-1 p-2", children: [
+          /* @__PURE__ */ jsx23("div", { className: "h-8 shrink-0", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs14(Button, { className: "w-full justify-start", variant: "ghost", onClick: () => {
             onNew();
             setOpenMobile(false);
           }, children: [
-            /* @__PURE__ */ jsx22(SquarePen, {}),
+            /* @__PURE__ */ jsx23(SquarePen, {}),
             " New chat"
           ] })
         ] }),
-        /* @__PURE__ */ jsx22(SidebarContent, { children: /* @__PURE__ */ jsx22(SidebarGroup, { children: /* @__PURE__ */ jsxs13(SidebarGroupContent, { children: [
-          /* @__PURE__ */ jsx22(SidebarMenu, { children: threads.map((thread) => /* @__PURE__ */ jsxs13(SidebarMenuItem, { children: [
-            /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx23(SidebarContent, { children: /* @__PURE__ */ jsx23(SidebarGroup, { children: /* @__PURE__ */ jsxs14(SidebarGroupContent, { children: [
+          /* @__PURE__ */ jsx23(SidebarMenu, { children: threads.map((thread) => /* @__PURE__ */ jsxs14(SidebarMenuItem, { children: [
+            /* @__PURE__ */ jsx23(
               SidebarMenuButton,
               {
                 className: "pr-8 pl-3",
@@ -1941,11 +2025,11 @@ function ThreadSidebar({ activeThreadId, hasMore, identity, isLoading, isLoading
                   void onOpen(thread.id).catch(() => void 0);
                   setOpenMobile(false);
                 },
-                children: /* @__PURE__ */ jsx22("span", { className: "min-w-0 truncate", children: String(thread.title || "New conversation") })
+                children: /* @__PURE__ */ jsx23("span", { className: "min-w-0 truncate", children: String(thread.title || "New conversation") })
               }
             ),
-            /* @__PURE__ */ jsx22(ThreadStatus, { thread }),
-            /* @__PURE__ */ jsx22(
+            /* @__PURE__ */ jsx23(ThreadStatus, { thread }),
+            /* @__PURE__ */ jsx23(
               SidebarMenuAction,
               {
                 showOnHover: true,
@@ -1955,12 +2039,12 @@ function ThreadSidebar({ activeThreadId, hasMore, identity, isLoading, isLoading
                   event.stopPropagation();
                   if (window.confirm("Delete this conversation?")) void onDelete(thread.id).catch(() => void 0);
                 },
-                children: /* @__PURE__ */ jsx22(Trash2, {})
+                children: /* @__PURE__ */ jsx23(Trash2, {})
               }
             )
           ] }, thread.id)) }),
-          !isLoading && threads.length === 0 && /* @__PURE__ */ jsx22("p", { className: "px-2 py-8 text-center text-xs text-muted-foreground", children: "No conversations" }),
-          hasMore && /* @__PURE__ */ jsxs13(
+          !isLoading && threads.length === 0 && /* @__PURE__ */ jsx23("p", { className: "px-2 py-8 text-center text-xs text-muted-foreground", children: "No conversations" }),
+          hasMore && /* @__PURE__ */ jsxs14(
             Button,
             {
               className: "mt-2 w-full",
@@ -1969,14 +2053,14 @@ function ThreadSidebar({ activeThreadId, hasMore, identity, isLoading, isLoading
               variant: "ghost",
               onClick: () => void onLoadMore().catch(() => void 0),
               children: [
-                isLoadingMore && /* @__PURE__ */ jsx22(LoaderCircle2, { className: "animate-spin" }),
+                isLoadingMore && /* @__PURE__ */ jsx23(LoaderCircle2, { className: "animate-spin" }),
                 "Load more"
               ]
             }
           )
         ] }) }) }),
-        /* @__PURE__ */ jsx22(SidebarFooter, { className: "w-full min-w-0 p-2", children: /* @__PURE__ */ jsx22(IdentityControl, { identity }) }),
-        /* @__PURE__ */ jsx22(SidebarRail, {})
+        /* @__PURE__ */ jsx23(SidebarFooter, { className: "w-full min-w-0 p-2", children: /* @__PURE__ */ jsx23(IdentityControl, { identity }) }),
+        /* @__PURE__ */ jsx23(SidebarRail, {})
       ]
     }
   );
@@ -1984,7 +2068,7 @@ function ThreadSidebar({ activeThreadId, hasMore, identity, isLoading, isLoading
 
 // scaffold/src/components/chat/turn-outline.tsx
 import { LatestThreadScroller } from "@agents24/chat-react";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 function turnsFromMessages(messages) {
   return messages.reduce((turns, message) => {
     if (message.role === "user") {
@@ -2003,7 +2087,7 @@ function turnsFromMessages(messages) {
   }, []);
 }
 function TurnOutline({ messages }) {
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     LatestThreadScroller.Outline,
     {
       items: turnsFromMessages(messages),
@@ -2030,7 +2114,7 @@ import {
   LatestThreadScroller as LatestThreadScroller2,
   latestThreadAnchorId
 } from "@agents24/chat-react";
-import { Fragment as Fragment3, jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
 var LOADING_INPUT_CONTRACT = {
   version: "agents24.runtime-inputs.v2",
   modalities: {
@@ -2043,31 +2127,31 @@ var LOADING_INPUT_CONTRACT = {
   retention: { mode: "thread_lifetime" }
 };
 function PersistentSidebarTrigger() {
-  return /* @__PURE__ */ jsx24("div", { className: "pointer-events-none fixed start-3 top-0 z-[60] flex h-12 items-center", children: /* @__PURE__ */ jsx24(SidebarTrigger, { className: "pointer-events-auto [&_svg]:size-[18px]" }) });
+  return /* @__PURE__ */ jsx25("div", { className: "pointer-events-none fixed start-3 top-0 z-[60] flex h-12 items-center", children: /* @__PURE__ */ jsx25(SidebarTrigger, { className: "pointer-events-auto [&_svg]:size-[18px]" }) });
 }
 function CollapsedHeaderActions({ onNew }) {
   const { isMobile, openMobile, state } = useSidebar();
   const sidebarVisible = isMobile ? openMobile : state === "expanded";
   if (sidebarVisible) return null;
-  return /* @__PURE__ */ jsxs14(Fragment3, { children: [
-    /* @__PURE__ */ jsx24("div", { className: "h-8 w-17 shrink-0", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsx24("div", { className: "pointer-events-none fixed start-12 top-0 z-[60] flex h-12 items-center", children: /* @__PURE__ */ jsx24(Button, { className: "pointer-events-auto", variant: "ghost", size: "icon-sm", "aria-label": "New chat", onClick: onNew, children: /* @__PURE__ */ jsx24(SquarePen2, {}) }) })
+  return /* @__PURE__ */ jsxs15(Fragment3, { children: [
+    /* @__PURE__ */ jsx25("div", { className: "h-8 w-17 shrink-0", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx25("div", { className: "pointer-events-none fixed start-12 top-0 z-[60] flex h-12 items-center", children: /* @__PURE__ */ jsx25(Button, { className: "pointer-events-auto", variant: "ghost", size: "icon-sm", "aria-label": "New chat", onClick: onNew, children: /* @__PURE__ */ jsx25(SquarePen2, {}) }) })
   ] });
 }
 function OperationErrorNotice({ runtime }) {
   const error = runtime.operationError || runtime.backgroundError;
   if (!error) return null;
-  return /* @__PURE__ */ jsx24("div", { className: "pointer-events-none absolute inset-x-0 top-3 z-40 flex justify-center px-4", children: /* @__PURE__ */ jsxs14("div", { className: "pointer-events-auto flex max-w-lg items-start gap-2 rounded-lg border border-destructive/20 bg-background px-3 py-2 text-sm shadow-md", role: "alert", children: [
-    /* @__PURE__ */ jsx24(CircleAlert, { className: "mt-0.5 size-4 shrink-0 text-destructive" }),
-    /* @__PURE__ */ jsx24("span", { className: "min-w-0 flex-1 wrap-break-word", children: agentChatRuntimeErrorMessage(error) || "The chat could not complete that action." }),
-    /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25("div", { className: "pointer-events-none absolute inset-x-0 top-3 z-40 flex justify-center px-4", children: /* @__PURE__ */ jsxs15("div", { className: "pointer-events-auto flex max-w-lg items-start gap-2 rounded-lg border border-destructive/20 bg-background px-3 py-2 text-sm shadow-md", role: "alert", children: [
+    /* @__PURE__ */ jsx25(CircleAlert, { className: "mt-0.5 size-4 shrink-0 text-destructive" }),
+    /* @__PURE__ */ jsx25("span", { className: "min-w-0 flex-1 wrap-break-word", children: agentChatRuntimeErrorMessage(error) || "The chat could not complete that action." }),
+    /* @__PURE__ */ jsx25(
       Button,
       {
         "aria-label": "Dismiss error",
         onClick: runtime.operationError ? runtime.clearOperationError : runtime.controller.clearBackgroundError,
         size: "icon-xs",
         variant: "ghost",
-        children: /* @__PURE__ */ jsx24(X, {})
+        children: /* @__PURE__ */ jsx25(X, {})
       }
     )
   ] }) });
@@ -2078,6 +2162,7 @@ function ChatShell({
   runtime,
   sidebar
 }) {
+  const Composer = components?.Composer || ChatComposer;
   const { controller } = runtime;
   const isUploading = controller.runState === "uploading";
   const isRunning = controller.runState === "streaming" || controller.runState === "reconnecting" || controller.runState === "paused" || controller.runState === "cancelling";
@@ -2087,11 +2172,11 @@ function ChatShell({
   const hasBlockingError = Boolean(runtime.fatalError && controller.messages.length === 0);
   const isEmptyState = controller.activeThreadId === null && controller.messages.length === 0 && !hasBlockingError;
   const latestAnchorId = latestThreadAnchorId(controller.messages);
-  const composerOverlayRef = React8.useRef(null);
-  const [composerOverlayHeight, setComposerOverlayHeight] = React8.useState(192);
-  const [restoredDraft, setRestoredDraft] = React8.useState(null);
-  const draftRevisionRef = React8.useRef(0);
-  const retractForEdit = React8.useCallback(async (message) => {
+  const composerOverlayRef = React9.useRef(null);
+  const [composerOverlayHeight, setComposerOverlayHeight] = React9.useState(192);
+  const [restoredDraft, setRestoredDraft] = React9.useState(null);
+  const draftRevisionRef = React9.useRef(0);
+  const retractForEdit = React9.useCallback(async (message) => {
     const draft = await controller.retractPendingMessage(message);
     setRestoredDraft({
       revision: ++draftRevisionRef.current,
@@ -2099,7 +2184,7 @@ function ChatShell({
       files: queuedMessageComposerFiles(draft)
     });
   }, [controller]);
-  React8.useLayoutEffect(() => {
+  React9.useLayoutEffect(() => {
     const overlay = composerOverlayRef.current;
     if (!overlay || isEmptyState) return;
     const updateHeight = () => {
@@ -2110,15 +2195,15 @@ function ChatShell({
     resizeObserver.observe(overlay);
     return () => resizeObserver.disconnect();
   }, [isEmptyState]);
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     SidebarProvider,
     {
       className: "h-svh min-h-0 overflow-hidden",
       "data-agents24-chat": "",
       "data-agents24-chat-layout": "",
       children: [
-        /* @__PURE__ */ jsx24(PersistentSidebarTrigger, {}),
-        sidebar || /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx25(PersistentSidebarTrigger, {}),
+        sidebar || /* @__PURE__ */ jsx25(
           ThreadSidebar,
           {
             activeThreadId: controller.activeThreadId,
@@ -2133,57 +2218,58 @@ function ChatShell({
             onOpen: runtime.openThread
           }
         ),
-        /* @__PURE__ */ jsxs14(SidebarInset, { className: "h-svh min-h-0 overflow-hidden bg-background", children: [
-          /* @__PURE__ */ jsxs14(
+        /* @__PURE__ */ jsxs15(SidebarInset, { className: "h-svh min-h-0 overflow-hidden bg-background", children: [
+          /* @__PURE__ */ jsxs15(
             "header",
             {
               className: "flex h-12 shrink-0 items-center gap-2 border-b border-border/50 px-3 sm:px-4",
               "data-agents24-chat-header": "",
               children: [
-                /* @__PURE__ */ jsx24(CollapsedHeaderActions, { onNew: runtime.newThread }),
-                /* @__PURE__ */ jsx24("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx24("h1", { className: "truncate text-sm font-medium", children: String(activeTitle || "New chat") }) }),
-                /* @__PURE__ */ jsx24(ThemeMenu, {})
+                /* @__PURE__ */ jsx25(CollapsedHeaderActions, { onNew: runtime.newThread }),
+                /* @__PURE__ */ jsx25("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx25("h1", { className: "truncate text-sm font-medium", children: String(activeTitle || "New chat") }) }),
+                /* @__PURE__ */ jsx25(ThemeMenu, {})
               ]
             }
           ),
-          /* @__PURE__ */ jsxs14(
+          /* @__PURE__ */ jsxs15(
             "section",
             {
               "aria-label": "Conversation",
               className: "relative flex min-h-0 flex-1 flex-col overflow-hidden",
               "data-agents24-chat-transcript": "",
               children: [
-                /* @__PURE__ */ jsx24(OperationErrorNotice, { runtime }),
-                /* @__PURE__ */ jsxs14(LatestThreadScroller2.Provider, { autoScroll: true, defaultScrollPosition: "last-anchor", scrollPreviousItemPeek: 64, children: [
-                  !isEmptyState && /* @__PURE__ */ jsxs14(LatestThreadScroller2.Root, { className: "relative min-h-0 flex-1", children: [
-                    /* @__PURE__ */ jsx24(LatestThreadScroller2.Viewport, { preserveScrollOnPrepend: true, children: /* @__PURE__ */ jsxs14(
+                /* @__PURE__ */ jsx25(OperationErrorNotice, { runtime }),
+                /* @__PURE__ */ jsx25(SubagentTasks, { threadId: controller.activeThreadId }),
+                /* @__PURE__ */ jsxs15(LatestThreadScroller2.Provider, { autoScroll: true, defaultScrollPosition: "last-anchor", scrollPreviousItemPeek: 64, children: [
+                  !isEmptyState && /* @__PURE__ */ jsxs15(LatestThreadScroller2.Root, { className: "relative min-h-0 flex-1", children: [
+                    /* @__PURE__ */ jsx25(LatestThreadScroller2.Viewport, { preserveScrollOnPrepend: true, children: /* @__PURE__ */ jsxs15(
                       LatestThreadScroller2.Content,
                       {
                         className: "mx-auto w-full max-w-3xl gap-3 px-4 pt-8 pb-0 sm:px-6 sm:pt-12",
                         style: { paddingBottom: composerOverlayHeight + 72 },
                         children: [
-                          controller.hasOlderTurns && /* @__PURE__ */ jsxs14(Button, { className: "self-center", variant: "ghost", size: "sm", disabled: controller.isLoadingOlder, onClick: () => {
+                          controller.hasOlderTurns && /* @__PURE__ */ jsxs15(Button, { className: "self-center", variant: "ghost", size: "sm", disabled: controller.isLoadingOlder, onClick: () => {
                             void controller.loadOlder().catch(() => void 0);
                           }, children: [
-                            controller.isLoadingOlder && /* @__PURE__ */ jsx24(LoaderCircle3, { className: "animate-spin" }),
+                            controller.isLoadingOlder && /* @__PURE__ */ jsx25(LoaderCircle3, { className: "animate-spin" }),
                             " Load earlier messages"
                           ] }),
-                          runtime.isBootstrapping && /* @__PURE__ */ jsx24("div", { "aria-label": "Loading conversation", className: "flex flex-1 items-center justify-center py-24 text-muted-foreground", role: "status", children: /* @__PURE__ */ jsx24(LoaderCircle3, { className: "size-4 animate-spin" }) }),
-                          hasBlockingError && /* @__PURE__ */ jsxs14("div", { className: "flex flex-1 flex-col items-center justify-center gap-3 py-24 text-center", children: [
-                            /* @__PURE__ */ jsx24(CircleAlert, { className: "size-5 text-destructive" }),
-                            /* @__PURE__ */ jsxs14("div", { children: [
-                              /* @__PURE__ */ jsx24("h2", { className: "font-medium", children: "Couldn\u2019t connect" }),
-                              /* @__PURE__ */ jsx24("p", { className: "mt-1 max-w-md text-sm text-muted-foreground", children: runtime.errorMessage })
+                          runtime.isBootstrapping && /* @__PURE__ */ jsx25("div", { "aria-label": "Loading conversation", className: "flex flex-1 items-center justify-center py-24 text-muted-foreground", role: "status", children: /* @__PURE__ */ jsx25(LoaderCircle3, { className: "size-4 animate-spin" }) }),
+                          hasBlockingError && /* @__PURE__ */ jsxs15("div", { className: "flex flex-1 flex-col items-center justify-center gap-3 py-24 text-center", children: [
+                            /* @__PURE__ */ jsx25(CircleAlert, { className: "size-5 text-destructive" }),
+                            /* @__PURE__ */ jsxs15("div", { children: [
+                              /* @__PURE__ */ jsx25("h2", { className: "font-medium", children: "Couldn\u2019t connect" }),
+                              /* @__PURE__ */ jsx25("p", { className: "mt-1 max-w-md text-sm text-muted-foreground", children: runtime.errorMessage })
                             ] }),
-                            /* @__PURE__ */ jsx24(Button, { variant: "outline", onClick: () => void runtime.retryBootstrap(), children: "Try again" })
+                            /* @__PURE__ */ jsx25(Button, { variant: "outline", onClick: () => void runtime.retryBootstrap(), children: "Try again" })
                           ] }),
-                          controller.messages.map((message) => /* @__PURE__ */ jsx24(
+                          controller.messages.map((message) => /* @__PURE__ */ jsx25(
                             LatestThreadScroller2.Item,
                             {
                               messageId: message.id,
                               scrollAnchor: isRunning && message.id === latestAnchorId,
                               className: "overflow-visible [content-visibility:visible]",
-                              children: /* @__PURE__ */ jsx24(
+                              children: /* @__PURE__ */ jsx25(
                                 ChatMessage,
                                 {
                                   animateCompletion: wasLiveRun(message.runId),
@@ -2209,9 +2295,9 @@ function ChatShell({
                         ]
                       }
                     ) }),
-                    /* @__PURE__ */ jsx24(TurnOutline, { messages: controller.messages })
+                    /* @__PURE__ */ jsx25(TurnOutline, { messages: controller.messages })
                   ] }),
-                  /* @__PURE__ */ jsxs14(
+                  /* @__PURE__ */ jsxs15(
                     "div",
                     {
                       ref: composerOverlayRef,
@@ -2220,56 +2306,52 @@ function ChatShell({
                         background: "linear-gradient(to bottom, transparent 0%, color-mix(in oklch, var(--background) 85%, transparent) 45%, var(--background) 65%, var(--background) 100%)"
                       },
                       children: [
-                        isEmptyState ? /* @__PURE__ */ jsx24("div", { className: "mx-auto mb-8 w-full max-w-3xl px-4 text-center sm:px-6", children: /* @__PURE__ */ jsx24("h2", { className: "text-3xl font-semibold tracking-tight sm:text-4xl", children: "Ready when you are." }) }) : /* @__PURE__ */ jsx24("div", { className: "pointer-events-auto absolute inset-x-0 top-0 flex -translate-y-full justify-center pb-3", children: /* @__PURE__ */ jsx24(LatestThreadScroller2.Button, { className: "!relative !inset-auto !translate-x-0 rtl:!translate-x-0" }) }),
-                        /* @__PURE__ */ jsxs14("div", { className: "pointer-events-auto mx-auto w-full max-w-3xl px-4 sm:px-6", children: [
-                          /* @__PURE__ */ jsx24(
-                            AgentChatQueue,
-                            {
-                              pending: controller.pendingMessages,
-                              queue: controller.messageQueue,
-                              canSteer: controller.runState === "streaming",
-                              onSteer: controller.steerPendingMessage,
-                              onRemove: controller.removePendingMessage,
-                              onEdit: retractForEdit,
-                              onResume: controller.resumeQueue
-                            }
-                          ),
-                          /* @__PURE__ */ jsx24(
-                            ChatComposer,
-                            {
-                              restoredDraft,
-                              inputContract: runtime.inputContract || LOADING_INPUT_CONTRACT,
-                              contextWindow: runtime.contextWindow,
-                              disabled: runtime.isBootstrapping || runtime.isChangingAgent || isUploading || hasBlockingError,
-                              focusKey: controller.activeThreadId,
-                              forceExpanded: isEmptyState,
-                              isCancelling,
-                              isRunning,
-                              agentId: runtime.agentId,
-                              agents: runtime.agents,
-                              onAgentChange: (agentId) => {
-                                void runtime.changeAgent(agentId);
-                              },
-                              onStop: () => {
-                                void controller.cancelRun().catch(() => void 0);
-                              },
-                              modelId: runtime.modelId,
-                              models: runtime.models,
-                              onModelChange: runtime.changeModel,
-                              onSubmit: (text, files) => runtime.submit({
-                                text,
-                                files: files.filter((file) => file.source).map((file) => ({
-                                  data: file.source,
-                                  mediaType: file.mediaType,
-                                  name: file.filename
-                                })),
-                                attachmentIds: files.flatMap((file) => file.persistedAttachmentId ? [file.persistedAttachmentId] : []),
-                                attachments: files
-                              }),
-                              utilityRow: isEmptyState ? "inline" : "below"
-                            }
-                          )
-                        ] })
+                        isEmptyState ? /* @__PURE__ */ jsx25("div", { className: "mx-auto mb-8 w-full max-w-3xl px-4 text-center sm:px-6", children: /* @__PURE__ */ jsx25("h2", { className: "text-3xl font-semibold tracking-tight sm:text-4xl", children: "Ready when you are." }) }) : /* @__PURE__ */ jsx25("div", { className: "pointer-events-auto absolute inset-x-0 top-0 flex -translate-y-full justify-center pb-3", children: /* @__PURE__ */ jsx25(LatestThreadScroller2.Button, { className: "!relative !inset-auto !translate-x-0 rtl:!translate-x-0" }) }),
+                        /* @__PURE__ */ jsx25("div", { className: "pointer-events-auto mx-auto w-full max-w-3xl px-4 sm:px-6", children: /* @__PURE__ */ jsx25(
+                          Composer,
+                          {
+                            queue: /* @__PURE__ */ jsx25(
+                              AgentChatQueue,
+                              {
+                                pending: controller.pendingMessages,
+                                queue: controller.messageQueue,
+                                onRemove: controller.removePendingMessage,
+                                onEdit: retractForEdit,
+                                onResume: controller.resumeQueue
+                              }
+                            ),
+                            restoredDraft,
+                            inputContract: runtime.inputContract || LOADING_INPUT_CONTRACT,
+                            contextWindow: runtime.contextWindow,
+                            disabled: runtime.isBootstrapping || runtime.isChangingAgent || isUploading || hasBlockingError,
+                            focusKey: controller.activeThreadId,
+                            forceExpanded: isEmptyState,
+                            isCancelling,
+                            isRunning,
+                            agentId: runtime.agentId,
+                            agents: runtime.agents,
+                            onAgentChange: (agentId) => {
+                              void runtime.changeAgent(agentId);
+                            },
+                            onStop: () => {
+                              void controller.cancelRun().catch(() => void 0);
+                            },
+                            modelId: runtime.modelId,
+                            models: runtime.models,
+                            onModelChange: runtime.changeModel,
+                            onSubmit: (text, files) => runtime.submit({
+                              text,
+                              files: files.filter((file) => file.source).map((file) => ({
+                                data: file.source,
+                                mediaType: file.mediaType,
+                                name: file.filename
+                              })),
+                              attachmentIds: files.flatMap((file) => file.persistedAttachmentId ? [file.persistedAttachmentId] : []),
+                              attachments: files
+                            }),
+                            utilityRow: isEmptyState ? "inline" : "below"
+                          }
+                        ) })
                       ]
                     }
                   )
@@ -2287,7 +2369,7 @@ function ChatShell({
 var GUEST_CHAT_IDENTITY = { state: "guest" };
 
 // scaffold/src/app.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var createBrowserAbortController = () => new AbortController();
 var browserVisibility = createBrowserVisibility();
 function RuntimeChat({
@@ -2299,19 +2381,20 @@ function RuntimeChat({
     ...props,
     mcpRedirectUri: props.mcpRedirectUri || (typeof window === "undefined" ? void 0 : window.location.href)
   });
-  return /* @__PURE__ */ jsx25(ChatShell, { components, identity, runtime, sidebar: props.sidebar });
+  return /* @__PURE__ */ jsx26(ChatShell, { components, identity, runtime, sidebar: props.sidebar });
 }
 function App(props) {
   const identity = props.identity || GUEST_CHAT_IDENTITY;
-  return /* @__PURE__ */ jsx25(Agents24Provider, { client: props.client, createAbortController: createBrowserAbortController, visibility: browserVisibility, children: /* @__PURE__ */ jsx25(RuntimeChat, { ...props }, identity.state) });
+  return /* @__PURE__ */ jsx26(Agents24Provider, { client: props.client, createAbortController: createBrowserAbortController, visibility: browserVisibility, children: /* @__PURE__ */ jsx26(RuntimeChat, { ...props }, identity.state) });
 }
 
 // scaffold/src/index.tsx
-import { jsx as jsx26 } from "react/jsx-runtime";
-function Agents24ChatScaffold({ appearanceController, theme, ...props }) {
-  return /* @__PURE__ */ jsx26(ThemeProvider, { controller: appearanceController, theme, children: /* @__PURE__ */ jsx26(TooltipProvider, { children: /* @__PURE__ */ jsx26(App, { ...props }) }) });
+import { jsx as jsx27 } from "react/jsx-runtime";
+function Agents24ChatScaffold({ appearanceController, theme, themeMode, ...props }) {
+  return /* @__PURE__ */ jsx27(ThemeProvider, { controller: appearanceController, theme, mode: themeMode, children: /* @__PURE__ */ jsx27(TooltipProvider, { children: /* @__PURE__ */ jsx27(App, { ...props }) }) });
 }
 export {
+  ChatComposer as Agents24ChatComposer,
   Agents24ChatScaffold,
   App as Agents24ChatScaffoldApp,
   ThemeProvider as Agents24ChatThemeProvider,