@dudousxd/nestjs-agent-react 0.7.5 → 0.9.0

package/dist/index.cjs

@@ -49,20 +49,82 @@ __export(src_exports, {
   extractMessageText: () => extractMessageText,
   filterAutocompleteItems: () => filterAutocompleteItems,
   findActiveTrigger: () => findActiveTrigger,
+  formatElapsed: () => formatElapsed,
   formatRelativeTime: () => formatRelativeTime,
   loadStoredSpeechLang: () => loadStoredSpeechLang,
   persistSpeechLang: () => persistSpeechLang,
+  readReasoningMs: () => readReasoningMs,
   storedMessageToUiMessage: () => storedMessageToUiMessage,
   storedThreadToUiMessages: () => storedThreadToUiMessages,
   useAgentChat: () => useAgentChat,
   useChatTranscript: () => useChatTranscript,
   useComposerAutocomplete: () => useComposerAutocomplete,
+  useElapsed: () => useElapsed,
   useSpeechRecognition: () => useSpeechRecognition,
   useStickToBottom: () => useStickToBottom,
   useTranscriptItem: () => useTranscriptItem
 });
 module.exports = __toCommonJS(src_exports);
 
+// src/reasoning/timing.ts
+var import_react = require("react");
+var REASONING_METADATA_KEY = "agent";
+function reasoningDurationMetadata(reasoningMs) {
+  return {
+    [REASONING_METADATA_KEY]: {
+      reasoningMs
+    }
+  };
+}
+__name(reasoningDurationMetadata, "reasoningDurationMetadata");
+function readReasoningMs(part) {
+  const metadata = part.providerMetadata;
+  if (typeof metadata !== "object" || metadata === null) return null;
+  const scoped = metadata[REASONING_METADATA_KEY];
+  if (typeof scoped !== "object" || scoped === null) return null;
+  const value = scoped.reasoningMs;
+  return typeof value === "number" && Number.isFinite(value) && value >= 0 ? value : null;
+}
+__name(readReasoningMs, "readReasoningMs");
+function useElapsed(running, options = {}) {
+  const { intervalMs = 1e3 } = options;
+  const nowRef = (0, import_react.useRef)(options.now ?? Date.now);
+  nowRef.current = options.now ?? Date.now;
+  const startedAt = (0, import_react.useRef)(null);
+  const [elapsed, setElapsed] = (0, import_react.useState)(0);
+  (0, import_react.useEffect)(() => {
+    if (!running) {
+      if (startedAt.current !== null) {
+        setElapsed(nowRef.current() - startedAt.current);
+        startedAt.current = null;
+      }
+      return;
+    }
+    startedAt.current = nowRef.current();
+    setElapsed(0);
+    const timer = setInterval(() => {
+      if (startedAt.current !== null) setElapsed(nowRef.current() - startedAt.current);
+    }, intervalMs);
+    return () => clearInterval(timer);
+  }, [
+    running,
+    intervalMs
+  ]);
+  return elapsed;
+}
+__name(useElapsed, "useElapsed");
+function formatElapsed(ms) {
+  if (!Number.isFinite(ms) || ms < 1e3) return "<1s";
+  const totalSeconds = Math.floor(ms / 1e3);
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor(totalSeconds % 3600 / 60);
+  const seconds = totalSeconds % 60;
+  if (hours > 0) return minutes > 0 ? `${hours}h ${minutes}m` : `${hours}h`;
+  if (minutes > 0) return seconds > 0 ? `${minutes}m ${seconds}s` : `${minutes}m`;
+  return `${seconds}s`;
+}
+__name(formatElapsed, "formatElapsed");
+
 // src/agent-chat-transport.ts
 var HEADER_RUN_ID = "x-agent-run-id";
 var HEADER_THREAD_ID = "x-agent-thread-id";
@@ -202,7 +264,8 @@ var AgentChatTransport = class {
   * Parse the backend's SSE byte stream and re-emit it as a valid v7 UI-message chunk stream.
   * Recognized frames:
   *  - `event: meta`  `data: {"runId","threadId"}`   → records identity
-  *  - `data: <AgentStreamEvent JSON>`                → mapped to UI chunks (text / reasoning / tool)
+  *  - `data: <AgentStreamEvent JSON>`                → mapped to UI chunks (text / reasoning / tool /
+  *                                                     `data-*`; see {@link AgentChatTransport} docs)
   *  - `event: done`  `data: {}`                      → terminates
   *  - `event: error` `data: {code,message}`          → error chunk
   *
@@ -219,7 +282,11 @@ var AgentChatTransport = class {
     let stepIndex = 0;
     let textId = null;
     let reasoningId = null;
+    let reasoningStartedAt = 0;
+    let textSeq = 0;
+    let reasoningSeq = 0;
     const announced = /* @__PURE__ */ new Set();
+    const toolMetadata = /* @__PURE__ */ new Map();
     const record = /* @__PURE__ */ __name((meta) => this.recordMeta(meta), "record");
     const endAttempt = /* @__PURE__ */ __name(() => {
       this.attemptLive = false;
@@ -241,6 +308,8 @@ var AgentChatTransport = class {
           stepIndex += 1;
           textId = null;
           reasoningId = null;
+          textSeq = 0;
+          reasoningSeq = 0;
           controller.enqueue({
             type: "start-step"
           });
@@ -250,8 +319,7 @@ var AgentChatTransport = class {
           if (!stepOpen) openStep();
         }
         __name(ensureStep, "ensureStep");
-        function closeStep() {
-          if (!stepOpen) return;
+        function closeRuns(reasoningMs) {
           if (textId !== null) {
             controller.enqueue({
               type: "text-end",
@@ -262,23 +330,55 @@ var AgentChatTransport = class {
           if (reasoningId !== null) {
             controller.enqueue({
               type: "reasoning-end",
-              id: reasoningId
+              id: reasoningId,
+              providerMetadata: reasoningDurationMetadata(reasoningMs ?? Math.max(0, Date.now() - reasoningStartedAt))
             });
             reasoningId = null;
           }
+        }
+        __name(closeRuns, "closeRuns");
+        function closeStep(reasoningMs) {
+          if (!stepOpen) return;
+          closeRuns(reasoningMs);
           controller.enqueue({
             type: "finish-step"
           });
           stepOpen = false;
         }
         __name(closeStep, "closeStep");
+        function metadataFor(id, toolKind2, parentId) {
+          const merged = {
+            ...toolMetadata.get(id)
+          };
+          if (toolKind2 !== void 0) merged.toolKind = toolKind2;
+          if (parentId !== void 0 && merged.parentId === void 0) merged.parentId = parentId;
+          if (Object.keys(merged).length === 0) return void 0;
+          toolMetadata.set(id, merged);
+          return merged;
+        }
+        __name(metadataFor, "metadataFor");
+        function forwardAsData(event, transient) {
+          ensureStarted();
+          const { kind, ...data } = event;
+          controller.enqueue({
+            type: `data-${kind}`,
+            ...typeof data.id === "string" ? {
+              id: data.id
+            } : {},
+            data,
+            ...transient ? {
+              transient: true
+            } : {}
+          });
+        }
+        __name(forwardAsData, "forwardAsData");
         function emit(event) {
           switch (event.kind) {
             case "step-start":
               openStep();
               break;
             case "step-finish":
-              closeStep();
+              closeStep(event.reasoningMs);
               if (event.costUsd !== void 0) {
                 controller.enqueue({
                   type: "message-metadata",
@@ -291,7 +391,8 @@ var AgentChatTransport = class {
             case "text":
               ensureStep();
               if (textId === null) {
-                textId = `txt-${stepIndex}`;
+                textId = textSeq === 0 ? `txt-${stepIndex}` : `txt-${stepIndex}.${textSeq}`;
+                textSeq += 1;
                 controller.enqueue({
                   type: "text-start",
                   id: textId
@@ -306,7 +407,9 @@ var AgentChatTransport = class {
             case "reasoning":
               ensureStep();
               if (reasoningId === null) {
-                reasoningId = `rsn-${stepIndex}`;
+                reasoningId = reasoningSeq === 0 ? `rsn-${stepIndex}` : `rsn-${stepIndex}.${reasoningSeq}`;
+                reasoningSeq += 1;
+                reasoningStartedAt = Date.now();
                 controller.enqueue({
                   type: "reasoning-start",
                   id: reasoningId
@@ -318,23 +421,20 @@ var AgentChatTransport = class {
                 delta: event.text
               });
               break;
-            case "tool-input-start":
+            case "tool-input-start": {
               ensureStep();
               announced.add(event.id);
+              const metadata = metadataFor(event.id, event.toolKind, event.parentId);
               controller.enqueue({
                 type: "tool-input-start",
                 toolCallId: event.id,
                 toolName: event.name,
-                // `toolKind` is absent on older backends — omitted (not `undefined`-valued) so
-                // `toolMetadata` itself is only present when there's something to say, letting a
-                // UI gate approval affordances on `kind === 'action'` without hardcoding tool names.
-                ...event.toolKind !== void 0 ? {
-                  toolMetadata: {
-                    toolKind: event.toolKind
-                  }
+                ...metadata !== void 0 ? {
+                  toolMetadata: metadata
                 } : {}
               });
               break;
+            }
             case "tool-input-delta":
               ensureStep();
               controller.enqueue({
@@ -343,21 +443,21 @@ var AgentChatTransport = class {
                 inputTextDelta: event.delta
               });
               break;
-            case "tool-input-available":
+            case "tool-input-available": {
               ensureStep();
               announced.add(event.id);
+              const metadata = metadataFor(event.id, event.toolKind, event.parentId);
               controller.enqueue({
                 type: "tool-input-available",
                 toolCallId: event.id,
                 toolName: event.name,
                 input: event.input,
-                ...event.toolKind !== void 0 ? {
-                  toolMetadata: {
-                    toolKind: event.toolKind
-                  }
+                ...metadata !== void 0 ? {
+                  toolMetadata: metadata
                 } : {}
               });
               break;
+            }
             case "elicitation":
               ensureStep();
               if (!announced.has(event.id)) {
@@ -398,7 +498,39 @@ var AgentChatTransport = class {
                 toolCallId: event.id
               });
               break;
+            case "approval-requested":
+              ensureStep();
+              forwardAsData(event, false);
+              if (announced.has(event.id)) {
+                controller.enqueue({
+                  type: "tool-approval-request",
+                  approvalId: event.id,
+                  toolCallId: event.id
+                });
+              }
+              break;
+            case "ui":
+              ensureStep();
+              closeRuns();
+              controller.enqueue({
+                type: "data-ui",
+                id: event.id,
+                data: {
+                  id: event.id,
+                  component: event.component,
+                  props: event.props,
+                  ...event.version !== void 0 ? {
+                    version: event.version
+                  } : {}
+                }
+              });
+              break;
+            case "title":
+            case "cancelled":
+              forwardAsData(event, true);
+              break;
             default:
+              forwardAsData(event, false);
               break;
           }
         }
@@ -725,10 +857,10 @@ var AgentClient = class {
 };
 
 // src/components/chat-input.tsx
-var import_react2 = __toESM(require("react"), 1);
+var import_react3 = __toESM(require("react"), 1);
 
 // src/components/use-speech-recognition.ts
-var import_react = require("react");
+var import_react2 = require("react");
 function getRecognitionCtor() {
   if (typeof window === "undefined") return null;
   const scope = window;
@@ -736,15 +868,15 @@ function getRecognitionCtor() {
 }
 __name(getRecognitionCtor, "getRecognitionCtor");
 function useSpeechRecognition({ lang = "en-US", onFinalTranscript, onInterimTranscript }) {
-  const recognitionRef = (0, import_react.useRef)(null);
-  const [isListening, setIsListening] = (0, import_react.useState)(false);
-  const ctor = (0, import_react.useMemo)(() => getRecognitionCtor(), []);
+  const recognitionRef = (0, import_react2.useRef)(null);
+  const [isListening, setIsListening] = (0, import_react2.useState)(false);
+  const ctor = (0, import_react2.useMemo)(() => getRecognitionCtor(), []);
   const isSupported = ctor !== null;
-  const finalRef = (0, import_react.useRef)(onFinalTranscript);
-  const interimRef = (0, import_react.useRef)(onInterimTranscript);
+  const finalRef = (0, import_react2.useRef)(onFinalTranscript);
+  const interimRef = (0, import_react2.useRef)(onInterimTranscript);
   finalRef.current = onFinalTranscript;
   interimRef.current = onInterimTranscript;
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (!ctor) return;
     const recognition = new ctor();
     recognition.lang = lang;
@@ -783,7 +915,7 @@ function useSpeechRecognition({ lang = "en-US", onFinalTranscript, onInterimTran
     ctor,
     lang
   ]);
-  const start = (0, import_react.useCallback)(() => {
+  const start = (0, import_react2.useCallback)(() => {
     const recognition = recognitionRef.current;
     if (!recognition) return;
     try {
@@ -793,7 +925,7 @@ function useSpeechRecognition({ lang = "en-US", onFinalTranscript, onInterimTran
       console.warn("SpeechRecognition start failed", error);
     }
   }, []);
-  const stop = (0, import_react.useCallback)(() => {
+  const stop = (0, import_react2.useCallback)(() => {
     const recognition = recognitionRef.current;
     if (!recognition) return;
     try {
@@ -812,8 +944,8 @@ __name(useSpeechRecognition, "useSpeechRecognition");
 
 // src/components/chat-input.tsx
 function ChatInput({ onSubmit, disabled, placeholder, rows = 2, enableSpeech = true, speechLang = "en-US", sendLabel = "Send", onStop, isStreaming = false, stopLabel = "Stop generating", className, textareaClassName, sendButtonClassName, micButtonClassName, stopButtonClassName, renderMic }) {
-  const [value, setValue] = (0, import_react2.useState)("");
-  const [interim, setInterim] = (0, import_react2.useState)("");
+  const [value, setValue] = (0, import_react3.useState)("");
+  const [interim, setInterim] = (0, import_react3.useState)("");
   const speech = useSpeechRecognition({
     lang: speechLang,
     onFinalTranscript: /* @__PURE__ */ __name((text) => {
@@ -824,7 +956,7 @@ function ChatInput({ onSubmit, disabled, placeholder, rows = 2, enableSpeech = t
     }, "onFinalTranscript"),
     onInterimTranscript: /* @__PURE__ */ __name((text) => setInterim(text), "onInterimTranscript")
   });
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (!speech.isListening) setInterim("");
   }, [
     speech.isListening
@@ -852,9 +984,9 @@ function ChatInput({ onSubmit, disabled, placeholder, rows = 2, enableSpeech = t
   const displayValue = speech.isListening && interim ? `${value}${value && !value.endsWith(" ") ? " " : ""}${interim}` : value;
   const showMic = enableSpeech && speech.isSupported;
   const showStop = isStreaming && onStop !== void 0;
-  return /* @__PURE__ */ import_react2.default.createElement("div", {
+  return /* @__PURE__ */ import_react3.default.createElement("div", {
     className
-  }, /* @__PURE__ */ import_react2.default.createElement("textarea", {
+  }, /* @__PURE__ */ import_react3.default.createElement("textarea", {
     className: textareaClassName,
     rows,
     value: displayValue,
@@ -865,17 +997,17 @@ function ChatInput({ onSubmit, disabled, placeholder, rows = 2, enableSpeech = t
     }, "onChange"),
     onKeyDown: handleKeyDown,
     placeholder: placeholder ?? "Ask something (Enter to send, Shift+Enter for newline)"
-  }), /* @__PURE__ */ import_react2.default.createElement("button", {
+  }), /* @__PURE__ */ import_react3.default.createElement("button", {
     type: "button",
     className: sendButtonClassName,
     onClick: submit,
     disabled: disabled || !value.trim()
-  }, sendLabel), showStop ? /* @__PURE__ */ import_react2.default.createElement("button", {
+  }, sendLabel), showStop ? /* @__PURE__ */ import_react3.default.createElement("button", {
     type: "button",
     className: stopButtonClassName,
     onClick: /* @__PURE__ */ __name(() => void onStop(), "onClick"),
     "aria-label": "Stop generating"
-  }, stopLabel) : null, showMic ? /* @__PURE__ */ import_react2.default.createElement("button", {
+  }, stopLabel) : null, showMic ? /* @__PURE__ */ import_react3.default.createElement("button", {
     type: "button",
     className: micButtonClassName,
     onClick: toggleMic,
@@ -888,10 +1020,10 @@ function ChatInput({ onSubmit, disabled, placeholder, rows = 2, enableSpeech = t
 __name(ChatInput, "ChatInput");
 
 // src/components/message-item.tsx
-var import_react5 = __toESM(require("react"), 1);
+var import_react6 = __toESM(require("react"), 1);
 
 // src/transcript/use-chat-transcript.ts
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/transcript/model.ts
 var import_ai = require("ai");
@@ -906,15 +1038,18 @@ function buildTranscriptBlocks(message, options) {
   let reasoningCounter = 0;
   let sourcesCounter = 0;
   let elicitationCounter = 0;
+  const approvals = readApprovals(message.parts ?? []);
   function flushTools() {
     if (toolBuffer.length === 0) {
       return;
     }
+    const calls = toolBuffer.map((part) => buildToolCall(part, options.approval, approvals.get(part.toolCallId) ?? null));
     blocks.push({
       kind: "tools",
       key: `${message.id}-tools-${toolCounter++}`,
       parts: toolBuffer,
-      calls: toolBuffer.map((part) => buildToolCall(part, options.approval))
+      calls,
+      roots: nestToolCalls(calls)
     });
     toolBuffer = [];
   }
@@ -977,7 +1112,21 @@ function buildTranscriptBlocks(message, options) {
       fileBuffer.push(part);
       continue;
     }
+    if (part.type === APPROVAL_PART) {
+      continue;
+    }
     flushAll();
+    if ((0, import_ai.isDataUIPart)(part)) {
+      const ui = part.type === UI_PART ? readUiComponent(part) : null;
+      if (ui !== null) {
+        blocks.push({
+          kind: "ui",
+          key: `${message.id}-ui-${ui.id}`,
+          ...ui
+        });
+      }
+      continue;
+    }
     if ((0, import_ai.isTextUIPart)(part)) {
       blocks.push({
         kind: "text",
@@ -995,6 +1144,7 @@ function buildTranscriptBlocks(message, options) {
         key,
         text: part.text,
         isStreaming,
+        durationMs: readReasoningMs(part),
         isOpen: options.isReasoningOpen(key, isStreaming),
         toggle: /* @__PURE__ */ __name((open) => options.toggleReasoning(key, open), "toggle")
       });
@@ -1061,7 +1211,42 @@ function isAwaitingApproval(part) {
   return toolKind(part) === "action" && readElicitationRequest(part) === null;
 }
 __name(isAwaitingApproval, "isAwaitingApproval");
-function buildToolCall(part, options) {
+function toolParentId(part) {
+  const metadata = part.toolMetadata;
+  return isRecord(metadata) && typeof metadata.parentId === "string" ? metadata.parentId : null;
+}
+__name(toolParentId, "toolParentId");
+function nestToolCalls(calls) {
+  const byId = new Map(calls.map((call) => [
+    call.toolCallId,
+    call
+  ]));
+  const roots = [];
+  for (const call of calls) {
+    const parent = call.parentId !== null ? byId.get(call.parentId) : void 0;
+    if (parent === void 0 || isAncestor(call, parent, byId)) {
+      roots.push(call);
+      continue;
+    }
+    parent.children.push(call);
+  }
+  return roots;
+}
+__name(nestToolCalls, "nestToolCalls");
+function isAncestor(call, candidate, byId) {
+  const seen = /* @__PURE__ */ new Set();
+  let current = candidate;
+  while (current !== void 0 && !seen.has(current.toolCallId)) {
+    if (current.toolCallId === call.toolCallId) {
+      return true;
+    }
+    seen.add(current.toolCallId);
+    current = current.parentId !== null ? byId.get(current.parentId) : void 0;
+  }
+  return false;
+}
+__name(isAncestor, "isAncestor");
+function buildToolCall(part, options, approval) {
   const toolCallId = part.toolCallId;
   const awaiting = isAwaitingApproval(part);
   const sending = awaiting ? options?.submitting(toolCallId) ?? null : null;
@@ -1069,6 +1254,10 @@ function buildToolCall(part, options) {
     part,
     toolCallId,
     name: (0, import_ai.getToolName)(part),
+    toolKind: toolKind(part) ?? null,
+    parentId: toolParentId(part),
+    children: [],
+    approval,
     isAwaitingApproval: awaiting,
     approve: {
       available: awaiting && options?.canApprove === true,
@@ -1199,6 +1388,44 @@ function buildElicitationBlock(key, part, request, options) {
   };
 }
 __name(buildElicitationBlock, "buildElicitationBlock");
+var UI_PART = "data-ui";
+var APPROVAL_PART = "data-approval-requested";
+function readApprovals(parts) {
+  const out = /* @__PURE__ */ new Map();
+  for (const part of parts) {
+    if (part.type !== APPROVAL_PART) {
+      continue;
+    }
+    const data = part.data;
+    if (!isRecord(data) || typeof data.id !== "string" || typeof data.approver !== "string") {
+      continue;
+    }
+    out.set(data.id, {
+      approver: data.approver,
+      expiresAt: typeof data.expiresAt === "string" ? data.expiresAt : null,
+      reason: typeof data.reason === "string" ? data.reason : null
+    });
+  }
+  return out;
+}
+__name(readApprovals, "readApprovals");
+function readUiComponent(part) {
+  const data = part.data;
+  if (!isRecord(data) || typeof data.component !== "string") {
+    return null;
+  }
+  const id = typeof data.id === "string" ? data.id : part.id;
+  if (id === void 0) {
+    return null;
+  }
+  return {
+    id,
+    component: data.component,
+    props: isRecord(data.props) ? data.props : {},
+    version: typeof data.version === "number" ? data.version : null
+  };
+}
+__name(readUiComponent, "readUiComponent");
 function isRecord(value) {
   return typeof value === "object" && value !== null;
 }
@@ -1330,11 +1557,11 @@ function formatCostUsd(cost) {
 __name(formatCostUsd, "formatCostUsd");
 
 // src/transcript/use-stick-to-bottom.ts
-var import_react3 = require("react");
+var import_react4 = require("react");
 function useStickToBottom({ contentKey, threshold = 32 }) {
-  const containerRef = (0, import_react3.useRef)(null);
-  const [isAtBottom, setIsAtBottom] = (0, import_react3.useState)(true);
-  const measure = (0, import_react3.useCallback)(() => {
+  const containerRef = (0, import_react4.useRef)(null);
+  const [isAtBottom, setIsAtBottom] = (0, import_react4.useState)(true);
+  const measure = (0, import_react4.useCallback)(() => {
     const element = containerRef.current;
     if (!element) {
       return;
@@ -1344,7 +1571,7 @@ function useStickToBottom({ contentKey, threshold = 32 }) {
   }, [
     threshold
   ]);
-  const scrollToBottom = (0, import_react3.useCallback)(() => {
+  const scrollToBottom = (0, import_react4.useCallback)(() => {
     const element = containerRef.current;
     if (!element) {
       return;
@@ -1352,7 +1579,7 @@ function useStickToBottom({ contentKey, threshold = 32 }) {
     element.scrollTop = element.scrollHeight;
     setIsAtBottom(true);
   }, []);
-  const setContainer = (0, import_react3.useCallback)((element) => {
+  const setContainer = (0, import_react4.useCallback)((element) => {
     containerRef.current = element;
     if (element) {
       measure();
@@ -1360,7 +1587,7 @@ function useStickToBottom({ contentKey, threshold = 32 }) {
   }, [
     measure
   ]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (isAtBottom) {
       scrollToBottom();
     }
@@ -1369,7 +1596,7 @@ function useStickToBottom({ contentKey, threshold = 32 }) {
     isAtBottom,
     scrollToBottom
   ]);
-  const getContainerProps = (0, import_react3.useCallback)(() => ({
+  const getContainerProps = (0, import_react4.useCallback)(() => ({
     ref: setContainer,
     onScroll: measure
   }), [
@@ -1391,14 +1618,14 @@ var DEFAULT_LOAD_EARLIER_STEP = 50;
 var DEFAULT_COPY_RESET_MS = 1500;
 function useChatTranscript(options) {
   const { messages, status, initialVisibleCount = DEFAULT_VISIBLE_COUNT, loadEarlierStep = DEFAULT_LOAD_EARLIER_STEP, followUps, stickToBottomThreshold } = options;
-  const latest = (0, import_react4.useRef)(options);
+  const latest = (0, import_react5.useRef)(options);
   latest.current = options;
-  const [visibleCount, setVisibleCount] = (0, import_react4.useState)(initialVisibleCount);
-  const [stopRequested, setStopRequested] = (0, import_react4.useState)(false);
+  const [visibleCount, setVisibleCount] = (0, import_react5.useState)(initialVisibleCount);
+  const [stopRequested, setStopRequested] = (0, import_react5.useState)(false);
   const isStreaming = status === "streaming";
   const isBusy = status === "submitted" || isStreaming;
   const isEmpty = messages.length === 0;
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!isBusy) {
       setStopRequested(false);
     }
@@ -1415,7 +1642,7 @@ function useChatTranscript(options) {
     streamingMessageId,
     options
   });
-  const stop = (0, import_react4.useCallback)(() => {
+  const stop = (0, import_react5.useCallback)(() => {
     const current = latest.current;
     if (current.status !== "submitted" && current.status !== "streaming") {
       return;
@@ -1423,8 +1650,8 @@ function useChatTranscript(options) {
     setStopRequested(true);
     void current.onStop?.();
   }, []);
-  const loadEarlier = (0, import_react4.useCallback)(() => setVisibleCount((count) => count + (latest.current.loadEarlierStep ?? DEFAULT_LOAD_EARLIER_STEP)), []);
-  const showAll = (0, import_react4.useCallback)(() => setVisibleCount(latest.current.messages.length), []);
+  const loadEarlier = (0, import_react5.useCallback)(() => setVisibleCount((count) => count + (latest.current.loadEarlierStep ?? DEFAULT_LOAD_EARLIER_STEP)), []);
+  const showAll = (0, import_react5.useCallback)(() => setVisibleCount(latest.current.messages.length), []);
   const scroll = useStickToBottom({
     contentKey: contentSignature(messages),
     ...stickToBottomThreshold !== void 0 ? {
@@ -1460,7 +1687,7 @@ function useChatTranscript(options) {
 __name(useChatTranscript, "useChatTranscript");
 function useTranscriptItem(options) {
   const { message, isStreaming = false } = options;
-  const messagesRef = (0, import_react4.useRef)([
+  const messagesRef = (0, import_react5.useRef)([
     message
   ]);
   if (messagesRef.current[0] !== message) {
@@ -1478,13 +1705,13 @@ function useTranscriptItem(options) {
 }
 __name(useTranscriptItem, "useTranscriptItem");
 function useTranscriptItems({ messages, visibleStart, streamingMessageId, options }) {
-  const [drafts, setDrafts] = (0, import_react4.useState)(() => /* @__PURE__ */ new Map());
-  const [copied, setCopied] = (0, import_react4.useState)(() => /* @__PURE__ */ new Set());
-  const [openReasoning, setOpenReasoning] = (0, import_react4.useState)(() => /* @__PURE__ */ new Map());
-  const [picks, setPicks] = (0, import_react4.useState)(() => /* @__PURE__ */ new Map());
-  const [settling, setSettling] = (0, import_react4.useState)(() => /* @__PURE__ */ new Map());
-  const [settleErrors, setSettleErrors] = (0, import_react4.useState)(() => /* @__PURE__ */ new Map());
-  const latest = (0, import_react4.useRef)({
+  const [drafts, setDrafts] = (0, import_react5.useState)(() => /* @__PURE__ */ new Map());
+  const [copied, setCopied] = (0, import_react5.useState)(() => /* @__PURE__ */ new Set());
+  const [openReasoning, setOpenReasoning] = (0, import_react5.useState)(() => /* @__PURE__ */ new Map());
+  const [picks, setPicks] = (0, import_react5.useState)(() => /* @__PURE__ */ new Map());
+  const [settling, setSettling] = (0, import_react5.useState)(() => /* @__PURE__ */ new Map());
+  const [settleErrors, setSettleErrors] = (0, import_react5.useState)(() => /* @__PURE__ */ new Map());
+  const latest = (0, import_react5.useRef)({
     options,
     drafts,
     picks,
@@ -1496,23 +1723,23 @@ function useTranscriptItems({ messages, visibleStart, streamingMessageId, option
     picks,
     messages
   };
-  const copyTimers = (0, import_react4.useRef)(/* @__PURE__ */ new Map());
-  (0, import_react4.useEffect)(() => () => {
+  const copyTimers = (0, import_react5.useRef)(/* @__PURE__ */ new Map());
+  (0, import_react5.useEffect)(() => () => {
     for (const timer of copyTimers.current.values()) {
       clearTimeout(timer);
     }
     copyTimers.current.clear();
   }, []);
-  const callbackCache = (0, import_react4.useRef)(/* @__PURE__ */ new Map());
-  const reasoningToggleCache = (0, import_react4.useRef)(/* @__PURE__ */ new Map());
-  const toggleReasoning = (0, import_react4.useCallback)((key, open) => {
+  const callbackCache = (0, import_react5.useRef)(/* @__PURE__ */ new Map());
+  const reasoningToggleCache = (0, import_react5.useRef)(/* @__PURE__ */ new Map());
+  const toggleReasoning = (0, import_react5.useCallback)((key, open) => {
     setOpenReasoning((current) => {
       const next = new Map(current);
       next.set(key, open ?? !(current.get(key) ?? false));
       return next;
     });
   }, []);
-  const stableToggle = (0, import_react4.useCallback)((key) => {
+  const stableToggle = (0, import_react5.useCallback)((key) => {
     let cached = reasoningToggleCache.current.get(key);
     if (!cached) {
       cached = /* @__PURE__ */ __name((open) => toggleReasoning(key, open), "cached");
@@ -1522,10 +1749,10 @@ function useTranscriptItems({ messages, visibleStart, streamingMessageId, option
   }, [
     toggleReasoning
   ]);
-  const pick = (0, import_react4.useCallback)((toolCallId, questionId, values) => {
+  const pick = (0, import_react5.useCallback)((toolCallId, questionId, values) => {
     setPicks((current) => new Map(current).set(pickKey(toolCallId, questionId), values));
   }, []);
-  const settle = (0, import_react4.useCallback)((toolCallId, action, send) => {
+  const settle = (0, import_react5.useCallback)((toolCallId, action, send) => {
     setSettleErrors((current) => {
       if (!current.has(toolCallId)) {
         return current;
@@ -1549,7 +1776,7 @@ function useTranscriptItems({ messages, visibleStart, streamingMessageId, option
       failed(error);
     }
   }, []);
-  const answer = (0, import_react4.useCallback)((toolCallId) => {
+  const answer = (0, import_react5.useCallback)((toolCallId) => {
     const current = latest.current;
     const onAnswer = current.options.onAnswer;
     if (!onAnswer) {
@@ -1559,7 +1786,7 @@ function useTranscriptItems({ messages, visibleStart, streamingMessageId, option
   }, [
     settle
   ]);
-  const skip = (0, import_react4.useCallback)((toolCallId) => {
+  const skip = (0, import_react5.useCallback)((toolCallId) => {
     const onSkip = latest.current.options.onSkip;
     if (onSkip) {
       settle(toolCallId, "skip", () => onSkip(toolCallId));
@@ -1567,7 +1794,7 @@ function useTranscriptItems({ messages, visibleStart, streamingMessageId, option
   }, [
     settle
   ]);
-  const approve = (0, import_react4.useCallback)((toolCallId) => {
+  const approve = (0, import_react5.useCallback)((toolCallId) => {
     const onApprove = latest.current.options.onApprove;
     if (onApprove) {
       settle(toolCallId, "approve", () => onApprove(toolCallId));
@@ -1575,7 +1802,7 @@ function useTranscriptItems({ messages, visibleStart, streamingMessageId, option
   }, [
     settle
   ]);
-  const reject = (0, import_react4.useCallback)((toolCallId) => {
+  const reject = (0, import_react5.useCallback)((toolCallId) => {
     const onReject = latest.current.options.onReject;
     if (onReject) {
       settle(toolCallId, "reject", () => onReject(toolCallId));
@@ -1583,7 +1810,7 @@ function useTranscriptItems({ messages, visibleStart, streamingMessageId, option
   }, [
     settle
   ]);
-  const callbacksFor = (0, import_react4.useCallback)((id) => {
+  const callbacksFor = (0, import_react5.useCallback)((id) => {
     const cached = callbackCache.current.get(id);
     if (cached) {
       return cached;
@@ -1822,7 +2049,7 @@ function MessageItem({ message, isStreaming = false, editable, onEditSubmit, reg
       getCreatedAt: /* @__PURE__ */ __name(() => createdAt, "getCreatedAt")
     } : {}
   });
-  return /* @__PURE__ */ import_react5.default.createElement(MessageItemView, {
+  return /* @__PURE__ */ import_react6.default.createElement(MessageItemView, {
     item,
     ...slots
   });
@@ -1830,51 +2057,51 @@ function MessageItem({ message, isStreaming = false, editable, onEditSubmit, reg
 __name(MessageItem, "MessageItem");
 function MessageItemView({ item, ...slots }) {
   const { classNames } = slots;
-  const actionRow = /* @__PURE__ */ import_react5.default.createElement("div", {
+  const actionRow = /* @__PURE__ */ import_react6.default.createElement("div", {
     className: classNames?.actions,
     "data-actions-for": item.role
-  }, item.copy.available ? /* @__PURE__ */ import_react5.default.createElement("button", {
+  }, item.copy.available ? /* @__PURE__ */ import_react6.default.createElement("button", {
     type: "button",
     onClick: item.copy.copy,
     className: classNames?.actionButton,
     title: item.copy.copied ? "Copied!" : "Copy message text"
-  }, item.copy.copied ? "Copied" : "Copy") : null, item.fork.available ? /* @__PURE__ */ import_react5.default.createElement("button", {
+  }, item.copy.copied ? "Copied" : "Copy") : null, item.fork.available ? /* @__PURE__ */ import_react6.default.createElement("button", {
     type: "button",
     onClick: item.fork.run,
     className: classNames?.actionButton,
     title: "Fork thread from this message"
-  }, "Fork") : null, item.regenerate.available ? /* @__PURE__ */ import_react5.default.createElement("button", {
+  }, "Fork") : null, item.regenerate.available ? /* @__PURE__ */ import_react6.default.createElement("button", {
     type: "button",
     onClick: item.regenerate.run,
     className: classNames?.actionButton,
     title: "Regenerate response"
-  }, "Regenerate") : null, slots.meta, !item.isUser && item.usage ? /* @__PURE__ */ import_react5.default.createElement("span", {
+  }, "Regenerate") : null, slots.meta, !item.isUser && item.usage ? /* @__PURE__ */ import_react6.default.createElement("span", {
     className: classNames?.usage,
     title: `Input ${item.usage.inputTokens.toLocaleString()} \xB7 Output ${item.usage.outputTokens.toLocaleString()} tokens`
-  }, item.usage.costLabel, " \xB7 ", item.usage.tokensLabel) : null, item.timestamp ? /* @__PURE__ */ import_react5.default.createElement("span", {
+  }, item.usage.costLabel, " \xB7 ", item.usage.tokensLabel) : null, item.timestamp ? /* @__PURE__ */ import_react6.default.createElement("span", {
     className: classNames?.timestamp,
     title: item.timestamp.absolute
   }, item.timestamp.relative) : null);
   if (item.edit.available) {
-    return /* @__PURE__ */ import_react5.default.createElement(EditableUserBubble, {
+    return /* @__PURE__ */ import_react6.default.createElement(EditableUserBubble, {
       item,
       slots,
       actions: actionRow
     });
   }
   const className = joinClasses(classNames?.root, classNames?.byRole?.[item.role]);
-  return /* @__PURE__ */ import_react5.default.createElement("div", {
+  return /* @__PURE__ */ import_react6.default.createElement("div", {
     className,
     "data-role": item.role,
     "data-streaming": item.isStreaming ? "true" : void 0
-  }, /* @__PURE__ */ import_react5.default.createElement("div", null, renderBlocks(item, slots)), actionRow);
+  }, /* @__PURE__ */ import_react6.default.createElement("div", null, renderBlocks(item, slots)), actionRow);
 }
 __name(MessageItemView, "MessageItemView");
 function renderBlocks(item, slots) {
   const nodes = [];
   for (const block of item.blocks) {
     if (block.kind === "text") {
-      nodes.push(/* @__PURE__ */ import_react5.default.createElement("div", {
+      nodes.push(/* @__PURE__ */ import_react6.default.createElement("div", {
         key: block.key,
         className: slots.classNames?.text
       }, slots.renderText ? slots.renderText(block.text, {
@@ -1892,24 +2119,32 @@ function renderBlocks(item, slots) {
     }
     if (block.kind === "tools") {
       nodes.push(...renderToolBlock(item, block, slots));
+      continue;
+    }
+    if (block.kind === "ui" && slots.renderUi) {
+      nodes.push(/* @__PURE__ */ import_react6.default.createElement("div", {
+        key: block.key,
+        "data-slot": "ui",
+        "data-component": block.component
+      }, slots.renderUi(block)));
     }
   }
   return nodes;
 }
 __name(renderBlocks, "renderBlocks");
 function renderFilesBlock(block, slots) {
-  return /* @__PURE__ */ import_react5.default.createElement("div", {
+  return /* @__PURE__ */ import_react6.default.createElement("div", {
     key: block.key,
     className: slots.classNames?.files,
     "data-files": "true"
-  }, slots.renderFiles ? slots.renderFiles(block.files) : block.files.map((file) => /* @__PURE__ */ import_react5.default.createElement("a", {
+  }, slots.renderFiles ? slots.renderFiles(block.files) : block.files.map((file) => /* @__PURE__ */ import_react6.default.createElement("a", {
     key: file.url,
     href: file.url,
     target: "_blank",
     rel: "noreferrer",
     className: slots.classNames?.file,
     title: file.filename ?? file.mediaType
-  }, file.isImage ? /* @__PURE__ */ import_react5.default.createElement("img", {
+  }, file.isImage ? /* @__PURE__ */ import_react6.default.createElement("img", {
     src: file.url,
     alt: file.filename ?? "image",
     className: slots.classNames?.fileImage
@@ -1917,17 +2152,17 @@ function renderFilesBlock(block, slots) {
 }
 __name(renderFilesBlock, "renderFilesBlock");
 function renderReasoningBlock(block, slots) {
-  return /* @__PURE__ */ import_react5.default.createElement("div", {
+  return /* @__PURE__ */ import_react6.default.createElement("div", {
     key: block.key,
     className: slots.classNames?.reasoning,
     "data-reasoning": "true",
     "data-streaming": block.isStreaming ? "true" : void 0
-  }, /* @__PURE__ */ import_react5.default.createElement("button", {
+  }, /* @__PURE__ */ import_react6.default.createElement("button", {
     type: "button",
     className: slots.classNames?.reasoningToggle,
     onClick: /* @__PURE__ */ __name(() => block.toggle(), "onClick"),
     "aria-expanded": block.isOpen
-  }, slots.reasoningLabel ?? "Reasoning"), block.isOpen ? /* @__PURE__ */ import_react5.default.createElement("div", {
+  }, slots.reasoningLabel ?? "Reasoning"), block.isOpen ? /* @__PURE__ */ import_react6.default.createElement("div", {
     className: slots.classNames?.reasoningText
   }, slots.renderReasoning ? slots.renderReasoning(block.text, {
     isStreaming: block.isStreaming,
@@ -1938,7 +2173,7 @@ __name(renderReasoningBlock, "renderReasoningBlock");
 function renderToolBlock(item, block, slots) {
   if (slots.renderToolGroup) {
     return [
-      /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, {
+      /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, {
         key: block.key
       }, slots.renderToolGroup(block.parts, block.key))
     ];
@@ -1949,7 +2184,7 @@ function renderToolBlock(item, block, slots) {
   const renderToolPart = slots.renderToolPart;
   return block.parts.map((part) => {
     const partKey = `${item.id}-${part.toolCallId}`;
-    return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, {
+    return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, {
       key: partKey
     }, renderToolPart(part, partKey));
   });
@@ -1959,14 +2194,14 @@ function EditableUserBubble({ item, slots, actions }) {
   const { classNames } = slots;
   const { edit } = item;
   if (!edit.isEditing) {
-    return /* @__PURE__ */ import_react5.default.createElement("div", {
+    return /* @__PURE__ */ import_react6.default.createElement("div", {
       className: joinClasses(classNames?.root, classNames?.byRole?.user),
       "data-role": "user"
-    }, /* @__PURE__ */ import_react5.default.createElement("div", {
+    }, /* @__PURE__ */ import_react6.default.createElement("div", {
       className: classNames?.text
     }, slots.renderText ? slots.renderText(item.text, {
       isStreaming: false
-    }) : item.text), /* @__PURE__ */ import_react5.default.createElement("button", {
+    }) : item.text), /* @__PURE__ */ import_react6.default.createElement("button", {
       type: "button",
       onClick: edit.start,
       className: classNames?.actionButton,
@@ -1974,18 +2209,18 @@ function EditableUserBubble({ item, slots, actions }) {
     }, "Edit"), actions);
   }
   const textareaProps = edit.getTextareaProps();
-  return /* @__PURE__ */ import_react5.default.createElement("div", {
+  return /* @__PURE__ */ import_react6.default.createElement("div", {
     "data-editing": "true"
-  }, /* @__PURE__ */ import_react5.default.createElement("textarea", {
+  }, /* @__PURE__ */ import_react6.default.createElement("textarea", {
     ...textareaProps,
     rows: Math.min(8, edit.draft.split("\n").length + 1),
     className: classNames?.editTextarea
-  }), /* @__PURE__ */ import_react5.default.createElement("div", {
+  }), /* @__PURE__ */ import_react6.default.createElement("div", {
     className: classNames?.editActions
-  }, /* @__PURE__ */ import_react5.default.createElement("button", {
+  }, /* @__PURE__ */ import_react6.default.createElement("button", {
     type: "button",
     onClick: edit.cancel
-  }, "Cancel"), /* @__PURE__ */ import_react5.default.createElement("button", {
+  }, "Cancel"), /* @__PURE__ */ import_react6.default.createElement("button", {
     type: "button",
     onClick: edit.save,
     disabled: !edit.canSave
@@ -1999,7 +2234,7 @@ function joinClasses(...entries) {
 __name(joinClasses, "joinClasses");
 
 // src/components/message-list.tsx
-function MessageList({ messages, status, renderToolPart, renderToolGroup, renderText, renderReasoning, renderFiles, reasoningLabel, getMeta, onFork, editable, onEditSubmit, regeneratable, onRegenerate, getUsage, getCreatedAt, emptyState, typingIndicator, followUps, onFollowUpClick, error, onRetry, classNames }) {
+function MessageList({ messages, status, renderToolPart, renderToolGroup, renderText, renderReasoning, renderFiles, renderUi, reasoningLabel, getMeta, onFork, editable, onEditSubmit, regeneratable, onRegenerate, getUsage, getCreatedAt, emptyState, typingIndicator, followUps, onFollowUpClick, error, onRetry, classNames }) {
   const transcript = useChatTranscript({
     messages,
     status,
@@ -2049,6 +2284,9 @@ function MessageList({ messages, status, renderToolPart, renderToolGroup, render
     ...renderFiles ? {
       renderFiles
     } : {},
+    ...renderUi ? {
+      renderUi
+    } : {},
     ...reasoningLabel !== void 0 ? {
       reasoningLabel
     } : {},
@@ -2222,35 +2460,35 @@ function toItem(entry) {
 __name(toItem, "toItem");
 
 // src/composer/use-composer-autocomplete.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 function useComposerAutocomplete(options) {
   const { value, sources, acceptOnTab = true } = options;
-  const latest = (0, import_react6.useRef)(options);
+  const latest = (0, import_react7.useRef)(options);
   latest.current = options;
-  const inputRef = (0, import_react6.useRef)(null);
-  const [caret, setCaret] = (0, import_react6.useState)(value.length);
-  const [items, setItems] = (0, import_react6.useState)([]);
-  const [isLoading, setLoading] = (0, import_react6.useState)(false);
-  const [error, setError] = (0, import_react6.useState)(null);
-  const [activeIndex, setActiveIndex] = (0, import_react6.useState)(0);
-  const [dismissedIndex, setDismissedIndex] = (0, import_react6.useState)(null);
+  const inputRef = (0, import_react7.useRef)(null);
+  const [caret, setCaret] = (0, import_react7.useState)(value.length);
+  const [items, setItems] = (0, import_react7.useState)([]);
+  const [isLoading, setLoading] = (0, import_react7.useState)(false);
+  const [error, setError] = (0, import_react7.useState)(null);
+  const [activeIndex, setActiveIndex] = (0, import_react7.useState)(0);
+  const [dismissedIndex, setDismissedIndex] = (0, import_react7.useState)(null);
   const safeCaret = Math.min(caret, value.length);
-  const match = (0, import_react6.useMemo)(() => findActiveTrigger(value, safeCaret, sources), [
+  const match = (0, import_react7.useMemo)(() => findActiveTrigger(value, safeCaret, sources), [
     value,
     safeCaret,
     sources
   ]);
   const isActive = match !== null && dismissedIndex !== match.index;
-  const matchRef = (0, import_react6.useRef)(match);
+  const matchRef = (0, import_react7.useRef)(match);
   matchRef.current = match;
-  const caretRef = (0, import_react6.useRef)(safeCaret);
+  const caretRef = (0, import_react7.useRef)(safeCaret);
   caretRef.current = safeCaret;
-  const itemsRef = (0, import_react6.useRef)(items);
+  const itemsRef = (0, import_react7.useRef)(items);
   itemsRef.current = items;
-  const activeIndexRef = (0, import_react6.useRef)(activeIndex);
+  const activeIndexRef = (0, import_react7.useRef)(activeIndex);
   activeIndexRef.current = activeIndex;
   const requestKey = isActive && match ? `${match.source.id}\0${match.query}` : null;
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     const current = matchRef.current;
     if (requestKey === null || current === null) {
       setItems([]);
@@ -2298,25 +2536,25 @@ function useComposerAutocomplete(options) {
   ]);
   const isOpen = isActive;
   const activeItem = isOpen ? items[activeIndex] ?? null : null;
-  const reactId = (0, import_react6.useId)();
+  const reactId = (0, import_react7.useId)();
   const listboxId = options.id ?? `agent-autocomplete-${reactId}`;
-  const optionId = (0, import_react6.useCallback)((index) => `${listboxId}-option-${index}`, [
+  const optionId = (0, import_react7.useCallback)((index) => `${listboxId}-option-${index}`, [
     listboxId
   ]);
-  const highlight = (0, import_react6.useCallback)((index) => {
+  const highlight = (0, import_react7.useCallback)((index) => {
     const total = itemsRef.current.length;
     if (total === 0) return;
     setActiveIndex((index % total + total) % total);
   }, []);
-  const moveHighlight = (0, import_react6.useCallback)((delta) => highlight(activeIndexRef.current + delta), [
+  const moveHighlight = (0, import_react7.useCallback)((delta) => highlight(activeIndexRef.current + delta), [
     highlight
   ]);
-  const dismiss = (0, import_react6.useCallback)(() => {
+  const dismiss = (0, import_react7.useCallback)(() => {
     const current = matchRef.current;
     if (current) setDismissedIndex(current.index);
   }, []);
-  const pendingCaret = (0, import_react6.useRef)(null);
-  const accept = (0, import_react6.useCallback)((item) => {
+  const pendingCaret = (0, import_react7.useRef)(null);
+  const accept = (0, import_react7.useCallback)((item) => {
     const current = matchRef.current;
     if (!current) return;
     const chosen = item ?? itemsRef.current[activeIndexRef.current];
@@ -2327,16 +2565,16 @@ function useComposerAutocomplete(options) {
     setDismissedIndex(null);
     pendingCaret.current = edit.caret;
   }, []);
-  (0, import_react6.useLayoutEffect)(() => {
+  (0, import_react7.useLayoutEffect)(() => {
     const position = pendingCaret.current;
     if (position === null) return;
     pendingCaret.current = null;
     inputRef.current?.setSelectionRange(position, position);
   });
-  const readCaret = (0, import_react6.useCallback)((element) => {
+  const readCaret = (0, import_react7.useCallback)((element) => {
     setCaret(element.selectionStart ?? element.value.length);
   }, []);
-  const onKeyDown = (0, import_react6.useCallback)((event) => {
+  const onKeyDown = (0, import_react7.useCallback)((event) => {
     if (!isOpen) return;
     const hasItems = itemsRef.current.length > 0;
     switch (event.key) {
@@ -2374,23 +2612,23 @@ function useComposerAutocomplete(options) {
     dismiss,
     moveHighlight
   ]);
-  const onChange = (0, import_react6.useCallback)((event) => {
+  const onChange = (0, import_react7.useCallback)((event) => {
     readCaret(event.target);
     const next = findActiveTrigger(event.target.value, event.target.selectionStart ?? event.target.value.length, latest.current.sources);
     setDismissedIndex((current) => current !== null && next?.index === current ? current : null);
   }, [
     readCaret
   ]);
-  const onSelect = (0, import_react6.useCallback)((event) => readCaret(event.currentTarget), [
+  const onSelect = (0, import_react7.useCallback)((event) => readCaret(event.currentTarget), [
     readCaret
   ]);
-  const onClick = (0, import_react6.useCallback)((event) => readCaret(event.currentTarget), [
+  const onClick = (0, import_react7.useCallback)((event) => readCaret(event.currentTarget), [
     readCaret
   ]);
-  const setInput = (0, import_react6.useCallback)((element) => {
+  const setInput = (0, import_react7.useCallback)((element) => {
     inputRef.current = element;
   }, []);
-  const getInputProps = (0, import_react6.useCallback)(() => ({
+  const getInputProps = (0, import_react7.useCallback)(() => ({
     ref: setInput,
     onChange,
     onKeyDown,
@@ -2418,7 +2656,7 @@ function useComposerAutocomplete(options) {
     activeIndex,
     optionId
   ]);
-  const getListboxProps = (0, import_react6.useCallback)(() => ({
+  const getListboxProps = (0, import_react7.useCallback)(() => ({
     id: listboxId,
     role: "listbox",
     "aria-label": match?.source.label ?? match?.source.id ?? "Suggestions"
@@ -2426,7 +2664,7 @@ function useComposerAutocomplete(options) {
     listboxId,
     match
   ]);
-  const getOptionProps = (0, import_react6.useCallback)((index) => ({
+  const getOptionProps = (0, import_react7.useCallback)((index) => ({
     id: optionId(index),
     role: "option",
     "aria-selected": index === activeIndex
@@ -2480,6 +2718,16 @@ function refusalReason(result) {
 __name(refusalReason, "refusalReason");
 function storedMessageToUiMessage(message) {
   const parts = [];
+  if (message.reasoning) {
+    parts.push({
+      type: "reasoning",
+      text: message.reasoning,
+      state: "done",
+      ...message.reasoningMs !== void 0 ? {
+        providerMetadata: reasoningDurationMetadata(message.reasoningMs)
+      } : {}
+    });
+  }
   if (message.content) {
     parts.push({
       type: "text",
@@ -2494,6 +2742,20 @@ function storedMessageToUiMessage(message) {
       url: attachment.url
     });
   }
+  for (const component of message.ui ?? []) {
+    parts.push({
+      type: "data-ui",
+      id: component.id,
+      data: {
+        id: component.id,
+        component: component.component,
+        props: component.props,
+        ...component.version !== void 0 ? {
+          version: component.version
+        } : {}
+      }
+    });
+  }
   for (const call of message.toolCalls ?? []) {
     const result = message.toolResults?.find((candidate) => candidate.id === call.id);
     const toolKind2 = call.kind;
@@ -2595,21 +2857,21 @@ function sumUsage(rows) {
 __name(sumUsage, "sumUsage");
 
 // src/use-agent-chat.ts
-var import_react7 = require("@ai-sdk/react");
-var import_react8 = require("react");
+var import_react8 = require("@ai-sdk/react");
+var import_react9 = require("react");
 function useAgentChat(options) {
-  const latest = (0, import_react8.useRef)(options);
+  const latest = (0, import_react9.useRef)(options);
   latest.current = options;
-  const [runId, setRunId] = (0, import_react8.useState)(options.resumeRunId);
-  const runIdRef = (0, import_react8.useRef)(runId);
+  const [runId, setRunId] = (0, import_react9.useState)(options.resumeRunId);
+  const runIdRef = (0, import_react9.useRef)(runId);
   runIdRef.current = runId;
-  const settlingRunIdRef = (0, import_react8.useRef)(void 0);
-  const autoResumeRunIdRef = (0, import_react8.useRef)(void 0);
-  const [autoResume, setAutoResume] = (0, import_react8.useState)(false);
-  const [activeRunId, setActiveRunId] = (0, import_react8.useState)(null);
-  const regenerateNext = (0, import_react8.useRef)(false);
-  const createdThreadId = (0, import_react8.useRef)(void 0);
-  const client = (0, import_react8.useMemo)(() => {
+  const settlingRunIdRef = (0, import_react9.useRef)(void 0);
+  const autoResumeRunIdRef = (0, import_react9.useRef)(void 0);
+  const [autoResume, setAutoResume] = (0, import_react9.useState)(false);
+  const [activeRunId, setActiveRunId] = (0, import_react9.useState)(null);
+  const regenerateNext = (0, import_react9.useRef)(false);
+  const createdThreadId = (0, import_react9.useRef)(void 0);
+  const client = (0, import_react9.useMemo)(() => {
     if (options.client) return options.client;
     return new AgentClient({
       ...options.baseUrl !== void 0 ? {
@@ -2624,7 +2886,7 @@ function useAgentChat(options) {
       getHeaders: /* @__PURE__ */ __name(async () => mergeHeaders(latest.current), "getHeaders")
     });
   }, []);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (!options.resume || options.threadId === void 0) return;
     let cancelled = false;
     const threadId = options.threadId;
@@ -2644,7 +2906,7 @@ function useAgentChat(options) {
     options.resume,
     options.threadId
   ]);
-  const transport = (0, import_react8.useMemo)(() => {
+  const transport = (0, import_react9.useMemo)(() => {
     function onMeta(meta) {
       settlingRunIdRef.current = meta.runId;
       setRunId(meta.runId);
@@ -2693,8 +2955,8 @@ function useAgentChat(options) {
       }, "onAttemptStart")
     });
   }, []);
-  const backgroundRef = (0, import_react8.useRef)(() => Promise.resolve());
-  const chat = (0, import_react7.useChat)({
+  const backgroundRef = (0, import_react9.useRef)(() => Promise.resolve());
+  const chat = (0, import_react8.useChat)({
     transport,
     resume: options.resumeRunId !== void 0 || autoResume,
     ...options.threadId !== void 0 ? {
@@ -2703,6 +2965,13 @@ function useAgentChat(options) {
     ...options.initialMessages !== void 0 ? {
       messages: options.initialMessages
     } : {},
+    onData: /* @__PURE__ */ __name((part) => {
+      latest.current.onData?.(part);
+      if (part.type === "data-title") {
+        const title = part.data?.title;
+        if (typeof title === "string") latest.current.onTitle?.(title);
+      }
+    }, "onData"),
     onFinish: /* @__PURE__ */ __name(({ isError }) => {
       latest.current.onFinish?.();
       if (latest.current.background === true) {
@@ -2717,13 +2986,13 @@ function useAgentChat(options) {
       }
     }, "onFinish")
   });
-  const chatRef = (0, import_react8.useRef)(chat);
+  const chatRef = (0, import_react9.useRef)(chat);
   chatRef.current = chat;
-  const turnInFlight = (0, import_react8.useRef)(false);
-  const isTurnInFlight = (0, import_react8.useCallback)(() => turnInFlight.current || transport.isAttemptLive, [
+  const turnInFlight = (0, import_react9.useRef)(false);
+  const isTurnInFlight = (0, import_react9.useCallback)(() => turnInFlight.current || transport.isAttemptLive, [
     transport
   ]);
-  const sendMessage = (0, import_react8.useCallback)(async (...args) => {
+  const sendMessage = (0, import_react9.useCallback)(async (...args) => {
     if (isTurnInFlight()) return;
     turnInFlight.current = true;
     try {
@@ -2734,15 +3003,15 @@ function useAgentChat(options) {
   }, [
     isTurnInFlight
   ]);
-  const addToolResult = (0, import_react8.useCallback)(({ tool, toolCallId, output }) => chatRef.current.addToolResult({
+  const addToolResult = (0, import_react9.useCallback)(({ tool, toolCallId, output }) => chatRef.current.addToolResult({
     tool,
     toolCallId,
     output
   }), []);
-  const [threads, setThreads] = (0, import_react8.useState)([]);
-  const [quota, setQuota] = (0, import_react8.useState)(null);
-  const [backgroundRuns, setBackgroundRuns] = (0, import_react8.useState)([]);
-  const refreshBackground = (0, import_react8.useCallback)(async () => {
+  const [threads, setThreads] = (0, import_react9.useState)([]);
+  const [quota, setQuota] = (0, import_react9.useState)(null);
+  const [backgroundRuns, setBackgroundRuns] = (0, import_react9.useState)([]);
+  const refreshBackground = (0, import_react9.useCallback)(async () => {
     const threadId = latest.current.threadId ?? createdThreadId.current;
     if (threadId === void 0) {
       return;
@@ -2767,7 +3036,7 @@ function useAgentChat(options) {
   ]);
   backgroundRef.current = refreshBackground;
   const isWorking = backgroundRuns.some((run) => run.status === "running");
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (options.background !== true || options.threadId === void 0) {
       return;
     }
@@ -2777,7 +3046,7 @@ function useAgentChat(options) {
     options.threadId,
     refreshBackground
   ]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const every = latest.current.backgroundPollMs ?? 5e3;
     if (latest.current.background !== true || !isWorking || every <= 0) {
       return;
@@ -2788,26 +3057,26 @@ function useAgentChat(options) {
     isWorking,
     refreshBackground
   ]);
-  const loadThreads = (0, import_react8.useCallback)(async () => {
+  const loadThreads = (0, import_react9.useCallback)(async () => {
     const list = await client.listThreads();
     setThreads(list);
     return list;
   }, [
     client
   ]);
-  const loadThread = (0, import_react8.useCallback)((id) => client.getThread(id), [
+  const loadThread = (0, import_react9.useCallback)((id) => client.getThread(id), [
     client
   ]);
-  const deleteThread = (0, import_react8.useCallback)(async (id) => {
+  const deleteThread = (0, import_react9.useCallback)(async (id) => {
     await client.deleteThread(id);
     setThreads((current) => current.filter((thread) => thread.id !== id));
   }, [
     client
   ]);
-  const forkThread = (0, import_react8.useCallback)((threadId, messageId) => client.forkFromMessage(threadId, messageId), [
+  const forkThread = (0, import_react9.useCallback)((threadId, messageId) => client.forkFromMessage(threadId, messageId), [
     client
   ]);
-  const renameThread = (0, import_react8.useCallback)(async (id, title) => {
+  const renameThread = (0, import_react9.useCallback)(async (id, title) => {
     await client.renameThread(id, title);
     setThreads((current) => current.map((thread) => thread.id === id ? {
       ...thread,
@@ -2816,24 +3085,24 @@ function useAgentChat(options) {
   }, [
     client
   ]);
-  const promoteThread = (0, import_react8.useCallback)(async (id) => {
+  const promoteThread = (0, import_react9.useCallback)(async (id) => {
     await client.promoteThread(id);
     await loadThreads();
   }, [
     client,
     loadThreads
   ]);
-  const truncateFromMessage = (0, import_react8.useCallback)((threadId, messageId) => client.truncateFromMessage(threadId, messageId).then(() => void 0), [
+  const truncateFromMessage = (0, import_react9.useCallback)((threadId, messageId) => client.truncateFromMessage(threadId, messageId).then(() => void 0), [
     client
   ]);
-  const loadQuota = (0, import_react8.useCallback)(async () => {
+  const loadQuota = (0, import_react9.useCallback)(async () => {
     const today = await client.getQuotaToday();
     setQuota(today);
     return today;
   }, [
     client
   ]);
-  const cancel = (0, import_react8.useCallback)(async () => {
+  const cancel = (0, import_react9.useCallback)(async () => {
     chatRef.current.stop();
     const activeRunId2 = runIdRef.current;
     if (activeRunId2) {
@@ -2845,14 +3114,14 @@ function useAgentChat(options) {
   }, [
     client
   ]);
-  const approve = (0, import_react8.useCallback)(async ({ toolCallId }) => {
+  const approve = (0, import_react9.useCallback)(async ({ toolCallId }) => {
     await client.approveToolCall({
       toolCallId
     });
   }, [
     client
   ]);
-  const reject = (0, import_react8.useCallback)(async ({ toolCallId, reason }) => {
+  const reject = (0, import_react9.useCallback)(async ({ toolCallId, reason }) => {
     await client.rejectToolCall({
       toolCallId,
       ...reason !== void 0 ? {
@@ -2862,7 +3131,7 @@ function useAgentChat(options) {
   }, [
     client
   ]);
-  const answer = (0, import_react8.useCallback)(async ({ toolCallId, answers }) => {
+  const answer = (0, import_react9.useCallback)(async ({ toolCallId, answers }) => {
     await client.answerToolCall({
       toolCallId,
       ...answers !== void 0 ? {
@@ -2872,14 +3141,14 @@ function useAgentChat(options) {
   }, [
     client
   ]);
-  const skip = (0, import_react8.useCallback)(async ({ toolCallId }) => {
+  const skip = (0, import_react9.useCallback)(async ({ toolCallId }) => {
     await client.skipToolCall({
       toolCallId
     });
   }, [
     client
   ]);
-  const regenerate = (0, import_react8.useCallback)(() => {
+  const regenerate = (0, import_react9.useCallback)(() => {
     if (isTurnInFlight()) return;
     regenerateNext.current = true;
     turnInFlight.current = true;
@@ -2951,14 +3220,17 @@ __name(mergeHeaders, "mergeHeaders");
   extractMessageText,
   filterAutocompleteItems,
   findActiveTrigger,
+  formatElapsed,
   formatRelativeTime,
   loadStoredSpeechLang,
   persistSpeechLang,
+  readReasoningMs,
   storedMessageToUiMessage,
   storedThreadToUiMessages,
   useAgentChat,
   useChatTranscript,
   useComposerAutocomplete,
+  useElapsed,
   useSpeechRecognition,
   useStickToBottom,
   useTranscriptItem