@agents24/chat-react 0.5.29 → 0.5.31

package/dist/ui/index.js

@@ -2,10 +2,16 @@ import {
   getActiveStreamingTextPartId,
   useStreamingText
 } from "../chunk-5PWUQTLK.js";
+import {
+  attachmentFileAccept,
+  canonicalInputMimeType,
+  inputMimeTypes,
+  validateAgentChatSubmission
+} from "../chunk-INO5DSSJ.js";
 
 // src/ui/agent-chat-composer.tsx
-import * as React3 from "react";
-import { ArrowUp, Loader2, Plus, Square } from "lucide-react";
+import * as React6 from "react";
+import { ArrowUp, Loader2, Mic, Plus, Square } from "lucide-react";
 
 // src/ui/adapters.ts
 import * as React from "react";
@@ -483,6 +489,7 @@ function attachmentRenderKey(data, index, rowKind) {
 function ChatImageAttachment({
   className,
   data,
+  presentation = "message",
   onRemove,
   resolveContent,
   ...props
@@ -562,7 +569,7 @@ function ChatImageAttachment({
     Attachment,
     {
       ...props,
-      className: cn("a24-chat-image-attachment", className),
+      className: cn("a24-chat-image-attachment", presentation === "composer" && "a24-composer-attachment-card", className),
       orientation: "vertical",
       ref: rootRef,
       state: status === "error" ? "error" : status === "done" ? "done" : "processing",
@@ -585,6 +592,7 @@ function ChatImageAttachment({
       status !== "done" && status !== "error" ? React.createElement("span", { className: "sr-only", role: "status" }, `Loading ${filename}`) : null,
       status === "error" ? React.createElement("span", { className: "sr-only" }, `${filename} preview unavailable`) : null
     ),
+    presentation === "composer" ? React.createElement("span", { className: "a24-composer-image-caption", title: filename }, filename) : null,
     onRemove ? React.createElement(
       "button",
       {
@@ -603,6 +611,7 @@ function ChatImageAttachment({
 function ChatAttachment({
   className,
   data,
+  presentation = "message",
   onRemove,
   orientation,
   resolveContent,
@@ -615,6 +624,7 @@ function ChatAttachment({
       ...props,
       className,
       data,
+      presentation,
       onRemove,
       resolveContent
     });
@@ -622,11 +632,16 @@ function ChatAttachment({
   return React.createElement(
     Attachment,
     {
-      className: cn("a24-chat-attachment", className),
+      className: cn("a24-chat-attachment", presentation === "composer" && "a24-composer-attachment-card", className),
       orientation: orientation || "horizontal",
       size: "sm",
       ...props
     },
+    presentation === "composer" ? React.createElement(
+      "div",
+      { className: "a24-composer-file-preview", "aria-hidden": true },
+      React.createElement(FileIcon, { size: 64, type: fileIconType, variant: "solid" })
+    ) : null,
     React.createElement(
       AttachmentMedia,
       Object.assign(
@@ -684,6 +699,7 @@ function ChatAttachments({
 }
 function ChatAttachmentRows({
   attachments,
+  layout = "message",
   className,
   dir,
   onRemove,
@@ -699,6 +715,7 @@ function ChatAttachmentRows({
     items.map(
       (attachment, index) => React.createElement(ChatAttachment, {
         data: attachment,
+        presentation: layout,
         dir: "ltr",
         key: attachmentRenderKey(attachment, index, kind),
         onRemove: onRemove ? () => onRemove(attachment) : void 0,
@@ -709,15 +726,18 @@ function ChatAttachmentRows({
   return React.createElement(
     "div",
     {
-      className: cn("a24-chat-attachment-rows", className),
+      className: cn("a24-chat-attachment-rows", layout === "composer" && "a24-composer-attachment-row", className),
       dir,
       ...props
     },
-    renderRow(imageAttachments, "images"),
-    renderRow(fileAttachments, "files")
+    layout === "composer" ? renderRow(attachments, "mixed") : renderRow(imageAttachments, "images"),
+    layout === "message" ? renderRow(fileAttachments, "files") : null
   );
 }
 
+// src/ui/use-agent-chat-composer.ts
+import * as React4 from "react";
+
 // src/ui/composer-attachments.ts
 import { normalizeAttachmentMimeType } from "@agents24/client";
 var createId = () => typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : `file-${Date.now()}-${Math.random().toString(36).slice(2)}`;
@@ -779,8 +799,317 @@ function useChatComposerFocus({ textareaRef, disabled, focusKey, restoredDraft,
   return focus;
 }
 
-// src/ui/agent-chat-composer.tsx
+// src/ui/use-audio-recorder.ts
+import * as React3 from "react";
+var RECORDING_CANDIDATES = ["audio/webm;codecs=opus", "audio/webm", "audio/mp4"];
+function useAudioRecorder(onRecorded, options = {}) {
+  const recorderRef = React3.useRef(null);
+  const streamRef = React3.useRef(null);
+  const pendingRef = React3.useRef(false);
+  const generationRef = React3.useRef(0);
+  const onRecordedRef = React3.useRef(onRecorded);
+  const onStreamChangeRef = React3.useRef(options.onStreamChange);
+  React3.useEffect(() => {
+    onRecordedRef.current = onRecorded;
+    onStreamChangeRef.current = options.onStreamChange;
+  });
+  const [isRecording, setIsRecording] = React3.useState(false);
+  const [error, setError] = React3.useState(null);
+  const release = React3.useCallback(() => {
+    streamRef.current?.getTracks().forEach((track) => track.stop());
+    streamRef.current = null;
+    recorderRef.current = null;
+    onStreamChangeRef.current?.(null);
+  }, []);
+  const stop = React3.useCallback(() => {
+    const recorder = recorderRef.current;
+    if (recorder && recorder.state !== "inactive") recorder.stop();
+  }, []);
+  const start = React3.useCallback(async () => {
+    if (pendingRef.current || recorderRef.current) return;
+    setError(null);
+    if (!navigator.mediaDevices?.getUserMedia || typeof MediaRecorder === "undefined") {
+      setError("Audio recording is not supported in this browser.");
+      return;
+    }
+    pendingRef.current = true;
+    const generation = generationRef.current;
+    try {
+      const mimeType = RECORDING_CANDIDATES.find((candidate) => MediaRecorder.isTypeSupported(candidate));
+      if (!mimeType) {
+        setError("Audio recording is not supported in this browser.");
+        return;
+      }
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      if (generation !== generationRef.current) {
+        stream.getTracks().forEach((track) => track.stop());
+        return;
+      }
+      streamRef.current = stream;
+      const recorder = new MediaRecorder(stream, { mimeType });
+      recorderRef.current = recorder;
+      const chunks = [];
+      recorder.ondataavailable = (event) => {
+        if (event.data.size) chunks.push(event.data);
+      };
+      recorder.onstop = () => {
+        if (generation !== generationRef.current) return;
+        const actualType = recorder.mimeType || mimeType;
+        const extension = actualType.startsWith("audio/mp4") ? "m4a" : "webm";
+        try {
+          onRecordedRef.current(new File([new Blob(chunks, { type: actualType })], `recording-${Date.now()}.${extension}`, { type: actualType }));
+        } finally {
+          release();
+          setIsRecording(false);
+        }
+      };
+      recorder.onerror = () => {
+        recorder.onstop = null;
+        if (recorder.state !== "inactive") recorder.stop();
+        release();
+        setIsRecording(false);
+        setError("Audio recording failed. Try again.");
+      };
+      recorder.start();
+      setIsRecording(true);
+      onStreamChangeRef.current?.(stream);
+    } catch {
+      if (generation === generationRef.current) {
+        release();
+        setIsRecording(false);
+        setError("Microphone access is unavailable.");
+      }
+    } finally {
+      if (generation === generationRef.current) pendingRef.current = false;
+    }
+  }, [release]);
+  React3.useEffect(() => () => {
+    generationRef.current += 1;
+    pendingRef.current = false;
+    const recorder = recorderRef.current;
+    if (recorder) {
+      recorder.onstop = null;
+      recorder.onerror = null;
+      if (recorder.state !== "inactive") recorder.stop();
+    }
+    release();
+  }, [release]);
+  return { error, isRecording, start, stop };
+}
+
+// src/ui/use-agent-chat-composer.ts
+function useAgentChatComposer(options) {
+  const [text, setTextState] = React4.useState("");
+  const [files, setFiles] = React4.useState([]);
+  const [attachmentError, setAttachmentError] = React4.useState(null);
+  const [isSubmitting, setIsSubmitting] = React4.useState(false);
+  const localTextareaRef = React4.useRef(null);
+  const textareaRef = options.textareaRef ?? localTextareaRef;
+  const filesRef = React4.useRef(files);
+  const inFlightFilesRef = React4.useRef([]);
+  const revisionRef = React4.useRef(0);
+  const submittingRef = React4.useRef(false);
+  React4.useEffect(() => {
+    filesRef.current = files;
+  }, [files]);
+  React4.useEffect(() => () => {
+    revokeAgentChatComposerFiles(filesRef.current);
+    revokeAgentChatComposerFiles(inFlightFilesRef.current);
+  }, []);
+  const focusComposer = useChatComposerFocus({
+    textareaRef,
+    disabled: Boolean(options.disabled),
+    focusKey: options.focusKey,
+    restoredDraft: options.restoredDraft,
+    onRestore: (draft) => {
+      revisionRef.current += 1;
+      revokeAgentChatComposerFiles(filesRef.current);
+      setTextState(draft.text);
+      setFiles(draft.files);
+    }
+  });
+  const attachmentMimeTypes = inputMimeTypes(options.inputContract);
+  const setText = (value) => {
+    revisionRef.current += 1;
+    setTextState(value);
+  };
+  const addFiles = (selected) => {
+    const accepted = selected.filter((file) => attachmentMimeTypes.includes(canonicalInputMimeType(file.type, file.name)));
+    revisionRef.current += 1;
+    const additions = accepted.map(createAgentChatComposerFile);
+    setFiles((current) => [...current, ...additions]);
+    setAttachmentError(accepted.length === selected.length ? null : "One or more selected file types are not supported by this Agent.");
+  };
+  const removeFile = (id) => {
+    revisionRef.current += 1;
+    const removed = filesRef.current.find((file) => file.id === id);
+    if (removed) revokeAgentChatComposerFiles([removed]);
+    setFiles((current) => current.filter((file) => file.id !== id));
+  };
+  const recorder = useAudioRecorder((file) => addFiles([file]), { onStreamChange: options.onRecordingStreamChange });
+  const validationError = options.inputContract ? validateAgentChatSubmission(
+    options.inputContract,
+    text,
+    files.map((file) => ({ data: file.source || new Uint8Array(), mediaType: file.mediaType, name: file.filename }))
+  ) : null;
+  const canSubmit = Boolean(text.trim() || files.length) && !options.disabled && !options.isCancelling && !isSubmitting && !recorder.isRecording && !validationError;
+  const submit = async () => {
+    if (!canSubmit || submittingRef.current) return;
+    const value = text;
+    const selectedFiles = files;
+    const clearedRevision = ++revisionRef.current;
+    submittingRef.current = true;
+    setIsSubmitting(true);
+    inFlightFilesRef.current = selectedFiles;
+    setTextState("");
+    setFiles([]);
+    focusComposer();
+    try {
+      await options.onSubmit(value, selectedFiles);
+      revokeAgentChatComposerFiles(selectedFiles);
+    } catch {
+      if (revisionRef.current === clearedRevision) {
+        revisionRef.current += 1;
+        setTextState(value);
+        setFiles(selectedFiles);
+      } else revokeAgentChatComposerFiles(selectedFiles);
+    } finally {
+      inFlightFilesRef.current = [];
+      submittingRef.current = false;
+      setIsSubmitting(false);
+    }
+  };
+  return {
+    text,
+    setText,
+    files,
+    addFiles,
+    removeFile,
+    textareaRef,
+    submit,
+    canSubmit,
+    isSubmitting,
+    attachmentError,
+    attachmentMimeTypes,
+    validationError,
+    recorder,
+    recordingAllowed: options.recordingEnabled ?? options.inputContract?.modalities.audio.recording_enabled ?? false,
+    fileAccept: attachmentFileAccept(attachmentMimeTypes),
+    onKeyDown: (event) => {
+      if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
+        event.preventDefault();
+        void submit();
+      }
+    },
+    allowAttachments: attachmentMimeTypes.length > 0,
+    isExpanded: Boolean(options.forceExpanded || text.includes("\n") || text.length > 62),
+    action: chatComposerAction({ hasDraft: Boolean(text.trim() || files.length), isRunning: Boolean(options.isRunning), isCancelling: Boolean(options.isCancelling) })
+  };
+}
+
+// src/ui/agent-chat-context-status.tsx
+import * as React5 from "react";
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var COMPACT_TOKENS = new Intl.NumberFormat("en-US", { notation: "compact" });
+var PERCENT = new Intl.NumberFormat("en-US", {
+  style: "percent",
+  maximumFractionDigits: 1
+});
+var EXACT_SOURCES = /* @__PURE__ */ new Set(["exact", "provider_usage"]);
+function contextStatusMetrics(contextWindow) {
+  const maximum = Number(contextWindow?.max_tokens || 0);
+  const input = Math.max(0, Number(contextWindow?.input_tokens || 0));
+  const admissionInput = Math.max(0, Number(contextWindow?.admission_input_tokens ?? input));
+  const usageRatio = Math.max(0, Math.min(1, Number(
+    contextWindow?.usage_ratio ?? input / maximum
+  )));
+  const admissionRatio = Math.max(0, Math.min(1, Number(
+    contextWindow?.admission_ratio ?? admissionInput / maximum
+  )));
+  return { maximum, input, admissionInput, usageRatio, admissionRatio };
+}
+function AgentChatContextStatus({
+  className,
+  contextWindow
+}) {
+  const tooltipId = React5.useId();
+  const [open, setOpen] = React5.useState(false);
+  const { maximum, input, admissionInput, usageRatio, admissionRatio } = contextStatusMetrics(contextWindow);
+  const percentage = Math.round(usageRatio * 100);
+  const exact = EXACT_SOURCES.has(contextWindow?.source || "unknown");
+  if (!Number.isFinite(maximum) || maximum <= 0) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("a24-context-status", className),
+      onBlurCapture: (event) => {
+        if (!event.currentTarget.contains(event.relatedTarget)) setOpen(false);
+      },
+      onFocusCapture: () => setOpen(true),
+      onMouseEnter: () => setOpen(true),
+      onMouseLeave: () => setOpen(false),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            "aria-describedby": open ? tooltipId : void 0,
+            "aria-label": `Context window ${percentage}% used`,
+            className: "a24-context-status__trigger",
+            onKeyDown: (event) => {
+              if (event.key === "Escape") setOpen(false);
+            },
+            type: "button",
+            children: [
+              /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", className: "a24-context-status__ring", viewBox: "0 0 24 24", children: [
+                /* @__PURE__ */ jsx3("circle", { className: "a24-context-status__track", cx: "12", cy: "12", r: "10" }),
+                /* @__PURE__ */ jsx3(
+                  "circle",
+                  {
+                    className: "a24-context-status__value",
+                    cx: "12",
+                    cy: "12",
+                    pathLength: "100",
+                    r: "10",
+                    strokeDasharray: `${percentage} 100`
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("span", { children: [
+                percentage,
+                "%"
+              ] })
+            ]
+          }
+        ),
+        open ? /* @__PURE__ */ jsxs("div", { className: "a24-context-status__popover", id: tooltipId, role: "tooltip", children: [
+          /* @__PURE__ */ jsx3("span", { className: "a24-context-status__sr-only", children: "Context window" }),
+          /* @__PURE__ */ jsxs("strong", { children: [
+            PERCENT.format(usageRatio),
+            " context used"
+          ] }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            exact ? "Input" : "Estimated input",
+            ": ",
+            COMPACT_TOKENS.format(input),
+            " / ",
+            COMPACT_TOKENS.format(maximum),
+            " tokens"
+          ] }),
+          admissionInput !== input ? /* @__PURE__ */ jsxs("span", { children: [
+            "Safety bound: ",
+            COMPACT_TOKENS.format(admissionInput),
+            " tokens (",
+            PERCENT.format(admissionRatio),
+            ")"
+          ] }) : null
+        ] }) : null
+      ]
+    }
+  );
+}
+
+// src/ui/agent-chat-composer.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 function formatFileCount(files) {
   if (files.length === 1) return files[0].filename;
   return `${files.length} files`;
@@ -788,9 +1117,11 @@ function formatFileCount(files) {
 var pillButtonClass = "inline-flex size-8 shrink-0 items-center justify-center gap-2 rounded-lg border-0 bg-muted text-sm text-muted-foreground shadow-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-0 disabled:pointer-events-none disabled:opacity-50";
 var submitButtonClass = "inline-flex size-9 shrink-0 items-center justify-center gap-2 rounded-lg border-0 bg-primary text-sm text-primary-foreground shadow-none transition-[background-color,color,opacity,transform] duration-200 hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-0 disabled:pointer-events-none disabled:opacity-50";
 function AgentChatComposer({
+  inputContract,
+  recordingEnabled,
+  contextWindow,
   accept,
   allowAttachments = true,
-  attachmentLayout = "flow",
   className,
   disabled = false,
   forceExpanded = false,
@@ -805,16 +1136,22 @@ function AgentChatComposer({
   restoredDraft,
   textareaRef
 }) {
-  const fileInputRef = React3.useRef(null);
-  const filesRef = React3.useRef([]);
-  const inFlightFilesRef = React3.useRef([]);
-  const localTextareaRef = React3.useRef(null);
-  const draftRevisionRef = React3.useRef(0);
-  const [text, setText] = React3.useState("");
-  const [files, setFiles] = React3.useState([]);
-  const [isSubmitting, setIsSubmitting] = React3.useState(false);
+  const fileInputRef = React6.useRef(null);
+  const localTextareaRef = React6.useRef(null);
+  const composer = useAgentChatComposer({
+    inputContract,
+    recordingEnabled,
+    disabled,
+    isRunning,
+    isCancelling,
+    focusKey,
+    restoredDraft,
+    textareaRef: localTextareaRef,
+    onSubmit: (text2, files2) => onSubmit({ text: text2.trim(), files: files2, attachmentIds: files2.flatMap((file) => file.id ? [file.id] : []) })
+  });
+  const { text, files, setText, isSubmitting, canSubmit, action, submit } = composer;
   const isExpanded = forceExpanded || text.includes("\n") || text.length > 62;
-  const setTextareaRef = React3.useCallback(
+  const setTextareaRef = React6.useCallback(
     (node) => {
       localTextareaRef.current = node;
       if (typeof textareaRef === "function") {
@@ -825,27 +1162,10 @@ function AgentChatComposer({
     },
     [textareaRef]
   );
-  React3.useEffect(() => {
-    filesRef.current = files;
+  React6.useEffect(() => {
     onAttachmentCountChange?.(files.length);
   }, [files, onAttachmentCountChange]);
-  React3.useEffect(() => () => {
-    revokeAgentChatComposerFiles(filesRef.current);
-    revokeAgentChatComposerFiles(inFlightFilesRef.current);
-  }, []);
-  const focusComposer = useChatComposerFocus({
-    textareaRef: localTextareaRef,
-    disabled,
-    focusKey,
-    restoredDraft,
-    onRestore: (draft) => {
-      draftRevisionRef.current += 1;
-      revokeAgentChatComposerFiles(filesRef.current);
-      setText(draft.text);
-      setFiles(draft.files);
-    }
-  });
-  React3.useLayoutEffect(() => {
+  React6.useLayoutEffect(() => {
     const textarea = localTextareaRef.current;
     if (!textarea) return;
     if (isExpanded) {
@@ -858,83 +1178,13 @@ function AgentChatComposer({
     textarea.style.height = "";
     textarea.style.overflowY = "hidden";
   }, [isExpanded, text]);
-  const canSubmit = !disabled && !isCancelling && !isSubmitting && (text.trim().length > 0 || files.length > 0);
-  const action = chatComposerAction({ hasDraft: text.trim().length > 0 || files.length > 0, isRunning, isCancelling });
   const handleFilesChange = (event) => {
-    const selected = Array.from(event.target.files || []).map(createAgentChatComposerFile);
-    if (selected.length > 0) {
-      draftRevisionRef.current += 1;
-      setFiles((current) => [...current, ...selected]);
-    }
+    composer.addFiles(Array.from(event.target.files || []));
     event.currentTarget.value = "";
   };
-  const removeFile = (fileId) => {
-    draftRevisionRef.current += 1;
-    setFiles((current) => {
-      const target = current.find((file) => file.id === fileId);
-      if (target) revokeAgentChatComposerFiles([target]);
-      return current.filter((file) => file.id !== fileId);
-    });
-  };
-  const submit = async () => {
-    if (!canSubmit) return;
-    const submittedText = text.trim();
-    const submittedFiles = files;
-    const clearedRevision = draftRevisionRef.current + 1;
-    draftRevisionRef.current = clearedRevision;
-    inFlightFilesRef.current = submittedFiles;
-    setIsSubmitting(true);
-    setText("");
-    setFiles([]);
-    focusComposer();
-    try {
-      await onSubmit({
-        text: submittedText,
-        files: submittedFiles,
-        attachmentIds: submittedFiles.flatMap((file) => file.persistedAttachmentId ? [file.persistedAttachmentId] : [])
-      });
-      revokeAgentChatComposerFiles(submittedFiles);
-      inFlightFilesRef.current = [];
-    } catch {
-      if (draftRevisionRef.current === clearedRevision) {
-        draftRevisionRef.current += 1;
-        setText(submittedText);
-        setFiles(submittedFiles);
-        inFlightFilesRef.current = [];
-      } else {
-        revokeAgentChatComposerFiles(submittedFiles);
-        inFlightFilesRef.current = [];
-      }
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-  const handleKeyDown = (event) => {
-    if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
-      event.preventDefault();
-      void submit();
-    }
-  };
-  return /* @__PURE__ */ jsxs("div", { className: cn("a24-composer relative mx-auto w-full max-w-3xl overflow-visible", className), "data-agents24-chat-composer": "", children: [
-    files.length > 0 ? /* @__PURE__ */ jsx3(
-      "div",
-      {
-        "data-testid": "agent-chat-composer-attachments",
-        "data-layout": attachmentLayout,
-        className: cn(
-          "a24-composer__attachments min-w-0 py-1",
-          attachmentLayout === "overlay" ? "absolute bottom-full left-0 right-0 mb-1.5 flex-nowrap overflow-x-auto overflow-y-hidden overscroll-x-contain px-2" : "mb-2 flex-wrap px-1"
-        ),
-        children: /* @__PURE__ */ jsx3(
-          ChatAttachmentRows,
-          {
-            attachments: files,
-            onRemove: (attachment) => attachment.id && removeFile(attachment.id)
-          }
-        )
-      }
-    ) : null,
-    /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs2("div", { className: cn("a24-composer relative mx-auto w-full max-w-3xl overflow-visible", className), "data-agents24-chat-composer": "", children: [
+    composer.attachmentError || composer.recorder.error ? /* @__PURE__ */ jsx4("p", { role: "alert", children: composer.attachmentError || composer.recorder.error }) : null,
+    /* @__PURE__ */ jsxs2(
       "div",
       {
         "data-expanded": isExpanded ? "" : void 0,
@@ -942,101 +1192,142 @@ function AgentChatComposer({
           "a24-composer__surface relative w-full border border-input bg-background shadow-sm",
           isExpanded ? "rounded-xl p-2 pb-1.5" : "rounded-xl px-2 py-[3px]"
         ),
-        children: /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: "a24-composer__grid w-full",
-            style: {
-              alignItems: "center",
-              display: "grid",
-              gridTemplateAreas: isExpanded ? `"textarea textarea textarea" "plus toolbar submit"` : `"plus textarea composer mic submit"`,
-              gridTemplateColumns: isExpanded ? "auto 1fr auto" : "auto 1fr auto auto auto",
-              gap: isExpanded ? "3px 10px" : "8px"
-            },
-            children: [
-              /* @__PURE__ */ jsxs("div", { style: { gridArea: "plus" }, className: "a24-composer__attach-slot flex shrink-0 items-center justify-center", children: [
-                /* @__PURE__ */ jsx3(
-                  "input",
+        children: [
+          files.length > 0 ? /* @__PURE__ */ jsx4(
+            ChatAttachmentRows,
+            {
+              "data-testid": "agent-chat-composer-attachments",
+              layout: "composer",
+              attachments: files,
+              onRemove: (attachment) => attachment.id && composer.removeFile(attachment.id)
+            }
+          ) : null,
+          /* @__PURE__ */ jsxs2(
+            "div",
+            {
+              className: "a24-composer__grid w-full",
+              style: {
+                alignItems: "center",
+                display: "grid",
+                gridTemplateAreas: isExpanded ? `"textarea textarea textarea" "plus toolbar submit"` : `"plus textarea composer mic submit"`,
+                gridTemplateColumns: isExpanded ? "auto 1fr auto" : "auto 1fr auto auto auto",
+                gap: isExpanded ? "3px 10px" : "8px"
+              },
+              children: [
+                /* @__PURE__ */ jsxs2("div", { style: { gridArea: "plus" }, className: "a24-composer__attach-slot flex shrink-0 items-center justify-center", children: [
+                  /* @__PURE__ */ jsx4(
+                    "input",
+                    {
+                      ref: fileInputRef,
+                      accept: composer.fileAccept ?? accept,
+                      "aria-label": "Attach files",
+                      className: "hidden",
+                      multiple: true,
+                      name: "attachments",
+                      onChange: handleFilesChange,
+                      type: "file"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx4(
+                    "button",
+                    {
+                      "aria-label": "Attach files",
+                      className: cn("a24-composer__attach", pillButtonClass),
+                      disabled: disabled || isSubmitting || !allowAttachments || !composer.allowAttachments,
+                      onClick: () => fileInputRef.current?.click(),
+                      title: "Attach files",
+                      type: "button",
+                      children: /* @__PURE__ */ jsx4(Plus, { className: "size-4" })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx4("div", { style: { gridArea: "textarea" }, className: "a24-composer__textarea-slot min-w-0 w-full", children: /* @__PURE__ */ jsx4(
+                  "textarea",
                   {
-                    ref: fileInputRef,
-                    accept,
-                    "aria-label": "Attach files",
-                    className: "hidden",
-                    multiple: true,
-                    name: "attachments",
-                    onChange: handleFilesChange,
-                    type: "file"
+                    ref: setTextareaRef,
+                    "aria-label": "Message",
+                    autoComplete: "off",
+                    className: cn(
+                      "a24-composer__textarea w-full resize-none border-0 bg-transparent px-1 text-[15px] leading-relaxed text-foreground shadow-none outline-none placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0",
+                      isExpanded ? "min-h-9 max-h-[224px] py-1" : "min-h-9 h-9 max-h-9 py-2"
+                    ),
+                    disabled,
+                    name: "message",
+                    onChange: (event) => setText(event.target.value),
+                    onKeyDown: composer.onKeyDown,
+                    placeholder,
+                    rows: isExpanded ? 2 : 1,
+                    value: text
                   }
-                ),
-                /* @__PURE__ */ jsx3(
+                ) }),
+                isExpanded ? /* @__PURE__ */ jsxs2("div", { style: { gridArea: "toolbar" }, className: "a24-composer__toolbar flex min-w-0 items-center gap-1.5", children: [
+                  inputToolbarContent,
+                  /* @__PURE__ */ jsx4(AgentChatContextStatus, { contextWindow }),
+                  composer.recordingAllowed ? /* @__PURE__ */ jsx4(
+                    "button",
+                    {
+                      type: "button",
+                      className: pillButtonClass,
+                      "aria-label": composer.recorder.isRecording ? "Stop recording" : "Record audio",
+                      disabled: disabled || isRunning || isSubmitting,
+                      onClick: () => {
+                        if (composer.recorder.isRecording) composer.recorder.stop();
+                        else void composer.recorder.start();
+                      },
+                      children: composer.recorder.isRecording ? /* @__PURE__ */ jsx4(Square, {}) : /* @__PURE__ */ jsx4(Mic, {})
+                    }
+                  ) : null
+                ] }) : null,
+                !isExpanded ? /* @__PURE__ */ jsx4("div", { style: { gridArea: "composer" }, className: "flex min-w-0 items-center gap-1.5" }) : null,
+                !isExpanded ? /* @__PURE__ */ jsxs2("div", { style: { gridArea: "mic" }, className: "flex shrink-0 items-center justify-end", children: [
+                  /* @__PURE__ */ jsx4(AgentChatContextStatus, { contextWindow }),
+                  composer.recordingAllowed ? /* @__PURE__ */ jsx4(
+                    "button",
+                    {
+                      type: "button",
+                      className: pillButtonClass,
+                      "aria-label": composer.recorder.isRecording ? "Stop recording" : "Record audio",
+                      disabled: disabled || isRunning || isSubmitting,
+                      onClick: () => {
+                        if (composer.recorder.isRecording) composer.recorder.stop();
+                        else void composer.recorder.start();
+                      },
+                      children: composer.recorder.isRecording ? /* @__PURE__ */ jsx4(Square, {}) : /* @__PURE__ */ jsx4(Mic, {})
+                    }
+                  ) : null
+                ] }) : null,
+                /* @__PURE__ */ jsx4("div", { style: { gridArea: "submit" }, className: "a24-composer__submit-slot flex shrink-0 items-center justify-end gap-1", children: /* @__PURE__ */ jsx4(
                   "button",
                   {
-                    "aria-label": "Attach files",
-                    className: cn("a24-composer__attach", pillButtonClass),
-                    disabled: disabled || isSubmitting || !allowAttachments,
-                    onClick: () => fileInputRef.current?.click(),
-                    title: "Attach files",
+                    "aria-label": isCancelling ? "Cancelling response" : action === "stop" ? "Stop generating" : files.length > 0 ? `Send ${formatFileCount(files)}` : isRunning ? "Queue message" : "Send message",
+                    className: cn("a24-composer__submit", submitButtonClass, text.trim().length > 0 && "hover:scale-105"),
+                    disabled: isCancelling || (action === "stop" ? disabled : !canSubmit),
+                    onClick: () => {
+                      if (action === "stop") onStop?.();
+                      else void submit();
+                    },
+                    title: composer.validationError || (action === "stop" ? "Stop" : isRunning ? "Queue message" : "Send"),
                     type: "button",
-                    children: /* @__PURE__ */ jsx3(Plus, { className: "size-4" })
+                    children: isCancelling ? /* @__PURE__ */ jsx4(Loader2, { className: "size-3.5 animate-spin" }) : action === "stop" ? /* @__PURE__ */ jsx4(Square, { className: "size-3.5 fill-current" }) : /* @__PURE__ */ jsx4(ArrowUp, { className: "size-4", strokeWidth: 2.5 })
                   }
-                )
-              ] }),
-              /* @__PURE__ */ jsx3("div", { style: { gridArea: "textarea" }, className: "a24-composer__textarea-slot min-w-0 w-full", children: /* @__PURE__ */ jsx3(
-                "textarea",
-                {
-                  ref: setTextareaRef,
-                  "aria-label": "Message",
-                  autoComplete: "off",
-                  className: cn(
-                    "a24-composer__textarea w-full resize-none border-0 bg-transparent px-1 text-[15px] leading-relaxed text-foreground shadow-none outline-none placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0",
-                    isExpanded ? "min-h-9 max-h-[224px] py-1" : "min-h-9 h-9 max-h-9 py-2"
-                  ),
-                  disabled,
-                  name: "message",
-                  onChange: (event) => {
-                    draftRevisionRef.current += 1;
-                    setText(event.target.value);
-                  },
-                  onKeyDown: handleKeyDown,
-                  placeholder,
-                  rows: isExpanded ? 2 : 1,
-                  value: text
-                }
-              ) }),
-              isExpanded ? /* @__PURE__ */ jsx3("div", { style: { gridArea: "toolbar" }, className: "a24-composer__toolbar flex min-w-0 items-center gap-1.5", children: inputToolbarContent }) : null,
-              !isExpanded ? /* @__PURE__ */ jsx3("div", { style: { gridArea: "composer" }, className: "flex min-w-0 items-center gap-1.5" }) : null,
-              !isExpanded ? /* @__PURE__ */ jsx3("div", { style: { gridArea: "mic" }, className: "flex shrink-0 items-center justify-end" }) : null,
-              /* @__PURE__ */ jsx3("div", { style: { gridArea: "submit" }, className: "a24-composer__submit-slot flex shrink-0 items-center justify-end gap-1", children: /* @__PURE__ */ jsx3(
-                "button",
-                {
-                  "aria-label": isCancelling ? "Cancelling response" : action === "stop" ? "Stop generating" : files.length > 0 ? `Send ${formatFileCount(files)}` : isRunning ? "Queue message" : "Send message",
-                  className: cn("a24-composer__submit", submitButtonClass, text.trim().length > 0 && "hover:scale-105"),
-                  disabled: isCancelling || (action === "stop" ? disabled : !canSubmit),
-                  onClick: () => {
-                    if (action === "stop") onStop?.();
-                    else void submit();
-                  },
-                  title: action === "stop" ? "Stop" : isRunning ? "Queue message" : "Send",
-                  type: "button",
-                  children: isCancelling ? /* @__PURE__ */ jsx3(Loader2, { className: "size-3.5 animate-spin" }) : action === "stop" ? /* @__PURE__ */ jsx3(Square, { className: "size-3.5 fill-current" }) : /* @__PURE__ */ jsx3(ArrowUp, { className: "size-4", strokeWidth: 2.5 })
-                }
-              ) })
-            ]
-          }
-        )
+                ) })
+              ]
+            }
+          )
+        ]
       }
     ),
-    !isExpanded && inputToolbarContent ? /* @__PURE__ */ jsx3("div", { className: "a24-composer__toolbar a24-composer__toolbar--external mt-2 flex items-center gap-2 px-1", children: inputToolbarContent }) : null
+    !isExpanded && inputToolbarContent ? /* @__PURE__ */ jsx4("div", { className: "a24-composer__toolbar a24-composer__toolbar--external mt-2 flex items-center gap-2 px-1", children: inputToolbarContent }) : null
   ] });
 }
 
 // src/ui/agent-chat-queue.tsx
-import * as React4 from "react";
+import * as React7 from "react";
 import { CornerDownLeft, Ellipsis, Trash2 } from "lucide-react";
-import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function QueueRow({ message, onRemove, onEdit }) {
-  const [busy, setBusy] = React4.useState(false);
-  const [error, setError] = React4.useState(null);
+  const [busy, setBusy] = React7.useState(false);
+  const [error, setError] = React7.useState(null);
   const editable = message.revision > 0 && (message.status === "queued" || message.status === "blocked");
   const act = async (operation) => {
     setBusy(true);
@@ -1049,14 +1340,14 @@ function QueueRow({ message, onRemove, onEdit }) {
       setBusy(false);
     }
   };
-  return /* @__PURE__ */ jsxs2("div", { "data-message-id": message.id, className: "a24-queue__row min-w-0 border-b border-border/40 last:border-b-0", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "a24-queue__row-content flex min-h-9 items-center gap-2 px-3 text-sm", children: [
-      /* @__PURE__ */ jsx4(CornerDownLeft, { "aria-hidden": true, className: "size-4 shrink-0 text-muted-foreground" }),
-      /* @__PURE__ */ jsx4("span", { className: "a24-queue__text min-w-0 flex-1 truncate text-foreground", title: message.text, children: message.text || `${message.attachment_ids.length} attachment${message.attachment_ids.length === 1 ? "" : "s"}` }),
-      message.status === "blocked" ? /* @__PURE__ */ jsx4("span", { className: "shrink-0 text-xs text-amber-700", children: "Needs attention" }) : null,
-      ["steer_pending", "delivering"].includes(message.status) ? /* @__PURE__ */ jsx4("span", { className: "shrink-0 text-xs text-muted-foreground", children: "Steering\u2026" }) : null,
-      editable ? /* @__PURE__ */ jsxs2(Fragment, { children: [
-        /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs3("div", { "data-message-id": message.id, className: "a24-queue__row min-w-0 border-b border-border/40 last:border-b-0", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "a24-queue__row-content flex min-h-9 items-center gap-2 px-3 text-sm", children: [
+      /* @__PURE__ */ jsx5(CornerDownLeft, { "aria-hidden": true, className: "size-4 shrink-0 text-muted-foreground" }),
+      /* @__PURE__ */ jsx5("span", { className: "a24-queue__text min-w-0 flex-1 truncate text-foreground", title: message.text, children: message.text || `${message.attachment_ids.length} attachment${message.attachment_ids.length === 1 ? "" : "s"}` }),
+      message.status === "blocked" ? /* @__PURE__ */ jsx5("span", { className: "shrink-0 text-xs text-amber-700", children: "Needs attention" }) : null,
+      ["steer_pending", "delivering"].includes(message.status) ? /* @__PURE__ */ jsx5("span", { className: "shrink-0 text-xs text-muted-foreground", children: "Sending\u2026" }) : null,
+      editable ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+        /* @__PURE__ */ jsx5(
           "button",
           {
             type: "button",
@@ -1064,12 +1355,12 @@ function QueueRow({ message, onRemove, onEdit }) {
             disabled: busy,
             onClick: () => void act(() => onRemove(message)),
             className: "a24-queue__icon flex size-8 shrink-0 items-center justify-center text-muted-foreground hover:text-foreground disabled:opacity-50",
-            children: /* @__PURE__ */ jsx4(Trash2, { "aria-hidden": true, className: "size-4" })
+            children: /* @__PURE__ */ jsx5(Trash2, { "aria-hidden": true, className: "size-4" })
           }
         ),
-        /* @__PURE__ */ jsxs2("details", { className: "a24-queue__menu relative group/queue-menu", children: [
-          /* @__PURE__ */ jsx4("summary", { "aria-label": "Queued message options", className: "a24-queue__icon flex size-8 cursor-pointer list-none items-center justify-center text-muted-foreground hover:text-foreground [&::-webkit-details-marker]:hidden", children: /* @__PURE__ */ jsx4(Ellipsis, { "aria-hidden": true, className: "size-4" }) }),
-          /* @__PURE__ */ jsx4("div", { className: "a24-queue__menu-content mt-1 min-w-28 rounded-md border bg-background p-1", children: /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsxs3("details", { className: "a24-queue__menu relative group/queue-menu", children: [
+          /* @__PURE__ */ jsx5("summary", { "aria-label": "Queued message options", className: "a24-queue__icon flex size-8 cursor-pointer list-none items-center justify-center text-muted-foreground hover:text-foreground [&::-webkit-details-marker]:hidden", children: /* @__PURE__ */ jsx5(Ellipsis, { "aria-hidden": true, className: "size-4" }) }),
+          /* @__PURE__ */ jsx5("div", { className: "a24-queue__menu-content mt-1 min-w-28 rounded-md border bg-background p-1", children: /* @__PURE__ */ jsx5(
             "button",
             {
               type: "button",
@@ -1082,29 +1373,29 @@ function QueueRow({ message, onRemove, onEdit }) {
         ] })
       ] }) : null
     ] }),
-    error ? /* @__PURE__ */ jsx4("p", { role: "alert", className: "px-9 pb-2 text-xs text-destructive", children: error }) : null
+    error ? /* @__PURE__ */ jsx5("p", { role: "alert", className: "px-9 pb-2 text-xs text-destructive", children: error }) : null
   ] });
 }
 function AgentChatQueue({ pending, queue, onRemove, onEdit, onResume, className }) {
-  const [resumeError, setResumeError] = React4.useState(null);
+  const [resumeError, setResumeError] = React7.useState(null);
   if (!pending.length && !queue?.paused) return null;
-  return /* @__PURE__ */ jsxs2("section", { "aria-label": "Message queue", className: cn("a24-queue relative z-0 -mb-2 overflow-visible rounded-t-xl border border-b-0 border-border/50 bg-background pb-2", className), children: [
-    queue?.paused ? /* @__PURE__ */ jsxs2("div", { className: "flex min-h-9 items-center justify-between gap-2 px-3 text-xs text-muted-foreground", children: [
-      /* @__PURE__ */ jsx4("span", { children: "Queue paused" }),
-      /* @__PURE__ */ jsx4("button", { type: "button", onClick: () => {
+  return /* @__PURE__ */ jsxs3("section", { "aria-label": "Message queue", className: cn("a24-queue relative z-0 -mb-2 overflow-visible rounded-t-xl border border-b-0 border-border/50 bg-background pb-2", className), children: [
+    queue?.paused ? /* @__PURE__ */ jsxs3("div", { className: "flex min-h-9 items-center justify-between gap-2 px-3 text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsx5("span", { children: "Queue paused" }),
+      /* @__PURE__ */ jsx5("button", { type: "button", onClick: () => {
         void onResume().then(() => setResumeError(null)).catch((cause) => setResumeError(cause instanceof Error ? cause.message : "Could not resume queue"));
       }, className: "font-medium text-foreground hover:underline", children: "Resume queue" })
     ] }) : null,
-    resumeError ? /* @__PURE__ */ jsx4("p", { role: "alert", className: "px-3 pb-2 text-xs text-destructive", children: resumeError }) : null,
-    /* @__PURE__ */ jsx4("div", { className: "max-h-40 overflow-y-auto", children: pending.map((message) => /* @__PURE__ */ jsx4(QueueRow, { message, onRemove, onEdit }, message.client_submission_id || message.id)) })
+    resumeError ? /* @__PURE__ */ jsx5("p", { role: "alert", className: "px-3 pb-2 text-xs text-destructive", children: resumeError }) : null,
+    /* @__PURE__ */ jsx5("div", { className: "max-h-40 overflow-y-auto", children: pending.map((message) => /* @__PURE__ */ jsx5(QueueRow, { message, onRemove, onEdit }, message.client_submission_id || message.id)) })
   ] });
 }
 
 // src/ui/agent-chat-actions.tsx
-import * as React5 from "react";
+import * as React8 from "react";
 import { Check, Copy, RefreshCcw, ThumbsDown, ThumbsUp } from "lucide-react";
 import { Popover } from "radix-ui";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var FEEDBACK_REASONS = [
   ["incorrect", "Incorrect"],
   ["irrelevant", "Irrelevant"],
@@ -1115,8 +1406,8 @@ var FEEDBACK_REASONS = [
 ];
 var enteredCompletionRuns = /* @__PURE__ */ new Set();
 function useLiveCompletionRuns(runId, isRunning) {
-  const liveRuns = React5.useRef(/* @__PURE__ */ new Set());
-  React5.useEffect(() => {
+  const liveRuns = React8.useRef(/* @__PURE__ */ new Set());
+  React8.useEffect(() => {
     if (!runId || !isRunning) return;
     liveRuns.current.add(runId);
     if (liveRuns.current.size > 256) liveRuns.current.delete(liveRuns.current.values().next().value);
@@ -1124,10 +1415,10 @@ function useLiveCompletionRuns(runId, isRunning) {
   return (candidate) => Boolean(candidate && liveRuns.current.has(candidate));
 }
 function useCompletionActionEntrance(isComplete, runId, wasLive = false) {
-  const sawIncomplete = React5.useRef(!isComplete);
-  const entered = React5.useRef(false);
+  const sawIncomplete = React8.useRef(!isComplete);
+  const entered = React8.useRef(false);
   const shouldEnter = isComplete && !entered.current && (runId ? wasLive && !enteredCompletionRuns.has(runId) : sawIncomplete.current);
-  React5.useEffect(() => {
+  React8.useEffect(() => {
     if (!isComplete) sawIncomplete.current = true;
     else if (shouldEnter) {
       entered.current = true;
@@ -1155,19 +1446,34 @@ function AgentChatDefaultActions({
   handlers,
   message
 }) {
-  const [feedbackOpen, setFeedbackOpen] = React5.useState(false);
-  const [feedbackTrigger, setFeedbackTrigger] = React5.useState(null);
-  const [reason, setReason] = React5.useState(handlers?.feedback?.reason ?? null);
-  const [comment, setComment] = React5.useState(handlers?.feedback?.comment ?? "");
-  const [optimisticCopied, setOptimisticCopied] = React5.useState(false);
-  const copyResetTimer = React5.useRef(null);
-  React5.useEffect(() => {
+  const [feedbackOpen, setFeedbackOpen] = React8.useState(false);
+  const [feedbackTrigger, setFeedbackTrigger] = React8.useState(null);
+  const [reason, setReason] = React8.useState(handlers?.feedback?.reason ?? null);
+  const [comment, setComment] = React8.useState(handlers?.feedback?.comment ?? "");
+  const [optimisticCopied, setOptimisticCopied] = React8.useState(false);
+  const copyResetTimer = React8.useRef(null);
+  React8.useEffect(() => {
     setReason(handlers?.feedback?.reason ?? null);
     setComment(handlers?.feedback?.comment ?? "");
   }, [handlers?.feedback?.comment, handlers?.feedback?.reason]);
-  React5.useEffect(() => () => {
+  React8.useEffect(() => () => {
     if (copyResetTimer.current !== null) window.clearTimeout(copyResetTimer.current);
   }, []);
+  const [feedbackPending, setFeedbackPending] = React8.useState(false);
+  const feedbackInFlight = React8.useRef(false);
+  const writeFeedback = async (input, close = false) => {
+    if (feedbackInFlight.current) return;
+    feedbackInFlight.current = true;
+    setFeedbackPending(true);
+    try {
+      await handlers?.onSetFeedback?.(message, input);
+      if (close) setFeedbackOpen(false);
+    } catch {
+    } finally {
+      feedbackInFlight.current = false;
+      setFeedbackPending(false);
+    }
+  };
   const copied = handlers?.copied ?? optimisticCopied;
   const copyMessage = () => {
     handlers?.onCopy?.(message.content || "", message.id);
@@ -1182,63 +1488,65 @@ function AgentChatDefaultActions({
   if (!handlers || message.isFinal === false) return null;
   if (message.role === "user") {
     const sentAt = formatSentAt(message.createdAt);
-    return /* @__PURE__ */ jsxs3(ChatMessageActions, { className: "a24-user-message-actions", children: [
-      sentAt ? /* @__PURE__ */ jsx5("time", { dateTime: sentAt.dateTime, children: sentAt.label }) : null,
-      handlers.onCopy ? /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsxs4(ChatMessageActions, { className: "a24-user-message-actions", children: [
+      sentAt ? /* @__PURE__ */ jsx6("time", { dateTime: sentAt.dateTime, children: sentAt.label }) : null,
+      handlers.onCopy ? /* @__PURE__ */ jsx6(
         ChatMessageAction,
         {
           label: "Copy",
           onClick: copyMessage,
           tooltip: copied ? "Copied!" : "Copy to clipboard",
           className: "a24-user-message-copy",
-          children: copied ? /* @__PURE__ */ jsx5(Check, { className: "a24-user-message-copy__check text-green-600" }) : /* @__PURE__ */ jsx5(Copy, { className: "a24-user-message-copy__icon" })
+          children: copied ? /* @__PURE__ */ jsx6(Check, { className: "a24-user-message-copy__check text-green-600" }) : /* @__PURE__ */ jsx6(Copy, { className: "a24-user-message-copy__icon" })
         }
       ) : null
     ] });
   }
   const canWriteFeedback = Boolean(message.runId && handlers.onSetFeedback);
-  return /* @__PURE__ */ jsxs3(ChatMessageActions, { className: animateCompletion ? "a24-chat-completion-actions" : void 0, children: [
-    handlers.onRetry ? /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsxs4(ChatMessageActions, { className: animateCompletion ? "a24-chat-completion-actions" : void 0, children: [
+    handlers.onRetry ? /* @__PURE__ */ jsx6(
       ChatMessageAction,
       {
         label: "Retry",
         onClick: () => void handlers.onRetry?.(message),
         tooltip: "Regenerate response",
-        children: /* @__PURE__ */ jsx5(RefreshCcw, { className: "size-4" })
+        children: /* @__PURE__ */ jsx6(RefreshCcw, { className: "size-4" })
       }
     ) : null,
-    canWriteFeedback ? /* @__PURE__ */ jsx5(
+    canWriteFeedback ? /* @__PURE__ */ jsx6(
       ChatMessageAction,
       {
         label: "Like",
-        onClick: () => void handlers.onSetFeedback?.(message, {
+        disabled: feedbackPending,
+        onClick: () => void writeFeedback({
           rating: handlers.feedback?.rating === "like" ? null : "like"
         }),
         tooltip: "Like this response",
-        children: /* @__PURE__ */ jsx5(ThumbsUp, { className: "size-4", fill: handlers.feedback?.rating === "like" ? "currentColor" : "none" })
+        children: /* @__PURE__ */ jsx6(ThumbsUp, { className: "size-4", fill: handlers.feedback?.rating === "like" ? "currentColor" : "none" })
       }
     ) : null,
-    canWriteFeedback ? /* @__PURE__ */ jsxs3(Popover.Root, { onOpenChange: setFeedbackOpen, open: feedbackOpen, children: [
-      /* @__PURE__ */ jsx5(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx5(
+    canWriteFeedback ? /* @__PURE__ */ jsxs4(Popover.Root, { onOpenChange: setFeedbackOpen, open: feedbackOpen, children: [
+      /* @__PURE__ */ jsx6(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx6(
         ChatMessageAction,
         {
+          disabled: feedbackPending,
           label: "Dislike",
           onClick: () => {
             if (handlers.feedback?.rating !== "dislike") {
-              void handlers.onSetFeedback?.(message, { rating: "dislike" });
+              void writeFeedback({ rating: "dislike" });
             }
             setFeedbackOpen(true);
           },
           ref: setFeedbackTrigger,
           tooltip: "Dislike this response",
-          children: /* @__PURE__ */ jsx5(ThumbsDown, { className: "size-4", fill: handlers.feedback?.rating === "dislike" ? "currentColor" : "none" })
+          children: /* @__PURE__ */ jsx6(ThumbsDown, { className: "size-4", fill: handlers.feedback?.rating === "dislike" ? "currentColor" : "none" })
         }
       ) }),
-      /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx6(
         Popover.Portal,
         {
           container: feedbackTrigger?.closest("[data-agents24-theme-root]") ?? void 0,
-          children: /* @__PURE__ */ jsxs3(
+          children: /* @__PURE__ */ jsxs4(
             Popover.Content,
             {
               align: "end",
@@ -1248,8 +1556,8 @@ function AgentChatDefaultActions({
               side: "top",
               sideOffset: 8,
               children: [
-                /* @__PURE__ */ jsx5("p", { className: "text-sm font-medium", children: "What could be better?" }),
-                /* @__PURE__ */ jsx5("div", { className: "mt-3 flex flex-wrap gap-1.5", children: FEEDBACK_REASONS.map(([value, label]) => /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx6("p", { className: "text-sm font-medium", children: "What could be better?" }),
+                /* @__PURE__ */ jsx6("div", { className: "mt-3 flex flex-wrap gap-1.5", children: FEEDBACK_REASONS.map(([value, label]) => /* @__PURE__ */ jsx6(
                   "button",
                   {
                     "aria-pressed": reason === value,
@@ -1260,7 +1568,7 @@ function AgentChatDefaultActions({
                   },
                   value
                 )) }),
-                /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsx6(
                   "textarea",
                   {
                     "aria-label": "Optional feedback comment",
@@ -1271,24 +1579,26 @@ function AgentChatDefaultActions({
                     value: comment
                   }
                 ),
-                /* @__PURE__ */ jsxs3("div", { className: "mt-3 flex items-center justify-between gap-2", children: [
-                  /* @__PURE__ */ jsx5(
+                /* @__PURE__ */ jsxs4("div", { className: "mt-3 flex items-center justify-between gap-2", children: [
+                  /* @__PURE__ */ jsx6(
                     "button",
                     {
+                      disabled: feedbackPending,
                       className: "rounded-md px-3 py-2 text-sm font-medium hover:bg-muted",
                       onClick: () => {
-                        void Promise.resolve(handlers.onSetFeedback?.(message, { rating: null })).then(() => setFeedbackOpen(false)).catch(() => void 0);
+                        void writeFeedback({ rating: null }, true);
                       },
                       type: "button",
                       children: "Remove feedback"
                     }
                   ),
-                  /* @__PURE__ */ jsx5(
+                  /* @__PURE__ */ jsx6(
                     "button",
                     {
+                      disabled: feedbackPending,
                       className: "rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:opacity-90",
                       onClick: () => {
-                        void Promise.resolve(handlers.onSetFeedback?.(message, { rating: "dislike", reason, comment })).then(() => setFeedbackOpen(false)).catch(() => void 0);
+                        void writeFeedback({ rating: "dislike", reason, comment }, true);
                       },
                       type: "button",
                       children: "Save"
@@ -1302,27 +1612,27 @@ function AgentChatDefaultActions({
       )
     ] }) : null,
     additionalActions,
-    handlers.onCopy ? /* @__PURE__ */ jsx5(
+    handlers.onCopy ? /* @__PURE__ */ jsx6(
       ChatMessageAction,
       {
         label: "Copy",
         onClick: copyMessage,
         tooltip: copied ? "Copied!" : "Copy to clipboard",
-        children: copied ? /* @__PURE__ */ jsx5(Check, { className: "size-4 text-green-600" }) : /* @__PURE__ */ jsx5(Copy, { className: "size-4" })
+        children: copied ? /* @__PURE__ */ jsx6(Check, { className: "size-4 text-green-600" }) : /* @__PURE__ */ jsx6(Copy, { className: "size-4" })
       }
     ) : null
   ] });
 }
 
 // src/ui/agent-chat-message.tsx
-import * as React10 from "react";
+import * as React13 from "react";
 import { ChevronDown as ChevronDown3, ChevronUp } from "lucide-react";
 
 // src/ui/agent-response-timeline.tsx
-import * as React9 from "react";
+import * as React12 from "react";
 
 // src/ui/ask-user-interaction.tsx
-import * as React6 from "react";
+import * as React9 from "react";
 import {
   ChevronDown,
   ChevronLeft,
@@ -1384,7 +1694,7 @@ function askUserAnswersFromDrafts(questions, drafts) {
 }
 
 // src/ui/ask-user-interaction.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function resolvedAnswerText(question, answer) {
   if (!answer) return ["No response recorded"];
   const labels = answer.selectedOptionIds.flatMap((optionId) => {
@@ -1398,7 +1708,7 @@ function ResolvedQuestions({
   buttonRef,
   part
 }) {
-  const [open, setOpen] = React6.useState(false);
+  const [open, setOpen] = React9.useState(false);
   const count = part.questions.length;
   const answers = new Map(
     (part.resolution?.answers || []).map((answer) => [
@@ -1406,8 +1716,8 @@ function ResolvedQuestions({
       answer
     ])
   );
-  return /* @__PURE__ */ jsxs4("div", { className: "a24-ask-user a24-ask-user--resolved w-full", children: [
-    /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5("div", { className: "a24-ask-user a24-ask-user--resolved w-full", children: [
+    /* @__PURE__ */ jsxs5(
       "button",
       {
         "aria-expanded": open,
@@ -1416,13 +1726,13 @@ function ResolvedQuestions({
         ref: buttonRef,
         type: "button",
         children: [
-          /* @__PURE__ */ jsxs4("span", { children: [
+          /* @__PURE__ */ jsxs5("span", { children: [
             "Asked ",
             count,
             " question",
             count === 1 ? "" : "s"
           ] }),
-          open ? /* @__PURE__ */ jsx6(ChevronDown, { "aria-hidden": "true", className: "size-3.5" }) : /* @__PURE__ */ jsx6(
+          open ? /* @__PURE__ */ jsx7(ChevronDown, { "aria-hidden": "true", className: "size-3.5" }) : /* @__PURE__ */ jsx7(
             ChevronRight,
             {
               "aria-hidden": "true",
@@ -1432,12 +1742,12 @@ function ResolvedQuestions({
         ]
       }
     ),
-    open ? /* @__PURE__ */ jsx6("div", { className: "mt-2 space-y-3 ps-4", children: part.questions.map((question) => /* @__PURE__ */ jsxs4("div", { className: "min-w-0", children: [
-      /* @__PURE__ */ jsx6("div", { className: "text-sm font-medium text-foreground", children: question.question }),
-      /* @__PURE__ */ jsx6("div", { className: "mt-1 space-y-1 text-sm text-muted-foreground", children: resolvedAnswerText(
+    open ? /* @__PURE__ */ jsx7("div", { className: "mt-2 space-y-3 ps-4", children: part.questions.map((question) => /* @__PURE__ */ jsxs5("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx7("div", { className: "text-sm font-medium text-foreground", children: question.question }),
+      /* @__PURE__ */ jsx7("div", { className: "mt-1 space-y-1 text-sm text-muted-foreground", children: resolvedAnswerText(
         question,
         answers.get(question.id)
-      ).map((value, index) => /* @__PURE__ */ jsx6(
+      ).map((value, index) => /* @__PURE__ */ jsx7(
         "div",
         {
           className: "whitespace-pre-wrap break-words",
@@ -1455,23 +1765,23 @@ function AskUserInteraction({
   part
 }) {
   const questions = part.questions;
-  const [step, setStep] = React6.useState(0);
-  const [drafts, setDrafts] = React6.useState(
+  const [step, setStep] = React9.useState(0);
+  const [drafts, setDrafts] = React9.useState(
     () => emptyAskUserDrafts(questions)
   );
-  const headingRef = React6.useRef(null);
-  const questionsRef = React6.useRef(questions);
-  const resolvedButtonRef = React6.useRef(null);
-  const wasResolvedRef = React6.useRef(part.status !== "pending");
+  const headingRef = React9.useRef(null);
+  const questionsRef = React9.useRef(questions);
+  const resolvedButtonRef = React9.useRef(null);
+  const wasResolvedRef = React9.useRef(part.status !== "pending");
   questionsRef.current = questions;
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     setStep(0);
     setDrafts(emptyAskUserDrafts(questionsRef.current));
   }, [part.interruptId]);
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     headingRef.current?.focus();
   }, [step]);
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     const isResolved = part.status !== "pending";
     if (isResolved && !wasResolvedRef.current) {
       resolvedButtonRef.current?.focus();
@@ -1479,11 +1789,11 @@ function AskUserInteraction({
     wasResolvedRef.current = isResolved;
   }, [part.status]);
   if (part.status !== "pending") {
-    return /* @__PURE__ */ jsx6(ResolvedQuestions, { buttonRef: resolvedButtonRef, part });
+    return /* @__PURE__ */ jsx7(ResolvedQuestions, { buttonRef: resolvedButtonRef, part });
   }
   const question = questions[step];
   if (!question) {
-    return /* @__PURE__ */ jsx6("div", { className: "text-sm text-destructive", role: "alert", children: "This question request is unavailable." });
+    return /* @__PURE__ */ jsx7("div", { className: "text-sm text-destructive", role: "alert", children: "This question request is unavailable." });
   }
   const draft = drafts[question.id] || {
     customText: "",
@@ -1517,9 +1827,9 @@ function AskUserInteraction({
       })
     );
   };
-  return /* @__PURE__ */ jsxs4("div", { className: "a24-ask-user space-y-3 rounded-xl border border-border/50 bg-background p-4 shadow-sm", children: [
-    /* @__PURE__ */ jsxs4("div", { className: "flex min-w-0 items-start justify-between gap-4", children: [
-      /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs5("div", { className: "a24-ask-user space-y-3 rounded-xl border border-border/50 bg-background p-4 shadow-sm", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "flex min-w-0 items-start justify-between gap-4", children: [
+      /* @__PURE__ */ jsx7(
         "h3",
         {
           className: "min-w-0 flex-1 text-base font-medium leading-6 text-foreground outline-none",
@@ -1528,8 +1838,8 @@ function AskUserInteraction({
           children: question.question
         }
       ),
-      /* @__PURE__ */ jsxs4("div", { className: "flex shrink-0 items-center gap-1 text-muted-foreground", children: [
-        /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsxs5("div", { className: "flex shrink-0 items-center gap-1 text-muted-foreground", children: [
+        /* @__PURE__ */ jsx7(
           "button",
           {
             "aria-label": "Previous question",
@@ -1537,7 +1847,7 @@ function AskUserInteraction({
             disabled: isBusy || step === 0,
             onClick: () => setStep((current) => Math.max(0, current - 1)),
             type: "button",
-            children: /* @__PURE__ */ jsx6(
+            children: /* @__PURE__ */ jsx7(
               ChevronLeft,
               {
                 "aria-hidden": "true",
@@ -1546,7 +1856,7 @@ function AskUserInteraction({
             )
           }
         ),
-        /* @__PURE__ */ jsxs4(
+        /* @__PURE__ */ jsxs5(
           "span",
           {
             "aria-label": `Question ${step + 1} of ${questions.length}`,
@@ -1558,7 +1868,7 @@ function AskUserInteraction({
             ]
           }
         ),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7(
           "button",
           {
             "aria-label": isLastQuestion ? "Submit answers" : "Next question",
@@ -1566,7 +1876,7 @@ function AskUserInteraction({
             disabled: isBusy || !onSubmit || !canMoveForward,
             onClick: () => completeStep(drafts),
             type: "button",
-            children: /* @__PURE__ */ jsx6(
+            children: /* @__PURE__ */ jsx7(
               ChevronRight,
               {
                 "aria-hidden": "true",
@@ -1577,10 +1887,10 @@ function AskUserInteraction({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs4("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "space-y-1", children: [
       question.options.map((option, index) => {
         const selected = draft.selectedOptionIds.includes(option.id);
-        return /* @__PURE__ */ jsxs4(
+        return /* @__PURE__ */ jsxs5(
           "button",
           {
             "aria-pressed": selected,
@@ -1592,7 +1902,7 @@ function AskUserInteraction({
             onClick: () => selectOption(option.id),
             type: "button",
             children: [
-              /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsx7(
                 "span",
                 {
                   className: cn(
@@ -1602,8 +1912,8 @@ function AskUserInteraction({
                   children: index + 1
                 }
               ),
-              /* @__PURE__ */ jsx6("span", { className: "min-w-0 flex-1 font-medium text-foreground", children: option.label }),
-              /* @__PURE__ */ jsx6(
+              /* @__PURE__ */ jsx7("span", { className: "min-w-0 flex-1 font-medium text-foreground", children: option.label }),
+              /* @__PURE__ */ jsx7(
                 ChevronRight,
                 {
                   "aria-hidden": "true",
@@ -1615,9 +1925,9 @@ function AskUserInteraction({
           option.id
         );
       }),
-      /* @__PURE__ */ jsxs4("div", { className: "flex min-h-11 items-center gap-2 rounded-xl bg-muted px-2.5 py-1.5 focus-within:ring-1 focus-within:ring-ring", children: [
-        /* @__PURE__ */ jsx6("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-full border border-border/70 bg-background/70 text-muted-foreground", children: /* @__PURE__ */ jsx6(Pencil, { "aria-hidden": "true", className: "size-4" }) }),
-        /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsxs5("div", { className: "flex min-h-11 items-center gap-2 rounded-xl bg-muted px-2.5 py-1.5 focus-within:ring-1 focus-within:ring-ring", children: [
+        /* @__PURE__ */ jsx7("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-full border border-border/70 bg-background/70 text-muted-foreground", children: /* @__PURE__ */ jsx7(Pencil, { "aria-hidden": "true", className: "size-4" }) }),
+        /* @__PURE__ */ jsx7(
           "input",
           {
             "aria-label": "Other response",
@@ -1636,7 +1946,7 @@ function AskUserInteraction({
             value: draft.customText
           }
         ),
-        draft.customText.trim() ? /* @__PURE__ */ jsx6(
+        draft.customText.trim() ? /* @__PURE__ */ jsx7(
           "button",
           {
             className: "h-8 shrink-0 rounded-full bg-foreground px-4 text-sm font-medium text-background transition-colors hover:opacity-85 disabled:opacity-50",
@@ -1648,12 +1958,12 @@ function AskUserInteraction({
         ) : null
       ] })
     ] }),
-    error ? /* @__PURE__ */ jsx6("div", { className: "text-sm text-destructive", role: "alert", children: error }) : null
+    error ? /* @__PURE__ */ jsx7("div", { className: "text-sm text-destructive", role: "alert", children: error }) : null
   ] });
 }
 
 // src/ui/agent-chat-context-compression-row.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function compressionPresentation(part) {
   if (part.status === "failed") {
     return { label: "Could not compact message history", status: "failed" };
@@ -1668,7 +1978,7 @@ function AgentChatContextCompressionRow({
   part
 }) {
   const presentation = compressionPresentation(part);
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "div",
     {
       "aria-live": "polite",
@@ -1676,11 +1986,11 @@ function AgentChatContextCompressionRow({
       "data-agents24-context-compression": "",
       "data-status": part.status,
       role: "status",
-      children: /* @__PURE__ */ jsx7("div", { className: "a24-tool-trigger-row", children: /* @__PURE__ */ jsx7("div", { className: cn(
+      children: /* @__PURE__ */ jsx8("div", { className: "a24-tool-trigger-row", children: /* @__PURE__ */ jsx8("div", { className: cn(
         "a24-tool-trigger a24-tool-trigger--root a24-tool-trigger--without-orb",
         presentation.status === "failed" && "a24-tool-trigger--error",
         presentation.status === "running" && "a24-tool-trigger--active"
-      ), children: /* @__PURE__ */ jsx7("span", { className: cn(
+      ), children: /* @__PURE__ */ jsx8("span", { className: cn(
         "a24-tool-trigger__label",
         presentation.status === "running" && "a24-tool-shimmer"
       ), children: presentation.label }) }) })
@@ -1689,7 +1999,7 @@ function AgentChatContextCompressionRow({
 }
 
 // src/ui/message-response.tsx
-import * as React7 from "react";
+import * as React10 from "react";
 import { defaultRehypePlugins, Streamdown } from "streamdown";
 
 // src/active-content.ts
@@ -1714,17 +2024,17 @@ function safeChatMarkdownHref(value) {
 }
 
 // src/ui/message-response.tsx
-import { Fragment as Fragment2, jsx as jsx8 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx9 } from "react/jsx-runtime";
 function SafeMarkdownLink({ children, href, ...props }) {
   const domProps = { ...props };
   delete domProps.node;
   const safeHref = safeChatMarkdownHref(href);
-  if (!safeHref) return /* @__PURE__ */ jsx8("span", { children });
-  if (safeHref.startsWith("#")) return /* @__PURE__ */ jsx8("a", { ...domProps, href: safeHref, children });
-  return /* @__PURE__ */ jsx8("a", { ...domProps, href: safeHref, rel: "noopener noreferrer", target: "_blank", children });
+  if (!safeHref) return /* @__PURE__ */ jsx9("span", { children });
+  if (safeHref.startsWith("#")) return /* @__PURE__ */ jsx9("a", { ...domProps, href: safeHref, children });
+  return /* @__PURE__ */ jsx9("a", { ...domProps, href: safeHref, rel: "noopener noreferrer", target: "_blank", children });
 }
 function BlockedMarkdownImage({ alt }) {
-  return alt ? /* @__PURE__ */ jsx8("span", { "aria-label": `Image blocked: ${alt}`, role: "img", children: alt }) : null;
+  return alt ? /* @__PURE__ */ jsx9("span", { "aria-label": `Image blocked: ${alt}`, role: "img", children: alt }) : null;
 }
 var BLOCK_MARKDOWN_TAGS = /* @__PURE__ */ new Set([
   "blockquote",
@@ -1745,7 +2055,7 @@ function isMultilineCodeNode(node) {
   return node?.tagName === "code" && node.position?.start?.line !== void 0 && node.position?.end?.line !== void 0 && node.position.start.line !== node.position.end.line;
 }
 function hasBlockMarkdownChild(child) {
-  if (!React7.isValidElement(child)) {
+  if (!React10.isValidElement(child)) {
     return false;
   }
   if (typeof child.type === "string" && BLOCK_MARKDOWN_TAGS.has(child.type)) {
@@ -1755,7 +2065,7 @@ function hasBlockMarkdownChild(child) {
   if (BLOCK_MARKDOWN_TAGS.has(props.node?.tagName || "") || isMultilineCodeNode(props.node)) {
     return true;
   }
-  return React7.Children.toArray(props.children).some(hasBlockMarkdownChild);
+  return React10.Children.toArray(props.children).some(hasBlockMarkdownChild);
 }
 function MessageMarkdownParagraph({
   children,
@@ -1763,17 +2073,17 @@ function MessageMarkdownParagraph({
 }) {
   const domProps = { ...props };
   delete domProps.node;
-  const childArray = React7.Children.toArray(children).filter(
+  const childArray = React10.Children.toArray(children).filter(
     (child) => child !== null && child !== ""
   );
-  const isImageOnly = childArray.length === 1 && React7.isValidElement(childArray[0]) && childArray[0].props.node?.tagName === "img";
+  const isImageOnly = childArray.length === 1 && React10.isValidElement(childArray[0]) && childArray[0].props.node?.tagName === "img";
   if (isImageOnly) {
-    return /* @__PURE__ */ jsx8(Fragment2, { children });
+    return /* @__PURE__ */ jsx9(Fragment2, { children });
   }
   if (childArray.some(hasBlockMarkdownChild)) {
-    return /* @__PURE__ */ jsx8("div", { ...domProps, children });
+    return /* @__PURE__ */ jsx9("div", { ...domProps, children });
   }
-  return /* @__PURE__ */ jsx8("p", { ...domProps, children });
+  return /* @__PURE__ */ jsx9("p", { ...domProps, children });
 }
 var MESSAGE_RESPONSE_COMPONENTS = {
   a: SafeMarkdownLink,
@@ -1793,7 +2103,7 @@ var MESSAGE_RESPONSE_REHYPE_PLUGINS = [
     ]
   ] : []
 ];
-var MessageResponse = React7.memo(
+var MessageResponse = React10.memo(
   ({
     children,
     className,
@@ -1811,11 +2121,11 @@ var MessageResponse = React7.memo(
       maxCatchupChars: 32,
       text
     });
-    const streamdownComponents = React7.useMemo(
+    const streamdownComponents = React10.useMemo(
       () => ({ ...MESSAGE_RESPONSE_COMPONENTS, ...components }),
       [components]
     );
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx9(
       Streamdown,
       {
         className: cn("a24-message-response", className),
@@ -1867,10 +2177,10 @@ function resolvedHitlLabel(part) {
 }
 
 // src/ui/tool-sessions.tsx
-import * as React8 from "react";
+import * as React11 from "react";
 import { ChevronDown as ChevronDown2, ChevronRight as ChevronRight2 } from "lucide-react";
 import { ThinkingOrb } from "thinking-orbs";
-import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 function toolSlotContext(isActive2, label, part, slots) {
   return {
     isActive: isActive2,
@@ -1888,7 +2198,7 @@ function ToolResourceAction({ context }) {
   const target = context.resourceTargets[0];
   if (!target) return null;
   const name = resourceTargetName(target);
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     "button",
     {
       "aria-label": `Open ${target.kind} ${target.path}`,
@@ -1902,8 +2212,8 @@ function ToolResourceAction({ context }) {
   );
 }
 function toolAccessory(context, slots) {
-  return /* @__PURE__ */ jsxs5(Fragment3, { children: [
-    slots?.onResourceAction ? /* @__PURE__ */ jsx9(ToolResourceAction, { context }) : null,
+  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    slots?.onResourceAction ? /* @__PURE__ */ jsx10(ToolResourceAction, { context }) : null,
     slots?.renderToolAccessory?.(context)
   ] });
 }
@@ -1980,12 +2290,12 @@ function ToolActivityReel({
 }) {
   const initial = initialLabel && initialLabel !== label ? initialLabel : label;
   const parsedInitialShownAt = initialShownAt ? Date.parse(initialShownAt) : Number.NaN;
-  const [displayed, setDisplayed] = React8.useState(initial);
-  const [previous, setPrevious] = React8.useState(null);
-  const displayedRef = React8.useRef(initial);
-  const latestRef = React8.useRef(label);
-  const shownAtRef = React8.useRef(Number.isFinite(parsedInitialShownAt) ? parsedInitialShownAt : Date.now());
-  React8.useEffect(() => {
+  const [displayed, setDisplayed] = React11.useState(initial);
+  const [previous, setPrevious] = React11.useState(null);
+  const displayedRef = React11.useRef(initial);
+  const latestRef = React11.useRef(label);
+  const shownAtRef = React11.useRef(Number.isFinite(parsedInitialShownAt) ? parsedInitialShownAt : Date.now());
+  React11.useEffect(() => {
     latestRef.current = label;
     if (displayedRef.current === label) return;
     const showLatest = () => {
@@ -2005,39 +2315,41 @@ function ToolActivityReel({
     const timer = window.setTimeout(showLatest, remaining);
     return () => window.clearTimeout(timer);
   }, [label]);
-  React8.useEffect(() => {
+  React11.useEffect(() => {
     if (!previous) return;
     const timer = window.setTimeout(() => setPrevious(null), 200);
     return () => window.clearTimeout(timer);
   }, [previous]);
-  return /* @__PURE__ */ jsxs5("span", { className: "a24-tool-reel", "aria-live": announce ? "polite" : "off", children: [
-    previous ? /* @__PURE__ */ jsx9("span", { "aria-hidden": "true", className: "a24-tool-reel__previous", children: previous }) : null,
-    /* @__PURE__ */ jsx9("span", { className: previous ? "a24-tool-reel__current" : void 0, children: displayed })
+  return /* @__PURE__ */ jsxs6("span", { className: "a24-tool-reel", "aria-live": announce ? "polite" : "off", children: [
+    previous ? /* @__PURE__ */ jsx10("span", { "aria-hidden": "true", className: "a24-tool-reel__previous", children: previous }) : null,
+    /* @__PURE__ */ jsx10("span", { className: previous ? "a24-tool-reel__current" : void 0, children: displayed })
   ] });
 }
-function ToolActivityOrb({ label }) {
-  return /* @__PURE__ */ jsx9("span", { className: "a24-tool-orb", children: /* @__PURE__ */ jsx9(ThinkingOrb, { "aria-label": label || "Working", size: 20, speed: 0.8, state: "searching" }) });
+function ToolActivityOrb({ label = "Working", kind = "tool", part, renderActivityIcon }) {
+  return /* @__PURE__ */ jsx10("span", { className: "a24-tool-orb", children: renderActivityIcon ? renderActivityIcon({ label, kind, part }) : /* @__PURE__ */ jsx10(ThinkingOrb, { "aria-label": label, size: 20, speed: 0.8, state: "searching" }) });
 }
 function AgentChatActivityRow({
   label,
   modelTurnId,
+  renderActivityIcon,
   onSelect
 }) {
-  const content = /* @__PURE__ */ jsxs5(Fragment3, { children: [
-    /* @__PURE__ */ jsx9(ToolActivityOrb, { label }),
-    /* @__PURE__ */ jsx9("span", { className: "a24-tool-trigger__label a24-tool-shimmer", children: /* @__PURE__ */ jsx9(ToolActivityReel, { label }) })
+  const content = /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    /* @__PURE__ */ jsx10(ToolActivityOrb, { label, kind: "planning", renderActivityIcon }),
+    /* @__PURE__ */ jsx10("span", { className: "a24-tool-trigger__label a24-tool-shimmer", children: /* @__PURE__ */ jsx10(ToolActivityReel, { label }) })
   ] });
-  return /* @__PURE__ */ jsx9("div", { className: "a24-tool-trigger-row a24-tool-trigger-row--root", "data-agents24-model-turn": modelTurnId, role: "status", children: onSelect ? /* @__PURE__ */ jsx9("button", { className: "a24-tool-trigger a24-tool-trigger--root a24-tool-trigger--active", onClick: onSelect, type: "button", children: content }) : /* @__PURE__ */ jsx9("div", { className: "a24-tool-trigger a24-tool-trigger--root a24-tool-trigger--active", children: content }) });
+  return /* @__PURE__ */ jsx10("div", { className: "a24-tool-trigger-row a24-tool-trigger-row--root", "data-agents24-model-turn": modelTurnId, role: "status", children: onSelect ? /* @__PURE__ */ jsx10("button", { className: "a24-tool-trigger a24-tool-trigger--root a24-tool-trigger--active", onClick: onSelect, type: "button", children: content }) : /* @__PURE__ */ jsx10("div", { className: "a24-tool-trigger a24-tool-trigger--root a24-tool-trigger--active", children: content }) });
 }
 function AgentChatModelTurnRow({ part }) {
-  return /* @__PURE__ */ jsx9(AgentChatActivityRow, { label: "Planning next moves", modelTurnId: part.modelTurnId });
+  return /* @__PURE__ */ jsx10(AgentChatActivityRow, { label: "Planning next moves", modelTurnId: part.modelTurnId });
 }
 function AgentChatNodeActivityRow({
+  renderActivityIcon,
   onSelect,
   part
 }) {
-  const [open, setOpen] = React8.useState(false);
-  const contentId = React8.useId();
+  const [open, setOpen] = React11.useState(false);
+  const contentId = React11.useId();
   const running = part.status === "running";
   const failed = part.status === "failed";
   const failureMessage = part.failure?.message || "The node could not complete the request.";
@@ -2048,18 +2360,18 @@ function AgentChatNodeActivityRow({
     running && "a24-tool-trigger--active",
     failed && "a24-tool-trigger--error"
   );
-  const label = running ? /* @__PURE__ */ jsx9("span", { className: "a24-tool-shimmer", children: /* @__PURE__ */ jsx9(ToolActivityReel, { label: part.label }) }) : part.label;
+  const label = running ? /* @__PURE__ */ jsx10("span", { className: "a24-tool-shimmer", children: /* @__PURE__ */ jsx10(ToolActivityReel, { label: part.label }) }) : part.label;
   if (!failed) {
-    return /* @__PURE__ */ jsx9("div", { className: "a24-tool-trigger-row", role: "status", children: onSelect ? /* @__PURE__ */ jsxs5("button", { className: triggerClassName, onClick: () => onSelect(part), type: "button", children: [
-      running ? /* @__PURE__ */ jsx9(ToolActivityOrb, { label: part.label }) : null,
-      /* @__PURE__ */ jsx9("span", { className: "a24-tool-trigger__label", children: label })
-    ] }) : /* @__PURE__ */ jsxs5("div", { className: triggerClassName, children: [
-      running ? /* @__PURE__ */ jsx9(ToolActivityOrb, { label: part.label }) : null,
-      /* @__PURE__ */ jsx9("span", { className: "a24-tool-trigger__label", children: label })
+    return /* @__PURE__ */ jsx10("div", { className: "a24-tool-trigger-row", role: "status", children: onSelect ? /* @__PURE__ */ jsxs6("button", { className: triggerClassName, onClick: () => onSelect(part), type: "button", children: [
+      running ? /* @__PURE__ */ jsx10(ToolActivityOrb, { label: part.label, kind: "node", part, renderActivityIcon }) : null,
+      /* @__PURE__ */ jsx10("span", { className: "a24-tool-trigger__label", children: label })
+    ] }) : /* @__PURE__ */ jsxs6("div", { className: triggerClassName, children: [
+      running ? /* @__PURE__ */ jsx10(ToolActivityOrb, { label: part.label, kind: "node", part, renderActivityIcon }) : null,
+      /* @__PURE__ */ jsx10("span", { className: "a24-tool-trigger__label", children: label })
     ] }) });
   }
-  return /* @__PURE__ */ jsxs5("div", { className: "a24-tool-disclosure", children: [
-    /* @__PURE__ */ jsx9("div", { className: "a24-tool-trigger-row", children: /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6("div", { className: "a24-tool-disclosure", children: [
+    /* @__PURE__ */ jsx10("div", { className: "a24-tool-trigger-row", children: /* @__PURE__ */ jsxs6(
       "button",
       {
         "aria-controls": contentId,
@@ -2071,12 +2383,12 @@ function AgentChatNodeActivityRow({
         },
         type: "button",
         children: [
-          /* @__PURE__ */ jsx9("span", { className: "a24-tool-trigger__label", children: label }),
-          open ? /* @__PURE__ */ jsx9(ChevronDown2, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" }) : /* @__PURE__ */ jsx9(ChevronRight2, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" })
+          /* @__PURE__ */ jsx10("span", { className: "a24-tool-trigger__label", children: label }),
+          open ? /* @__PURE__ */ jsx10(ChevronDown2, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" }) : /* @__PURE__ */ jsx10(ChevronRight2, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" })
         ]
       }
     ) }),
-    open ? /* @__PURE__ */ jsx9("div", { className: "a24-tool-detail a24-tool-detail--error", id: contentId, children: failureMessage }) : null
+    open ? /* @__PURE__ */ jsx10("div", { className: "a24-tool-detail a24-tool-detail--error", id: contentId, children: failureMessage }) : null
   ] });
 }
 function toolRowLabel(part, separateResource = false) {
@@ -2100,27 +2412,28 @@ function ToolDisclosure({
   root,
   showOrb,
   statusLabel,
+  renderActivityIcon,
   accessory
 }) {
-  const [open, setOpen] = React8.useState(false);
-  const contentId = React8.useId();
-  const expandable = React8.Children.toArray(children).length > 0;
+  const [open, setOpen] = React11.useState(false);
+  const contentId = React11.useId();
+  const expandable = React11.Children.toArray(children).length > 0;
   if (!expandable) {
     const triggerClassName = cn("a24-tool-trigger", root && "a24-tool-trigger--root", root && !showOrb && "a24-tool-trigger--without-orb", error && "a24-tool-trigger--error", loading && "a24-tool-trigger--active");
-    return /* @__PURE__ */ jsxs5("div", { className: cn("a24-tool-trigger-row", root && "a24-tool-trigger-row--root"), children: [
-      onSelect && part ? /* @__PURE__ */ jsxs5("button", { className: triggerClassName, onClick: () => onSelect(part), type: "button", children: [
-        showOrb ? /* @__PURE__ */ jsx9(ToolActivityOrb, { label: statusLabel }) : null,
-        /* @__PURE__ */ jsx9("span", { className: "a24-tool-trigger__label", children: label })
-      ] }) : /* @__PURE__ */ jsxs5("div", { className: triggerClassName, children: [
-        showOrb ? /* @__PURE__ */ jsx9(ToolActivityOrb, { label: statusLabel }) : null,
-        /* @__PURE__ */ jsx9("span", { className: "a24-tool-trigger__label", children: label })
+    return /* @__PURE__ */ jsxs6("div", { className: cn("a24-tool-trigger-row", root && "a24-tool-trigger-row--root"), children: [
+      onSelect && part ? /* @__PURE__ */ jsxs6("button", { className: triggerClassName, onClick: () => onSelect(part), type: "button", children: [
+        showOrb ? /* @__PURE__ */ jsx10(ToolActivityOrb, { label: statusLabel || "Working", kind: grouped ? "group" : "tool", part, renderActivityIcon }) : null,
+        /* @__PURE__ */ jsx10("span", { className: "a24-tool-trigger__label", children: label })
+      ] }) : /* @__PURE__ */ jsxs6("div", { className: triggerClassName, children: [
+        showOrb ? /* @__PURE__ */ jsx10(ToolActivityOrb, { label: statusLabel || "Working", kind: grouped ? "group" : "tool", part, renderActivityIcon }) : null,
+        /* @__PURE__ */ jsx10("span", { className: "a24-tool-trigger__label", children: label })
       ] }),
       accessory
     ] });
   }
-  return /* @__PURE__ */ jsxs5("div", { className: "a24-tool-disclosure", children: [
-    /* @__PURE__ */ jsxs5("div", { className: cn("a24-tool-trigger-row", root && "a24-tool-trigger-row--root"), children: [
-      /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6("div", { className: "a24-tool-disclosure", children: [
+    /* @__PURE__ */ jsxs6("div", { className: cn("a24-tool-trigger-row", root && "a24-tool-trigger-row--root"), children: [
+      /* @__PURE__ */ jsxs6(
         "button",
         {
           "aria-controls": contentId,
@@ -2134,25 +2447,25 @@ function ToolDisclosure({
           },
           type: "button",
           children: [
-            showOrb ? /* @__PURE__ */ jsx9(ToolActivityOrb, { label: statusLabel }) : null,
-            /* @__PURE__ */ jsx9("span", { className: "a24-tool-trigger__label", children: label }),
-            open ? /* @__PURE__ */ jsx9(ChevronDown2, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" }) : /* @__PURE__ */ jsx9(ChevronRight2, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" })
+            showOrb ? /* @__PURE__ */ jsx10(ToolActivityOrb, { label: statusLabel || "Working", kind: grouped ? "group" : "tool", part, renderActivityIcon }) : null,
+            /* @__PURE__ */ jsx10("span", { className: "a24-tool-trigger__label", children: label }),
+            open ? /* @__PURE__ */ jsx10(ChevronDown2, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" }) : /* @__PURE__ */ jsx10(ChevronRight2, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" })
           ]
         }
       ),
       accessory
     ] }),
-    open ? /* @__PURE__ */ jsx9("div", { className: "a24-tool-disclosure__content", id: contentId, children }) : null
+    open ? /* @__PURE__ */ jsx10("div", { className: "a24-tool-disclosure__content", id: contentId, children }) : null
   ] });
 }
 function ToolLabel({ active, label, part, slots }) {
   const rendered = slots?.renderToolLabel?.(toolSlotContext(active, label, part, slots)) ?? label;
-  return active ? /* @__PURE__ */ jsx9("span", { className: "a24-tool-shimmer", children: rendered }) : /* @__PURE__ */ jsx9(Fragment3, { children: rendered });
+  return active ? /* @__PURE__ */ jsx10("span", { className: "a24-tool-shimmer", children: rendered }) : /* @__PURE__ */ jsx10(Fragment3, { children: rendered });
 }
 function ToolList({ children }) {
-  const listRef = React8.useRef(null);
-  const [fades, setFades] = React8.useState({ bottom: false, top: false });
-  const updateFades = React8.useCallback(() => {
+  const listRef = React11.useRef(null);
+  const [fades, setFades] = React11.useState({ bottom: false, top: false });
+  const updateFades = React11.useCallback(() => {
     const list = listRef.current;
     if (!list) return;
     const next = {
@@ -2161,7 +2474,7 @@ function ToolList({ children }) {
     };
     setFades((current) => current.bottom === next.bottom && current.top === next.top ? current : next);
   }, []);
-  React8.useEffect(() => {
+  React11.useEffect(() => {
     updateFades();
     const list = listRef.current;
     if (!list || typeof ResizeObserver === "undefined") return;
@@ -2169,13 +2482,13 @@ function ToolList({ children }) {
     observer.observe(list);
     return () => observer.disconnect();
   }, [children, updateFades]);
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     "div",
     {
       className: "a24-tool-list-frame",
       "data-scroll-fade-bottom": fades.bottom ? "" : void 0,
       "data-scroll-fade-top": fades.top ? "" : void 0,
-      children: /* @__PURE__ */ jsx9("div", { className: "a24-tool-list", onScroll: updateFades, ref: listRef, role: "list", children })
+      children: /* @__PURE__ */ jsx10("div", { className: "a24-tool-list", onScroll: updateFades, ref: listRef, role: "list", children })
     }
   );
 }
@@ -2192,12 +2505,13 @@ function AgentChatToolRow({
   const detail = failed ? failureMessage : optionalText(part.presentation.detail);
   const hostDetails = failed ? null : slots?.renderToolDetails?.(part);
   const context = toolSlotContext(active, toolRowLabel(part, Boolean(slots?.onResourceAction)), part, slots);
-  return /* @__PURE__ */ jsx9("div", { "data-agents24-tool-part": part.type, "data-state": part.state, children: /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsx10("div", { "data-agents24-tool-part": part.type, "data-state": part.state, children: /* @__PURE__ */ jsxs6(
     ToolDisclosure,
     {
+      renderActivityIcon: slots?.renderActivityIcon,
       error: failed,
       accessory: toolAccessory(context, slots),
-      label: /* @__PURE__ */ jsx9(ToolLabel, { active, label: context.label, part, slots }),
+      label: /* @__PURE__ */ jsx10(ToolLabel, { active, label: context.label, part, slots }),
       loading: active,
       onExpandedChange: slots?.onExpandedChange,
       onSelect: slots?.onToolSelect,
@@ -2206,7 +2520,7 @@ function AgentChatToolRow({
       showOrb: showOrb ?? active,
       statusLabel: active ? context.label : void 0,
       children: [
-        detail ? /* @__PURE__ */ jsx9("div", { className: cn("a24-tool-detail", failed && "a24-tool-detail--error"), children: detail }) : null,
+        detail ? /* @__PURE__ */ jsx10("div", { className: cn("a24-tool-detail", failed && "a24-tool-detail--error"), children: detail }) : null,
         hostDetails
       ]
     }
@@ -2226,21 +2540,22 @@ function AgentChatToolSession({
   parts,
   slots
 }) {
-  const presentedLiveRef = React8.useRef(false);
+  const presentedLiveRef = React11.useRef(false);
   if (isLive && isLatestActivity) presentedLiveRef.current = true;
   const activeIndex = parts.findLastIndex((part) => isActive(part, activeToolId));
   const running = activeIndex >= 0;
-  if (parts.length === 1 && !modelTurn && !leadingModelTurn) return /* @__PURE__ */ jsx9(AgentChatToolRow, { activeToolId, part: parts[0], slots });
+  if (parts.length === 1 && !modelTurn && !leadingModelTurn) return /* @__PURE__ */ jsx10(AgentChatToolRow, { activeToolId, part: parts[0], slots });
   const visibleIndex = running ? activeIndex : parts.length - 1;
   const visiblePart = parts[visibleIndex];
   const planning = Boolean(modelTurn);
   const presentingActivity = isLatestActivity && (planning || running || isLive);
   const failed = isLatestActivity && (visiblePart.state === "output-error" || visiblePart.state === "cancelled");
   const label = planning ? "Planning next moves" : isLive && isLatestActivity ? toolRowLabel(visiblePart, true) : sessionLabel(parts, visiblePart, running);
-  const labelContent = presentedLiveRef.current ? /* @__PURE__ */ jsx9("span", { className: presentingActivity ? "a24-tool-shimmer" : void 0, children: /* @__PURE__ */ jsx9(ToolActivityReel, { initialLabel: leadingModelTurn ? "Planning next moves" : void 0, initialShownAt: leadingModelTurn?.timestamp, label }) }) : label;
-  return /* @__PURE__ */ jsx9(
+  const labelContent = presentedLiveRef.current ? /* @__PURE__ */ jsx10("span", { className: presentingActivity ? "a24-tool-shimmer" : void 0, children: /* @__PURE__ */ jsx10(ToolActivityReel, { initialLabel: leadingModelTurn ? "Planning next moves" : void 0, initialShownAt: leadingModelTurn?.timestamp, label }) }) : label;
+  return /* @__PURE__ */ jsx10(
     ToolDisclosure,
     {
+      renderActivityIcon: slots?.renderActivityIcon,
       error: failed,
       grouped: true,
       label: labelContent,
@@ -2250,7 +2565,7 @@ function AgentChatToolSession({
       root: true,
       showOrb: isLive && isLatestActivity,
       statusLabel: planning ? "Planning next moves" : label,
-      children: /* @__PURE__ */ jsx9(ToolList, { children: parts.map((part) => /* @__PURE__ */ jsx9("div", { role: "listitem", children: /* @__PURE__ */ jsx9(AgentChatToolRow, { activeToolId, part, root: false, showOrb: false, slots }) }, part.id)) })
+      children: /* @__PURE__ */ jsx10(ToolList, { children: parts.map((part) => /* @__PURE__ */ jsx10("div", { role: "listitem", children: /* @__PURE__ */ jsx10(AgentChatToolRow, { activeToolId, part, root: false, showOrb: false, slots }) }, part.id)) })
     }
   );
 }
@@ -2271,7 +2586,7 @@ function subagentLabel(part) {
   return { label: `Agent ${name}, ran ${children.length} ${children.length === 1 ? "tool" : "tools"}`, running: false };
 }
 function AgentChatSubagentGroup({ isLatestActivity = true, isLive = false, part, slots }) {
-  const presentedLiveRef = React8.useRef(false);
+  const presentedLiveRef = React11.useRef(false);
   if (isLive && isLatestActivity) presentedLiveRef.current = true;
   const children = part.presentation.childTools || [];
   const state = subagentLabel(part);
@@ -2280,11 +2595,12 @@ function AgentChatSubagentGroup({ isLatestActivity = true, isLive = false, part,
   const hostDetails = failed ? null : slots?.renderToolDetails?.(part);
   const failureMessage = part.failure?.message || null;
   const presentingActivity = isLatestActivity && state.running;
-  const labelContent = presentedLiveRef.current ? /* @__PURE__ */ jsx9("span", { className: presentingActivity ? "a24-tool-shimmer" : void 0, children: /* @__PURE__ */ jsx9(ToolActivityReel, { label: state.label }) }) : state.label;
+  const labelContent = presentedLiveRef.current ? /* @__PURE__ */ jsx10("span", { className: presentingActivity ? "a24-tool-shimmer" : void 0, children: /* @__PURE__ */ jsx10(ToolActivityReel, { label: state.label }) }) : state.label;
   const context = toolSlotContext(presentingActivity, state.label, part, slots);
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     ToolDisclosure,
     {
+      renderActivityIcon: slots?.renderActivityIcon,
       accessory: slots?.renderToolAccessory?.(context),
       error: failed,
       grouped: true,
@@ -2295,12 +2611,12 @@ function AgentChatSubagentGroup({ isLatestActivity = true, isLive = false, part,
       root: true,
       showOrb: isLive && isLatestActivity,
       statusLabel: state.label,
-      children: /* @__PURE__ */ jsxs5(ToolList, { children: [
-        children.map((child) => /* @__PURE__ */ jsx9("div", { className: cn("a24-child-tool", child.status === "failed" && "a24-child-tool--error"), role: "listitem", children: slots?.renderChildTool?.(child, part) ?? /* @__PURE__ */ jsxs5(Fragment3, { children: [
-          /* @__PURE__ */ jsx9("span", { className: cn(isLive && isLatestActivity && child.status === "running" && "a24-tool-shimmer"), children: childLabel(child) }),
-          child.detail ? /* @__PURE__ */ jsx9("span", { className: "a24-child-tool__detail", children: child.detail }) : null
+      children: /* @__PURE__ */ jsxs6(ToolList, { children: [
+        children.map((child) => /* @__PURE__ */ jsx10("div", { className: cn("a24-child-tool", child.status === "failed" && "a24-child-tool--error"), role: "listitem", children: slots?.renderChildTool?.(child, part) ?? /* @__PURE__ */ jsxs6(Fragment3, { children: [
+          /* @__PURE__ */ jsx10("span", { className: cn(isLive && isLatestActivity && child.status === "running" && "a24-tool-shimmer"), children: childLabel(child) }),
+          child.detail ? /* @__PURE__ */ jsx10("span", { className: "a24-child-tool__detail", children: child.detail }) : null
         ] }) }, child.id)),
-        failureMessage ? /* @__PURE__ */ jsx9("div", { className: "a24-tool-detail a24-tool-detail--error", children: failureMessage }) : null,
+        failureMessage ? /* @__PURE__ */ jsx10("div", { className: "a24-tool-detail a24-tool-detail--error", children: failureMessage }) : null,
         hostDetails
       ] })
     }
@@ -2308,24 +2624,24 @@ function AgentChatSubagentGroup({ isLatestActivity = true, isLive = false, part,
 }
 
 // src/ui/agent-response-timeline.tsx
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 function isInternalAskUserTool(part) {
   return [part.toolName, part.toolKey, part.action].some((value) => value?.trim().toLowerCase() === "runtime__ask_user");
 }
 function Shimmer({ children, className }) {
-  return /* @__PURE__ */ jsx10("span", { className: cn("inline-block animate-pulse", className), children });
+  return /* @__PURE__ */ jsx11("span", { className: cn("inline-block animate-pulse", className), children });
 }
 function AgentChatToolPart({
   activeToolId,
   part
 }) {
-  return /* @__PURE__ */ jsx10(AgentChatToolRow, { activeToolId, part });
+  return /* @__PURE__ */ jsx11(AgentChatToolRow, { activeToolId, part });
 }
 function AgentChatToolGroup({
   activeToolId,
   parts
 }) {
-  return /* @__PURE__ */ jsx10(AgentChatToolSession, { activeToolId, parts });
+  return /* @__PURE__ */ jsx11(AgentChatToolSession, { activeToolId, parts });
 }
 function HitlPartRow({
   getHitlActionState,
@@ -2334,18 +2650,18 @@ function HitlPartRow({
   part
 }) {
   const state = getHitlActionState?.(part);
-  const [comment, setComment] = React9.useState("");
+  const [comment, setComment] = React12.useState("");
   const presentation = part.presentation || {};
   const requireComment = presentation.require_comment === true;
   const isTerminal = part.status !== "pending";
-  const resolvedRef = React9.useRef(null);
-  const wasTerminal = React9.useRef(isTerminal);
-  React9.useEffect(() => {
+  const resolvedRef = React12.useRef(null);
+  const wasTerminal = React12.useRef(isTerminal);
+  React12.useEffect(() => {
     if (isTerminal && !wasTerminal.current) resolvedRef.current?.focus();
     wasTerminal.current = isTerminal;
   }, [isTerminal]);
   if (part.hitlKind === "user_input") {
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx11(
       AskUserInteraction,
       {
         error: state?.error,
@@ -2363,11 +2679,11 @@ function HitlPartRow({
     );
   }
   if (isTerminal) {
-    return /* @__PURE__ */ jsx10("div", { className: "a24-hitl a24-hitl--resolved px-1 py-1 text-sm text-muted-foreground", ref: resolvedRef, role: "status", tabIndex: -1, children: resolvedHitlLabel(part) });
+    return /* @__PURE__ */ jsx11("div", { className: "a24-hitl a24-hitl--resolved px-1 py-1 text-sm text-muted-foreground", ref: resolvedRef, role: "status", tabIndex: -1, children: resolvedHitlLabel(part) });
   }
-  return /* @__PURE__ */ jsxs6("div", { className: "a24-hitl space-y-2.5 px-1 py-2", children: [
-    /* @__PURE__ */ jsx10("div", { className: "a24-hitl__title text-sm font-medium text-foreground text-pretty", children: hitlTitle(part) }),
-    requireComment ? /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs7("div", { className: "a24-hitl space-y-2.5 px-1 py-2", children: [
+    /* @__PURE__ */ jsx11("div", { className: "a24-hitl__title text-sm font-medium text-foreground text-pretty", children: hitlTitle(part) }),
+    requireComment ? /* @__PURE__ */ jsx11(
       "textarea",
       {
         "aria-label": "Approval comment",
@@ -2379,8 +2695,8 @@ function HitlPartRow({
         value: comment
       }
     ) : null,
-    state?.error ? /* @__PURE__ */ jsx10("div", { className: "a24-hitl__error text-sm text-destructive", children: state.error }) : null,
-    /* @__PURE__ */ jsx10("div", { className: "a24-hitl__actions flex flex-wrap items-center gap-1.5", children: part.allowedActions.map((action) => /* @__PURE__ */ jsx10(
+    state?.error ? /* @__PURE__ */ jsx11("div", { className: "a24-hitl__error text-sm text-destructive", children: state.error }) : null,
+    /* @__PURE__ */ jsx11("div", { className: "a24-hitl__actions flex flex-wrap items-center gap-1.5", children: part.allowedActions.map((action) => /* @__PURE__ */ jsx11(
       "button",
       {
         "aria-label": hitlActionLabel(part, action),
@@ -2413,7 +2729,7 @@ function AgentChatPart({
   toolSlots
 }) {
   if (part.kind === "text") {
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx11(
       MessageResponse,
       {
         ...responseProps,
@@ -2423,23 +2739,23 @@ function AgentChatPart({
       }
     );
   }
-  if (part.kind === "tool") return isAgentChatSubagent(part) ? /* @__PURE__ */ jsx10(AgentChatSubagentGroup, { part, slots: toolSlots }) : /* @__PURE__ */ jsx10(AgentChatToolRow, { activeToolId, part, slots: toolSlots });
-  if (part.kind === "model-turn") return /* @__PURE__ */ jsx10(AgentChatModelTurnRow, { part });
+  if (part.kind === "tool") return isAgentChatSubagent(part) ? /* @__PURE__ */ jsx11(AgentChatSubagentGroup, { part, slots: toolSlots }) : /* @__PURE__ */ jsx11(AgentChatToolRow, { activeToolId, part, slots: toolSlots });
+  if (part.kind === "model-turn") return /* @__PURE__ */ jsx11(AgentChatModelTurnRow, { part });
   if (part.kind === "reasoning") {
     const label = part.text || part.label || "Thinking";
-    return part.status === "running" || part.status === "streaming" ? /* @__PURE__ */ jsx10(Shimmer, { className: "text-sm text-muted-foreground", children: label }) : /* @__PURE__ */ jsx10("div", { className: "text-sm text-muted-foreground", children: label });
+    return part.status === "running" || part.status === "streaming" ? /* @__PURE__ */ jsx11(Shimmer, { className: "text-sm text-muted-foreground", children: label }) : /* @__PURE__ */ jsx11("div", { className: "text-sm text-muted-foreground", children: label });
   }
   if (part.kind === "context-compression") {
-    return /* @__PURE__ */ jsx10(AgentChatContextCompressionRow, { part });
+    return /* @__PURE__ */ jsx11(AgentChatContextCompressionRow, { part });
   }
   if (part.kind === "ui-blocks") {
     if (part.state === "output-error") {
-      return /* @__PURE__ */ jsx10("div", { className: "a24-timeline-error text-sm text-destructive", children: part.errorText || "Failed to render UI content." });
+      return /* @__PURE__ */ jsx11("div", { className: "a24-timeline-error text-sm text-destructive", children: part.errorText || "Failed to render UI content." });
     }
-    return part.bundle ? /* @__PURE__ */ jsx10(SafeUiBlocks, { bundle: part.bundle }) : /* @__PURE__ */ jsx10("div", { className: "text-sm text-muted-foreground", children: part.state === "input-streaming" ? /* @__PURE__ */ jsx10(Shimmer, { children: "Rendering UI block" }) : "Rendered UI block" });
+    return part.bundle ? /* @__PURE__ */ jsx11(SafeUiBlocks, { bundle: part.bundle }) : /* @__PURE__ */ jsx11("div", { className: "text-sm text-muted-foreground", children: part.state === "input-streaming" ? /* @__PURE__ */ jsx11(Shimmer, { children: "Rendering UI block" }) : "Rendered UI block" });
   }
   if (part.kind === "hitl") {
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx11(
       HitlPartRow,
       {
         getHitlActionState,
@@ -2449,18 +2765,18 @@ function AgentChatPart({
       }
     );
   }
-  if (part.kind === "error") return /* @__PURE__ */ jsx10("div", { className: "a24-timeline-error text-sm text-destructive", role: "alert", children: part.errorText });
+  if (part.kind === "error") return /* @__PURE__ */ jsx11("div", { className: "a24-timeline-error text-sm text-destructive", role: "alert", children: part.errorText });
   if (part.kind === "source") {
     const href = safeExternalUrl(part.url);
-    return href ? /* @__PURE__ */ jsx10("a", { className: "a24-source-link", href, rel: "noopener noreferrer", target: "_blank", children: part.title }) : /* @__PURE__ */ jsx10("span", { className: "a24-source-link", children: part.title });
+    return href ? /* @__PURE__ */ jsx11("a", { className: "a24-source-link", href, rel: "noopener noreferrer", target: "_blank", children: part.title }) : /* @__PURE__ */ jsx11("span", { className: "a24-source-link", children: part.title });
   }
   if (part.kind === "citation") {
     const href = safeExternalUrl(part.url);
     const label = part.label || "Citation";
-    return href ? /* @__PURE__ */ jsx10("a", { className: "a24-citation", href, rel: "noopener noreferrer", target: "_blank", children: label }) : /* @__PURE__ */ jsx10("span", { className: "a24-citation", children: label });
+    return href ? /* @__PURE__ */ jsx11("a", { className: "a24-citation", href, rel: "noopener noreferrer", target: "_blank", children: label }) : /* @__PURE__ */ jsx11("span", { className: "a24-citation", children: label });
   }
-  if (part.kind === "attachment") return /* @__PURE__ */ jsx10("div", { className: "a24-output-attachment", children: part.attachment.filename || "Attachment" });
-  if (part.kind === "data") return /* @__PURE__ */ jsx10("div", { "data-agents24-data-part": part.name, className: "hidden", children: message.id });
+  if (part.kind === "attachment") return /* @__PURE__ */ jsx11("div", { className: "a24-output-attachment", children: part.attachment.filename || "Attachment" });
+  if (part.kind === "data") return /* @__PURE__ */ jsx11("div", { "data-agents24-data-part": part.name, className: "hidden", children: message.id });
   return null;
 }
 function safeExternalUrl(value) {
@@ -2474,28 +2790,28 @@ function safeExternalUrl(value) {
 }
 function SafeUiBlocks({ bundle }) {
   const rows = Array.isArray(bundle.rows) ? bundle.rows : [];
-  return /* @__PURE__ */ jsxs6("section", { "aria-label": typeof bundle.title === "string" ? bundle.title : "Agent result", className: "a24-ui-blocks", children: [
-    typeof bundle.title === "string" ? /* @__PURE__ */ jsx10("h3", { children: bundle.title }) : null,
+  return /* @__PURE__ */ jsxs7("section", { "aria-label": typeof bundle.title === "string" ? bundle.title : "Agent result", className: "a24-ui-blocks", children: [
+    typeof bundle.title === "string" ? /* @__PURE__ */ jsx11("h3", { children: bundle.title }) : null,
     rows.map((rawRow, rowIndex) => {
       const row = rawRow && typeof rawRow === "object" && !Array.isArray(rawRow) ? rawRow : {};
       const blocks = Array.isArray(row.blocks) ? row.blocks : [];
-      return /* @__PURE__ */ jsx10("div", { className: "a24-ui-blocks__row", children: blocks.map((rawBlock, blockIndex) => {
+      return /* @__PURE__ */ jsx11("div", { className: "a24-ui-blocks__row", children: blocks.map((rawBlock, blockIndex) => {
         const block = rawBlock && typeof rawBlock === "object" && !Array.isArray(rawBlock) ? rawBlock : {};
         const title = typeof block.title === "string" ? block.title : "Result";
         const kind = String(block.kind || "note");
         if (kind === "table" && Array.isArray(block.columns) && Array.isArray(block.rows)) {
-          return /* @__PURE__ */ jsxs6("div", { className: "a24-ui-block", children: [
-            /* @__PURE__ */ jsx10("h4", { children: title }),
-            /* @__PURE__ */ jsx10("div", { className: "a24-ui-table-scroll", children: /* @__PURE__ */ jsxs6("table", { children: [
-              /* @__PURE__ */ jsx10("thead", { children: /* @__PURE__ */ jsx10("tr", { children: block.columns.map((column, index) => /* @__PURE__ */ jsx10("th", { children: String(column) }, index)) }) }),
-              /* @__PURE__ */ jsx10("tbody", { children: block.rows.map((rawCells, index) => /* @__PURE__ */ jsx10("tr", { children: (Array.isArray(rawCells) ? rawCells : []).map((cell, cellIndex) => /* @__PURE__ */ jsx10("td", { children: String(cell) }, cellIndex)) }, index)) })
+          return /* @__PURE__ */ jsxs7("div", { className: "a24-ui-block", children: [
+            /* @__PURE__ */ jsx11("h4", { children: title }),
+            /* @__PURE__ */ jsx11("div", { className: "a24-ui-table-scroll", children: /* @__PURE__ */ jsxs7("table", { children: [
+              /* @__PURE__ */ jsx11("thead", { children: /* @__PURE__ */ jsx11("tr", { children: block.columns.map((column, index) => /* @__PURE__ */ jsx11("th", { children: String(column) }, index)) }) }),
+              /* @__PURE__ */ jsx11("tbody", { children: block.rows.map((rawCells, index) => /* @__PURE__ */ jsx11("tr", { children: (Array.isArray(rawCells) ? rawCells : []).map((cell, cellIndex) => /* @__PURE__ */ jsx11("td", { children: String(cell) }, cellIndex)) }, index)) })
             ] }) })
           ] }, String(block.id || blockIndex));
         }
         const value = block.value ?? block.text ?? "";
-        return /* @__PURE__ */ jsxs6("div", { className: "a24-ui-block", children: [
-          /* @__PURE__ */ jsx10("h4", { children: title }),
-          /* @__PURE__ */ jsx10("p", { children: String(value) })
+        return /* @__PURE__ */ jsxs7("div", { className: "a24-ui-block", children: [
+          /* @__PURE__ */ jsx11("h4", { children: title }),
+          /* @__PURE__ */ jsx11("p", { children: String(value) })
         ] }, String(block.id || blockIndex));
       }) }, `row-${rowIndex}`);
     })
@@ -2529,38 +2845,38 @@ function AgentResponseTimeline({
     if (segment.kind === "tool") {
       const isLatestActivity = segmentIndex === segments.length - 1;
       const showOrb = toolViewMode === "closed" ? isLoading && isLatestActivity : Boolean(activeToolId && (segment.part.id === activeToolId || segment.part.toolCallId === activeToolId));
-      rendered.push(/* @__PURE__ */ jsx10(AgentChatToolRow, { activeToolId, part: segment.part, showOrb, slots: toolSlots }, segment.part.id));
+      rendered.push(/* @__PURE__ */ jsx11(AgentChatToolRow, { activeToolId, part: segment.part, showOrb, slots: toolSlots }, segment.part.id));
       continue;
     }
     if (segment.kind === "tool-session") {
-      rendered.push(/* @__PURE__ */ jsx10(AgentChatToolSession, { activeToolId, isLatestActivity: segmentIndex === segments.length - 1, isLive: isLoading, leadingModelTurn: segment.leadingModelTurn, modelTurn: segment.modelTurn, parts: segment.parts, slots: toolSlots }, `tool-session-${segment.parts[0].id}`));
+      rendered.push(/* @__PURE__ */ jsx11(AgentChatToolSession, { activeToolId, isLatestActivity: segmentIndex === segments.length - 1, isLive: isLoading, leadingModelTurn: segment.leadingModelTurn, modelTurn: segment.modelTurn, parts: segment.parts, slots: toolSlots }, `tool-session-${segment.parts[0].id}`));
       continue;
     }
     if (segment.kind === "subagent") {
-      rendered.push(/* @__PURE__ */ jsx10(AgentChatSubagentGroup, { isLatestActivity: segmentIndex === segments.length - 1, isLive: isLoading, part: segment.part, slots: toolSlots }, segment.part.id));
+      rendered.push(/* @__PURE__ */ jsx11(AgentChatSubagentGroup, { isLatestActivity: segmentIndex === segments.length - 1, isLive: isLoading, part: segment.part, slots: toolSlots }, segment.part.id));
       continue;
     }
     const part = segment.part;
     if (part.kind === "model-turn") {
       const key = activeActivityClaimed ? part.id : `${message.id}-active-activity`;
       activeActivityClaimed = true;
-      rendered.push(/* @__PURE__ */ jsx10(AgentChatActivityRow, { label: "Planning next moves", modelTurnId: part.modelTurnId }, key));
+      rendered.push(/* @__PURE__ */ jsx11(AgentChatActivityRow, { renderActivityIcon: toolSlots?.renderActivityIcon, label: "Planning next moves", modelTurnId: part.modelTurnId }, key));
       continue;
     }
     if (part.kind === "node-activity") {
       const key = activeActivityClaimed ? part.id : `${message.id}-active-activity`;
       if (part.status === "running") activeActivityClaimed = true;
       rendered.push(
-        part.status === "running" ? /* @__PURE__ */ jsx10(AgentChatActivityRow, { label: part.label, onSelect: onNodeSelect ? () => onNodeSelect(part) : void 0 }, key) : /* @__PURE__ */ jsx10(AgentChatNodeActivityRow, { onSelect: onNodeSelect, part }, part.id)
+        part.status === "running" ? /* @__PURE__ */ jsx11(AgentChatActivityRow, { renderActivityIcon: toolSlots?.renderActivityIcon, label: part.label, onSelect: onNodeSelect ? () => onNodeSelect(part) : void 0 }, key) : /* @__PURE__ */ jsx11(AgentChatNodeActivityRow, { renderActivityIcon: toolSlots?.renderActivityIcon, onSelect: onNodeSelect, part }, part.id)
       );
       continue;
     }
     if (part.kind === "ui-blocks" && renderUiBlocks) {
-      rendered.push(/* @__PURE__ */ jsx10(React9.Fragment, { children: renderUiBlocks(part) }, part.id));
+      rendered.push(/* @__PURE__ */ jsx11(React12.Fragment, { children: renderUiBlocks(part) }, part.id));
       continue;
     }
     rendered.push(
-      /* @__PURE__ */ jsx10(React9.Fragment, { children: /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx11(React12.Fragment, { children: /* @__PURE__ */ jsx11(
         AgentChatPart,
         {
           activeToolId,
@@ -2577,16 +2893,16 @@ function AgentResponseTimeline({
     );
   }
   if (rendered.length === 0 && message.content) {
-    rendered.push(/* @__PURE__ */ jsx10(MessageResponse, { children: message.content }, `${message.id}-fallback`));
+    rendered.push(/* @__PURE__ */ jsx11(MessageResponse, { children: message.content }, `${message.id}-fallback`));
   }
   if (rendered.length === 0 && isLoading) {
-    rendered.push(/* @__PURE__ */ jsx10(AgentChatActivityRow, { label: "Thinking" }, `${message.id}-active-activity`));
+    rendered.push(/* @__PURE__ */ jsx11(AgentChatActivityRow, { renderActivityIcon: toolSlots?.renderActivityIcon, label: "Thinking" }, `${message.id}-active-activity`));
   }
-  return /* @__PURE__ */ jsx10("div", { className: "space-y-3", children: rendered });
+  return /* @__PURE__ */ jsx11("div", { className: "space-y-3", children: rendered });
 }
 
 // src/ui/agent-chat-message.tsx
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 var DEFAULT_USER_MESSAGE_COLLAPSE_THRESHOLD = 360;
 var DEFAULT_USER_MESSAGE_COLLAPSED_LINES = 4;
 function shouldCollapseUserMessage(content, threshold = DEFAULT_USER_MESSAGE_COLLAPSE_THRESHOLD) {
@@ -2599,8 +2915,8 @@ function AgentChatUserMessageContent({
   showLessLabel = "Show less",
   showMoreLabel = "Show more"
 }) {
-  const [isExpanded, setIsExpanded] = React10.useState(false);
-  const contentId = React10.useId();
+  const [isExpanded, setIsExpanded] = React13.useState(false);
+  const contentId = React13.useId();
   const shouldCollapse = shouldCollapseUserMessage(content, collapseThreshold);
   const Icon = isExpanded ? ChevronUp : ChevronDown3;
   const clampedStyle = shouldCollapse && !isExpanded ? {
@@ -2609,9 +2925,9 @@ function AgentChatUserMessageContent({
     display: "-webkit-box",
     overflow: "hidden"
   } : void 0;
-  return /* @__PURE__ */ jsxs7("div", { className: "flex min-w-0 flex-col gap-3", children: [
-    /* @__PURE__ */ jsx11("div", { id: contentId, className: "min-w-0", style: clampedStyle, children: content }),
-    shouldCollapse ? /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8("div", { className: "flex min-w-0 flex-col gap-3", children: [
+    /* @__PURE__ */ jsx12("div", { id: contentId, className: "min-w-0", style: clampedStyle, children: content }),
+    shouldCollapse ? /* @__PURE__ */ jsxs8(
       "button",
       {
         "aria-controls": contentId,
@@ -2624,7 +2940,7 @@ function AgentChatUserMessageContent({
         type: "button",
         children: [
           isExpanded ? showLessLabel : showMoreLabel,
-          /* @__PURE__ */ jsx11(Icon, { "aria-hidden": "true", className: "size-4", strokeWidth: 2 })
+          /* @__PURE__ */ jsx12(Icon, { "aria-hidden": "true", className: "size-4", strokeWidth: 2 })
         ]
       }
     ) : null
@@ -2634,9 +2950,9 @@ function AgentChatUserMessageActionRow({
   children,
   className
 }) {
-  const rowRef = React10.useRef(null);
-  const [visible, setVisible] = React10.useState(false);
-  React10.useEffect(() => {
+  const rowRef = React13.useRef(null);
+  const [visible, setVisible] = React13.useState(false);
+  React13.useEffect(() => {
     const message = rowRef.current?.closest('[data-slot="message"]');
     if (!message) return;
     const show = () => setVisible(true);
@@ -2655,7 +2971,7 @@ function AgentChatUserMessageActionRow({
       message.removeEventListener("focusout", hideWhenFocusLeaves);
     };
   }, []);
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     "div",
     {
       ref: rowRef,
@@ -2694,7 +3010,7 @@ function AgentChatMessage({
   const resolvedUserContent = userMessageContent ?? message.content;
   const shouldRenderContent = isAssistant || Boolean(renderUserContent || resolvedUserContent);
   const showAttachments = Boolean(message.attachments?.length) && (message.role === "user" || showAssistantAttachments);
-  const renderedActions = actions ?? (actionHandlers ? /* @__PURE__ */ jsx11(
+  const renderedActions = actions ?? (actionHandlers ? /* @__PURE__ */ jsx12(
     AgentChatDefaultActions,
     {
       additionalActions,
@@ -2704,14 +3020,14 @@ function AgentChatMessage({
     }
   ) : null);
   const defaultUserActions = !actions && Boolean(actionHandlers) && !isAssistant;
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     ChatMessage,
     {
       className,
       dir,
       from: message.role,
       children: [
-        showAttachments ? /* @__PURE__ */ jsx11(
+        showAttachments ? /* @__PURE__ */ jsx12(
           ChatAttachmentRows,
           {
             attachments: message.attachments || [],
@@ -2720,14 +3036,14 @@ function AgentChatMessage({
             resolveContent: attachmentContentResolver
           }
         ) : null,
-        shouldRenderContent ? /* @__PURE__ */ jsxs7(
+        shouldRenderContent ? /* @__PURE__ */ jsxs8(
           ChatMessageContent,
           {
             className: cn(isAssistant ? "bg-transparent p-0" : void 0, contentClassName),
             dir,
             from: message.role,
             children: [
-              isAssistant ? renderAssistantContent ? renderAssistantContent({ isStreaming, message }) : /* @__PURE__ */ jsx11(
+              isAssistant ? renderAssistantContent ? renderAssistantContent({ isStreaming, message }) : /* @__PURE__ */ jsx12(
                 Timeline,
                 {
                   getHitlActionState,
@@ -2738,7 +3054,7 @@ function AgentChatMessage({
                   parts: message.parts
                 }
               ) : null,
-              !isAssistant ? renderUserContent ? renderUserContent({ message }) : resolvedUserContent ? /* @__PURE__ */ jsx11(
+              !isAssistant ? renderUserContent ? renderUserContent({ message }) : resolvedUserContent ? /* @__PURE__ */ jsx12(
                 AgentChatUserMessageContent,
                 {
                   collapsedLines: userMessageCollapsedLines,
@@ -2751,108 +3067,7 @@ function AgentChatMessage({
             ]
           }
         ) : null,
-        renderedActions ? defaultUserActions ? /* @__PURE__ */ jsx11(AgentChatUserMessageActionRow, { className: actionsClassName, children: renderedActions }) : /* @__PURE__ */ jsx11("div", { className: cn(dir === "rtl" ? "mt-1 h-9 w-full" : "mt-1 h-9 w-full -translate-x-2", actionsClassName), children: renderedActions }) : null
-      ]
-    }
-  );
-}
-
-// src/ui/agent-chat-context-status.tsx
-import * as React11 from "react";
-import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
-var COMPACT_TOKENS = new Intl.NumberFormat("en-US", { notation: "compact" });
-var PERCENT = new Intl.NumberFormat("en-US", {
-  style: "percent",
-  maximumFractionDigits: 1
-});
-var EXACT_SOURCES = /* @__PURE__ */ new Set(["exact", "provider_usage"]);
-function contextStatusMetrics(contextWindow) {
-  const maximum = Number(contextWindow?.max_tokens || 0);
-  const input = Math.max(0, Number(contextWindow?.input_tokens || 0));
-  const admissionInput = Math.max(0, Number(contextWindow?.admission_input_tokens ?? input));
-  const usageRatio = Math.max(0, Math.min(1, Number(
-    contextWindow?.usage_ratio ?? input / maximum
-  )));
-  const admissionRatio = Math.max(0, Math.min(1, Number(
-    contextWindow?.admission_ratio ?? admissionInput / maximum
-  )));
-  return { maximum, input, admissionInput, usageRatio, admissionRatio };
-}
-function AgentChatContextStatus({
-  className,
-  contextWindow
-}) {
-  const tooltipId = React11.useId();
-  const [open, setOpen] = React11.useState(false);
-  const { maximum, input, admissionInput, usageRatio, admissionRatio } = contextStatusMetrics(contextWindow);
-  const percentage = Math.round(usageRatio * 100);
-  const exact = EXACT_SOURCES.has(contextWindow?.source || "unknown");
-  if (!Number.isFinite(maximum) || maximum <= 0) return null;
-  return /* @__PURE__ */ jsxs8(
-    "div",
-    {
-      className: cn("a24-context-status", className),
-      onBlurCapture: (event) => {
-        if (!event.currentTarget.contains(event.relatedTarget)) setOpen(false);
-      },
-      onFocusCapture: () => setOpen(true),
-      onMouseEnter: () => setOpen(true),
-      onMouseLeave: () => setOpen(false),
-      children: [
-        /* @__PURE__ */ jsxs8(
-          "button",
-          {
-            "aria-describedby": open ? tooltipId : void 0,
-            "aria-label": `Context window ${percentage}% used`,
-            className: "a24-context-status__trigger",
-            onKeyDown: (event) => {
-              if (event.key === "Escape") setOpen(false);
-            },
-            type: "button",
-            children: [
-              /* @__PURE__ */ jsxs8("svg", { "aria-hidden": "true", className: "a24-context-status__ring", viewBox: "0 0 24 24", children: [
-                /* @__PURE__ */ jsx12("circle", { className: "a24-context-status__track", cx: "12", cy: "12", r: "10" }),
-                /* @__PURE__ */ jsx12(
-                  "circle",
-                  {
-                    className: "a24-context-status__value",
-                    cx: "12",
-                    cy: "12",
-                    pathLength: "100",
-                    r: "10",
-                    strokeDasharray: `${percentage} 100`
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs8("span", { children: [
-                percentage,
-                "%"
-              ] })
-            ]
-          }
-        ),
-        open ? /* @__PURE__ */ jsxs8("div", { className: "a24-context-status__popover", id: tooltipId, role: "tooltip", children: [
-          /* @__PURE__ */ jsx12("span", { className: "a24-context-status__sr-only", children: "Context window" }),
-          /* @__PURE__ */ jsxs8("strong", { children: [
-            PERCENT.format(usageRatio),
-            " context used"
-          ] }),
-          /* @__PURE__ */ jsxs8("span", { children: [
-            exact ? "Input" : "Estimated input",
-            ": ",
-            COMPACT_TOKENS.format(input),
-            " / ",
-            COMPACT_TOKENS.format(maximum),
-            " tokens"
-          ] }),
-          admissionInput !== input ? /* @__PURE__ */ jsxs8("span", { children: [
-            "Safety bound: ",
-            COMPACT_TOKENS.format(admissionInput),
-            " tokens (",
-            PERCENT.format(admissionRatio),
-            ")"
-          ] }) : null
-        ] }) : null
+        renderedActions ? defaultUserActions ? /* @__PURE__ */ jsx12(AgentChatUserMessageActionRow, { className: actionsClassName, children: renderedActions }) : /* @__PURE__ */ jsx12("div", { className: cn(dir === "rtl" ? "mt-1 h-9 w-full" : "mt-1 h-9 w-full -translate-x-2", actionsClassName), children: renderedActions }) : null
       ]
     }
   );
@@ -3082,68 +3297,6 @@ function McpConnectRequiredCard({
     }
   );
 }
-
-// src/ui/use-audio-recorder.ts
-import * as React12 from "react";
-var RECORDING_CANDIDATES = ["audio/webm;codecs=opus", "audio/webm", "audio/mp4"];
-function recordingExtension(mimeType) {
-  return mimeType.startsWith("audio/mp4") ? "m4a" : "webm";
-}
-function useAudioRecorder(onRecorded, options = {}) {
-  const recorderRef = React12.useRef(null);
-  const streamRef = React12.useRef(null);
-  const onRecordedRef = React12.useRef(onRecorded);
-  const onStreamChangeRef = React12.useRef(options.onStreamChange);
-  onRecordedRef.current = onRecorded;
-  onStreamChangeRef.current = options.onStreamChange;
-  const [isRecording, setIsRecording] = React12.useState(false);
-  const [error, setError] = React12.useState(null);
-  const stop = React12.useCallback(() => recorderRef.current?.stop(), []);
-  const start = React12.useCallback(async () => {
-    setError(null);
-    if (!navigator.mediaDevices?.getUserMedia || typeof MediaRecorder === "undefined") {
-      setError("Audio recording is not supported in this browser.");
-      return;
-    }
-    try {
-      const mimeType = RECORDING_CANDIDATES.find((candidate) => MediaRecorder.isTypeSupported(candidate));
-      if (!mimeType) {
-        setError("Audio recording is not supported in this browser.");
-        return;
-      }
-      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-      onStreamChangeRef.current?.(stream);
-      const recorder = new MediaRecorder(stream, { mimeType });
-      const chunks = [];
-      recorder.ondataavailable = (event) => {
-        if (event.data.size) chunks.push(event.data);
-      };
-      recorder.onstop = () => {
-        const actualType = recorder.mimeType || "audio/webm";
-        onRecordedRef.current(new File([new Blob(chunks, { type: actualType })], `recording-${Date.now()}.${recordingExtension(actualType)}`, { type: actualType }));
-        stream.getTracks().forEach((track) => track.stop());
-        onStreamChangeRef.current?.(null);
-        recorderRef.current = null;
-        streamRef.current = null;
-        setIsRecording(false);
-      };
-      recorderRef.current = recorder;
-      streamRef.current = stream;
-      recorder.start();
-      setIsRecording(true);
-    } catch {
-      streamRef.current?.getTracks().forEach((track) => track.stop());
-      onStreamChangeRef.current?.(null);
-      setError("Microphone access is unavailable.");
-    }
-  }, []);
-  React12.useEffect(() => () => {
-    recorderRef.current?.stop();
-    streamRef.current?.getTracks().forEach((track) => track.stop());
-    onStreamChangeRef.current?.(null);
-  }, []);
-  return { error, isRecording, start, stop };
-}
 export {
   AgentChatActivityRow,
   AgentChatComposer,
@@ -3221,6 +3374,7 @@ export {
   resolvedHitlLabel,
   revokeAgentChatComposerFiles,
   shouldCollapseUserMessage,
+  useAgentChatComposer,
   useAudioRecorder,
   useChatComposerFocus,
   useCompletionActionEntrance,