@agents24/chat-react 0.5.29 → 0.5.31

package/dist/scaffold/index.cjs

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -30,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // scaffold/src/index.tsx
 var src_exports = {};
 __export(src_exports, {
+  Agents24ChatComposer: () => ChatComposer,
   Agents24ChatScaffold: () => Agents24ChatScaffold,
   Agents24ChatScaffoldApp: () => App,
   Agents24ChatThemeProvider: () => ThemeProvider,
@@ -40,19 +42,18 @@ module.exports = __toCommonJS(src_exports);
 // scaffold/src/app.tsx
 var import_browser = require("@agents24/client/browser");
 var import_runtime3 = require("@agents24/chat-react/runtime");
-var import_react2 = require("@agents24/react");
+var import_react3 = require("@agents24/react");
 
 // scaffold/src/components/chat/chat-shell.tsx
 var import_runtime2 = require("@agents24/chat-react/runtime");
-var import_ui4 = require("@agents24/chat-react/ui");
+var import_ui5 = require("@agents24/chat-react/ui");
 var import_lucide_react11 = require("lucide-react");
-var React8 = __toESM(require("react"), 1);
+var React9 = __toESM(require("react"), 1);
 
 // scaffold/src/components/chat/chat-composer.tsx
 var import_lucide_react3 = require("lucide-react");
 var React2 = __toESM(require("react"), 1);
 var import_ui = require("@agents24/chat-react/ui");
-var import_runtime = require("@agents24/chat-react/runtime");
 
 // scaffold/src/components/ui/button.tsx
 var import_class_variance_authority = require("class-variance-authority");
@@ -124,6 +125,21 @@ var import_lucide_react = require("lucide-react");
 var React = __toESM(require("react"), 1);
 var import_jsx_runtime2 = require("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 {
@@ -136,43 +152,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__ */ (0, import_jsx_runtime2.jsx)(ThemeContext.Provider, { value: { appearance, portalContainer, setAppearance: change }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ThemeContext.Provider, { value: { appearance, portalContainer, setAppearance: change, inherited: mode === "inherit" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "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
@@ -474,6 +480,7 @@ function TooltipTrigger({
   asChild: _asChild,
   ...props
 }) {
+  void _asChild;
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_radix_ui4.Slot.Root, { "data-slot": "tooltip-trigger", ...props });
 }
 function TooltipContent({
@@ -483,6 +490,8 @@ function TooltipContent({
   sideOffset: _sideOffset,
   ...props
 }) {
+  void _align;
+  void _sideOffset;
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "span",
     {
@@ -506,6 +515,8 @@ function TooltipContent({
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function ChatComposer({
   inputContract,
+  queue,
+  onRecordingStreamChange,
   disabled,
   contextWindow,
   focusKey,
@@ -523,49 +534,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 = (0, import_runtime.inputMimeTypes)(inputContract);
-  const allowAttachments = attachmentMimeTypes.length > 0;
-  const recordingAllowed = inputContract.modalities.audio.recording_enabled;
-  React2.useEffect(() => {
-    filesRef.current = files;
-  }, [files]);
-  React2.useEffect(() => () => {
-    (0, import_ui.revokeAgentChatComposerFiles)(filesRef.current);
-    (0, import_ui.revokeAgentChatComposerFiles)(inFlightFilesRef.current);
-  }, []);
-  const focusComposer = (0, import_ui.useChatComposerFocus)({
+  const {
+    text,
+    setText,
+    files,
+    removeFile,
+    addFiles,
     textareaRef,
-    disabled: Boolean(disabled),
+    submit,
+    attachmentError,
+    attachmentMimeTypes,
+    allowAttachments,
+    recordingAllowed,
+    recorder,
+    isExpanded,
+    validationError,
+    action,
+    canSubmit
+  } = (0, import_ui.useAgentChatComposer)({
+    inputContract,
+    disabled,
     focusKey,
+    forceExpanded,
+    isCancelling,
+    isRunning,
+    onSubmit,
     restoredDraft,
-    onRestore: (draft) => {
-      draftRevisionRef.current += 1;
-      (0, import_ui.revokeAgentChatComposerFiles)(filesRef.current);
-      setText(draft.text);
-      setFiles(draft.files);
-    }
+    onRecordingStreamChange
   });
-  const addRecording = React2.useCallback((file) => {
-    draftRevisionRef.current += 1;
-    setFiles((current) => [...current, (0, import_ui.createAgentChatComposerFile)(file)]);
-  }, []);
-  const recorder = (0, import_ui.useAudioRecorder)(addRecording);
-  const isExpanded = forceExpanded || text.includes("\n") || text.length > 62;
-  const validationError = (0, import_runtime.validateAgentChatSubmission)(
-    inputContract,
-    text,
-    files.map((file) => ({ data: file.source || new Uint8Array(), mediaType: file.mediaType }))
-  );
-  const action = (0, import_ui.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__ */ (0, import_jsx_runtime7.jsx)("div", { className: "w-fit max-w-40", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Select, { disabled: disabled || isRunning, onValueChange: onModelChange, value: modelId || void 0, children: [
@@ -605,66 +602,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);
-      (0, import_ui.revokeAgentChatComposerFiles)(selectedFiles);
-      inFlightFilesRef.current = [];
-    } catch {
-      if (draftRevisionRef.current === clearedRevision) {
-        draftRevisionRef.current += 1;
-        setText(value);
-        setFiles(selectedFiles);
-        inFlightFilesRef.current = [];
-      } else {
-        (0, import_ui.revokeAgentChatComposerFiles)(selectedFiles);
-        inFlightFilesRef.current = [];
-      }
-    } finally {
-      submittingRef.current = false;
-    }
-  };
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "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__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mb-2 min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-          import_ui.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) (0, import_ui.revokeAgentChatComposerFiles)([removed]);
-                return current.filter((file) => file.id !== attachment.id);
-              });
-            }
-          }
-        ) }),
+        queue,
         attachmentError || recorder.error ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "mb-2 text-xs text-destructive", role: "alert", children: attachmentError || recorder.error }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
           "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__ */ (0, import_jsx_runtime7.jsx)("div", { className: "agents24-composer-attachments min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                import_ui.ChatAttachmentRows,
+                {
+                  layout: "composer",
+                  attachments: files,
+                  onRemove: (attachment) => {
+                    if (!attachment.id) return;
+                    removeFile(attachment.id);
+                  }
+                }
+              ) }),
               allowAttachments ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
                 /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   "input",
@@ -673,11 +639,9 @@ function ChatComposer({
                     className: "sr-only",
                     type: "file",
                     multiple: true,
-                    accept: (0, import_runtime.attachmentFileAccept)(attachmentMimeTypes),
+                    accept: attachmentMimeTypes.join(","),
                     onChange: (event) => {
-                      const selected = Array.from(event.target.files ?? []);
-                      setFiles((current) => [...current, ...selected.map(import_ui.createAgentChatComposerFile)]);
-                      setAttachmentError(null);
+                      addFiles(Array.from(event.target.files ?? []));
                       event.currentTarget.value = "";
                     }
                   }
@@ -698,7 +662,6 @@ function ChatComposer({
                     isExpanded ? "py-2" : "h-9 py-2"
                   ),
                   onChange: (event) => {
-                    draftRevisionRef.current += 1;
                     setText(event.target.value);
                   },
                   onKeyDown: (event) => {
@@ -738,7 +701,7 @@ function ChatComposer({
                 ) : validationError ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Tooltip, { children: [
                   /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { tabIndex: 0, "aria-label": validationError, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Button, { size: "icon", "aria-label": isRunning ? "Queue message" : "Send message", disabled: true, onClick: () => void submit(), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react3.ArrowUp, {}) }) }) }),
                   /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TooltipContent, { children: validationError })
-                ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Button, { size: "icon", "aria-label": isRunning ? "Queue message" : "Send message", disabled, onClick: () => void submit(), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react3.ArrowUp, {}) })
+                ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Button, { size: "icon", "aria-label": isRunning ? "Queue message" : "Send message", disabled: !canSubmit, onClick: () => void submit(), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react3.ArrowUp, {}) })
               ] })
             ]
           }
@@ -947,19 +910,20 @@ function DialogDescription({
 var import_jsx_runtime10 = require("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__ */ (0, import_jsx_runtime10.jsx)(Dialog, { open: isOpen, onOpenChange: (open) => {
-    if (!open) onClose();
+    if (!open) close();
   }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(DialogContent, { className: "max-h-[calc(100dvh-2rem)] min-w-0 overflow-hidden sm:max-w-md", children: [
     /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(DialogHeader, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DialogTitle, { children: "Open external link?" }),
@@ -1221,23 +1185,147 @@ function ChatMessage({
   ] }) });
 }
 
-// scaffold/src/components/chat/theme-menu.tsx
-var import_lucide_react6 = require("lucide-react");
+// scaffold/src/components/chat/subagent-tasks.tsx
 var React5 = __toESM(require("react"), 1);
+var import_react = require("@agents24/react");
+var import_ui4 = require("@agents24/chat-react/ui");
+var import_runtime = require("@agents24/chat-react/runtime");
 var import_jsx_runtime15 = require("react/jsx-runtime");
+function SubagentTasks({ threadId }) {
+  const client = (0, import_react.useAgentClient)();
+  const source = React5.useMemo(() => ({ events: (input) => client.threads.delegations.events(input) }), [client]);
+  const { tasks, error, refresh } = (0, import_runtime.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__ */ (0, import_jsx_runtime15.jsx)("section", { "aria-label": "Subagent tasks", className: "mx-auto w-full max-w-3xl px-4 py-2 text-sm", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("details", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("summary", { className: "cursor-pointer font-medium", children: [
+      "Tasks (",
+      tasks.length,
+      ")"
+    ] }),
+    error ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { role: "alert", children: "Task updates are unavailable. Retrying\u2026" }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("ul", { className: "max-h-56 overflow-y-auto", children: tasks.map((task) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("li", { style: { paddingInlineStart: Math.max(0, task.depth - 1) * 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+      "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__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "min-w-0 truncate", children: [
+            task.name,
+            task.background ? " \xB7 Background" : ""
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "shrink-0 text-xs text-muted-foreground", children: task.status.replaceAll("_", " ") })
+        ]
+      }
+    ) }, task.handle)) }),
+    tasks.filter((task) => task.handle === selected).map((task) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TaskConversation, { threadId, task, onChanged: refresh }, `${threadId}:${task.handle}`))
+  ] }) });
+}
+function TaskConversation({ threadId, task, onChanged }) {
+  const client = (0, import_react.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__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "space-y-3 rounded-md bg-muted/30 p-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h3", { className: "font-medium", children: task.name }),
+    error ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { role: "alert", children: error }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-wrap gap-2", children: [
+      task.capabilities.interrupt ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button, { variant: "secondary", size: "sm", disabled: busy, onClick: () => void act("interrupt"), children: "Interrupt" }) : null,
+      task.capabilities.cancel ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button, { variant: "secondary", size: "sm", disabled: busy, onClick: () => void act("cancel"), children: "Cancel task" }) : null,
+      before !== null ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button, { variant: "ghost", size: "sm", disabled: busy, onClick: () => void loadEarlier(), children: "Earlier exchanges" }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "max-h-[55dvh] space-y-4 overflow-y-auto break-words", children: turns.map((turn) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("article", { className: "space-y-2", children: [
+      turn.assignment_instruction ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "whitespace-pre-wrap text-muted-foreground", children: turn.assignment_instruction }) : null,
+      turn.user_input_text ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "whitespace-pre-wrap", children: turn.user_input_text }) : null,
+      turn.exchanges?.map((exchange) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "whitespace-pre-wrap break-words text-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-xs font-medium", children: exchange.sender === "parent" ? "Parent Agent" : "Subagent update" }),
+        exchange.text
+      ] }, exchange.id)),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_ui4.AgentResponseTimeline, { message: { id: turn.id, role: "assistant", createdAt: turn.created_at, content: turn.assistant_output_text || "", parts: (0, import_react.partsFromResponseBlocks)(turn.response_blocks) } })
+    ] }, turn.id)) })
+  ] });
+}
+
+// scaffold/src/components/chat/theme-menu.tsx
+var import_lucide_react6 = require("lucide-react");
+var React6 = __toESM(require("react"), 1);
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var options = [
   { value: "system", label: "System", icon: import_lucide_react6.Laptop },
   { value: "light", label: "Light", icon: import_lucide_react6.Sun },
   { value: "dark", label: "Dark", icon: import_lucide_react6.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 ?? import_lucide_react6.Laptop;
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (!open) return;
     firstItemRef.current?.focus();
     const closeOnOutsidePointer = (event) => {
@@ -1253,9 +1341,10 @@ function ThemeMenu() {
       document.removeEventListener("keydown", closeOnEscape);
     };
   }, [open]);
+  if (inherited) return null;
   const label = appearance === "system" ? "System" : appearance === "light" ? "Light" : "Dark";
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { ref: rootRef, className: "relative", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { ref: rootRef, className: "relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       Button,
       {
         "aria-controls": menuId,
@@ -1265,16 +1354,16 @@ function ThemeMenu() {
         onClick: () => setOpen((value) => !value),
         size: "icon-sm",
         variant: "ghost",
-        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ActiveIcon, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ActiveIcon, {})
       }
     ),
-    open ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    open ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "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__ */ (0, import_jsx_runtime15.jsxs)(
+        children: options.map(({ value, label: optionLabel, icon: Icon }, index) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
           Button,
           {
             ref: index === 0 ? firstItemRef : void 0,
@@ -1288,7 +1377,7 @@ function ThemeMenu() {
             size: "sm",
             variant: "ghost",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, {}),
               " ",
               optionLabel
             ]
@@ -1301,23 +1390,23 @@ function ThemeMenu() {
 }
 
 // scaffold/src/components/chat/thread-sidebar.tsx
-var import_react = require("@agents24/react");
+var import_react2 = require("@agents24/react");
 var import_lucide_react10 = require("lucide-react");
 
 // scaffold/src/components/chat/identity-control.tsx
 var import_lucide_react9 = require("lucide-react");
 
 // scaffold/src/components/ui/sidebar.tsx
-var React7 = __toESM(require("react"), 1);
+var React8 = __toESM(require("react"), 1);
 var import_class_variance_authority3 = require("class-variance-authority");
 var import_radix_ui9 = require("radix-ui");
 
 // scaffold/src/hooks/use-mobile.ts
-var React6 = __toESM(require("react"), 1);
+var React7 = __toESM(require("react"), 1);
 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);
     };
@@ -1335,31 +1424,31 @@ function useIsMobile() {
 }
 
 // scaffold/src/components/ui/input.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 
 // scaffold/src/components/ui/separator.tsx
 var import_radix_ui7 = require("radix-ui");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 
 // scaffold/src/components/ui/sheet.tsx
 var import_radix_ui8 = require("radix-ui");
 var import_lucide_react7 = require("lucide-react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function Sheet({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_radix_ui8.Dialog.Root, { "data-slot": "sheet", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_radix_ui8.Dialog.Root, { "data-slot": "sheet", ...props });
 }
 function SheetPortal({
   container,
   ...props
 }) {
   const themeContainer = useThemePortalContainer();
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_radix_ui8.Dialog.Portal, { container: container || themeContainer || void 0, "data-slot": "sheet-portal", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_radix_ui8.Dialog.Portal, { container: container || themeContainer || void 0, "data-slot": "sheet-portal", ...props });
 }
 function SheetOverlay({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     import_radix_ui8.Dialog.Overlay,
     {
       "data-slot": "sheet-overlay",
@@ -1378,9 +1467,9 @@ function SheetContent({
   showCloseButton = true,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(SheetPortal, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SheetOverlay, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(SheetPortal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SheetOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
       import_radix_ui8.Dialog.Content,
       {
         "data-slot": "sheet-content",
@@ -1392,18 +1481,18 @@ function SheetContent({
         ...props,
         children: [
           children,
-          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_radix_ui8.Dialog.Close, { "data-slot": "sheet-close", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_radix_ui8.Dialog.Close, { "data-slot": "sheet-close", asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
             Button,
             {
               variant: "ghost",
               className: "absolute top-4 right-4 bg-secondary",
               size: "icon-sm",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
                   import_lucide_react7.XIcon,
                   {}
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "sr-only", children: "Close" })
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "sr-only", children: "Close" })
               ]
             }
           ) })
@@ -1413,7 +1502,7 @@ function SheetContent({
   ] });
 }
 function SheetHeader({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "div",
     {
       "data-slot": "sheet-header",
@@ -1426,7 +1515,7 @@ function SheetTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     import_radix_ui8.Dialog.Title,
     {
       "data-slot": "sheet-title",
@@ -1442,7 +1531,7 @@ function SheetDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     import_radix_ui8.Dialog.Description,
     {
       "data-slot": "sheet-description",
@@ -1453,17 +1542,17 @@ function SheetDescription({
 }
 
 // scaffold/src/components/ui/skeleton.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 
 // scaffold/src/components/ui/sidebar.tsx
 var import_lucide_react8 = require("lucide-react");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("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.");
   }
@@ -1478,10 +1567,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) {
@@ -1493,10 +1582,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();
@@ -1507,7 +1596,7 @@ function SidebarProvider({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [toggleSidebar]);
   const state = open ? "expanded" : "collapsed";
-  const contextValue = React7.useMemo(
+  const contextValue = React8.useMemo(
     () => ({
       state,
       open,
@@ -1519,7 +1608,7 @@ function SidebarProvider({
     }),
     [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "div",
     {
       "data-slot": "sidebar-wrapper",
@@ -1543,7 +1632,7 @@ function Sidebar({
 }) {
   const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
   if (collapsible === "none") {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       "div",
       {
         "data-slot": "sidebar",
@@ -1557,7 +1646,7 @@ function Sidebar({
     );
   }
   if (isMobile) {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
       SheetContent,
       {
         dir,
@@ -1567,16 +1656,16 @@ function Sidebar({
         className: "w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [--sidebar-width:18rem] [&>button]:hidden",
         side,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(SheetHeader, { className: "sr-only", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SheetTitle, { children: "Sidebar" }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SheetDescription, { children: "Displays the mobile sidebar." })
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(SheetHeader, { className: "sr-only", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SheetTitle, { children: "Sidebar" }),
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SheetDescription, { children: "Displays the mobile sidebar." })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex h-full w-full flex-col", children })
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex h-full w-full flex-col", children })
         ]
       }
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     "div",
     {
       className: "group peer hidden text-sidebar-foreground md:block",
@@ -1586,7 +1675,7 @@ function Sidebar({
       "data-side": side,
       "data-slot": "sidebar",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "div",
           {
             "data-slot": "sidebar-gap",
@@ -1598,7 +1687,7 @@ function Sidebar({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "div",
           {
             "data-slot": "sidebar-container",
@@ -1610,7 +1699,7 @@ function Sidebar({
               className
             ),
             ...props,
-            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "div",
               {
                 "data-sidebar": "sidebar",
@@ -1631,7 +1720,7 @@ function SidebarTrigger({
   ...props
 }) {
   const { toggleSidebar } = useSidebar();
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     Button,
     {
       "data-sidebar": "trigger",
@@ -1645,15 +1734,15 @@ function SidebarTrigger({
       },
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.PanelLeftIcon, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "sr-only", children: "Toggle Sidebar" })
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react8.PanelLeftIcon, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "sr-only", children: "Toggle Sidebar" })
       ]
     }
   );
 }
 function SidebarRail({ className, ...props }) {
   const { toggleSidebar } = useSidebar();
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "button",
     {
       "data-sidebar": "rail",
@@ -1676,7 +1765,7 @@ function SidebarRail({ className, ...props }) {
   );
 }
 function SidebarInset({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "main",
     {
       "data-slot": "sidebar-inset",
@@ -1689,7 +1778,7 @@ function SidebarInset({ className, ...props }) {
   );
 }
 function SidebarHeader({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "div",
     {
       "data-slot": "sidebar-header",
@@ -1703,7 +1792,7 @@ function SidebarHeader({ className, ...props }) {
   );
 }
 function SidebarFooter({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "div",
     {
       "data-slot": "sidebar-footer",
@@ -1714,7 +1803,7 @@ function SidebarFooter({ className, ...props }) {
   );
 }
 function SidebarContent({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "div",
     {
       "data-slot": "sidebar-content",
@@ -1728,7 +1817,7 @@ function SidebarContent({ className, ...props }) {
   );
 }
 function SidebarGroup({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "div",
     {
       "data-slot": "sidebar-group",
@@ -1742,7 +1831,7 @@ function SidebarGroupContent({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "div",
     {
       "data-slot": "sidebar-group-content",
@@ -1753,7 +1842,7 @@ function SidebarGroupContent({
   );
 }
 function SidebarMenu({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "ul",
     {
       "data-slot": "sidebar-menu",
@@ -1764,7 +1853,7 @@ function SidebarMenu({ className, ...props }) {
   );
 }
 function SidebarMenuItem({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "li",
     {
       "data-slot": "sidebar-menu-item",
@@ -1805,7 +1894,7 @@ function SidebarMenuButton({
 }) {
   const Comp = asChild ? import_radix_ui9.Slot.Root : "button";
   const { isMobile, state } = useSidebar();
-  const button = /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  const button = /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     Comp,
     {
       "data-slot": "sidebar-menu-button",
@@ -1824,9 +1913,9 @@ function SidebarMenuButton({
       children: tooltip
     };
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Tooltip, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TooltipTrigger, { asChild: true, children: button }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TooltipTrigger, { asChild: true, children: button }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       TooltipContent,
       {
         side: "right",
@@ -1844,7 +1933,7 @@ function SidebarMenuAction({
   ...props
 }) {
   const Comp = asChild ? import_radix_ui9.Slot.Root : "button";
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     Comp,
     {
       "data-slot": "sidebar-menu-action",
@@ -1860,7 +1949,7 @@ function SidebarMenuAction({
 }
 
 // scaffold/src/components/chat/identity-control.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function identityLabel(identity) {
   if (identity.displayName) return identity.displayName;
   if (identity.state === "authenticated") return "Signed in";
@@ -1870,44 +1959,43 @@ function identityLabel(identity) {
   return "Guest";
 }
 function IdentityAvatar({ identity }) {
-  const label = identityLabel(identity);
   if (identity.avatarUrl) {
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("img", { alt: "", className: "size-6 rounded-full object-cover", src: identity.avatarUrl });
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("img", { alt: "", className: "size-6 rounded-full object-cover", src: identity.avatarUrl });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("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__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react9.UserRound, { className: "size-3.5" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("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__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react9.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__ */ (0, import_jsx_runtime21.jsx)(SidebarMenu, { className: "w-full min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SidebarMenuItem, { className: "w-full min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(DropdownMenu, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SidebarMenu, { className: "w-full min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SidebarMenuItem, { className: "w-full min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(DropdownMenu, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
       SidebarMenuButton,
       {
         size: "lg",
         "aria-label": `Account: ${label}`,
         className: "w-full min-w-0 justify-start",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(IdentityAvatar, { identity }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: "min-w-0 flex-1 overflow-hidden text-start", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "block truncate text-sm font-medium", children: label }),
-            identity.secondaryText ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "block truncate text-xs text-muted-foreground", children: identity.secondaryText }) : null
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(IdentityAvatar, { identity }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "min-w-0 flex-1 overflow-hidden text-start", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "block truncate text-sm font-medium", children: label }),
+            identity.secondaryText ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "block truncate text-xs text-muted-foreground", children: identity.secondaryText }) : null
           ] })
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(DropdownMenuContent, { align: "start", side: "top", sideOffset: 8, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(DropdownMenuLabel, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "block truncate", children: label }),
-        identity.secondaryText ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "mt-0.5 block truncate text-xs font-normal text-muted-foreground", children: identity.secondaryText }) : null
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(DropdownMenuContent, { align: "start", side: "top", sideOffset: 8, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(DropdownMenuLabel, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "block truncate", children: label }),
+        identity.secondaryText ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "mt-0.5 block truncate text-xs font-normal text-muted-foreground", children: identity.secondaryText }) : null
       ] }),
-      canSignIn || canSignOut ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownMenuSeparator, {}) : null,
-      canSignIn ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(DropdownMenuItem, { onSelect: () => identity.onSignIn?.(), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react9.LogIn, {}),
+      canSignIn || canSignOut ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropdownMenuSeparator, {}) : null,
+      canSignIn ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(DropdownMenuItem, { onSelect: () => identity.onSignIn?.(), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react9.LogIn, {}),
         "Sign in"
       ] }) : null,
-      canSignOut ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(DropdownMenuItem, { onSelect: () => identity.onSignOut?.(), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react9.LogOut, {}),
+      canSignOut ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(DropdownMenuItem, { onSelect: () => identity.onSignOut?.(), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react9.LogOut, {}),
         "Sign out"
       ] }) : null
     ] })
@@ -1915,25 +2003,25 @@ function IdentityControl({ identity }) {
 }
 
 // scaffold/src/components/chat/thread-sidebar.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function ThreadStatus({ thread }) {
-  const activity = (0, import_react.getThreadActivity)(thread);
+  const activity = (0, import_react2.getThreadActivity)(thread);
   if (!activity.isSpinning) return null;
   const label = activity.status === "cancelling" ? "Cancelling" : activity.status === "queued" ? "Queued" : "Running";
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "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__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react10.LoaderCircle, { className: "size-3.5 animate-spin" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react10.LoaderCircle, { className: "size-3.5 animate-spin" })
     }
   );
 }
 function ThreadSidebar({ activeThreadId, hasMore, identity, isLoading, isLoadingMore, onDelete, onLoadMore, onNew, onOpen, threads }) {
   const { setOpenMobile } = useSidebar();
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     Sidebar,
     {
       "aria-label": "Conversations",
@@ -1941,19 +2029,19 @@ function ThreadSidebar({ activeThreadId, hasMore, identity, isLoading, isLoading
       "data-agents24-chat-sidebar": "",
       role: "navigation",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(SidebarHeader, { className: "gap-1 p-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "h-8 shrink-0", "aria-hidden": "true" }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Button, { className: "w-full justify-start", variant: "ghost", onClick: () => {
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(SidebarHeader, { className: "gap-1 p-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "h-8 shrink-0", "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Button, { className: "w-full justify-start", variant: "ghost", onClick: () => {
             onNew();
             setOpenMobile(false);
           }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react10.SquarePen, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react10.SquarePen, {}),
             " New chat"
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SidebarContent, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SidebarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(SidebarGroupContent, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SidebarMenu, { children: threads.map((thread) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(SidebarMenuItem, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SidebarContent, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SidebarGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(SidebarGroupContent, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SidebarMenu, { children: threads.map((thread) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(SidebarMenuItem, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
               SidebarMenuButton,
               {
                 className: "pr-8 pl-3",
@@ -1963,11 +2051,11 @@ function ThreadSidebar({ activeThreadId, hasMore, identity, isLoading, isLoading
                   void onOpen(thread.id).catch(() => void 0);
                   setOpenMobile(false);
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "min-w-0 truncate", children: String(thread.title || "New conversation") })
+                children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "min-w-0 truncate", children: String(thread.title || "New conversation") })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ThreadStatus, { thread }),
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ThreadStatus, { thread }),
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
               SidebarMenuAction,
               {
                 showOnHover: true,
@@ -1977,12 +2065,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__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react10.Trash2, {})
+                children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react10.Trash2, {})
               }
             )
           ] }, thread.id)) }),
-          !isLoading && threads.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "px-2 py-8 text-center text-xs text-muted-foreground", children: "No conversations" }),
-          hasMore && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+          !isLoading && threads.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "px-2 py-8 text-center text-xs text-muted-foreground", children: "No conversations" }),
+          hasMore && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
             Button,
             {
               className: "mt-2 w-full",
@@ -1991,14 +2079,14 @@ function ThreadSidebar({ activeThreadId, hasMore, identity, isLoading, isLoading
               variant: "ghost",
               onClick: () => void onLoadMore().catch(() => void 0),
               children: [
-                isLoadingMore && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react10.LoaderCircle, { className: "animate-spin" }),
+                isLoadingMore && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react10.LoaderCircle, { className: "animate-spin" }),
                 "Load more"
               ]
             }
           )
         ] }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SidebarFooter, { className: "w-full min-w-0 p-2", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(IdentityControl, { identity }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SidebarRail, {})
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SidebarFooter, { className: "w-full min-w-0 p-2", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(IdentityControl, { identity }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SidebarRail, {})
       ]
     }
   );
@@ -2006,7 +2094,7 @@ function ThreadSidebar({ activeThreadId, hasMore, identity, isLoading, isLoading
 
 // scaffold/src/components/chat/turn-outline.tsx
 var import_chat_react = require("@agents24/chat-react");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function turnsFromMessages(messages) {
   return messages.reduce((turns, message) => {
     if (message.role === "user") {
@@ -2025,7 +2113,7 @@ function turnsFromMessages(messages) {
   }, []);
 }
 function TurnOutline({ messages }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     import_chat_react.LatestThreadScroller.Outline,
     {
       items: turnsFromMessages(messages),
@@ -2049,7 +2137,7 @@ function isScaffoldTimelineLoading({
 
 // scaffold/src/components/chat/chat-shell.tsx
 var import_chat_react2 = require("@agents24/chat-react");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var LOADING_INPUT_CONTRACT = {
   version: "agents24.runtime-inputs.v2",
   modalities: {
@@ -2062,31 +2150,31 @@ var LOADING_INPUT_CONTRACT = {
   retention: { mode: "thread_lifetime" }
 };
 function PersistentSidebarTrigger() {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "pointer-events-none fixed start-3 top-0 z-[60] flex h-12 items-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SidebarTrigger, { className: "pointer-events-auto [&_svg]:size-[18px]" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "pointer-events-none fixed start-3 top-0 z-[60] flex h-12 items-center", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(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__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-8 w-17 shrink-0", "aria-hidden": "true" }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "pointer-events-none fixed start-12 top-0 z-[60] flex h-12 items-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { className: "pointer-events-auto", variant: "ghost", size: "icon-sm", "aria-label": "New chat", onClick: onNew, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.SquarePen, {}) }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "h-8 w-17 shrink-0", "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "pointer-events-none fixed start-12 top-0 z-[60] flex h-12 items-center", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Button, { className: "pointer-events-auto", variant: "ghost", size: "icon-sm", "aria-label": "New chat", onClick: onNew, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react11.SquarePen, {}) }) })
   ] });
 }
 function OperationErrorNotice({ runtime }) {
   const error = runtime.operationError || runtime.backgroundError;
   if (!error) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "pointer-events-none absolute inset-x-0 top-3 z-40 flex justify-center px-4", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("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__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.CircleAlert, { className: "mt-0.5 size-4 shrink-0 text-destructive" }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "min-w-0 flex-1 wrap-break-word", children: (0, import_runtime2.agentChatRuntimeErrorMessage)(error) || "The chat could not complete that action." }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "pointer-events-none absolute inset-x-0 top-3 z-40 flex justify-center px-4", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("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__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react11.CircleAlert, { className: "mt-0.5 size-4 shrink-0 text-destructive" }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "min-w-0 flex-1 wrap-break-word", children: (0, import_runtime2.agentChatRuntimeErrorMessage)(error) || "The chat could not complete that action." }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       Button,
       {
         "aria-label": "Dismiss error",
         onClick: runtime.operationError ? runtime.clearOperationError : runtime.controller.clearBackgroundError,
         size: "icon-xs",
         variant: "ghost",
-        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.X, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react11.X, {})
       }
     )
   ] }) });
@@ -2097,28 +2185,29 @@ 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";
   const isCancelling = controller.runState === "cancelling";
-  const wasLiveRun = (0, import_ui4.useLiveCompletionRuns)(controller.activeRunId, isRunning);
+  const wasLiveRun = (0, import_ui5.useLiveCompletionRuns)(controller.activeRunId, isRunning);
   const activeTitle = controller.threads.find((thread) => thread.id === controller.activeThreadId)?.title;
   const hasBlockingError = Boolean(runtime.fatalError && controller.messages.length === 0);
   const isEmptyState = controller.activeThreadId === null && controller.messages.length === 0 && !hasBlockingError;
   const latestAnchorId = (0, import_chat_react2.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,
       text: draft.text,
-      files: (0, import_ui4.queuedMessageComposerFiles)(draft)
+      files: (0, import_ui5.queuedMessageComposerFiles)(draft)
     });
   }, [controller]);
-  React8.useLayoutEffect(() => {
+  React9.useLayoutEffect(() => {
     const overlay = composerOverlayRef.current;
     if (!overlay || isEmptyState) return;
     const updateHeight = () => {
@@ -2129,15 +2218,15 @@ function ChatShell({
     resizeObserver.observe(overlay);
     return () => resizeObserver.disconnect();
   }, [isEmptyState]);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     SidebarProvider,
     {
       className: "h-svh min-h-0 overflow-hidden",
       "data-agents24-chat": "",
       "data-agents24-chat-layout": "",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(PersistentSidebarTrigger, {}),
-        sidebar || /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(PersistentSidebarTrigger, {}),
+        sidebar || /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           ThreadSidebar,
           {
             activeThreadId: controller.activeThreadId,
@@ -2152,57 +2241,58 @@ function ChatShell({
             onOpen: runtime.openThread
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(SidebarInset, { className: "h-svh min-h-0 overflow-hidden bg-background", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(SidebarInset, { className: "h-svh min-h-0 overflow-hidden bg-background", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
             "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__ */ (0, import_jsx_runtime24.jsx)(CollapsedHeaderActions, { onNew: runtime.newThread }),
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h1", { className: "truncate text-sm font-medium", children: String(activeTitle || "New chat") }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ThemeMenu, {})
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CollapsedHeaderActions, { onNew: runtime.newThread }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h1", { className: "truncate text-sm font-medium", children: String(activeTitle || "New chat") }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ThemeMenu, {})
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
             "section",
             {
               "aria-label": "Conversation",
               className: "relative flex min-h-0 flex-1 flex-col overflow-hidden",
               "data-agents24-chat-transcript": "",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(OperationErrorNotice, { runtime }),
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_chat_react2.LatestThreadScroller.Provider, { autoScroll: true, defaultScrollPosition: "last-anchor", scrollPreviousItemPeek: 64, children: [
-                  !isEmptyState && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_chat_react2.LatestThreadScroller.Root, { className: "relative min-h-0 flex-1", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_chat_react2.LatestThreadScroller.Viewport, { preserveScrollOnPrepend: true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(OperationErrorNotice, { runtime }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SubagentTasks, { threadId: controller.activeThreadId }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_chat_react2.LatestThreadScroller.Provider, { autoScroll: true, defaultScrollPosition: "last-anchor", scrollPreviousItemPeek: 64, children: [
+                  !isEmptyState && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_chat_react2.LatestThreadScroller.Root, { className: "relative min-h-0 flex-1", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_chat_react2.LatestThreadScroller.Viewport, { preserveScrollOnPrepend: true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
                       import_chat_react2.LatestThreadScroller.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__ */ (0, import_jsx_runtime24.jsxs)(Button, { className: "self-center", variant: "ghost", size: "sm", disabled: controller.isLoadingOlder, onClick: () => {
+                          controller.hasOlderTurns && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Button, { className: "self-center", variant: "ghost", size: "sm", disabled: controller.isLoadingOlder, onClick: () => {
                             void controller.loadOlder().catch(() => void 0);
                           }, children: [
-                            controller.isLoadingOlder && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.LoaderCircle, { className: "animate-spin" }),
+                            controller.isLoadingOlder && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react11.LoaderCircle, { className: "animate-spin" }),
                             " Load earlier messages"
                           ] }),
-                          runtime.isBootstrapping && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { "aria-label": "Loading conversation", className: "flex flex-1 items-center justify-center py-24 text-muted-foreground", role: "status", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.LoaderCircle, { className: "size-4 animate-spin" }) }),
-                          hasBlockingError && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-1 flex-col items-center justify-center gap-3 py-24 text-center", children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.CircleAlert, { className: "size-5 text-destructive" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h2", { className: "font-medium", children: "Couldn\u2019t connect" }),
-                              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "mt-1 max-w-md text-sm text-muted-foreground", children: runtime.errorMessage })
+                          runtime.isBootstrapping && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { "aria-label": "Loading conversation", className: "flex flex-1 items-center justify-center py-24 text-muted-foreground", role: "status", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react11.LoaderCircle, { className: "size-4 animate-spin" }) }),
+                          hasBlockingError && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-1 flex-col items-center justify-center gap-3 py-24 text-center", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react11.CircleAlert, { className: "size-5 text-destructive" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h2", { className: "font-medium", children: "Couldn\u2019t connect" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "mt-1 max-w-md text-sm text-muted-foreground", children: runtime.errorMessage })
                             ] }),
-                            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { variant: "outline", onClick: () => void runtime.retryBootstrap(), children: "Try again" })
+                            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Button, { variant: "outline", onClick: () => void runtime.retryBootstrap(), children: "Try again" })
                           ] }),
-                          controller.messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                          controller.messages.map((message) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                             import_chat_react2.LatestThreadScroller.Item,
                             {
                               messageId: message.id,
                               scrollAnchor: isRunning && message.id === latestAnchorId,
                               className: "overflow-visible [content-visibility:visible]",
-                              children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                              children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                                 ChatMessage,
                                 {
                                   animateCompletion: wasLiveRun(message.runId),
@@ -2228,9 +2318,9 @@ function ChatShell({
                         ]
                       }
                     ) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TurnOutline, { messages: controller.messages })
+                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TurnOutline, { messages: controller.messages })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
                     "div",
                     {
                       ref: composerOverlayRef,
@@ -2239,56 +2329,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__ */ (0, import_jsx_runtime24.jsx)("div", { className: "mx-auto mb-8 w-full max-w-3xl px-4 text-center sm:px-6", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h2", { className: "text-3xl font-semibold tracking-tight sm:text-4xl", children: "Ready when you are." }) }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "pointer-events-auto absolute inset-x-0 top-0 flex -translate-y-full justify-center pb-3", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_chat_react2.LatestThreadScroller.Button, { className: "!relative !inset-auto !translate-x-0 rtl:!translate-x-0" }) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "pointer-events-auto mx-auto w-full max-w-3xl px-4 sm:px-6", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-                            import_ui4.AgentChatQueue,
-                            {
-                              pending: controller.pendingMessages,
-                              queue: controller.messageQueue,
-                              canSteer: controller.runState === "streaming",
-                              onSteer: controller.steerPendingMessage,
-                              onRemove: controller.removePendingMessage,
-                              onEdit: retractForEdit,
-                              onResume: controller.resumeQueue
-                            }
-                          ),
-                          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
-                            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__ */ (0, import_jsx_runtime25.jsx)("div", { className: "mx-auto mb-8 w-full max-w-3xl px-4 text-center sm:px-6", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h2", { className: "text-3xl font-semibold tracking-tight sm:text-4xl", children: "Ready when you are." }) }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "pointer-events-auto absolute inset-x-0 top-0 flex -translate-y-full justify-center pb-3", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_chat_react2.LatestThreadScroller.Button, { className: "!relative !inset-auto !translate-x-0 rtl:!translate-x-0" }) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "pointer-events-auto mx-auto w-full max-w-3xl px-4 sm:px-6", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                          Composer,
+                          {
+                            queue: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                              import_ui5.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"
+                          }
+                        ) })
                       ]
                     }
                   )
@@ -2306,7 +2392,7 @@ function ChatShell({
 var GUEST_CHAT_IDENTITY = { state: "guest" };
 
 // scaffold/src/app.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var createBrowserAbortController = () => new AbortController();
 var browserVisibility = (0, import_browser.createBrowserVisibility)();
 function RuntimeChat({
@@ -2318,20 +2404,21 @@ function RuntimeChat({
     ...props,
     mcpRedirectUri: props.mcpRedirectUri || (typeof window === "undefined" ? void 0 : window.location.href)
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ChatShell, { components, identity, runtime, sidebar: props.sidebar });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ChatShell, { components, identity, runtime, sidebar: props.sidebar });
 }
 function App(props) {
   const identity = props.identity || GUEST_CHAT_IDENTITY;
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react2.Agents24Provider, { client: props.client, createAbortController: createBrowserAbortController, visibility: browserVisibility, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(RuntimeChat, { ...props }, identity.state) });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react3.Agents24Provider, { client: props.client, createAbortController: createBrowserAbortController, visibility: browserVisibility, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(RuntimeChat, { ...props }, identity.state) });
 }
 
 // scaffold/src/index.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
-function Agents24ChatScaffold({ appearanceController, theme, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ThemeProvider, { controller: appearanceController, theme, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(App, { ...props }) }) });
+var import_jsx_runtime27 = require("react/jsx-runtime");
+function Agents24ChatScaffold({ appearanceController, theme, themeMode, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ThemeProvider, { controller: appearanceController, theme, mode: themeMode, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(App, { ...props }) }) });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Agents24ChatComposer,
   Agents24ChatScaffold,
   Agents24ChatScaffoldApp,
   Agents24ChatThemeProvider,