@agents24/chat-react 0.4.0 → 0.5.1

package/dist/ui/index.cjs

@@ -30,12 +30,23 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/ui/index.ts
 var ui_exports = {};
 __export(ui_exports, {
+  AgentChatActivityRow: () => AgentChatActivityRow,
   AgentChatComposer: () => AgentChatComposer,
+  AgentChatContextCompressionRow: () => AgentChatContextCompressionRow,
+  AgentChatContextStatus: () => AgentChatContextStatus,
   AgentChatDefaultActions: () => AgentChatDefaultActions,
   AgentChatMessage: () => AgentChatMessage,
-  AgentChatPartRow: () => DefaultPartRow,
+  AgentChatModelTurnRow: () => AgentChatModelTurnRow,
+  AgentChatNodeActivityRow: () => AgentChatNodeActivityRow,
+  AgentChatPart: () => AgentChatPart,
+  AgentChatSubagentGroup: () => AgentChatSubagentGroup,
+  AgentChatToolGroup: () => AgentChatToolGroup,
+  AgentChatToolPart: () => AgentChatToolPart,
+  AgentChatToolRow: () => AgentChatToolRow,
+  AgentChatToolSession: () => AgentChatToolSession,
   AgentChatUserMessageContent: () => AgentChatUserMessageContent,
   AgentResponseTimeline: () => AgentResponseTimeline,
+  AskUserInteraction: () => AskUserInteraction,
   Attachment: () => Attachment,
   AttachmentAction: () => AttachmentAction,
   AttachmentActions: () => AttachmentActions,
@@ -72,15 +83,22 @@ __export(ui_exports, {
   MessageResponse: () => MessageResponse,
   ShadcnMessage: () => Message,
   ShadcnMessageContent: () => MessageContent,
+  agentChatToolLabel: () => agentChatToolLabel,
   attachmentMediaVariants: () => attachmentMediaVariants,
   attachmentVariants: () => attachmentVariants,
   bubbleVariants: () => bubbleVariants,
   cn: () => cn,
+  contextStatusMetrics: () => contextStatusMetrics,
   hitlActionLabel: () => hitlActionLabel,
   hitlTitle: () => hitlTitle,
+  isAgentChatSubagent: () => isAgentChatSubagent,
+  isAgentChatToolRunning: () => isAgentChatToolRunning,
+  latestRunningAgentChatToolId: () => latestRunningAgentChatToolId,
   markerVariants: () => markerVariants,
+  partitionAgentChatToolTimeline: () => partitionAgentChatToolTimeline,
   resolvedHitlLabel: () => resolvedHitlLabel,
-  shouldCollapseUserMessage: () => shouldCollapseUserMessage
+  shouldCollapseUserMessage: () => shouldCollapseUserMessage,
+  useAudioRecorder: () => useAudioRecorder
 });
 module.exports = __toCommonJS(ui_exports);
 
@@ -120,20 +138,21 @@ function formatFileCount(files) {
   if (files.length === 1) return files[0].filename;
   return `${files.length} files`;
 }
-var pillButtonClass = "inline-flex size-8 shrink-0 items-center justify-center gap-2 rounded-full border-0 bg-neutral-100 text-sm text-neutral-600 shadow-none transition-colors hover:bg-neutral-200 hover:text-neutral-800 focus-visible:border-neutral-300 focus-visible:outline-none focus-visible:ring-0 disabled:pointer-events-none disabled:opacity-50 dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700";
-var submitButtonClass = "inline-flex size-9 shrink-0 items-center justify-center gap-2 rounded-full border-0 bg-neutral-900 text-sm text-white shadow-none transition-[background-color,color,opacity,transform] duration-200 hover:bg-neutral-800 hover:text-white focus-visible:border-neutral-300 focus-visible:outline-none focus-visible:ring-0 disabled:pointer-events-none disabled:opacity-50 dark:bg-neutral-100 dark:text-neutral-900 dark:hover:bg-white";
+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({
   accept,
   allowAttachments = true,
   attachmentLayout = "flow",
   className,
   disabled = false,
+  forceExpanded = false,
   inputToolbarContent,
   isRunning = false,
   onAttachmentCountChange,
   onStop,
   onSubmit,
-  placeholder = "Send follow-up\u2026",
+  placeholder = "Message the agent",
   textareaRef
 }) {
   const fileInputRef = React.useRef(null);
@@ -142,7 +161,7 @@ function AgentChatComposer({
   const [text, setText] = React.useState("");
   const [files, setFiles] = React.useState([]);
   const [isSubmitting, setIsSubmitting] = React.useState(false);
-  const isExpanded = text.includes("\n") || text.length > 62;
+  const isExpanded = forceExpanded || text.includes("\n") || text.length > 62;
   const setTextareaRef = React.useCallback(
     (node) => {
       localTextareaRef.current = node;
@@ -197,6 +216,7 @@ function AgentChatComposer({
       setText("");
       setFiles([]);
       revokeComposerFiles(submittedFiles);
+    } catch {
     } finally {
       setIsSubmitting(false);
     }
@@ -207,7 +227,7 @@ function AgentChatComposer({
       void submit();
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: cn("a24-composer relative mx-auto w-full max-w-3xl overflow-visible", className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
@@ -220,7 +240,7 @@ function AgentChatComposer({
         children: files.map((file) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           "div",
           {
-            className: "a24-composer__attachment group relative flex h-8 max-w-[min(20rem,calc(100vw-2rem))] cursor-default select-none items-center gap-1.5 rounded-md border border-neutral-200 bg-white px-1.5 text-sm font-medium text-foreground transition-colors hover:bg-neutral-50",
+            className: "a24-composer__attachment group relative flex h-8 max-w-[min(20rem,calc(100vw-2rem))] cursor-default select-none items-center gap-1.5 rounded-md border border-border bg-card px-1.5 text-sm font-medium text-card-foreground transition-colors hover:bg-accent",
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "flex size-5 shrink-0 items-center justify-center rounded bg-background text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Paperclip, { className: "size-3" }) }),
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "min-w-0 flex-1 truncate", children: file.filename }),
@@ -245,8 +265,8 @@ function AgentChatComposer({
       {
         "data-expanded": isExpanded ? "" : void 0,
         className: cn(
-          "a24-composer__surface relative w-full border border-neutral-200 bg-white shadow-sm transition-colors duration-200 focus-within:border-neutral-300 dark:border-neutral-700 dark:bg-card dark:focus-within:border-neutral-600",
-          isExpanded ? "rounded-[18px] p-2 pb-1.5" : "rounded-full px-2 py-[3px]"
+          "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__ */ (0, import_jsx_runtime.jsxs)(
           "div",
@@ -294,7 +314,7 @@ function AgentChatComposer({
                   "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-neutral-400 focus-visible:ring-0 scrollbar-thin",
+                    "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: disabled || isSubmitting || isRunning,
@@ -342,7 +362,9 @@ function AgentChatComposer({
 }
 
 // src/ui/agent-chat-actions.tsx
+var React3 = __toESM(require("react"), 1);
 var import_lucide_react2 = require("lucide-react");
+var import_radix_ui = require("radix-ui");
 
 // src/ui/adapters.ts
 var React2 = __toESM(require("react"), 1);
@@ -613,6 +635,7 @@ function MessageFooter({ className, ...props }) {
 }
 
 // src/ui/adapters.ts
+var ChatMessageRoleContext = React2.createContext("assistant");
 function ChatMessage(input) {
   const { className, from, align, ...props } = input;
   const isUser = from === "user";
@@ -621,22 +644,27 @@ function ChatMessage(input) {
   const messageProps = Object.assign({}, props);
   messageProps.align = resolvedAlign;
   messageProps.className = cn(
-    "group flex w-full flex-col gap-2",
-    isUser ? cn("is-user max-w-[80%] justify-end", isRtl ? "mr-auto" : "ml-auto") : "is-assistant max-w-full",
+    "a24-chat-message group flex w-full flex-col gap-2",
+    isUser ? cn("a24-chat-message--user is-user max-w-[80%] justify-end", isRtl ? "mr-auto" : "ml-auto") : "a24-chat-message--assistant is-assistant max-w-full",
     className
   );
-  return React2.createElement(Message, messageProps);
+  return React2.createElement(
+    ChatMessageRoleContext.Provider,
+    { value: from },
+    React2.createElement(Message, messageProps)
+  );
 }
 function ChatMessageContent({
   className,
+  from,
   ...props
 }) {
+  const inheritedRole = React2.useContext(ChatMessageRoleContext);
+  const isUser = (from ?? inheritedRole) === "user";
   return React2.createElement("div", {
     className: cn(
-      "is-user:dark flex w-full max-w-full min-w-0 flex-col gap-2 overflow-hidden text-sm group-[.is-user]:w-fit group-[.is-user]:overflow-visible",
-      "group-[.is-user]:rounded-lg group-[.is-user]:bg-secondary group-[.is-user]:px-4 group-[.is-user]:py-3 group-[.is-user]:text-foreground",
-      "group-[.is-assistant]:w-full group-[.is-assistant]:max-w-full group-[.is-assistant]:text-foreground",
-      props.dir === "rtl" ? "group-[.is-user]:mr-auto" : "group-[.is-user]:ml-auto",
+      "a24-chat-message-content flex max-w-full min-w-0 flex-col gap-2 text-sm",
+      isUser ? "a24-chat-message-content--user is-user:dark w-fit overflow-visible rounded-lg bg-secondary px-4 py-3 text-foreground" : "a24-chat-message-content--assistant w-full overflow-visible text-foreground",
       className
     ),
     "data-slot": "bubble-content",
@@ -753,11 +781,30 @@ function ChatAttachments({
 
 // src/ui/agent-chat-actions.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
+var FEEDBACK_REASONS = [
+  ["incorrect", "Incorrect"],
+  ["irrelevant", "Irrelevant"],
+  ["incomplete", "Incomplete"],
+  ["unsafe", "Unsafe"],
+  ["citation_issue", "Citation issue"],
+  ["other", "Other"]
+];
 function AgentChatDefaultActions({
+  additionalActions,
+  dir,
   handlers,
   message
 }) {
+  const [feedbackOpen, setFeedbackOpen] = React3.useState(false);
+  const [feedbackTrigger, setFeedbackTrigger] = React3.useState(null);
+  const [reason, setReason] = React3.useState(handlers?.feedback?.reason ?? null);
+  const [comment, setComment] = React3.useState(handlers?.feedback?.comment ?? "");
+  React3.useEffect(() => {
+    setReason(handlers?.feedback?.reason ?? null);
+    setComment(handlers?.feedback?.comment ?? "");
+  }, [handlers?.feedback?.comment, handlers?.feedback?.reason]);
   if (!handlers || message.role !== "assistant" || message.isFinal === false) return null;
+  const canWriteFeedback = Boolean(message.runId && handlers.onSetFeedback);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(ChatMessageActions, { children: [
     handlers.onRetry ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       ChatMessageAction,
@@ -768,24 +815,101 @@ function AgentChatDefaultActions({
         children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.RefreshCcw, { className: "size-4" })
       }
     ) : null,
-    handlers.onLike ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    canWriteFeedback ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       ChatMessageAction,
       {
         label: "Like",
-        onClick: () => void handlers.onLike?.(message),
+        onClick: () => void handlers.onSetFeedback?.(message, {
+          rating: handlers.feedback?.rating === "like" ? null : "like"
+        }),
         tooltip: "Like this response",
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.ThumbsUp, { className: "size-4", fill: handlers.liked ? "currentColor" : "none" })
-      }
-    ) : null,
-    handlers.onDislike ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      ChatMessageAction,
-      {
-        label: "Dislike",
-        onClick: () => void handlers.onDislike?.(message),
-        tooltip: "Dislike this response",
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.ThumbsDown, { className: "size-4", fill: handlers.disliked ? "currentColor" : "none" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.ThumbsUp, { className: "size-4", fill: handlers.feedback?.rating === "like" ? "currentColor" : "none" })
       }
     ) : null,
+    canWriteFeedback ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_radix_ui.Popover.Root, { onOpenChange: setFeedbackOpen, open: feedbackOpen, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_radix_ui.Popover.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        ChatMessageAction,
+        {
+          label: "Dislike",
+          onClick: () => {
+            if (handlers.feedback?.rating !== "dislike") {
+              void handlers.onSetFeedback?.(message, { rating: "dislike" });
+            }
+            setFeedbackOpen(true);
+          },
+          ref: setFeedbackTrigger,
+          tooltip: "Dislike this response",
+          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.ThumbsDown, { className: "size-4", fill: handlers.feedback?.rating === "dislike" ? "currentColor" : "none" })
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        import_radix_ui.Popover.Portal,
+        {
+          container: feedbackTrigger?.closest("[data-agents24-theme-root]") ?? void 0,
+          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            import_radix_ui.Popover.Content,
+            {
+              align: "end",
+              "aria-label": "Dislike details",
+              className: "z-50 w-80 rounded-lg border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+              dir,
+              side: "top",
+              sideOffset: 8,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-sm font-medium", children: "What could be better?" }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mt-3 flex flex-wrap gap-1.5", children: FEEDBACK_REASONS.map(([value, label]) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "button",
+                  {
+                    "aria-pressed": reason === value,
+                    className: "rounded-md border border-border px-2.5 py-1.5 text-xs font-medium transition-colors hover:bg-muted aria-pressed:border-transparent aria-pressed:bg-secondary",
+                    onClick: () => setReason(reason === value ? null : value),
+                    type: "button",
+                    children: label
+                  },
+                  value
+                )) }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  "textarea",
+                  {
+                    "aria-label": "Optional feedback comment",
+                    className: "mt-3 min-h-20 w-full resize-none rounded-md border border-input bg-background px-3 py-2 text-sm outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring",
+                    maxLength: 1e3,
+                    onChange: (event) => setComment(event.target.value),
+                    placeholder: "Add a comment (optional)",
+                    value: comment
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mt-3 flex items-center justify-between gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    "button",
+                    {
+                      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);
+                      },
+                      type: "button",
+                      children: "Remove feedback"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    "button",
+                    {
+                      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);
+                      },
+                      type: "button",
+                      children: "Save"
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        }
+      )
+    ] }) : null,
+    additionalActions,
     handlers.onCopy ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       ChatMessageAction,
       {
@@ -799,41 +923,17 @@ function AgentChatDefaultActions({
 }
 
 // src/ui/agent-chat-message.tsx
-var React5 = __toESM(require("react"), 1);
-var import_lucide_react4 = require("lucide-react");
+var React8 = __toESM(require("react"), 1);
+var import_lucide_react5 = require("lucide-react");
 
 // src/ui/agent-response-timeline.tsx
-var React4 = __toESM(require("react"), 1);
-var import_lucide_react3 = require("lucide-react");
-
-// src/ui/message-response.tsx
-var React3 = __toESM(require("react"), 1);
-var import_streamdown = require("streamdown");
-
-// src/active-content.ts
-var CHAT_MARKDOWN_HARDEN_OPTIONS = Object.freeze({
-  allowDataImages: false,
-  allowedImagePrefixes: [],
-  allowedLinkPrefixes: ["*"],
-  allowedProtocols: [],
-  defaultOrigin: void 0,
-  imageBlockPolicy: "text-only",
-  linkBlockPolicy: "text-only"
-});
-function safeChatMarkdownHref(value) {
-  if (!value) return void 0;
-  if (value.startsWith("#")) return value;
-  try {
-    const url = new URL(value);
-    return url.protocol === "https:" || url.protocol === "http:" ? url.href : void 0;
-  } catch {
-    return void 0;
-  }
-}
+var React7 = __toESM(require("react"), 1);
 
 // src/streaming-text.ts
 var import_react = require("react");
 var DEFAULT_COMPLETED_TEXT_CACHE_SIZE = 200;
+var STREAM_RUNWAY_MS = 80;
+var STREAM_IDLE_RELEASE_MS = 120;
 var defaultCompletedTextCache = /* @__PURE__ */ new Map();
 var defaultStreamingTextCache = {
   get: (id) => defaultCompletedTextCache.get(id),
@@ -845,6 +945,36 @@ var defaultStreamingTextCache = {
     }
   }
 };
+var getActiveStreamingTextPartId = (message, streamingMessageId) => {
+  if (message.role !== "assistant" || streamingMessageId !== message.id) return null;
+  const trailingPart = message.parts[message.parts.length - 1];
+  return trailingPart?.kind === "text" ? trailingPart.id : null;
+};
+var graphemeEndOffsets = (value) => {
+  if (!value) return [];
+  if (typeof Intl !== "undefined" && "Segmenter" in Intl) {
+    const segmenter = new Intl.Segmenter(void 0, { granularity: "grapheme" });
+    return Array.from(segmenter.segment(value), ({ index, segment }) => index + segment.length);
+  }
+  const characters = Array.from(value);
+  const offsets = [];
+  let offset = 0;
+  let regionalIndicators = 0;
+  characters.forEach((character, index) => {
+    const previous = characters[index - 1];
+    const codePoint = character.codePointAt(0) ?? 0;
+    const isRegionalIndicator = codePoint >= 127462 && codePoint <= 127487;
+    const continuesCluster = index > 0 && (/^\p{Mark}$/u.test(character) || codePoint >= 65024 && codePoint <= 65039 || codePoint >= 127995 && codePoint <= 127999 || character === "\u200D" || previous === "\u200D" || isRegionalIndicator && regionalIndicators % 2 === 1);
+    if (!continuesCluster) {
+      if (offset > 0) offsets.push(offset);
+      regionalIndicators = 0;
+    }
+    offset += character.length;
+    regionalIndicators = isRegionalIndicator ? regionalIndicators + 1 : 0;
+  });
+  offsets.push(offset);
+  return offsets;
+};
 function useStreamingText({
   id,
   isStreaming,
@@ -863,85 +993,104 @@ function useStreamingText({
   const displayedRef = (0, import_react.useRef)(displayedText);
   const rafRef = (0, import_react.useRef)(null);
   const lastFrameAtRef = (0, import_react.useRef)(null);
+  const targetUpdatedAtRef = (0, import_react.useRef)(null);
+  const progressRemainderRef = (0, import_react.useRef)(0);
   const idRef = (0, import_react.useRef)(id);
-  const shouldAnimateRef = (0, import_react.useRef)(isStreaming);
+  const streamingRef = (0, import_react.useRef)(isStreaming);
+  const reduceMotionRef = (0, import_react.useRef)(false);
   (0, import_react.useEffect)(() => {
     if (isStreaming || !text) return;
     cacheAdapter?.set(id, text);
   }, [cacheAdapter, id, isStreaming, text]);
   (0, import_react.useEffect)(() => {
     targetRef.current = text;
-  }, [text]);
+    targetUpdatedAtRef.current = typeof performance === "undefined" ? null : performance.now();
+    if (!isStreaming || reduceMotionRef.current || !text.startsWith(displayedRef.current)) {
+      displayedRef.current = text;
+      setDisplayedText(text);
+      progressRemainderRef.current = 0;
+    }
+  }, [isStreaming, text]);
   (0, import_react.useEffect)(() => {
     if (idRef.current === id) return;
     idRef.current = id;
     const cachedText = cacheAdapter?.get(id);
     const initial = cachedText && text.startsWith(cachedText) ? cachedText : text;
-    shouldAnimateRef.current = isStreaming && initial !== text;
     displayedRef.current = initial;
     setDisplayedText(initial);
-    if (rafRef.current !== null) {
-      cancelAnimationFrame(rafRef.current);
-      rafRef.current = null;
-    }
     lastFrameAtRef.current = null;
+    targetUpdatedAtRef.current = typeof performance === "undefined" ? null : performance.now();
+    progressRemainderRef.current = 0;
   }, [cacheAdapter, id, isStreaming, text]);
   (0, import_react.useEffect)(() => {
+    streamingRef.current = isStreaming;
     if (typeof window === "undefined") {
       displayedRef.current = text;
       setDisplayedText(text);
       return;
     }
-    const reduceMotion = typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-    if (reduceMotion) {
+    const reduceMotion2 = typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    reduceMotionRef.current = reduceMotion2;
+    if (reduceMotion2 || !isStreaming) {
       displayedRef.current = text;
       setDisplayedText(text);
-      shouldAnimateRef.current = false;
       return;
     }
     const cachedText = cacheAdapter?.get(id);
     if (cachedText === text) {
       displayedRef.current = text;
       setDisplayedText(text);
-      shouldAnimateRef.current = false;
       return;
     }
-    if (isStreaming) {
-      shouldAnimateRef.current = true;
-    }
-    if (!shouldAnimateRef.current) {
+    if (!text.startsWith(displayedRef.current)) {
       displayedRef.current = text;
       setDisplayedText(text);
-      return;
-    }
-    if (!text.startsWith(displayedRef.current)) {
-      displayedRef.current = "";
-      setDisplayedText("");
     }
     const tick = (timestamp) => {
       const previousTimestamp = lastFrameAtRef.current ?? timestamp;
       lastFrameAtRef.current = timestamp;
       const target = targetRef.current;
       const current = displayedRef.current;
-      if (current.length >= target.length) {
-        shouldAnimateRef.current = false;
+      if (!streamingRef.current || reduceMotionRef.current) {
+        displayedRef.current = target;
+        setDisplayedText(target);
         rafRef.current = null;
         return;
       }
-      const elapsedMs = Math.max(8, timestamp - previousTimestamp);
-      const charsFromTime = Math.max(1, Math.floor(elapsedMs / 1e3 * charsPerSecond));
-      const gap = target.length - current.length;
-      const catchupStep = gap > catchupThreshold ? Math.min(maxCatchupChars, Math.ceil(gap / 10)) : charsFromTime;
-      const nextLength = Math.min(
-        target.length,
-        current.length + Math.max(charsFromTime, catchupStep)
+      if (!target.startsWith(current)) {
+        displayedRef.current = target;
+        setDisplayedText(target);
+        progressRemainderRef.current = 0;
+        rafRef.current = window.requestAnimationFrame(tick);
+        return;
+      }
+      const pending = target.slice(current.length);
+      const pendingOffsets = graphemeEndOffsets(pending);
+      if (pendingOffsets.length === 0) {
+        rafRef.current = window.requestAnimationFrame(tick);
+        return;
+      }
+      const elapsedMs = Math.max(0, timestamp - previousTimestamp);
+      const targetIdleMs = targetUpdatedAtRef.current === null ? STREAM_IDLE_RELEASE_MS : Math.max(0, timestamp - targetUpdatedAtRef.current);
+      const runway = targetIdleMs >= STREAM_IDLE_RELEASE_MS ? 0 : Math.min(
+        pendingOffsets.length - 1,
+        Math.max(1, Math.ceil(charsPerSecond * STREAM_RUNWAY_MS / 1e3))
       );
-      const next = target.slice(0, nextLength);
-      displayedRef.current = next;
-      setDisplayedText(next);
+      const eligibleGraphemes = pendingOffsets.length - runway;
+      progressRemainderRef.current += elapsedMs / 1e3 * charsPerSecond;
+      let step = Math.floor(progressRemainderRef.current);
+      if (current.length === 0 && eligibleGraphemes > 0) step = Math.max(1, step);
+      const catchupStep = pendingOffsets.length > catchupThreshold ? Math.min(maxCatchupChars, Math.ceil(pendingOffsets.length / 10)) : 0;
+      step = Math.min(eligibleGraphemes, Math.max(step, catchupStep));
+      if (step > 0) {
+        progressRemainderRef.current = Math.max(0, progressRemainderRef.current - step);
+        const next = current + pending.slice(0, pendingOffsets[step - 1]);
+        displayedRef.current = next;
+        setDisplayedText(next);
+      }
       rafRef.current = window.requestAnimationFrame(tick);
     };
-    if (rafRef.current === null && displayedRef.current.length < text.length) {
+    if (rafRef.current === null) {
       rafRef.current = window.requestAnimationFrame(tick);
     }
     return () => {
@@ -950,28 +1099,417 @@ function useStreamingText({
         rafRef.current = null;
       }
       lastFrameAtRef.current = null;
+      progressRemainderRef.current = 0;
     };
-  }, [cacheAdapter, catchupThreshold, charsPerSecond, id, isStreaming, maxCatchupChars, text]);
+  }, [cacheAdapter, catchupThreshold, charsPerSecond, id, isStreaming, maxCatchupChars]);
+  const reduceMotion = typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
   return {
-    displayedText,
+    displayedText: !isStreaming || reduceMotion ? text : displayedText,
     isAnimating: isStreaming,
     mode: isStreaming ? "streaming" : "static",
     parseIncompleteMarkdown: isStreaming
   };
 }
 
-// src/ui/message-response.tsx
+// src/ui/ask-user-interaction.tsx
+var React4 = __toESM(require("react"), 1);
+var import_lucide_react3 = require("lucide-react");
+
+// src/ui/ask-user-interaction-state.ts
+function emptyAskUserDrafts(questions) {
+  return Object.fromEntries(
+    questions.map((question) => [
+      question.id,
+      { customText: "", selectedOptionIds: [] }
+    ])
+  );
+}
+function askUserDraftHasAnswer(draft) {
+  return Boolean(
+    draft && (draft.selectedOptionIds.length > 0 || draft.customText.trim().length > 0)
+  );
+}
+function selectAskUserOption({
+  draft,
+  drafts,
+  optionId,
+  question
+}) {
+  const selectedOptionIds = question.multiSelect ? draft.selectedOptionIds.includes(optionId) ? draft.selectedOptionIds.filter((id) => id !== optionId) : [...draft.selectedOptionIds, optionId] : [optionId];
+  return {
+    ...drafts,
+    [question.id]: {
+      customText: "",
+      selectedOptionIds
+    }
+  };
+}
+function updateAskUserCustomText({
+  customText,
+  drafts,
+  question
+}) {
+  return {
+    ...drafts,
+    [question.id]: {
+      customText,
+      selectedOptionIds: question.multiSelect ? drafts[question.id]?.selectedOptionIds || [] : []
+    }
+  };
+}
+function askUserAnswersFromDrafts(questions, drafts) {
+  return questions.map((question) => {
+    const answer = drafts[question.id];
+    return {
+      questionId: question.id,
+      selectedOptionIds: answer?.selectedOptionIds || [],
+      ...answer?.customText.trim() ? { customText: answer.customText.trim() } : {}
+    };
+  });
+}
+
+// src/ui/ask-user-interaction.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
+function resolvedAnswerText(question, answer) {
+  if (!answer) return ["No response recorded"];
+  const labels = answer.selectedOptionIds.flatMap((optionId) => {
+    const option = question.options.find((item) => item.id === optionId);
+    return option ? [option.label] : [];
+  });
+  if (answer.customText) labels.push(answer.customText);
+  return labels.length ? labels : ["No response recorded"];
+}
+function ResolvedQuestions({
+  buttonRef,
+  part
+}) {
+  const [open, setOpen] = React4.useState(false);
+  const count = part.questions.length;
+  const answers = new Map(
+    (part.resolution?.answers || []).map((answer) => [
+      answer.questionId,
+      answer
+    ])
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "a24-ask-user a24-ask-user--resolved w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "button",
+      {
+        "aria-expanded": open,
+        className: "group flex min-w-0 items-center gap-1.5 rounded-md px-0 py-0.5 text-start text-sm text-muted-foreground transition-colors hover:text-foreground motion-reduce:transition-none",
+        onClick: () => setOpen((value) => !value),
+        ref: buttonRef,
+        type: "button",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
+            "Asked ",
+            count,
+            " question",
+            count === 1 ? "" : "s"
+          ] }),
+          open ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.ChevronDown, { "aria-hidden": "true", className: "size-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            import_lucide_react3.ChevronRight,
+            {
+              "aria-hidden": "true",
+              className: "size-3.5 opacity-70 rtl:rotate-180"
+            }
+          )
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mt-2 space-y-3 ps-4", children: part.questions.map((question) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "text-sm font-medium text-foreground", children: question.question }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mt-1 space-y-1 text-sm text-muted-foreground", children: resolvedAnswerText(
+        question,
+        answers.get(question.id)
+      ).map((value, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "div",
+        {
+          className: "whitespace-pre-wrap break-words",
+          children: value
+        },
+        `${question.id}:${index}`
+      )) })
+    ] }, question.id)) }) : null
+  ] });
+}
+function AskUserInteraction({
+  error,
+  isBusy = false,
+  onSubmit,
+  part
+}) {
+  const questions = part.questions;
+  const [step, setStep] = React4.useState(0);
+  const [drafts, setDrafts] = React4.useState(
+    () => emptyAskUserDrafts(questions)
+  );
+  const headingRef = React4.useRef(null);
+  const questionsRef = React4.useRef(questions);
+  const resolvedButtonRef = React4.useRef(null);
+  const wasResolvedRef = React4.useRef(part.status !== "pending");
+  questionsRef.current = questions;
+  React4.useEffect(() => {
+    setStep(0);
+    setDrafts(emptyAskUserDrafts(questionsRef.current));
+  }, [part.interruptId]);
+  React4.useEffect(() => {
+    headingRef.current?.focus();
+  }, [step]);
+  React4.useEffect(() => {
+    const isResolved = part.status !== "pending";
+    if (isResolved && !wasResolvedRef.current) {
+      resolvedButtonRef.current?.focus();
+    }
+    wasResolvedRef.current = isResolved;
+  }, [part.status]);
+  if (part.status !== "pending") {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ResolvedQuestions, { buttonRef: resolvedButtonRef, part });
+  }
+  const question = questions[step];
+  if (!question) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "text-sm text-destructive", role: "alert", children: "This question request is unavailable." });
+  }
+  const draft = drafts[question.id] || {
+    customText: "",
+    selectedOptionIds: []
+  };
+  const isLastQuestion = step === questions.length - 1;
+  const canMoveForward = askUserDraftHasAnswer(draft);
+  const completeStep = (nextDrafts) => {
+    if (isLastQuestion) {
+      onSubmit?.(askUserAnswersFromDrafts(questions, nextDrafts));
+      return;
+    }
+    setStep((current) => Math.min(current + 1, questions.length - 1));
+  };
+  const selectOption = (optionId) => {
+    const nextDrafts = selectAskUserOption({
+      draft,
+      drafts,
+      optionId,
+      question
+    });
+    setDrafts(nextDrafts);
+    if (!question.multiSelect) completeStep(nextDrafts);
+  };
+  const updateCustomText = (customText) => {
+    setDrafts(
+      (current) => updateAskUserCustomText({
+        customText,
+        drafts: current,
+        question
+      })
+    );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "a24-ask-user space-y-3 rounded-xl border border-border/50 bg-background p-4 shadow-sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex min-w-0 items-start justify-between gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "h3",
+        {
+          className: "min-w-0 flex-1 text-base font-medium leading-6 text-foreground outline-none",
+          ref: headingRef,
+          tabIndex: -1,
+          children: question.question
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex shrink-0 items-center gap-1 text-muted-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "button",
+          {
+            "aria-label": "Previous question",
+            className: "flex size-8 items-center justify-center rounded-full transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-30",
+            disabled: isBusy || step === 0,
+            onClick: () => setStep((current) => Math.max(0, current - 1)),
+            type: "button",
+            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              import_lucide_react3.ChevronLeft,
+              {
+                "aria-hidden": "true",
+                className: "size-4 rtl:rotate-180"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "span",
+          {
+            "aria-label": `Question ${step + 1} of ${questions.length}`,
+            className: "min-w-12 text-center text-sm tabular-nums",
+            children: [
+              step + 1,
+              " / ",
+              questions.length
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "button",
+          {
+            "aria-label": isLastQuestion ? "Submit answers" : "Next question",
+            className: "flex size-8 items-center justify-center rounded-full transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-30",
+            disabled: isBusy || !onSubmit || !canMoveForward,
+            onClick: () => completeStep(drafts),
+            type: "button",
+            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              import_lucide_react3.ChevronRight,
+              {
+                "aria-hidden": "true",
+                className: "size-4 rtl:rotate-180"
+              }
+            )
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-1", children: [
+      question.options.map((option, index) => {
+        const selected = draft.selectedOptionIds.includes(option.id);
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "button",
+          {
+            "aria-pressed": selected,
+            className: cn(
+              "group flex min-h-11 w-full items-center gap-3 rounded-xl px-2.5 py-2 text-start text-sm transition-colors motion-reduce:transition-none",
+              selected ? "bg-muted" : "hover:bg-muted/70"
+            ),
+            disabled: isBusy || !onSubmit,
+            onClick: () => selectOption(option.id),
+            type: "button",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "span",
+                {
+                  className: cn(
+                    "flex size-8 shrink-0 items-center justify-center rounded-full border text-sm tabular-nums transition-colors",
+                    selected ? "border-border bg-background text-foreground" : "border-border/70 bg-muted/60 text-muted-foreground"
+                  ),
+                  children: index + 1
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "min-w-0 flex-1 font-medium text-foreground", children: option.label }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                import_lucide_react3.ChevronRight,
+                {
+                  "aria-hidden": "true",
+                  className: "size-4 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100 rtl:rotate-180"
+                }
+              )
+            ]
+          },
+          option.id
+        );
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("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__ */ (0, import_jsx_runtime5.jsx)("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__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react3.Pencil, { "aria-hidden": "true", className: "size-4" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "input",
+          {
+            "aria-label": "Other response",
+            autoComplete: "off",
+            className: "h-8 min-w-0 flex-1 bg-transparent px-1 text-sm text-foreground outline-none placeholder:text-muted-foreground",
+            disabled: isBusy || !onSubmit,
+            maxLength: 2e3,
+            onChange: (event) => updateCustomText(event.target.value),
+            onKeyDown: (event) => {
+              if (event.key === "Enter" && !event.nativeEvent.isComposing && draft.customText.trim()) {
+                event.preventDefault();
+                completeStep(drafts);
+              }
+            },
+            placeholder: "Other\u2026",
+            value: draft.customText
+          }
+        ),
+        draft.customText.trim() ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "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",
+            disabled: isBusy || !onSubmit,
+            onClick: () => completeStep(drafts),
+            type: "button",
+            children: isLastQuestion ? "Submit" : "Next"
+          }
+        ) : null
+      ] })
+    ] }),
+    error ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "text-sm text-destructive", role: "alert", children: error }) : null
+  ] });
+}
+
+// src/ui/agent-chat-context-compression-row.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function compressionPresentation(part) {
+  if (part.status === "failed") {
+    return { label: "Could not compact message history", status: "failed" };
+  }
+  if (part.status === "completed") {
+    return { label: "Compacted message history", status: "completed" };
+  }
+  return { label: "Compacting message history", status: "running" };
+}
+function AgentChatContextCompressionRow({
+  className,
+  part
+}) {
+  const presentation = compressionPresentation(part);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "div",
+    {
+      "aria-live": "polite",
+      className: cn("a24-context-compression-row", className),
+      "data-agents24-context-compression": "",
+      "data-status": part.status,
+      role: "status",
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "a24-tool-trigger-row", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime6.jsx)("span", { className: cn(
+        "a24-tool-trigger__label",
+        presentation.status === "running" && "a24-tool-shimmer"
+      ), children: presentation.label }) }) })
+    }
+  );
+}
+
+// src/ui/message-response.tsx
+var React5 = __toESM(require("react"), 1);
+var import_streamdown = require("streamdown");
+
+// src/active-content.ts
+var CHAT_MARKDOWN_HARDEN_OPTIONS = Object.freeze({
+  allowDataImages: false,
+  allowedImagePrefixes: [],
+  allowedLinkPrefixes: ["*"],
+  allowedProtocols: [],
+  defaultOrigin: void 0,
+  imageBlockPolicy: "text-only",
+  linkBlockPolicy: "text-only"
+});
+function safeChatMarkdownHref(value) {
+  if (!value) return void 0;
+  if (value.startsWith("#")) return value;
+  try {
+    const url = new URL(value);
+    return url.protocol === "https:" || url.protocol === "http:" ? url.href : void 0;
+  } catch {
+    return void 0;
+  }
+}
+
+// src/ui/message-response.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function SafeMarkdownLink({ children, href, ...props }) {
   const domProps = { ...props };
   delete domProps.node;
   const safeHref = safeChatMarkdownHref(href);
-  if (!safeHref) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children });
-  if (safeHref.startsWith("#")) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("a", { ...domProps, href: safeHref, children });
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("a", { ...domProps, href: safeHref, rel: "noopener noreferrer", target: "_blank", children });
+  if (!safeHref) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children });
+  if (safeHref.startsWith("#")) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("a", { ...domProps, href: safeHref, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("a", { ...domProps, href: safeHref, rel: "noopener noreferrer", target: "_blank", children });
 }
 function BlockedMarkdownImage({ alt }) {
-  return alt ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "aria-label": `Image blocked: ${alt}`, role: "img", children: alt }) : null;
+  return alt ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "aria-label": `Image blocked: ${alt}`, role: "img", children: alt }) : null;
 }
 var BLOCK_MARKDOWN_TAGS = /* @__PURE__ */ new Set([
   "blockquote",
@@ -992,7 +1530,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 (!React3.isValidElement(child)) {
+  if (!React5.isValidElement(child)) {
     return false;
   }
   if (typeof child.type === "string" && BLOCK_MARKDOWN_TAGS.has(child.type)) {
@@ -1002,7 +1540,7 @@ function hasBlockMarkdownChild(child) {
   if (BLOCK_MARKDOWN_TAGS.has(props.node?.tagName || "") || isMultilineCodeNode(props.node)) {
     return true;
   }
-  return React3.Children.toArray(props.children).some(hasBlockMarkdownChild);
+  return React5.Children.toArray(props.children).some(hasBlockMarkdownChild);
 }
 function MessageMarkdownParagraph({
   children,
@@ -1010,17 +1548,17 @@ function MessageMarkdownParagraph({
 }) {
   const domProps = { ...props };
   delete domProps.node;
-  const childArray = React3.Children.toArray(children).filter(
+  const childArray = React5.Children.toArray(children).filter(
     (child) => child !== null && child !== ""
   );
-  const isImageOnly = childArray.length === 1 && React3.isValidElement(childArray[0]) && childArray[0].props.node?.tagName === "img";
+  const isImageOnly = childArray.length === 1 && React5.isValidElement(childArray[0]) && childArray[0].props.node?.tagName === "img";
   if (isImageOnly) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children });
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children });
   }
   if (childArray.some(hasBlockMarkdownChild)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ...domProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ...domProps, children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { ...domProps, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { ...domProps, children });
 }
 var MESSAGE_RESPONSE_COMPONENTS = {
   a: SafeMarkdownLink,
@@ -1040,7 +1578,7 @@ var MESSAGE_RESPONSE_REHYPE_PLUGINS = [
     ]
   ] : []
 ];
-var MessageResponse = React3.memo(
+var MessageResponse = React5.memo(
   ({
     children,
     className,
@@ -1058,14 +1596,14 @@ var MessageResponse = React3.memo(
       maxCatchupChars: 32,
       text
     });
-    const streamdownComponents = React3.useMemo(
+    const streamdownComponents = React5.useMemo(
       () => ({ ...MESSAGE_RESPONSE_COMPONENTS, ...components }),
       [components]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       import_streamdown.Streamdown,
       {
-        className: cn("size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0", className),
+        className: cn("a24-message-response", className),
         components: streamdownComponents,
         rehypePlugins: rehypePlugins || MESSAGE_RESPONSE_REHYPE_PLUGINS,
         ...props,
@@ -1085,6 +1623,7 @@ function hitlActionLabel(part, action) {
   if (action === "approve") return ["tool_review", "app_data_permission"].includes(part.hitlKind) ? "Allow once" : "Approve";
   if (action === "reject") return ["tool_review", "app_data_permission"].includes(part.hitlKind) ? "Don\u2019t allow" : "Reject";
   if (action === "connect") return "Connect";
+  if (action === "respond") return "Submit";
   return "Skip";
 }
 function hitlTitle(part) {
@@ -1112,102 +1651,424 @@ function resolvedHitlLabel(part) {
   }[outcome] || outcome.replace(/_/g, " ");
 }
 
-// src/ui/agent-response-timeline.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-function optionalString2(value) {
-  return typeof value === "string" && value.trim() ? value.trim() : null;
-}
-function presentationValue(part, key) {
+// src/ui/tool-sessions.tsx
+var React6 = __toESM(require("react"), 1);
+var import_lucide_react4 = require("lucide-react");
+var import_thinking_orbs = require("thinking-orbs");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function agentChatToolLabel(part) {
   const presentation = part.presentation || {};
-  const snakeKey = key.replace(/[A-Z]/g, (letter) => `_${letter.toLowerCase()}`);
-  return optionalString2(presentation[key]) || optionalString2(presentation[snakeKey]);
+  return optionalText(presentation.activity) || optionalText(presentation.title) || optionalText(part.displayName) || optionalText(part.summary) || optionalText(part.toolName) || "Tool activity";
 }
-function groupKey(part) {
-  return presentationValue(part, "groupKey");
+function isAgentChatSubagent(part) {
+  const sourceKind = String(part.sourceKind || "").trim().toLowerCase();
+  return sourceKind === "agent" || sourceKind === "agent_call" || Boolean(part.presentation.childRun);
 }
-function groupLabel(part) {
-  return presentationValue(part, "groupLabel") || toolLabel(part);
+function isAgentChatToolRunning(part) {
+  return part.state === "input-available" || part.state === "input-streaming";
 }
-function toolLabel(part) {
-  return presentationValue(part, "activity") || presentationValue(part, "title") || part.toolName || "Tool activity";
+function latestRunningAgentChatToolId(parts) {
+  const active = [...parts].reverse().find(isAgentChatToolRunning);
+  return active?.toolCallId || active?.id || null;
 }
-function toolDetail(part) {
-  return presentationValue(part, "detail") || part.errorText || null;
+function partitionAgentChatToolTimeline(parts, toolViewMode = "closed") {
+  const segments = [];
+  let index = 0;
+  while (index < parts.length) {
+    const part = parts[index];
+    const leadingModelTurn = part.kind === "model-turn" && parts[index + 1]?.kind === "tool" && !isAgentChatSubagent(parts[index + 1]) ? part : void 0;
+    if (leadingModelTurn) index += 1;
+    const candidate = parts[index];
+    if (candidate.kind !== "tool") {
+      segments.push({ kind: "part", part: candidate });
+      index += 1;
+      continue;
+    }
+    if (isAgentChatSubagent(candidate)) {
+      segments.push({ kind: "subagent", part: candidate });
+      index += 1;
+      continue;
+    }
+    const streak = [];
+    while (index < parts.length) {
+      const candidate2 = parts[index];
+      if (candidate2.kind !== "tool" || isAgentChatSubagent(candidate2)) break;
+      streak.push(candidate2);
+      index += 1;
+    }
+    const modelTurn = parts[index]?.kind === "model-turn" ? parts[index] : void 0;
+    if (modelTurn) index += 1;
+    if (toolViewMode === "expanded") {
+      if (leadingModelTurn) segments.push({ kind: "part", part: leadingModelTurn });
+      segments.push(...streak.map((toolPart) => ({ kind: "tool", part: toolPart })));
+      if (modelTurn) segments.push({ kind: "part", part: modelTurn });
+    } else if (streak.length === 1 && !modelTurn && !leadingModelTurn) {
+      segments.push({ kind: "tool", part: streak[0] });
+    } else {
+      segments.push({
+        kind: "tool-session",
+        parts: streak,
+        ...leadingModelTurn ? { leadingModelTurn } : {},
+        ...modelTurn ? { modelTurn } : {}
+      });
+    }
+  }
+  return segments;
 }
-function isActiveTool(part, activeToolId) {
-  return part.id === activeToolId || part.toolCallId === activeToolId || part.state === "input-available" || part.state === "input-streaming";
+function optionalText(value) {
+  return typeof value === "string" && value.trim() ? value.trim() : null;
 }
-function Shimmer({ children, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: cn("inline-block animate-pulse", className), children });
+function isActive(part, activeToolId) {
+  return Boolean(activeToolId && (part.id === activeToolId || part.toolCallId === activeToolId));
 }
-function CompactTask({
-  children,
-  defaultOpen = false,
-  detail,
-  error,
+function ToolActivityReel({
+  announce = true,
+  initialLabel,
+  initialShownAt,
+  label
+}) {
+  const initial = initialLabel && initialLabel !== label ? initialLabel : label;
+  const parsedInitialShownAt = initialShownAt ? Date.parse(initialShownAt) : Number.NaN;
+  const [displayed, setDisplayed] = React6.useState(initial);
+  const [previous, setPrevious] = React6.useState(null);
+  const displayedRef = React6.useRef(initial);
+  const latestRef = React6.useRef(label);
+  const shownAtRef = React6.useRef(Number.isFinite(parsedInitialShownAt) ? parsedInitialShownAt : Date.now());
+  React6.useEffect(() => {
+    latestRef.current = label;
+    if (displayedRef.current === label) return;
+    const showLatest = () => {
+      const next = latestRef.current;
+      if (displayedRef.current === next) return;
+      const old = displayedRef.current;
+      displayedRef.current = next;
+      shownAtRef.current = Date.now();
+      setPrevious(old);
+      setDisplayed(next);
+    };
+    const remaining = Math.max(0, 500 - (Date.now() - shownAtRef.current));
+    if (remaining === 0) {
+      showLatest();
+      return;
+    }
+    const timer = window.setTimeout(showLatest, remaining);
+    return () => window.clearTimeout(timer);
+  }, [label]);
+  React6.useEffect(() => {
+    if (!previous) return;
+    const timer = window.setTimeout(() => setPrevious(null), 200);
+    return () => window.clearTimeout(timer);
+  }, [previous]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "a24-tool-reel", "aria-live": announce ? "polite" : "off", children: [
+    previous ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "aria-hidden": "true", className: "a24-tool-reel__previous", children: previous }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: previous ? "a24-tool-reel__current" : void 0, children: displayed })
+  ] });
+}
+function ToolActivityOrb({ label }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "a24-tool-orb", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_thinking_orbs.ThinkingOrb, { "aria-label": label || "Working", size: 20, speed: 0.8, state: "searching" }) });
+}
+function AgentChatActivityRow({
   label,
-  loading
+  modelTurnId,
+  onSelect
 }) {
-  const [open, setOpen] = React4.useState(defaultOpen);
-  const expandable = Boolean(children || detail);
-  const content = loading ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Shimmer, { children: label }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: label });
-  if (!expandable) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: cn("flex min-w-0 items-center gap-1.5 text-sm", error ? "text-destructive" : "text-muted-foreground"), children: content });
+  const content = /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ToolActivityOrb, { label }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "a24-tool-trigger__label a24-tool-shimmer", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ToolActivityReel, { label }) })
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "a24-tool-trigger-row", "data-agents24-model-turn": modelTurnId, role: "status", children: onSelect ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { className: "a24-tool-trigger a24-tool-trigger--root a24-tool-trigger--active", onClick: onSelect, type: "button", children: content }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "a24-tool-trigger a24-tool-trigger--root a24-tool-trigger--active", children: content }) });
+}
+function AgentChatModelTurnRow({ part }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AgentChatActivityRow, { label: "Planning next moves", modelTurnId: part.modelTurnId });
+}
+function AgentChatNodeActivityRow({
+  onSelect,
+  part
+}) {
+  const [open, setOpen] = React6.useState(false);
+  const contentId = React6.useId();
+  const running = part.status === "running";
+  const failed = part.status === "failed";
+  const failureMessage = part.failure?.message || "The node could not complete the request.";
+  const triggerClassName = cn(
+    "a24-tool-trigger",
+    "a24-tool-trigger--root",
+    !running && "a24-tool-trigger--without-orb",
+    running && "a24-tool-trigger--active",
+    failed && "a24-tool-trigger--error"
+  );
+  const label = running ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "a24-tool-shimmer", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ToolActivityReel, { label: part.label }) }) : part.label;
+  if (!failed) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "a24-tool-trigger-row", role: "status", children: onSelect ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("button", { className: triggerClassName, onClick: () => onSelect(part), type: "button", children: [
+      running ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ToolActivityOrb, { label: part.label }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "a24-tool-trigger__label", children: label })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: triggerClassName, children: [
+      running ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ToolActivityOrb, { label: part.label }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "a24-tool-trigger__label", children: label })
+    ] }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "w-full", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "a24-tool-disclosure", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "a24-tool-trigger-row", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "button",
       {
+        "aria-controls": contentId,
         "aria-expanded": open,
-        className: cn(
-          "group flex min-w-0 items-center gap-1.5 rounded-md px-0 py-0.5 text-left text-sm transition-colors hover:text-foreground",
-          error ? "text-destructive" : "text-muted-foreground"
-        ),
-        onClick: () => setOpen((value) => !value),
+        className: triggerClassName,
+        onClick: () => {
+          onSelect?.(part);
+          setOpen((value) => !value);
+        },
         type: "button",
         children: [
-          content,
-          open ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react3.ChevronDown, { className: "size-3" }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react3.ChevronRight, { className: "size-3 opacity-70" })
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "a24-tool-trigger__label", children: label }),
+          open ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react4.ChevronDown, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react4.ChevronRight, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" })
         ]
       }
-    ),
-    open ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mt-1 pl-4 text-sm text-muted-foreground", children: [
-      detail ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { children: detail }) : null,
-      children
-    ] }) : null
+    ) }),
+    open ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "a24-tool-detail a24-tool-detail--error", id: contentId, children: failureMessage }) : null
   ] });
 }
-function ToolPartRow({
-  activeToolId,
-  part
+function toolRowLabel(part) {
+  const label = agentChatToolLabel(part);
+  return isAgentChatToolRunning(part) ? label : label.replace(/^(?:running|ran)\s+/i, "");
+}
+function ToolDisclosure({
+  children,
+  error,
+  label,
+  loading,
+  onExpandedChange,
+  onSelect,
+  part,
+  root,
+  showOrb,
+  statusLabel,
+  accessory
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { "data-agents24-tool-part": part.type, "data-state": part.state, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    CompactTask,
+  const [open, setOpen] = React6.useState(false);
+  const contentId = React6.useId();
+  const expandable = React6.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__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "a24-tool-trigger-row", children: [
+      onSelect && part ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("button", { className: triggerClassName, onClick: () => onSelect(part), type: "button", children: [
+        showOrb ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ToolActivityOrb, { label: statusLabel }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "a24-tool-trigger__label", children: label })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: triggerClassName, children: [
+        showOrb ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ToolActivityOrb, { label: statusLabel }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "a24-tool-trigger__label", children: label })
+      ] }),
+      accessory
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "a24-tool-disclosure", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "a24-tool-trigger-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        "button",
+        {
+          "aria-controls": contentId,
+          "aria-expanded": open,
+          className: 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"),
+          onClick: () => {
+            const nextOpen = !open;
+            setOpen(nextOpen);
+            if (part) onSelect?.(part);
+            onExpandedChange?.(nextOpen, part);
+          },
+          type: "button",
+          children: [
+            showOrb ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ToolActivityOrb, { label: statusLabel }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "a24-tool-trigger__label", children: label }),
+            open ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react4.ChevronDown, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react4.ChevronRight, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" })
+          ]
+        }
+      ),
+      accessory
+    ] }),
+    open ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "a24-tool-disclosure__content", id: contentId, children }) : null
+  ] });
+}
+function ToolLabel({ active, label, part, slots }) {
+  const rendered = slots?.renderToolLabel?.({ isActive: active, label, part }) ?? label;
+  return active ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "a24-tool-shimmer", children: rendered }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: rendered });
+}
+function ToolList({ children }) {
+  const listRef = React6.useRef(null);
+  const [fades, setFades] = React6.useState({ bottom: false, top: false });
+  const updateFades = React6.useCallback(() => {
+    const list = listRef.current;
+    if (!list) return;
+    const next = {
+      bottom: list.scrollTop + list.clientHeight < list.scrollHeight - 1,
+      top: list.scrollTop > 1
+    };
+    setFades((current) => current.bottom === next.bottom && current.top === next.top ? current : next);
+  }, []);
+  React6.useEffect(() => {
+    updateFades();
+    const list = listRef.current;
+    if (!list || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(updateFades);
+    observer.observe(list);
+    return () => observer.disconnect();
+  }, [children, updateFades]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "div",
     {
-      defaultOpen: part.state === "output-error",
-      detail: toolDetail(part),
-      error: part.state === "output-error",
-      label: toolLabel(part),
-      loading: isActiveTool(part, activeToolId)
+      className: "a24-tool-list-frame",
+      "data-scroll-fade-bottom": fades.bottom ? "" : void 0,
+      "data-scroll-fade-top": fades.top ? "" : void 0,
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "a24-tool-list", onScroll: updateFades, ref: listRef, role: "list", children })
     }
-  ) });
+  );
 }
-function ToolGroup({
+function AgentChatToolRow({
   activeToolId,
-  parts
+  part,
+  root = true,
+  showOrb,
+  slots
 }) {
-  const loading = parts.some((part) => isActiveTool(part, activeToolId));
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CompactTask, { label: groupLabel(parts[0]), loading, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "space-y-1", children: parts.map((part) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
-    "div",
+  const active = isActive(part, activeToolId);
+  const failed = part.state === "output-error";
+  const failureMessage = part.failure?.message || null;
+  const detail = failed ? failureMessage : optionalText(part.presentation.detail);
+  const hostDetails = failed ? null : slots?.renderToolDetails?.(part);
+  const context = { isActive: active, label: toolRowLabel(part), part };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { "data-agents24-tool-part": part.type, "data-state": part.state, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    ToolDisclosure,
     {
-      className: cn("text-sm", part.state === "output-error" ? "text-destructive" : "text-muted-foreground"),
+      error: failed,
+      accessory: slots?.renderToolAccessory?.(context),
+      label: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ToolLabel, { active, label: context.label, part, slots }),
+      loading: active,
+      onExpandedChange: slots?.onExpandedChange,
+      onSelect: slots?.onToolSelect,
+      part,
+      root,
+      showOrb: showOrb ?? active,
+      statusLabel: active ? context.label : void 0,
       children: [
-        isActiveTool(part, activeToolId) ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Shimmer, { children: toolLabel(part) }) : toolLabel(part),
-        toolDetail(part) ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ml-1 text-xs text-muted-foreground/75", children: toolDetail(part) }) : null
+        detail ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: cn("a24-tool-detail", failed && "a24-tool-detail--error"), children: detail }) : null,
+        hostDetails
       ]
-    },
-    part.id
-  )) }) });
+    }
+  ) });
+}
+function sessionLabel(parts, visiblePart, running) {
+  const label = agentChatToolLabel(visiblePart);
+  const terminalLabel = label.replace(/^(?:running|ran)\s+/i, "");
+  return running ? label : `Ran ${terminalLabel} + ${parts.length - 1} more`;
+}
+function AgentChatToolSession({
+  activeToolId,
+  isLatestActivity = true,
+  isLive = false,
+  leadingModelTurn,
+  modelTurn,
+  parts,
+  slots
+}) {
+  const presentedLiveRef = React6.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__ */ (0, import_jsx_runtime8.jsx)(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 ? agentChatToolLabel(visiblePart) : sessionLabel(parts, visiblePart, running);
+  const labelContent = presentedLiveRef.current ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: presentingActivity ? "a24-tool-shimmer" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ToolActivityReel, { initialLabel: leadingModelTurn ? "Planning next moves" : void 0, initialShownAt: leadingModelTurn?.timestamp, label }) }) : label;
+  const context = { isActive: presentingActivity, label, part: visiblePart };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    ToolDisclosure,
+    {
+      accessory: slots?.renderToolAccessory?.(context),
+      error: failed,
+      label: labelContent,
+      loading: presentingActivity,
+      onExpandedChange: slots?.onExpandedChange,
+      part: visiblePart,
+      root: true,
+      showOrb: isLive && isLatestActivity,
+      statusLabel: planning ? "Planning next moves" : label,
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ToolList, { children: parts.map((part) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { role: "listitem", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AgentChatToolRow, { activeToolId, part, root: false, showOrb: false, slots }) }, part.id)) })
+    }
+  );
+}
+function childLabel(child) {
+  return optionalText(child.title) || optionalText(child.toolName) || "Tool";
+}
+function subagentLabel(part) {
+  const childRun = part.presentation.childRun;
+  const children = part.presentation.childTools || [];
+  const name = optionalText(childRun?.agentName) || optionalText(part.displayName) || "agent";
+  const status = String(childRun?.status || (isAgentChatToolRunning(part) ? "running" : "completed")).toLowerCase();
+  const activeChild = children.find((child) => child.id === part.presentation.activeChildToolId) || [...children].reverse().find((child) => child.status === "running") || children[children.length - 1];
+  if (status === "running" && activeChild) return { label: `Agent ${name}, running ${childLabel(activeChild)}`, running: true };
+  if (status === "running") return { label: `Agent ${name}, starting`, running: true };
+  if (status === "failed" || part.state === "output-error") return { label: `Agent ${name}, failed`, running: false };
+  if (status === "cancelled" || status === "canceled" || part.state === "cancelled") return { label: `Agent ${name}, cancelled`, running: false };
+  if (status === "paused") return { label: `Agent ${name}, paused`, running: false };
+  return { label: `Agent ${name}, ran ${children.length} ${children.length === 1 ? "tool" : "tools"}`, running: false };
+}
+function AgentChatSubagentGroup({ isLatestActivity = true, isLive = false, part, slots }) {
+  const presentedLiveRef = React6.useRef(false);
+  if (isLive && isLatestActivity) presentedLiveRef.current = true;
+  const children = part.presentation.childTools || [];
+  const state = subagentLabel(part);
+  const childRunStatus = String(part.presentation.childRun?.status || "").toLowerCase();
+  const failed = part.state === "output-error" || part.state === "cancelled" || childRunStatus === "failed" || childRunStatus === "cancelled" || childRunStatus === "canceled";
+  const hostDetails = failed ? null : slots?.renderToolDetails?.(part);
+  const failureMessage = part.failure?.message || null;
+  const presentingActivity = isLatestActivity && state.running;
+  const labelContent = presentedLiveRef.current ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: presentingActivity ? "a24-tool-shimmer" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ToolActivityReel, { label: state.label }) }) : state.label;
+  const context = { isActive: presentingActivity, label: state.label, part };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    ToolDisclosure,
+    {
+      accessory: slots?.renderToolAccessory?.(context),
+      error: failed,
+      label: labelContent,
+      loading: presentingActivity,
+      onExpandedChange: slots?.onExpandedChange,
+      part,
+      root: true,
+      showOrb: isLive && isLatestActivity,
+      statusLabel: state.label,
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(ToolList, { children: [
+        children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: cn("a24-child-tool", child.status === "failed" && "a24-child-tool--error"), role: "listitem", children: slots?.renderChildTool?.(child, part) ?? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: cn(isLive && isLatestActivity && child.status === "running" && "a24-tool-shimmer"), children: childLabel(child) }),
+          child.detail ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "a24-child-tool__detail", children: child.detail }) : null
+        ] }) }, child.id)),
+        failureMessage ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "a24-tool-detail a24-tool-detail--error", children: failureMessage }) : null,
+        hostDetails
+      ] })
+    }
+  );
+}
+
+// src/ui/agent-response-timeline.tsx
+var import_jsx_runtime9 = require("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__ */ (0, import_jsx_runtime9.jsx)("span", { className: cn("inline-block animate-pulse", className), children });
+}
+function AgentChatToolPart({
+  activeToolId,
+  part
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AgentChatToolRow, { activeToolId, part });
+}
+function AgentChatToolGroup({
+  activeToolId,
+  parts
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AgentChatToolSession, { activeToolId, parts });
 }
 function HitlPartRow({
   getHitlActionState,
@@ -1216,22 +2077,40 @@ function HitlPartRow({
   part
 }) {
   const state = getHitlActionState?.(part);
-  const [comment, setComment] = React4.useState("");
+  const [comment, setComment] = React7.useState("");
   const presentation = part.presentation || {};
   const requireComment = presentation.require_comment === true;
   const isTerminal = part.status !== "pending";
-  const resolvedRef = React4.useRef(null);
-  const wasTerminal = React4.useRef(isTerminal);
-  React4.useEffect(() => {
+  const resolvedRef = React7.useRef(null);
+  const wasTerminal = React7.useRef(isTerminal);
+  React7.useEffect(() => {
     if (isTerminal && !wasTerminal.current) resolvedRef.current?.focus();
     wasTerminal.current = isTerminal;
   }, [isTerminal]);
+  if (part.hitlKind === "user_input") {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      AskUserInteraction,
+      {
+        error: state?.error,
+        isBusy: isLoading || state?.status === "resuming",
+        onSubmit: onHitlAction ? (answers) => onHitlAction(part, {
+          action: "respond",
+          answers: answers.map((answer) => ({
+            question_id: answer.questionId,
+            selected_option_ids: answer.selectedOptionIds,
+            ...answer.customText ? { custom_text: answer.customText } : {}
+          }))
+        }) : void 0,
+        part
+      }
+    );
+  }
   if (isTerminal) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime9.jsx)("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__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "a24-hitl space-y-2.5 px-1 py-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "a24-hitl__title text-sm font-medium text-foreground text-pretty", children: hitlTitle(part) }),
-    requireComment ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "a24-hitl space-y-2.5 px-1 py-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "a24-hitl__title text-sm font-medium text-foreground text-pretty", children: hitlTitle(part) }),
+    requireComment ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "textarea",
       {
         "aria-label": "Approval comment",
@@ -1243,8 +2122,8 @@ function HitlPartRow({
         value: comment
       }
     ) : null,
-    state?.error ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "a24-hitl__error text-sm text-destructive", children: state.error }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "a24-hitl__actions flex flex-wrap items-center gap-1.5", children: part.allowedActions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    state?.error ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "a24-hitl__error text-sm text-destructive", children: state.error }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "a24-hitl__actions flex flex-wrap items-center gap-1.5", children: part.allowedActions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "button",
       {
         "aria-label": hitlActionLabel(part, action),
@@ -1254,7 +2133,10 @@ function HitlPartRow({
         ),
         "data-primary": action === "approve" || action === "connect" ? "" : void 0,
         disabled: !onHitlAction || isLoading || state?.status === "connecting" || state?.status === "resuming" || requireComment && !comment.trim(),
-        onClick: () => onHitlAction?.(part, action, comment.trim() || void 0),
+        onClick: () => onHitlAction?.(part, {
+          action,
+          ...comment.trim() ? { comment: comment.trim() } : {}
+        }),
         type: "button",
         children: hitlActionLabel(part, action)
       },
@@ -1262,28 +2144,45 @@ function HitlPartRow({
     )) })
   ] });
 }
-function DefaultPartRow({
+function AgentChatPart({
   activeToolId,
   getHitlActionState,
   isLoading,
+  isTextStreaming,
   message,
   onHitlAction,
-  part
+  part,
+  responseProps,
+  toolSlots
 }) {
-  if (part.kind === "text") return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MessageResponse, { children: part.text });
-  if (part.kind === "tool") return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ToolPartRow, { activeToolId, part });
+  if (part.kind === "text") {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      MessageResponse,
+      {
+        ...responseProps,
+        streaming: isTextStreaming ?? Boolean(isLoading && part.raw?.status === "streaming"),
+        streamingId: part.id,
+        children: part.text
+      }
+    );
+  }
+  if (part.kind === "tool") return isAgentChatSubagent(part) ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AgentChatSubagentGroup, { part, slots: toolSlots }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AgentChatToolRow, { activeToolId, part, slots: toolSlots });
+  if (part.kind === "model-turn") return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AgentChatModelTurnRow, { part });
   if (part.kind === "reasoning") {
     const label = part.text || part.label || "Thinking";
-    return part.status === "running" || part.status === "streaming" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Shimmer, { className: "text-sm text-muted-foreground", children: label }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "text-sm text-muted-foreground", children: label });
+    return part.status === "running" || part.status === "streaming" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Shimmer, { className: "text-sm text-muted-foreground", children: label }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-sm text-muted-foreground", children: label });
+  }
+  if (part.kind === "context-compression") {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AgentChatContextCompressionRow, { part });
   }
   if (part.kind === "ui-blocks") {
     if (part.state === "output-error") {
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "text-sm text-destructive", children: part.errorText || "Failed to render UI content." });
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "a24-timeline-error text-sm text-destructive", children: part.errorText || "Failed to render UI content." });
     }
-    return part.bundle ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SafeUiBlocks, { bundle: part.bundle }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CompactTask, { label: part.state === "input-streaming" ? "Rendering UI block" : "Rendered UI block", loading: part.state === "input-streaming" });
+    return part.bundle ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SafeUiBlocks, { bundle: part.bundle }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-sm text-muted-foreground", children: part.state === "input-streaming" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Shimmer, { children: "Rendering UI block" }) : "Rendered UI block" });
   }
   if (part.kind === "hitl") {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       HitlPartRow,
       {
         getHitlActionState,
@@ -1293,18 +2192,18 @@ function DefaultPartRow({
       }
     );
   }
-  if (part.kind === "error") return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "text-sm text-destructive", role: "alert", children: part.errorText });
+  if (part.kind === "error") return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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__ */ (0, import_jsx_runtime6.jsx)("a", { className: "a24-source-link", href, rel: "noopener noreferrer", target: "_blank", children: part.title }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "a24-source-link", children: part.title });
+    return href ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("a", { className: "a24-source-link", href, rel: "noopener noreferrer", target: "_blank", children: part.title }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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__ */ (0, import_jsx_runtime6.jsx)("a", { className: "a24-citation", href, rel: "noopener noreferrer", target: "_blank", children: label }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "a24-citation", children: label });
+    return href ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("a", { className: "a24-citation", href, rel: "noopener noreferrer", target: "_blank", children: label }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "a24-citation", children: label });
   }
-  if (part.kind === "attachment") return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "a24-output-attachment", children: part.attachment.filename || "Attachment" });
-  if (part.kind === "data") return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { "data-agents24-data-part": part.name, className: "hidden", children: message.id });
+  if (part.kind === "attachment") return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "a24-output-attachment", children: part.attachment.filename || "Attachment" });
+  if (part.kind === "data") return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { "data-agents24-data-part": part.name, className: "hidden", children: message.id });
   return null;
 }
 function safeExternalUrl(value) {
@@ -1318,28 +2217,28 @@ function safeExternalUrl(value) {
 }
 function SafeUiBlocks({ bundle }) {
   const rows = Array.isArray(bundle.rows) ? bundle.rows : [];
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("section", { "aria-label": typeof bundle.title === "string" ? bundle.title : "Agent result", className: "a24-ui-blocks", children: [
-    typeof bundle.title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h3", { children: bundle.title }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("section", { "aria-label": typeof bundle.title === "string" ? bundle.title : "Agent result", className: "a24-ui-blocks", children: [
+    typeof bundle.title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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__ */ (0, import_jsx_runtime6.jsx)("div", { className: "a24-ui-blocks__row", children: blocks.map((rawBlock, blockIndex) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("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__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "a24-ui-block", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h4", { children: title }),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "a24-ui-table-scroll", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("table", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("tr", { children: block.columns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("th", { children: String(column) }, index)) }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("tbody", { children: block.rows.map((rawCells, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("tr", { children: (Array.isArray(rawCells) ? rawCells : []).map((cell, cellIndex) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("td", { children: String(cell) }, cellIndex)) }, index)) })
+          return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "a24-ui-block", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h4", { children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "a24-ui-table-scroll", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("table", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("tr", { children: block.columns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("th", { children: String(column) }, index)) }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("tbody", { children: block.rows.map((rawCells, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("tr", { children: (Array.isArray(rawCells) ? rawCells : []).map((cell, cellIndex) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("td", { children: String(cell) }, cellIndex)) }, index)) })
             ] }) })
           ] }, String(block.id || blockIndex));
         }
         const value = block.value ?? block.text ?? "";
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "a24-ui-block", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h4", { children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: String(value) })
+        return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "a24-ui-block", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h4", { children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { children: String(value) })
         ] }, String(block.id || blockIndex));
       }) }, `row-${rowIndex}`);
     })
@@ -1349,53 +2248,81 @@ function AgentResponseTimeline({
   getHitlActionState,
   isLoading = false,
   message,
+  nodeActivityMode = "default",
   onHitlAction,
-  renderPart
+  parts: displayParts,
+  responseProps,
+  toolSlots,
+  toolViewMode = "closed"
 }) {
-  const parts = message.parts || [];
-  const activeToolId = [...parts].reverse().find((part) => part.kind === "tool" && (part.state === "input-available" || part.state === "input-streaming"))?.id;
+  const parts = (displayParts || message.parts || []).filter((part) => (part.kind !== "tool" || !isInternalAskUserTool(part)) && (part.kind !== "model-turn" || part.turnKind === "agent") && (part.kind !== "node-activity" || nodeActivityMode === "all" || nodeActivityMode === "default" && part.defaultChatVisible));
+  const toolParts = parts.filter((part) => part.kind === "tool");
+  const activeToolId = latestRunningAgentChatToolId(toolParts);
+  const activeTextPartId = getActiveStreamingTextPartId(
+    { ...message, parts: [...parts] },
+    isLoading ? message.id : null
+  );
   const rendered = [];
-  let index = 0;
-  while (index < parts.length) {
-    const part = parts[index];
-    if (part.kind === "tool" && groupKey(part)) {
-      const key = groupKey(part);
-      const group = [];
-      while (index < parts.length) {
-        const candidate = parts[index];
-        if (candidate.kind !== "tool" || groupKey(candidate) !== key) break;
-        group.push(candidate);
-        index += 1;
-      }
-      rendered.push(group.length === 1 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ToolPartRow, { activeToolId, part: group[0] }, group[0].id) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ToolGroup, { activeToolId, parts: group }, `tool-group-${key}-${group[0].id}`));
+  let activeActivityClaimed = false;
+  const segments = partitionAgentChatToolTimeline(parts, toolViewMode);
+  for (const [segmentIndex, segment] of segments.entries()) {
+    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__ */ (0, import_jsx_runtime9.jsx)(AgentChatToolRow, { activeToolId, part: segment.part, showOrb, slots: toolSlots }, segment.part.id));
+      continue;
+    }
+    if (segment.kind === "tool-session") {
+      rendered.push(/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(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__ */ (0, import_jsx_runtime9.jsx)(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__ */ (0, import_jsx_runtime9.jsx)(AgentChatActivityRow, { 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__ */ (0, import_jsx_runtime9.jsx)(AgentChatActivityRow, { label: part.label }, key) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AgentChatNodeActivityRow, { part }, part.id)
+      );
       continue;
     }
     rendered.push(
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(React4.Fragment, { children: renderPart ? renderPart(part, message) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-        DefaultPartRow,
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(React7.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        AgentChatPart,
         {
           activeToolId,
           getHitlActionState,
           isLoading,
+          isTextStreaming: part.kind === "text" && part.id === activeTextPartId,
           message,
           onHitlAction,
-          part
+          part,
+          responseProps,
+          toolSlots
         }
       ) }, part.id)
     );
-    index += 1;
   }
   if (rendered.length === 0 && message.content) {
-    rendered.push(/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MessageResponse, { children: message.content }, `${message.id}-fallback`));
+    rendered.push(/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MessageResponse, { children: message.content }, `${message.id}-fallback`));
   }
   if (rendered.length === 0 && isLoading) {
-    rendered.push(/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "text-sm text-muted-foreground", children: "Thinking" }, `${message.id}-thinking`));
+    rendered.push(/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AgentChatActivityRow, { label: "Thinking" }, `${message.id}-active-activity`));
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "space-y-3", children: rendered });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "space-y-3", children: rendered });
 }
 
 // src/ui/agent-chat-message.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("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) {
@@ -1408,19 +2335,19 @@ function AgentChatUserMessageContent({
   showLessLabel = "Show less",
   showMoreLabel = "Show more"
 }) {
-  const [isExpanded, setIsExpanded] = React5.useState(false);
-  const contentId = React5.useId();
+  const [isExpanded, setIsExpanded] = React8.useState(false);
+  const contentId = React8.useId();
   const shouldCollapse = shouldCollapseUserMessage(content, collapseThreshold);
-  const Icon = isExpanded ? import_lucide_react4.ChevronUp : import_lucide_react4.ChevronDown;
+  const Icon = isExpanded ? import_lucide_react5.ChevronUp : import_lucide_react5.ChevronDown;
   const clampedStyle = shouldCollapse && !isExpanded ? {
     WebkitBoxOrient: "vertical",
     WebkitLineClamp: Math.max(1, collapsedLines),
     display: "-webkit-box",
     overflow: "hidden"
   } : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex min-w-0 flex-col gap-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { id: contentId, className: "min-w-0", style: clampedStyle, children: content }),
-    shouldCollapse ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex min-w-0 flex-col gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { id: contentId, className: "min-w-0", style: clampedStyle, children: content }),
+    shouldCollapse ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       "button",
       {
         "aria-controls": contentId,
@@ -1433,7 +2360,7 @@ function AgentChatUserMessageContent({
         type: "button",
         children: [
           isExpanded ? showLessLabel : showMoreLabel,
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { "aria-hidden": "true", className: "size-4", strokeWidth: 2 })
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { "aria-hidden": "true", className: "size-4", strokeWidth: 2 })
         ]
       }
     ) : null
@@ -1441,6 +2368,7 @@ function AgentChatUserMessageContent({
 }
 function AgentChatMessage({
   actionHandlers,
+  additionalActions,
   actions,
   actionsClassName,
   className,
@@ -1448,9 +2376,10 @@ function AgentChatMessage({
   dir,
   getHitlActionState,
   message,
+  nodeActivityMode,
   onHitlAction,
+  Timeline = AgentResponseTimeline,
   renderAssistantContent,
-  renderPart,
   renderUserContent,
   showAssistantAttachments = false,
   streamingMessageId,
@@ -1465,9 +2394,17 @@ 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__ */ (0, import_jsx_runtime7.jsx)(AgentChatDefaultActions, { handlers: actionHandlers, message }) : null);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(ChatMessage, { className, dir, from: message.role, children: [
-    showAttachments ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChatAttachments, { className: "mb-2", dir, children: message.attachments?.map((attachment, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  const renderedActions = actions ?? (actionHandlers ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    AgentChatDefaultActions,
+    {
+      additionalActions,
+      dir,
+      handlers: actionHandlers,
+      message
+    }
+  ) : null);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(ChatMessage, { className, dir, from: message.role, children: [
+    showAttachments ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ChatAttachments, { className: "mb-2", dir, children: message.attachments?.map((attachment, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       ChatAttachment,
       {
         data: attachment,
@@ -1475,23 +2412,25 @@ function AgentChatMessage({
       },
       String(attachment.url || attachment.filename || index)
     )) }) : null,
-    shouldRenderContent ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    shouldRenderContent ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       ChatMessageContent,
       {
         className: cn(isAssistant ? "bg-transparent p-0" : void 0, contentClassName),
         dir,
+        from: message.role,
         children: [
-          isAssistant ? renderAssistantContent ? renderAssistantContent({ isStreaming, message }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            AgentResponseTimeline,
+          isAssistant ? renderAssistantContent ? renderAssistantContent({ isStreaming, message }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            Timeline,
             {
               getHitlActionState,
               isLoading: isStreaming,
               message,
+              nodeActivityMode,
               onHitlAction,
-              renderPart
+              parts: message.parts
             }
           ) : null,
-          !isAssistant ? renderUserContent ? renderUserContent({ message }) : resolvedUserContent ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          !isAssistant ? renderUserContent ? renderUserContent({ message }) : resolvedUserContent ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
             AgentChatUserMessageContent,
             {
               collapsedLines: userMessageCollapsedLines,
@@ -1504,16 +2443,117 @@ function AgentChatMessage({
         ]
       }
     ) : null,
-    renderedActions ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: cn(dir === "rtl" ? "mt-1 h-9 w-full translate-x-2" : "mt-1 h-9 w-full -translate-x-2", actionsClassName), children: renderedActions }) : null
+    renderedActions ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("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
+var React9 = __toESM(require("react"), 1);
+var import_jsx_runtime11 = require("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 = React9.useId();
+  const [open, setOpen] = React9.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__ */ (0, import_jsx_runtime11.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__ */ (0, import_jsx_runtime11.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__ */ (0, import_jsx_runtime11.jsxs)("svg", { "aria-hidden": "true", className: "a24-context-status__ring", viewBox: "0 0 24 24", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("circle", { className: "a24-context-status__track", cx: "12", cy: "12", r: "10" }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  "circle",
+                  {
+                    className: "a24-context-status__value",
+                    cx: "12",
+                    cy: "12",
+                    pathLength: "100",
+                    r: "10",
+                    strokeDasharray: `${percentage} 100`
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { children: [
+                percentage,
+                "%"
+              ] })
+            ]
+          }
+        ),
+        open ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "a24-context-status__popover", id: tooltipId, role: "tooltip", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "a24-context-status__sr-only", children: "Context window" }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("strong", { children: [
+            PERCENT.format(usageRatio),
+            " context used"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { children: [
+            exact ? "Input" : "Estimated input",
+            ": ",
+            COMPACT_TOKENS.format(input),
+            " / ",
+            COMPACT_TOKENS.format(maximum),
+            " tokens"
+          ] }),
+          admissionInput !== input ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { children: [
+            "Safety bound: ",
+            COMPACT_TOKENS.format(admissionInput),
+            " tokens (",
+            PERCENT.format(admissionRatio),
+            ")"
+          ] }) : null
+        ] }) : null
+      ]
+    }
+  );
+}
+
 // src/ui/bubble.tsx
 var import_class_variance_authority2 = require("class-variance-authority");
 var import_react_slot2 = require("@radix-ui/react-slot");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function BubbleGroup({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "div",
     {
       "data-slot": "bubble-group",
@@ -1547,7 +2587,7 @@ function Bubble({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "div",
     {
       "data-slot": "bubble",
@@ -1564,7 +2604,7 @@ function BubbleContent({
   ...props
 }) {
   const Comp = asChild ? import_react_slot2.Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     Comp,
     {
       "data-slot": "bubble-content",
@@ -1601,7 +2641,7 @@ function BubbleReactions({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "div",
     {
       "data-slot": "bubble-reactions",
@@ -1616,7 +2656,7 @@ function BubbleReactions({
 // src/ui/marker.tsx
 var import_class_variance_authority3 = require("class-variance-authority");
 var import_react_slot3 = require("@radix-ui/react-slot");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var markerVariants = (0, import_class_variance_authority3.cva)(
   "group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-foreground",
   {
@@ -1636,7 +2676,7 @@ function Marker({
   ...props
 }) {
   const Comp = asChild ? import_react_slot3.Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     Comp,
     {
       "data-slot": "marker",
@@ -1647,7 +2687,7 @@ function Marker({
   );
 }
 function MarkerIcon({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "span",
     {
       "data-slot": "marker-icon",
@@ -1661,7 +2701,7 @@ function MarkerIcon({ className, ...props }) {
   );
 }
 function MarkerContent({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "span",
     {
       "data-slot": "marker-content",
@@ -1675,7 +2715,7 @@ function MarkerContent({ className, ...props }) {
 }
 
 // src/ui/mcp-connect-required-card.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var STATUS_LABELS = {
   pending: "Connect",
   connecting: "Connecting",
@@ -1699,7 +2739,7 @@ function McpConnectRequiredCard({
   const isBusy = loading || status === "connecting" || status === "resuming";
   const isConnected = status === "connected";
   const buttonDisabled = disabled || isBusy || isConnected || !onConnect;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "div",
     {
       "data-agents24-mcp-connect-card": true,
@@ -1709,13 +2749,13 @@ function McpConnectRequiredCard({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex min-w-0 items-start justify-between gap-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "truncate text-sm font-medium", children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-1 text-sm text-muted-foreground", children: message || "Connect your account to continue." }),
-          status === "error" && error ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-2 text-sm text-destructive", children: error }) : null
+      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex min-w-0 items-start justify-between gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "truncate text-sm font-medium", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "mt-1 text-sm text-muted-foreground", children: message || "Connect your account to continue." }),
+          status === "error" && error ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "mt-2 text-sm text-destructive", children: error }) : null
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           "button",
           {
             type: "button",
@@ -1732,14 +2772,87 @@ function McpConnectRequiredCard({
     }
   );
 }
+
+// src/ui/use-audio-recorder.ts
+var React10 = __toESM(require("react"), 1);
+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 = React10.useRef(null);
+  const streamRef = React10.useRef(null);
+  const onRecordedRef = React10.useRef(onRecorded);
+  const onStreamChangeRef = React10.useRef(options.onStreamChange);
+  onRecordedRef.current = onRecorded;
+  onStreamChangeRef.current = options.onStreamChange;
+  const [isRecording, setIsRecording] = React10.useState(false);
+  const [error, setError] = React10.useState(null);
+  const stop = React10.useCallback(() => recorderRef.current?.stop(), []);
+  const start = React10.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.");
+    }
+  }, []);
+  React10.useEffect(() => () => {
+    recorderRef.current?.stop();
+    streamRef.current?.getTracks().forEach((track) => track.stop());
+    onStreamChangeRef.current?.(null);
+  }, []);
+  return { error, isRecording, start, stop };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AgentChatActivityRow,
   AgentChatComposer,
+  AgentChatContextCompressionRow,
+  AgentChatContextStatus,
   AgentChatDefaultActions,
   AgentChatMessage,
-  AgentChatPartRow,
+  AgentChatModelTurnRow,
+  AgentChatNodeActivityRow,
+  AgentChatPart,
+  AgentChatSubagentGroup,
+  AgentChatToolGroup,
+  AgentChatToolPart,
+  AgentChatToolRow,
+  AgentChatToolSession,
   AgentChatUserMessageContent,
   AgentResponseTimeline,
+  AskUserInteraction,
   Attachment,
   AttachmentAction,
   AttachmentActions,
@@ -1776,14 +2889,21 @@ function McpConnectRequiredCard({
   MessageResponse,
   ShadcnMessage,
   ShadcnMessageContent,
+  agentChatToolLabel,
   attachmentMediaVariants,
   attachmentVariants,
   bubbleVariants,
   cn,
+  contextStatusMetrics,
   hitlActionLabel,
   hitlTitle,
+  isAgentChatSubagent,
+  isAgentChatToolRunning,
+  latestRunningAgentChatToolId,
   markerVariants,
+  partitionAgentChatToolTimeline,
   resolvedHitlLabel,
-  shouldCollapseUserMessage
+  shouldCollapseUserMessage,
+  useAudioRecorder
 });
 //# sourceMappingURL=index.cjs.map