npm - @truefoundry/agent-ui-sdk - Versions diffs - 0.0.2 → 0.0.4 - Mend

@truefoundry/agent-ui-sdk 0.0.2 → 0.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/index.js CHANGED Viewed

@@ -84,9 +84,9 @@ import {
 // src/theme/defaultSlots.ts
 import {
-  Accordion as Accordion2,
-  AccordionDetails as AccordionDetails2,
-  AccordionSummary as AccordionSummary2
+  Accordion as Accordion3,
+  AccordionDetails as AccordionDetails3,
+  AccordionSummary as AccordionSummary3
 } from "tfy-web-components/components/atoms/Accordion";
 import Button2 from "tfy-web-components/components/atoms/Button";
 import IconButton4 from "tfy-web-components/components/atoms/IconButton";
@@ -171,7 +171,7 @@ function UserMessageBubble({ text, attachments, editAction, className }) {
       className: cn("fade-in slide-in-from-bottom-1 animate-in duration-150", className),
       children: [
         attachments,
-        /* @__PURE__ */ jsx11(UserMessage, { text, editAction, actionsAlwaysVisible: true })
+        /* @__PURE__ */ jsx11(UserMessage, { text, editAction })
       ]
     }
   );
@@ -203,10 +203,11 @@ import {
 } from "tfy-web-components/components/molecules/agent-chat";
 import { jsx as jsx13 } from "react/jsx-runtime";
 function ToolCallCard(props) {
+  const { mcpServerName, ...tfyProps } = props;
   return /* @__PURE__ */ jsx13(
     TfyToolCallCard,
     {
-      ...props,
+      ...tfyProps,
       className: cn("aui-tool-call-card", props.className)
     }
   );
@@ -378,11 +379,80 @@ function ToolGroupCard({
   );
 }
+// src/atoms/AgentStepsCard.tsx
+import { LoaderIcon as LoaderIcon2 } from "lucide-react";
+import { Accordion as Accordion2, AccordionDetails as AccordionDetails2, AccordionSummary as AccordionSummary2 } from "tfy-web-components/components/atoms/Accordion";
+import IconProvider from "tfy-web-components/components/atoms/IconProvider";
+import { jsx as jsx19, jsxs as jsxs5 } from "react/jsx-runtime";
+function AgentStepsCard({
+  toolCount,
+  thinkingCount,
+  expanded,
+  active = false,
+  onToggle,
+  children,
+  className
+}) {
+  const toolLabel = `${toolCount} tool ${toolCount === 1 ? "call" : "calls"}`;
+  const thinkingLabel = thinkingCount > 0 ? ` \xB7 ${thinkingCount} thought${thinkingCount === 1 ? "" : "s"}` : "";
+  return /* @__PURE__ */ jsxs5(
+    Accordion2,
+    {
+      "data-slot": "agent-steps-card",
+      expanded,
+      onChange: () => onToggle(),
+      background: "transparent",
+      className: cn("aui-agent-steps-card rounded-lg border border-border/50 bg-secondary/20", className),
+      sx: { margin: 0, boxShadow: "none" },
+      children: [
+        /* @__PURE__ */ jsx19(
+          AccordionSummary2,
+          {
+            hideIcon: true,
+            disableRipple: true,
+            sx: {
+              padding: 0,
+              minHeight: 0,
+              "&.Mui-expanded": { minHeight: 0 },
+              "& .MuiAccordionSummary-content": { margin: 0, width: "100%" }
+            },
+            children: /* @__PURE__ */ jsxs5(
+              "button",
+              {
+                type: "button",
+                className: "flex w-full items-center gap-2 rounded-t-lg py-2 px-2.5 text-left text-xs transition-colors hover:bg-secondary/40",
+                children: [
+                  /* @__PURE__ */ jsx19(
+                    IconProvider,
+                    {
+                      icon: expanded ? "chevron-down" : "chevron-right",
+                      size: 0.75,
+                      className: "shrink-0 text-muted-foreground"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx19("span", { className: "font-semibold text-foreground/90", children: "Agent steps" }),
+                  /* @__PURE__ */ jsxs5("span", { className: "text-muted-foreground", children: [
+                    "\xB7 ",
+                    toolLabel,
+                    thinkingLabel
+                  ] }),
+                  active && /* @__PURE__ */ jsx19(LoaderIcon2, { className: "ml-auto size-3 shrink-0 animate-spin text-primary" })
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx19(AccordionDetails2, { sx: { padding: 0 }, children: /* @__PURE__ */ jsx19("div", { className: "space-y-3 border-t border-border/50 px-1.5 py-1.5 pt-3", children }) })
+      ]
+    }
+  );
+}
 // src/atoms/Skeletons.tsx
 import Skeleton from "tfy-web-components/components/atoms/Skeleton";
-import { jsx as jsx19, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs6 } from "react/jsx-runtime";
 function MessageListSkeleton({ className }) {
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       role: "status",
@@ -390,11 +460,11 @@ function MessageListSkeleton({ className }) {
       "data-slot": "aui_thread-history-skeleton",
       className: cn("mb-14 flex flex-col gap-y-6", className),
       children: [
-        /* @__PURE__ */ jsx19("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx19(Skeleton, { className: "h-10 w-[min(85%,20rem)] rounded-xl" }) }),
-        /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-2 px-2", children: [
-          /* @__PURE__ */ jsx19(Skeleton, { className: "h-4 w-full max-w-md" }),
-          /* @__PURE__ */ jsx19(Skeleton, { className: "h-4 w-full max-w-sm" }),
-          /* @__PURE__ */ jsx19(Skeleton, { className: "h-4 w-2/3 max-w-xs" })
+        /* @__PURE__ */ jsx20("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx20(Skeleton, { className: "h-10 w-[min(85%,20rem)] rounded-xl" }) }),
+        /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-2 px-2", children: [
+          /* @__PURE__ */ jsx20(Skeleton, { className: "h-4 w-full max-w-md" }),
+          /* @__PURE__ */ jsx20(Skeleton, { className: "h-4 w-full max-w-sm" }),
+          /* @__PURE__ */ jsx20(Skeleton, { className: "h-4 w-2/3 max-w-xs" })
         ] })
       ]
     }
@@ -402,7 +472,7 @@ function MessageListSkeleton({ className }) {
 }
 // src/atoms/ComposerShell.tsx
-import { jsx as jsx20, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs7 } from "react/jsx-runtime";
 function ComposerShell({
   value,
   placeholder,
@@ -421,7 +491,7 @@ function ComposerShell({
   const ComposerLeftSection2 = useSlot("ComposerLeftSection");
   const ComposerRightSection2 = useSlot("ComposerRightSection");
   const ComposerSendButton2 = useSlot("ComposerSendButton");
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       "data-slot": "aui_composer-shell",
@@ -431,7 +501,7 @@ function ComposerShell({
       ),
       children: [
         attachments,
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx21(
           "textarea",
           {
             value,
@@ -449,9 +519,9 @@ function ComposerShell({
             className: "placeholder:text-muted-foreground/80 max-h-32 min-h-10 w-full resize-none rounded-lg bg-transparent px-2.5 py-1 text-base outline-none"
           }
         ),
-        /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between px-1", children: [
-          /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between px-1", children: [
+          /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx21(
               ComposerLeftSection2,
               {
                 disabled,
@@ -459,15 +529,15 @@ function ComposerShell({
                 onAttach
               }
             ),
-            connectorStatusLabel && /* @__PURE__ */ jsx20("span", { className: "text-muted-foreground text-xs", children: connectorStatusLabel })
+            connectorStatusLabel && /* @__PURE__ */ jsx21("span", { className: "text-muted-foreground text-xs", children: connectorStatusLabel })
           ] }),
-          /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
-            modelLabel && /* @__PURE__ */ jsxs6("span", { className: "bg-muted text-muted-foreground flex items-center gap-1 rounded-full px-2 py-0.5 text-xs", children: [
+          /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
+            modelLabel && /* @__PURE__ */ jsxs7("span", { className: "bg-muted text-muted-foreground flex items-center gap-1 rounded-full px-2 py-0.5 text-xs", children: [
               modelIcon,
               modelLabel
             ] }),
-            /* @__PURE__ */ jsx20(ComposerRightSection2, { disabled, isRunning }),
-            /* @__PURE__ */ jsx20(
+            /* @__PURE__ */ jsx21(ComposerRightSection2, { disabled, isRunning }),
+            /* @__PURE__ */ jsx21(
               ComposerSendButton2,
               {
                 disabled,
@@ -486,11 +556,11 @@ function ComposerShell({
 // src/atoms/ComposerSections.tsx
 import Spinner from "tfy-web-components/components/atoms/Spinner";
-import { Fragment, jsx as jsx21, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx22, jsxs as jsxs8 } from "react/jsx-runtime";
 function ComposerLeftSection({ onAttach }) {
   const IconButton5 = useSlot("IconButton");
   if (!onAttach) return null;
-  return /* @__PURE__ */ jsx21(IconButton5, { icon: "plus", tooltip: "Attach", onClick: onAttach });
+  return /* @__PURE__ */ jsx22(IconButton5, { icon: "plus", tooltip: "Attach", onClick: onAttach });
 }
 function ComposerRightSection(_) {
   return null;
@@ -503,19 +573,19 @@ function ComposerSendButton({
 }) {
   const Button4 = useSlot("Button");
   if (isRunning) {
-    return /* @__PURE__ */ jsx21(
+    return /* @__PURE__ */ jsx22(
       Button4.Primary,
       {
         disabled: !onCancel,
         onClick: onCancel,
-        text: /* @__PURE__ */ jsxs7(Fragment, { children: [
-          /* @__PURE__ */ jsx21(Spinner, { small: true }),
+        text: /* @__PURE__ */ jsxs8(Fragment, { children: [
+          /* @__PURE__ */ jsx22(Spinner, { small: true }),
           "Cancel"
         ] })
       }
     );
   }
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     Button4.Primary,
     {
       disabled: !canSubmit,
@@ -536,7 +606,7 @@ import { FileTextIcon } from "lucide-react";
 var USER_MESSAGE_ATTACHMENT_PREVIEW_REM = 12;
 // src/atoms/AttachmentCard.tsx
-import { jsx as jsx22, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs9 } from "react/jsx-runtime";
 function AttachmentCard({
   name,
   previewSrc,
@@ -552,7 +622,7 @@ function AttachmentCard({
   const AvatarFallback2 = useSlot("AvatarFallback");
   if (size === "preview" && isImage && previewSrc) {
     const previewSize = previewRem != null ? { width: `${previewRem}rem`, height: `${previewRem}rem` } : void 0;
-    return /* @__PURE__ */ jsx22(
+    return /* @__PURE__ */ jsx23(
       "div",
       {
         "data-slot": "aui_attachment-preview",
@@ -562,11 +632,11 @@ function AttachmentCard({
           previewRem == null && "size-24",
           className
         ),
-        children: /* @__PURE__ */ jsx22("img", { src: previewSrc, alt: name, className: "h-full w-full object-cover" })
+        children: /* @__PURE__ */ jsx23("img", { src: previewSrc, alt: name, className: "h-full w-full object-cover" })
       }
     );
   }
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       "data-slot": "aui_attachment-chip",
@@ -576,12 +646,12 @@ function AttachmentCard({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx22("div", { className: "bg-background flex size-7 shrink-0 items-center justify-center overflow-hidden rounded-md border", children: isImage && previewSrc ? /* @__PURE__ */ jsxs8(Avatar2, { className: "size-7 rounded-none", children: [
-          /* @__PURE__ */ jsx22(AvatarImage2, { src: previewSrc, alt: name, className: "object-cover" }),
-          /* @__PURE__ */ jsx22(AvatarFallback2, { children: /* @__PURE__ */ jsx22(FileTextIcon, { className: "text-muted-foreground size-4" }) })
-        ] }) : /* @__PURE__ */ jsx22(FileTextIcon, { className: "text-muted-foreground size-4" }) }),
-        /* @__PURE__ */ jsx22("span", { className: "text-foreground min-w-0 truncate text-sm", children: name }),
-        onRemove && /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx23("div", { className: "bg-background flex size-7 shrink-0 items-center justify-center overflow-hidden rounded-md border", children: isImage && previewSrc ? /* @__PURE__ */ jsxs9(Avatar2, { className: "size-7 rounded-none", children: [
+          /* @__PURE__ */ jsx23(AvatarImage2, { src: previewSrc, alt: name, className: "object-cover" }),
+          /* @__PURE__ */ jsx23(AvatarFallback2, { children: /* @__PURE__ */ jsx23(FileTextIcon, { className: "text-muted-foreground size-4" }) })
+        ] }) : /* @__PURE__ */ jsx23(FileTextIcon, { className: "text-muted-foreground size-4" }) }),
+        /* @__PURE__ */ jsx23("span", { className: "text-foreground min-w-0 truncate text-sm", children: name }),
+        onRemove && /* @__PURE__ */ jsx23(
           IconButton5,
           {
             icon: "xmark",
@@ -597,9 +667,9 @@ function AttachmentCard({
 // src/atoms/AttachmentPickerButton.tsx
 import IconButton from "tfy-web-components/components/atoms/IconButton";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 function AttachmentPickerButton(props) {
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     IconButton,
     {
       icon: "plus",
@@ -613,13 +683,13 @@ function AttachmentPickerButton(props) {
 // src/atoms/AttachmentPreviewDialog.tsx
 import { useState } from "react";
 import Modal from "tfy-web-components/components/atoms/Modal";
-import { Fragment as Fragment2, jsx as jsx24, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx25, jsxs as jsxs10 } from "react/jsx-runtime";
 function AttachmentPreviewDialog({ previewSrc, children }) {
   const IconButton5 = useSlot("IconButton");
   const [open, setOpen] = useState(false);
-  if (!previewSrc) return /* @__PURE__ */ jsx24(Fragment2, { children });
-  return /* @__PURE__ */ jsxs9(Fragment2, { children: [
-    /* @__PURE__ */ jsx24(
+  if (!previewSrc) return /* @__PURE__ */ jsx25(Fragment2, { children });
+  return /* @__PURE__ */ jsxs10(Fragment2, { children: [
+    /* @__PURE__ */ jsx25(
       "div",
       {
         role: "button",
@@ -635,9 +705,9 @@ function AttachmentPreviewDialog({ previewSrc, children }) {
         children
       }
     ),
-    /* @__PURE__ */ jsx24(Modal, { open, onClose: () => setOpen(false), children: /* @__PURE__ */ jsxs9("div", { className: "bg-popover fixed top-1/2 left-1/2 z-50 w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-xl p-2 outline-none sm:max-w-3xl", children: [
-      /* @__PURE__ */ jsx24("span", { className: "absolute top-2 right-2 z-10 inline-flex", children: /* @__PURE__ */ jsx24(IconButton5, { icon: "xmark", tooltip: "Close", onClick: () => setOpen(false) }) }),
-      /* @__PURE__ */ jsx24("div", { className: "bg-background relative mx-auto flex max-h-[80dvh] w-full items-center justify-center overflow-hidden", children: /* @__PURE__ */ jsx24(
+    /* @__PURE__ */ jsx25(Modal, { open, onClose: () => setOpen(false), children: /* @__PURE__ */ jsxs10("div", { className: "bg-popover fixed top-1/2 left-1/2 z-50 w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-xl p-2 outline-none sm:max-w-3xl", children: [
+      /* @__PURE__ */ jsx25("span", { className: "absolute top-2 right-2 z-10 inline-flex", children: /* @__PURE__ */ jsx25(IconButton5, { icon: "xmark", tooltip: "Close", onClick: () => setOpen(false) }) }),
+      /* @__PURE__ */ jsx25("div", { className: "bg-background relative mx-auto flex max-h-[80dvh] w-full items-center justify-center overflow-hidden", children: /* @__PURE__ */ jsx25(
         "img",
         {
           src: previewSrc,
@@ -652,16 +722,16 @@ function AttachmentPreviewDialog({ previewSrc, children }) {
 // src/atoms/ScrollToBottomButton.tsx
 import { forwardRef as forwardRef2 } from "react";
 import IconButton2 from "tfy-web-components/components/atoms/IconButton";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var ScrollToBottomButton = forwardRef2(
   ({ className, disabled, ...rest }, ref) => {
     if (disabled) return null;
-    return /* @__PURE__ */ jsx25(
+    return /* @__PURE__ */ jsx26(
       "span",
       {
         ref,
         className: cn("absolute -top-14 z-10 inline-flex self-center"),
-        children: /* @__PURE__ */ jsx25(
+        children: /* @__PURE__ */ jsx26(
           IconButton2,
           {
             icon: "arrow-down",
@@ -681,12 +751,12 @@ var ScrollToBottomButton = forwardRef2(
 ScrollToBottomButton.displayName = "ScrollToBottomButton";
 // src/atoms/ThreadListRow.tsx
-import IconProvider from "tfy-web-components/components/atoms/IconProvider";
+import IconProvider2 from "tfy-web-components/components/atoms/IconProvider";
 import IconButton3 from "tfy-web-components/components/atoms/IconButton";
 import DropdownMenu from "tfy-web-components/components/molecules/DropdownMenu";
-import { jsx as jsx26, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs11 } from "react/jsx-runtime";
 function ThreadListRow({ title, active, onSelect, onArchive, onDelete, className }) {
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
       "data-slot": "aui_thread-list-item",
@@ -696,20 +766,20 @@ function ThreadListRow({ title, active, onSelect, onArchive, onDelete, className
         className
       ),
       children: [
-        /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx27(
           "button",
           {
             type: "button",
             onClick: onSelect,
             "data-slot": "aui_thread-list-item-trigger",
             className: "flex min-h-9 min-w-0 flex-1 items-center rounded-lg px-2.5 py-2 text-start text-sm outline-none group-hover:pe-9",
-            children: /* @__PURE__ */ jsx26("span", { className: "min-w-0 flex-1 truncate", children: title })
+            children: /* @__PURE__ */ jsx27("span", { className: "min-w-0 flex-1 truncate", children: title })
           }
         ),
-        (onArchive || onDelete) && /* @__PURE__ */ jsx26("div", { className: "absolute end-1.5 top-1/2 inline-flex -translate-y-1/2 opacity-0 group-hover:opacity-100", children: /* @__PURE__ */ jsxs10(
+        (onArchive || onDelete) && /* @__PURE__ */ jsx27("div", { className: "absolute end-1.5 top-1/2 inline-flex -translate-y-1/2 opacity-0 group-hover:opacity-100", children: /* @__PURE__ */ jsxs11(
           DropdownMenu,
           {
-            trigger: /* @__PURE__ */ jsx26(
+            trigger: /* @__PURE__ */ jsx27(
               IconButton3,
               {
                 icon: "ellipsis",
@@ -720,12 +790,12 @@ function ThreadListRow({ title, active, onSelect, onArchive, onDelete, className
             side: "right",
             align: "start",
             children: [
-              onArchive && /* @__PURE__ */ jsxs10(DropdownMenu.Item, { onClick: onArchive, children: [
-                /* @__PURE__ */ jsx26(IconProvider, { icon: "box-archive", size: 0.75 }),
+              onArchive && /* @__PURE__ */ jsxs11(DropdownMenu.Item, { onClick: onArchive, children: [
+                /* @__PURE__ */ jsx27(IconProvider2, { icon: "box-archive", size: 0.75 }),
                 "Archive"
               ] }),
-              onDelete && /* @__PURE__ */ jsxs10(DropdownMenu.Item, { onClick: onDelete, className: "text-destructive hover:bg-destructive/10", children: [
-                /* @__PURE__ */ jsx26(IconProvider, { icon: "trash", size: 0.75 }),
+              onDelete && /* @__PURE__ */ jsxs11(DropdownMenu.Item, { onClick: onDelete, className: "text-destructive hover:bg-destructive/10", children: [
+                /* @__PURE__ */ jsx27(IconProvider2, { icon: "trash", size: 0.75 }),
                 "Delete"
               ] })
             ]
@@ -739,9 +809,9 @@ function ThreadListRow({ title, active, onSelect, onArchive, onDelete, className
 // src/atoms/ThreadListMisc.tsx
 import Button from "tfy-web-components/components/atoms/Button";
 import Skeleton2 from "tfy-web-components/components/atoms/Skeleton";
-import { jsx as jsx27, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs12 } from "react/jsx-runtime";
 function ThreadListNewButton({ className, ...rest }) {
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx28(
     Button.Ghost,
     {
       "data-slot": "aui_thread-list-new",
@@ -753,24 +823,24 @@ function ThreadListNewButton({ className, ...rest }) {
   );
 }
 function ThreadListRowSkeleton({ count = 5, className }) {
-  return /* @__PURE__ */ jsx27("div", { className: cn("flex flex-col gap-1", className), role: "status", "aria-label": "Loading threads", children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx27("div", { className: "flex h-8 items-center px-2.5", children: /* @__PURE__ */ jsx27(Skeleton2, { className: "h-3.5 w-full" }) }, i)) });
+  return /* @__PURE__ */ jsx28("div", { className: cn("flex flex-col gap-1", className), role: "status", "aria-label": "Loading threads", children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx28("div", { className: "flex h-8 items-center px-2.5", children: /* @__PURE__ */ jsx28(Skeleton2, { className: "h-3.5 w-full" }) }, i)) });
 }
 function ThreadListEmptyState({ message = "No threads yet", className }) {
-  return /* @__PURE__ */ jsx27("div", { className: cn("text-muted-foreground flex flex-1 items-center justify-center px-4 text-center text-sm", className), children: message });
+  return /* @__PURE__ */ jsx28("div", { className: cn("text-muted-foreground flex flex-1 items-center justify-center px-4 text-center text-sm", className), children: message });
 }
 function ThreadListShell({ header, children, className }) {
-  return /* @__PURE__ */ jsxs11("div", { className: cn("font-sans-flex flex min-h-0 flex-1 flex-col gap-1 overflow-hidden p-3", className), children: [
+  return /* @__PURE__ */ jsxs12("div", { className: cn("font-sans-flex flex min-h-0 flex-1 flex-col gap-1 overflow-hidden p-3", className), children: [
     header,
-    /* @__PURE__ */ jsx27("div", { className: "flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto pb-1", children })
+    /* @__PURE__ */ jsx28("div", { className: "flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto pb-1", children })
   ] });
 }
 // src/atoms/MessageActionBar.tsx
-import { jsx as jsx28, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs13 } from "react/jsx-runtime";
 function MessageActionBar({ isCopied, onCopy, className }) {
   const MessageTimestamp2 = useSlot("MessageTimestamp");
   const IconButton5 = useSlot("IconButton");
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs13(
     "div",
     {
       className: cn(
@@ -778,8 +848,8 @@ function MessageActionBar({ isCopied, onCopy, className }) {
         className
       ),
       children: [
-        /* @__PURE__ */ jsx28(MessageTimestamp2, {}),
-        /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsx29(MessageTimestamp2, {}),
+        /* @__PURE__ */ jsx29(
           IconButton5,
           {
             icon: isCopied ? "check" : ["far", "clone"],
@@ -794,7 +864,7 @@ function MessageActionBar({ isCopied, onCopy, className }) {
 // src/atoms/Markdown.tsx
 import { MarkdownWithOpenUI } from "tfy-web-components/components/molecules/Markdown";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 function Markdown({
   content,
   isStreaming,
@@ -804,7 +874,7 @@ function Markdown({
   className
 }) {
   const mode = useThemeMode();
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(
     MarkdownWithOpenUI,
     {
       isStreaming,
@@ -820,14 +890,14 @@ function Markdown({
 // src/atoms/AssistantMessageBubble.tsx
 import { AssistantMessage } from "tfy-web-components/components/molecules/agent-chat";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 function AssistantMessageBubble({
   children,
   error,
   actionBar,
   className
 }) {
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     "div",
     {
       "data-slot": "aui_assistant-message-root",
@@ -835,15 +905,36 @@ function AssistantMessageBubble({
         "group/assistant fade-in slide-in-from-bottom-1 animate-in relative duration-150",
         className
       ),
-      children: /* @__PURE__ */ jsx30(AssistantMessage, { error, actionBar, children })
+      children: /* @__PURE__ */ jsx31(AssistantMessage, { error, actionBar, children })
     }
   );
 }
+// src/atoms/HistoryLoader.tsx
+import { forwardRef as forwardRef3 } from "react";
+import Spinner2 from "tfy-web-components/components/atoms/Spinner";
+import { jsx as jsx32 } from "react/jsx-runtime";
+var HistoryLoader = forwardRef3(
+  ({ className, isLoading = false, ...rest }, ref) => /* @__PURE__ */ jsx32(
+    "div",
+    {
+      ref,
+      "data-slot": "aui_history-loader",
+      role: "status",
+      "aria-live": "polite",
+      "aria-label": isLoading ? "Loading older messages" : "Scroll up to load older messages",
+      className: cn("flex justify-center py-2", className),
+      ...rest,
+      children: isLoading && /* @__PURE__ */ jsx32(Spinner2, { small: true })
+    }
+  )
+);
+HistoryLoader.displayName = "HistoryLoader";
 // src/atoms/MessageErrorBanner.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 function MessageErrorBanner({ message, className }) {
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx33(
     "div",
     {
       role: "alert",
@@ -851,15 +942,15 @@ function MessageErrorBanner({ message, className }) {
         "aui-message-error-root border-destructive bg-destructive/10 text-destructive dark:bg-destructive/5 mt-2 rounded-md border p-3 text-sm dark:text-red-200",
         className
       ),
-      children: /* @__PURE__ */ jsx31("span", { className: "aui-message-error-message line-clamp-2", children: message })
+      children: /* @__PURE__ */ jsx33("span", { className: "aui-message-error-message line-clamp-2", children: message })
     }
   );
 }
 // src/atoms/MessageIndicator.tsx
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 function MessageIndicator({ className }) {
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx34(
     "span",
     {
       "data-slot": "aui_assistant-message-indicator",
@@ -872,7 +963,7 @@ function MessageIndicator({ className }) {
 // src/atoms/MessageTimestamp.tsx
 import { useAuiState } from "@assistant-ui/react";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 function toDate(createdAt) {
   if (createdAt == null) {
     return null;
@@ -905,7 +996,7 @@ function MessageTimestamp({ className }) {
   if (date == null) {
     return null;
   }
-  return /* @__PURE__ */ jsx33(LightTooltip3, { title: formatFullDate(date), size: "fit", children: /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx35(LightTooltip3, { title: formatFullDate(date), size: "fit", children: /* @__PURE__ */ jsx35(
     "span",
     {
       className: cn(
@@ -921,7 +1012,7 @@ function MessageTimestamp({ className }) {
 import { ActionBarPrimitive, useAuiState as useAuiState2 } from "@assistant-ui/react";
 import { useActionBarCopy, useActionBarEdit } from "@assistant-ui/core/react";
 import { useTrueFoundryResetFromTurn } from "@truefoundry/assistant-ui-runtime";
-import { jsx as jsx34, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs14 } from "react/jsx-runtime";
 function parseTurnIdFromMessageId(messageId) {
   return messageId.replace(/-user$/, "");
 }
@@ -935,7 +1026,7 @@ function UserMessageActionBar({ className }) {
   const { copy, isCopied } = useActionBarCopy({
     copyToClipboard: (text) => navigator.clipboard.writeText(text)
   });
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(
     ActionBarPrimitive.Root,
     {
       hideWhenRunning: true,
@@ -944,7 +1035,7 @@ function UserMessageActionBar({ className }) {
         className
       ),
       children: [
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx36(
           IconButton5,
           {
             icon: "rotate-right",
@@ -952,7 +1043,7 @@ function UserMessageActionBar({ className }) {
             onClick: () => void resetFromTurn(turnId)
           }
         ),
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx36(
           IconButton5,
           {
             icon: "pencil",
@@ -961,7 +1052,7 @@ function UserMessageActionBar({ className }) {
             onClick: edit
           }
         ),
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx36(
           IconButton5,
           {
             icon: isCopied ? "check" : ["far", "clone"],
@@ -969,23 +1060,23 @@ function UserMessageActionBar({ className }) {
             onClick: copy
           }
         ),
-        /* @__PURE__ */ jsx34(MessageTimestamp2, {})
+        /* @__PURE__ */ jsx36(MessageTimestamp2, {})
       ]
     }
   );
 }
 // src/atoms/ThreadShell.tsx
-import { forwardRef as forwardRef3 } from "react";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { forwardRef as forwardRef4 } from "react";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var THREAD_CSS_VARS = {
   ["--thread-max-width"]: "44rem",
   ["--composer-bg"]: "color-mix(in oklab, var(--color-muted) 30%, var(--color-background))",
   ["--composer-radius"]: "1.5rem",
   ["--composer-padding"]: "8px"
 };
-var ThreadRootShell = forwardRef3(
-  ({ className, style, ...rest }, ref) => /* @__PURE__ */ jsx35(
+var ThreadRootShell = forwardRef4(
+  ({ className, style, ...rest }, ref) => /* @__PURE__ */ jsx37(
     "div",
     {
       ref,
@@ -999,15 +1090,15 @@ var ThreadRootShell = forwardRef3(
   )
 );
 ThreadRootShell.displayName = "ThreadRootShell";
-var ThreadViewportShell = forwardRef3(
-  ({ className, isEmpty, children, ...rest }, ref) => /* @__PURE__ */ jsx35(
+var ThreadViewportShell = forwardRef4(
+  ({ className, isEmpty, children, ...rest }, ref) => /* @__PURE__ */ jsx37(
     "div",
     {
       ref,
       "data-slot": "aui_thread-viewport",
       className: cn("relative flex min-h-0 flex-1 flex-col overflow-x-auto overflow-y-auto scroll-smooth", className),
       ...rest,
-      children: /* @__PURE__ */ jsx35(
+      children: /* @__PURE__ */ jsx37(
         "div",
         {
           className: cn(
@@ -1021,8 +1112,8 @@ var ThreadViewportShell = forwardRef3(
   )
 );
 ThreadViewportShell.displayName = "ThreadViewportShell";
-var ThreadComposerAreaShell = forwardRef3(
-  ({ className, isEmpty, ...rest }, ref) => /* @__PURE__ */ jsx35(
+var ThreadComposerAreaShell = forwardRef4(
+  ({ className, isEmpty, ...rest }, ref) => /* @__PURE__ */ jsx37(
     "div",
     {
       ref,
@@ -1037,7 +1128,7 @@ var ThreadComposerAreaShell = forwardRef3(
   )
 );
 ThreadComposerAreaShell.displayName = "ThreadComposerAreaShell";
-var MessageGroup = forwardRef3(({ className, ...rest }, ref) => /* @__PURE__ */ jsx35(
+var MessageGroup = forwardRef4(({ className, ...rest }, ref) => /* @__PURE__ */ jsx37(
   "div",
   {
     ref,
@@ -1049,17 +1140,17 @@ var MessageGroup = forwardRef3(({ className, ...rest }, ref) => /* @__PURE__ */
 MessageGroup.displayName = "MessageGroup";
 // src/atoms/WelcomeScreen.tsx
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 function WelcomeScreen({ heading = "How can I help you today?", className }) {
-  return /* @__PURE__ */ jsx36("div", { className: cn("aui-thread-welcome-root mb-6 flex flex-col items-center px-4 text-center", className), children: /* @__PURE__ */ jsx36("h1", { className: "aui-thread-welcome-message-inner fade-in slide-in-from-bottom-1 animate-in fill-mode-both text-2xl font-semibold duration-200", children: heading }) });
+  return /* @__PURE__ */ jsx38("div", { className: cn("aui-thread-welcome-root mb-6 flex flex-col items-center px-4 text-center", className), children: /* @__PURE__ */ jsx38("h1", { className: "aui-thread-welcome-message-inner fade-in slide-in-from-bottom-1 animate-in fill-mode-both text-2xl font-semibold duration-200", children: heading }) });
 }
 // src/atoms/Toast.tsx
 import { XIcon } from "lucide-react";
-import { Fragment as Fragment3, jsx as jsx37, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs15 } from "react/jsx-runtime";
 function Toast({ title, description, open, onOpenChange, className }) {
   if (!open) return null;
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     "div",
     {
       className: cn(
@@ -1068,18 +1159,18 @@ function Toast({ title, description, open, onOpenChange, className }) {
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs14("div", { className: "grid min-h-0 min-w-0 flex-1 gap-1 overflow-y-auto pe-6", children: [
-          /* @__PURE__ */ jsx37("div", { className: "text-sm leading-none font-semibold", children: title }),
-          /* @__PURE__ */ jsx37("div", { className: "font-mono text-sm break-words whitespace-pre-wrap", children: description })
+        /* @__PURE__ */ jsxs15("div", { className: "grid min-h-0 min-w-0 flex-1 gap-1 overflow-y-auto pe-6", children: [
+          /* @__PURE__ */ jsx39("div", { className: "text-sm leading-none font-semibold", children: title }),
+          /* @__PURE__ */ jsx39("div", { className: "font-mono text-sm break-words whitespace-pre-wrap", children: description })
         ] }),
-        /* @__PURE__ */ jsxs14(
+        /* @__PURE__ */ jsxs15(
           "button",
           {
             onClick: () => onOpenChange(false),
             className: "text-destructive hover:bg-muted focus-visible:ring-ring absolute top-3 right-3 rounded-md p-1 transition-colors focus:outline-none focus-visible:ring-2",
             children: [
-              /* @__PURE__ */ jsx37(XIcon, { className: "size-4" }),
-              /* @__PURE__ */ jsx37("span", { className: "sr-only", children: "Close" })
+              /* @__PURE__ */ jsx39(XIcon, { className: "size-4" }),
+              /* @__PURE__ */ jsx39("span", { className: "sr-only", children: "Close" })
             ]
           }
         )
@@ -1088,10 +1179,7 @@ function Toast({ title, description, open, onOpenChange, className }) {
   );
 }
 function ToastStack({ children, duration = Number.POSITIVE_INFINITY }) {
-  return /* @__PURE__ */ jsxs14(Fragment3, { children: [
-    children,
-    /* @__PURE__ */ jsx37("div", { className: "fixed inset-x-0 bottom-0 z-50 flex max-h-screen flex-col-reverse gap-2 p-4 sm:bottom-4 sm:left-1/2 sm:w-full sm:max-w-2xl sm:-translate-x-1/2" })
-  ] });
+  return /* @__PURE__ */ jsx39("div", { className: "pointer-events-none fixed bottom-4 left-1/2 z-50 flex h-full max-h-screen w-full max-w-2xl -translate-x-1/2 flex-col-reverse gap-2 px-4", children });
 }
 // src/theme/defaultSlots.ts
@@ -1102,9 +1190,9 @@ var defaultSlots = {
   LightTooltip,
   Modal: Modal2,
   Dialog,
-  Accordion: Accordion2,
-  AccordionSummary: AccordionSummary2,
-  AccordionDetails: AccordionDetails2,
+  Accordion: Accordion3,
+  AccordionSummary: AccordionSummary3,
+  AccordionDetails: AccordionDetails3,
   Skeleton: Skeleton3,
   ReasoningCard,
   AskUserPrompt,
@@ -1121,6 +1209,7 @@ var defaultSlots = {
   SandboxToolCallCard,
   ToolApprovalBar,
   ToolGroupCard,
+  AgentStepsCard,
   MessageListSkeleton,
   ComposerShell,
   ComposerLeftSection,
@@ -1139,6 +1228,7 @@ var defaultSlots = {
   Markdown,
   // SDK atoms — SDK-owned (no tfy slot component)
   AssistantMessageBubble,
+  HistoryLoader,
   MessageErrorBanner,
   MessageTimestamp,
   UserMessageActionBar,
@@ -1153,7 +1243,7 @@ var defaultSlots = {
 };
 // src/theme/SlotsProvider.tsx
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var SlotsContext = createContext(defaultSlots);
 var ThemeModeContext = createContext(void 0);
 function SlotsProvider({
@@ -1167,14 +1257,14 @@ function SlotsProvider({
     () => ({ ...parentSlots, ...overrides }),
     [parentSlots, overrides]
   );
-  return /* @__PURE__ */ jsx38(TfyThemeProvider, { theme: theme ?? inheritedTheme, children: /* @__PURE__ */ jsx38(SlotsProviderContents, { slots: resolved, children }) });
+  return /* @__PURE__ */ jsx40(TfyThemeProvider, { theme: theme ?? inheritedTheme, children: /* @__PURE__ */ jsx40(SlotsProviderContents, { slots: resolved, children }) });
 }
 function SlotsProviderContents({
   slots,
   children
 }) {
   const { mode } = useTfyTheme();
-  return /* @__PURE__ */ jsx38(ThemeModeContext.Provider, { value: mode, children: /* @__PURE__ */ jsx38(SlotsContext.Provider, { value: slots, children }) });
+  return /* @__PURE__ */ jsx40(ThemeModeContext.Provider, { value: mode, children: /* @__PURE__ */ jsx40(SlotsContext.Provider, { value: slots, children }) });
 }
 function useSlot(name) {
   const slots = useContext(SlotsContext);
@@ -1254,14 +1344,14 @@ import { LightTooltip as LightTooltip2 } from "tfy-web-components/components/ato
 import { default as default4 } from "tfy-web-components/components/atoms/Modal";
 import { default as default5 } from "tfy-web-components/components/molecules/Dialog";
 import {
-  Accordion as Accordion3,
-  AccordionSummary as AccordionSummary3,
-  AccordionDetails as AccordionDetails3
+  Accordion as Accordion4,
+  AccordionSummary as AccordionSummary4,
+  AccordionDetails as AccordionDetails4
 } from "tfy-web-components/components/atoms/Accordion";
 import { default as default6 } from "tfy-web-components/components/atoms/Skeleton";
 // src/containers/ThreadContainer.tsx
-import { useEffect as useEffect4 } from "react";
+import { useEffect as useEffect6 } from "react";
 import { preloadMarkdownOpenUI } from "tfy-web-components/components/molecules/Markdown";
 import { ThreadPrimitive, useAuiState as useAuiState11 } from "@assistant-ui/react";
@@ -1309,9 +1399,51 @@ function useComposerBusyState() {
 }
 // src/containers/AssistantMessageContainer.tsx
-import { groupPartByType, MessagePrimitive as MessagePrimitive2 } from "@assistant-ui/react";
+import { MessagePrimitive as MessagePrimitive2, useAuiState as useAuiState6 } from "@assistant-ui/react";
 import { useActionBarCopy as useActionBarCopy2, useMessageError, useThreadIsRunning as useThreadIsRunning2 } from "@assistant-ui/core/react";
+// src/utils/computeAgentStepsSplit.ts
+function computeAgentStepsSplit(parts, isRunning) {
+  const finalTexts = [];
+  let cutIdx = parts.length;
+  for (let i = parts.length - 1; i >= 0; i--) {
+    const part = parts[i];
+    if (!part) continue;
+    if (part.type === "text") {
+      const text = part.text ?? "";
+      const trimmed = text.trim();
+      if (trimmed) {
+        finalTexts.unshift({ index: i, content: text });
+        cutIdx = i;
+      } else {
+        cutIdx = i;
+      }
+    } else {
+      break;
+    }
+  }
+  const trailingChars = finalTexts.reduce((sum, t) => sum + t.content.length, 0);
+  const finalConfirmed = finalTexts.length > 0 && (!isRunning || trailingChars >= 500);
+  const actualCutIndex = finalConfirmed ? cutIdx : parts.length;
+  let toolCount = 0;
+  let thinkingCount = 0;
+  for (let i = 0; i < actualCutIndex; i++) {
+    const part = parts[i];
+    if (!part) continue;
+    if (part.type === "tool-call") {
+      toolCount++;
+    } else if (part.type === "reasoning") {
+      thinkingCount++;
+    }
+  }
+  return {
+    cutIndex: actualCutIndex,
+    hasFinal: finalConfirmed,
+    toolCount,
+    thinkingCount
+  };
+}
 // src/containers/AssistantTextContainer.tsx
 import { useCallback as useCallback3 } from "react";
 import { useAuiState as useAuiState3 } from "@assistant-ui/react";
@@ -1320,7 +1452,7 @@ import { useTrueFoundryDownloadSandboxFile } from "@truefoundry/assistant-ui-run
 // src/containers/ErrorToasterContainer.tsx
 import { createContext as createContext4, useCallback as useCallback2, useContext as useContext4, useMemo as useMemo2, useState as useState3 } from "react";
 import { TrueFoundryGatewayError } from "truefoundry-gateway-sdk";
-import { jsx as jsx39, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs16 } from "react/jsx-runtime";
 var ErrorToasterContext = createContext4(null);
 function formatErrorBody(body) {
   if (body == null) return void 0;
@@ -1353,10 +1485,10 @@ function ErrorToasterProvider({ children }) {
     setOpen(true);
   }, []);
   const value = useMemo2(() => ({ showError }), [showError]);
-  return /* @__PURE__ */ jsx39(ErrorToasterContext.Provider, { value, children: /* @__PURE__ */ jsxs15(ToastStack2, { children: [
+  return /* @__PURE__ */ jsxs16(ErrorToasterContext.Provider, { value, children: [
     children,
-    toast != null && /* @__PURE__ */ jsx39(Toast2, { title: toast.title, description: toast.description, open, onOpenChange: setOpen })
-  ] }) });
+    /* @__PURE__ */ jsx41(ToastStack2, { children: toast != null && /* @__PURE__ */ jsx41(Toast2, { title: toast.title, description: toast.description, open, onOpenChange: setOpen }) })
+  ] });
 }
 function useErrorToaster() {
   const context = useContext4(ErrorToasterContext);
@@ -1370,7 +1502,7 @@ function useErrorToasterOptional() {
 }
 // src/containers/AssistantTextContainer.tsx
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 function filenameFromPath(path) {
   return path.split("/").pop() || "download";
 }
@@ -1407,12 +1539,12 @@ function AssistantTextContainer() {
     }),
     [downloadSandboxFile, errorToaster]
   );
-  return /* @__PURE__ */ jsx40(Markdown2, { content: text, isStreaming, onDownloadArtifact: handleDownloadArtifact });
+  return /* @__PURE__ */ jsx42(Markdown2, { content: text, isStreaming, onDownloadArtifact: handleDownloadArtifact });
 }
 // src/containers/MessageImageContainer.tsx
 import { useAuiState as useAuiState4 } from "@assistant-ui/react";
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 function MessageImageContainer() {
   const AttachmentCard2 = useSlot("AttachmentCard");
   const AttachmentPreviewDialog2 = useSlot("AttachmentPreviewDialog");
@@ -1423,7 +1555,7 @@ function MessageImageContainer() {
   if (!image) {
     return null;
   }
-  const card = /* @__PURE__ */ jsx41(
+  const card = /* @__PURE__ */ jsx43(
     AttachmentCard2,
     {
       name: filename ?? "image",
@@ -1433,13 +1565,13 @@ function MessageImageContainer() {
       previewRem: USER_MESSAGE_ATTACHMENT_PREVIEW_REM
     }
   );
-  return /* @__PURE__ */ jsx41(AttachmentPreviewDialog2, { previewSrc: image, children: /* @__PURE__ */ jsx41("div", { className: "aui-message-image", children: card }) });
+  return /* @__PURE__ */ jsx43(AttachmentPreviewDialog2, { previewSrc: image, children: /* @__PURE__ */ jsx43("div", { className: "aui-message-image", children: card }) });
 }
 // src/containers/ReasoningContainer.tsx
 import { useCallback as useCallback4, useRef, useState as useState4 } from "react";
 import { useAuiState as useAuiState5 } from "@assistant-ui/react";
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 function ReasoningContainer({ group }) {
   const ReasoningCard2 = useSlot("ReasoningCard");
   const content = useAuiState5(
@@ -1480,7 +1612,7 @@ function ReasoningContainer({ group }) {
   const previewText = content.replace(/\s+/g, " ").trim();
   const isShortText = !streaming && content.length > 0 && !isMultiLine;
   const headingText = streaming && !content ? expanded ? "Reasoning" : "Show Reasoning" : reasoningTimeText ?? (expanded ? "Hide Reasoning" : "Show Reasoning");
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx44(
     ReasoningCard2,
     {
       content,
@@ -1516,7 +1648,7 @@ function useNestedApprovalBridge() {
 // src/containers/SandboxToolCallContainer.tsx
 import { useMemo as useMemo3, useState as useState5 } from "react";
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { jsx as jsx45 } from "react/jsx-runtime";
 function SandboxToolCallContainer(props) {
   const SandboxToolCallCard2 = useSlot("SandboxToolCallCard");
   const [viewMode, setViewMode] = useState5("terminal");
@@ -1530,7 +1662,7 @@ function SandboxToolCallContainer(props) {
     props.resultText,
     viewMode
   ]);
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx45(
     SandboxToolCallCard2,
     {
       ...props,
@@ -1543,7 +1675,7 @@ function SandboxToolCallContainer(props) {
 // src/containers/ToolApprovalContainer.tsx
 import { useCallback as useCallback5, useMemo as useMemo4, useState as useState6 } from "react";
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
 function ToolApprovalContainer({
   toolName = "",
   options,
@@ -1592,7 +1724,7 @@ function ToolApprovalContainer({
       onDenyOptionChange(null);
     }
   }, [denialReason, onDenyOptionChange, onSelectOption, selectedDenyOptionId]);
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx46(
     ToolApprovalBar2,
     {
       toolName,
@@ -1611,7 +1743,7 @@ function ToolApprovalContainer({
 // src/containers/ToolCallContentBlockContainer.tsx
 import { useCallback as useCallback6, useEffect as useEffect2, useRef as useRef2, useState as useState7 } from "react";
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
 function ToolCallContentBlockContainer(props) {
   const ToolCallContentBlock2 = useSlot("ToolCallContentBlock");
   const [fullscreen, setFullscreen] = useState7(false);
@@ -1635,7 +1767,7 @@ function ToolCallContentBlockContainer(props) {
     },
     []
   );
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx47(
     ToolCallContentBlock2,
     {
       ...props,
@@ -1648,12 +1780,12 @@ function ToolCallContentBlockContainer(props) {
 }
 // src/containers/ToolCallContainer.tsx
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { jsx as jsx48 } from "react/jsx-runtime";
 var SUB_AGENT_TOOL_NAME = "create_sub_agent";
 var ASK_USER_TOOL_NAME = "ask_user_question";
 function NestedSubAgentAssistantMessage() {
   const AssistantMessageBubble2 = useSlot("AssistantMessageBubble");
-  return /* @__PURE__ */ jsx46("div", { className: "mb-3 min-w-0", children: /* @__PURE__ */ jsx46(MessagePrimitive.Root, { "data-role": "assistant", children: /* @__PURE__ */ jsx46(AssistantMessageBubble2, { children: /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx48("div", { className: "mb-3 min-w-0", children: /* @__PURE__ */ jsx48(MessagePrimitive.Root, { "data-role": "assistant", children: /* @__PURE__ */ jsx48(AssistantMessageBubble2, { children: /* @__PURE__ */ jsx48(
     MessagePrimitive.Parts,
     {
       components: {
@@ -1833,7 +1965,7 @@ function ToolApprovalSlot({ part }) {
     if (optionId === "__deny") return respond({ approved: false, reason });
     return respond({ optionId, reason });
   };
-  return /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx48(
     ToolApprovalContainer,
     {
       toolName: part.toolName,
@@ -1851,7 +1983,7 @@ var ToolCallContainer = (part) => {
   const isRequiresAction = part.status?.type === "requires-action";
   const isSubAgent = part.toolName === SUB_AGENT_TOOL_NAME;
   const isSandbox = SANDBOX_TOOL_NAMES.has(part.toolName);
-  const [expanded, setExpanded] = useState8(isRequiresAction || isSubAgent);
+  const [expanded, setExpanded] = useState8(isRequiresAction);
   const [prevRequiresAction, setPrevRequiresAction] = useState8(isRequiresAction);
   if (isRequiresAction !== prevRequiresAction) {
     setPrevRequiresAction(isRequiresAction);
@@ -1870,7 +2002,7 @@ var ToolCallContainer = (part) => {
     }
     const { question, options = [] } = parseAskUserQuestionArgs(part.argsText);
     const isCustom = options.length > 0 && !options.includes(answer);
-    return /* @__PURE__ */ jsx46(
+    return /* @__PURE__ */ jsx48(
       AskUserPrompt2,
       {
         questions: [],
@@ -1902,13 +2034,13 @@ var ToolCallContainer = (part) => {
       if (approved === void 0) return;
       respondToNestedApproval({ approvalId: part.approval.id, approved });
     };
-    return /* @__PURE__ */ jsx46(
+    return /* @__PURE__ */ jsx48(
       "div",
       {
         "data-slot": "tool-call-card",
         "data-variant": "sub-agent",
-        className: "w-full py-2",
-        children: /* @__PURE__ */ jsx46(
+        className: "w-full",
+        children: /* @__PURE__ */ jsx48(
           SubAgentCard2,
           {
             status,
@@ -1918,7 +2050,7 @@ var ToolCallContainer = (part) => {
             agentName,
             instruction,
             stepCount,
-            children: /* @__PURE__ */ jsx46(NestedApprovalBridgeContext.Provider, { value: bridge, children: /* @__PURE__ */ jsx46(
+            children: /* @__PURE__ */ jsx48(NestedApprovalBridgeContext.Provider, { value: bridge, children: /* @__PURE__ */ jsx48(
               MessagePartPrimitive.Messages,
               {
                 components: {
@@ -1936,7 +2068,7 @@ var ToolCallContainer = (part) => {
   if (isSandbox) {
     const { command, intent, argsJson } = parseSandboxArgs(part.argsText);
     const { exitCode, resultText, resultJson } = parseSandboxResult(resultString);
-    return /* @__PURE__ */ jsx46(
+    return /* @__PURE__ */ jsx48(
       SandboxToolCallContainer,
       {
         name: part.toolName,
@@ -1959,7 +2091,7 @@ var ToolCallContainer = (part) => {
     const argsDisplay2 = getJsonDisplayValue(part.argsText);
     const resultDisplay2 = getToolResultContent(part.result);
     if (part.toolName === "list_tools" && mcpServer) {
-      return /* @__PURE__ */ jsx46(
+      return /* @__PURE__ */ jsx48(
         ToolCallCard2,
         {
           toolName: `Listing tools \xB7 ${mcpServer}`,
@@ -1969,7 +2101,8 @@ var ToolCallContainer = (part) => {
           awaiting: status === "running",
           awaitingText: durationText ?? "Awaiting Response\u2026",
           showResponseLine: status !== "running" && !!resultDisplay2.data,
-          requestSlot: argsDisplay2.value ? /* @__PURE__ */ jsx46(
+          mcpServerName: mcpServer,
+          requestSlot: argsDisplay2.value ? /* @__PURE__ */ jsx48(
             ToolCallContentBlockContainer,
             {
               title: "Request",
@@ -1977,7 +2110,7 @@ var ToolCallContainer = (part) => {
               isJson: argsDisplay2.isJson,
               maxHeight: "10.5rem"
             }
-          ) : resultDisplay2.data ? /* @__PURE__ */ jsx46(
+          ) : resultDisplay2.data ? /* @__PURE__ */ jsx48(
             ToolCallContentBlockContainer,
             {
               title: "Request",
@@ -1986,7 +2119,7 @@ var ToolCallContainer = (part) => {
               maxHeight: "10.5rem"
             }
           ) : void 0,
-          responseSlot: resultDisplay2.data ? /* @__PURE__ */ jsx46(
+          responseSlot: resultDisplay2.data ? /* @__PURE__ */ jsx48(
             ToolCallContentBlockContainer,
             {
               title: "Response",
@@ -2005,16 +2138,18 @@ var ToolCallContainer = (part) => {
       displayName = `get_tool_info: ${innerToolName} (${mcpServer})`;
     }
     const inputDisplay = input !== void 0 ? getJsonDisplayValue(JSON.stringify(input, null, 2)) : argsDisplay2;
-    return /* @__PURE__ */ jsx46(
+    return /* @__PURE__ */ jsx48(
       ToolCallCard2,
       {
         toolName: displayName,
+        icon: "mcp-server",
         expanded,
         onToggle: () => setExpanded((prev) => !prev),
         awaiting: status === "running",
         awaitingText: durationText ?? "Awaiting Response\u2026",
         showResponseLine: status !== "running" && resultDisplay2.data !== void 0,
-        requestSlot: inputDisplay.value ? /* @__PURE__ */ jsx46(
+        mcpServerName: mcpServer,
+        requestSlot: inputDisplay.value ? /* @__PURE__ */ jsx48(
           ToolCallContentBlockContainer,
           {
             title: "Request",
@@ -2022,7 +2157,7 @@ var ToolCallContainer = (part) => {
             isJson: inputDisplay.isJson,
             maxHeight: "10.5rem"
           }
-        ) : resultDisplay2.data !== void 0 ? /* @__PURE__ */ jsx46(
+        ) : resultDisplay2.data !== void 0 ? /* @__PURE__ */ jsx48(
           ToolCallContentBlockContainer,
           {
             title: "Request",
@@ -2031,7 +2166,7 @@ var ToolCallContainer = (part) => {
             maxHeight: "10.5rem"
           }
         ) : void 0,
-        responseSlot: resultDisplay2.data !== void 0 ? /* @__PURE__ */ jsx46(
+        responseSlot: resultDisplay2.data !== void 0 ? /* @__PURE__ */ jsx48(
           ToolCallContentBlockContainer,
           {
             title: "Response",
@@ -2040,13 +2175,13 @@ var ToolCallContainer = (part) => {
             resizable: true
           }
         ) : void 0,
-        approvalSlot: showApproval ? /* @__PURE__ */ jsx46(ToolApprovalSlot, { part }) : void 0
+        approvalSlot: showApproval ? /* @__PURE__ */ jsx48(ToolApprovalSlot, { part }) : void 0
       }
     );
   }
   const argsDisplay = getJsonDisplayValue(part.argsText);
   const resultDisplay = getToolResultContent(part.result);
-  return /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx48(
     ToolCallCard2,
     {
       toolName: part.toolName,
@@ -2055,7 +2190,7 @@ var ToolCallContainer = (part) => {
       awaiting: status === "running",
       awaitingText: durationText ?? "Awaiting Response\u2026",
       showResponseLine: status !== "running" && resultDisplay.data !== void 0,
-      requestSlot: argsDisplay.value ? /* @__PURE__ */ jsx46(
+      requestSlot: argsDisplay.value ? /* @__PURE__ */ jsx48(
         ToolCallContentBlockContainer,
         {
           title: "Request",
@@ -2063,7 +2198,7 @@ var ToolCallContainer = (part) => {
           isJson: argsDisplay.isJson,
           maxHeight: "10.5rem"
         }
-      ) : resultDisplay.data !== void 0 ? /* @__PURE__ */ jsx46(
+      ) : resultDisplay.data !== void 0 ? /* @__PURE__ */ jsx48(
         ToolCallContentBlockContainer,
         {
           title: "Request",
@@ -2072,7 +2207,7 @@ var ToolCallContainer = (part) => {
           maxHeight: "10.5rem"
         }
       ) : void 0,
-      responseSlot: resultDisplay.data !== void 0 ? /* @__PURE__ */ jsx46(
+      responseSlot: resultDisplay.data !== void 0 ? /* @__PURE__ */ jsx48(
         ToolCallContentBlockContainer,
         {
           title: "Response",
@@ -2081,39 +2216,35 @@ var ToolCallContainer = (part) => {
           resizable: true
         }
       ) : void 0,
-      approvalSlot: showApproval ? /* @__PURE__ */ jsx46(ToolApprovalSlot, { part }) : void 0
+      approvalSlot: showApproval ? /* @__PURE__ */ jsx48(ToolApprovalSlot, { part }) : void 0
     }
   );
 };
-// src/containers/ToolGroupContainer.tsx
-import { useState as useState9 } from "react";
-import { useAuiState as useAuiState6 } from "@assistant-ui/react";
-import { jsx as jsx47 } from "react/jsx-runtime";
-function ToolGroupContainer({
+// src/containers/AgentStepsContainer.tsx
+import { useState as useState9, useEffect as useEffect3, useRef as useRef3 } from "react";
+import { jsx as jsx49 } from "react/jsx-runtime";
+function AgentStepsContainer({
   children,
-  group
+  toolCount,
+  thinkingCount,
+  hasFinal,
+  active
 }) {
-  const ToolGroupCard2 = useSlot("ToolGroupCard");
-  const toolCallCount = group.indices.length;
-  const active = useAuiState6((s) => {
-    if (s.message.status?.type !== "running") return false;
-    const lastIndex = s.message.parts.length - 1;
-    if (lastIndex < 0) return false;
-    if (s.message.parts[lastIndex]?.type !== "tool-call") return false;
-    const lastGroupIndex = group.indices[group.indices.length - 1];
-    return lastGroupIndex !== void 0 && lastIndex >= group.indices[0] && lastIndex <= lastGroupIndex;
-  });
+  const AgentStepsCard2 = useSlot("AgentStepsCard");
   const [expanded, setExpanded] = useState9(true);
-  const [prevActive, setPrevActive] = useState9(active);
-  if (active !== prevActive) {
-    setPrevActive(active);
-    if (active) setExpanded(true);
-  }
-  return /* @__PURE__ */ jsx47(
-    ToolGroupCard2,
+  const collapsedByFinal = useRef3(false);
+  useEffect3(() => {
+    if (hasFinal && !collapsedByFinal.current) {
+      collapsedByFinal.current = true;
+      setExpanded(false);
+    }
+  }, [hasFinal]);
+  return /* @__PURE__ */ jsx49(
+    AgentStepsCard2,
     {
-      toolCallCount,
+      toolCount,
+      thinkingCount,
       expanded,
       active,
       onToggle: () => setExpanded((prev) => !prev),
@@ -2123,16 +2254,16 @@ function ToolGroupContainer({
 }
 // src/containers/AssistantMessageContainer.tsx
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { jsx as jsx50 } from "react/jsx-runtime";
 function AssistantLeafPartContainer({ part }) {
   switch (part.type) {
     case "text":
     case "reasoning":
-      return /* @__PURE__ */ jsx48(AssistantTextContainer, {});
+      return /* @__PURE__ */ jsx50(AssistantTextContainer, {});
     case "image":
-      return /* @__PURE__ */ jsx48(MessageImageContainer, {});
+      return /* @__PURE__ */ jsx50(MessageImageContainer, {});
     case "tool-call":
-      return /* @__PURE__ */ jsx48(ToolCallContainer, { ...part });
+      return /* @__PURE__ */ jsx50(ToolCallContainer, { ...part });
     default:
       return null;
   }
@@ -2147,45 +2278,108 @@ function AssistantMessageContainer() {
   const { copy, isCopied } = useActionBarCopy2({
     copyToClipboard: (text) => navigator.clipboard.writeText(text)
   });
-  return /* @__PURE__ */ jsx48(MessagePrimitive2.Root, { "data-role": "assistant", children: /* @__PURE__ */ jsx48(
+  const parts = useAuiState6((s) => s.message.parts);
+  const { cutIndex, hasFinal, toolCount, thinkingCount } = computeAgentStepsSplit(parts, isRunning);
+  const groupBy = (part, _context) => {
+    const index = parts.findIndex((p) => p === part);
+    if (index === -1) return null;
+    if (part.type === "text" && index >= cutIndex) {
+      return null;
+    }
+    if (index < cutIndex) {
+      if (part.type === "reasoning") {
+        return ["group-agentSteps", "group-reasoning"];
+      }
+      return ["group-agentSteps"];
+    }
+    return null;
+  };
+  const agentStepsActive = isRunning && !hasFinal;
+  return /* @__PURE__ */ jsx50(MessagePrimitive2.Root, { "data-role": "assistant", children: /* @__PURE__ */ jsx50(
     AssistantMessageBubble2,
     {
-      error: error !== void 0 ? /* @__PURE__ */ jsx48(MessageErrorBanner2, { message: String(error) }) : void 0,
-      actionBar: !isRunning ? /* @__PURE__ */ jsx48(MessageActionBar2, { isCopied, onCopy: copy }) : void 0,
-      children: /* @__PURE__ */ jsx48(
-        MessagePrimitive2.GroupedParts,
-        {
-          groupBy: groupPartByType({
-            reasoning: ["group-chainOfThought", "group-reasoning"],
-            "tool-call": ["group-chainOfThought", "group-tool"],
-            "standalone-tool-call": []
-          }),
-          children: ({ part, children }) => {
-            switch (part.type) {
-              case "group-chainOfThought":
-                return /* @__PURE__ */ jsx48("div", { "data-slot": "aui_chain-of-thought", className: "flex flex-col gap-3", children });
-              case "group-tool":
-                return /* @__PURE__ */ jsx48(ToolGroupContainer, { group: part, children });
-              case "group-reasoning":
-                return /* @__PURE__ */ jsx48(ReasoningContainer, { group: part });
-              case "text":
-              case "reasoning":
-              case "tool-call":
-              case "image":
-              case "data":
-                return /* @__PURE__ */ jsx48(AssistantLeafPartContainer, { part });
-              case "indicator":
-                return /* @__PURE__ */ jsx48(MessageIndicator2, {});
-              default:
-                return null;
-            }
-          }
+      error: error !== void 0 ? /* @__PURE__ */ jsx50(MessageErrorBanner2, { message: String(error) }) : void 0,
+      actionBar: !isRunning ? /* @__PURE__ */ jsx50(MessageActionBar2, { isCopied, onCopy: copy }) : void 0,
+      children: /* @__PURE__ */ jsx50(MessagePrimitive2.GroupedParts, { groupBy, children: ({ part, children }) => {
+        switch (part.type) {
+          case "group-agentSteps":
+            return /* @__PURE__ */ jsx50(
+              AgentStepsContainer,
+              {
+                toolCount,
+                thinkingCount,
+                hasFinal,
+                active: agentStepsActive,
+                children
+              }
+            );
+          case "group-reasoning":
+            return /* @__PURE__ */ jsx50(ReasoningContainer, { group: part });
+          case "text":
+          case "reasoning":
+          case "tool-call":
+          case "image":
+          case "data":
+            return /* @__PURE__ */ jsx50(AssistantLeafPartContainer, { part });
+          case "indicator":
+            return /* @__PURE__ */ jsx50(MessageIndicator2, {});
+          default:
+            return null;
         }
-      )
+      } })
     }
   ) });
 }
+// src/containers/HistoryLoaderContainer.tsx
+import { useCallback as useCallback7, useEffect as useEffect4, useRef as useRef4, useState as useState10 } from "react";
+import { useTrueFoundryHistoryPagination } from "@truefoundry/assistant-ui-runtime";
+import { jsx as jsx51 } from "react/jsx-runtime";
+var TOP_THRESHOLD_PX = 200;
+var VIEWPORT_SELECTOR = '[data-slot="aui_thread-viewport"]';
+function HistoryLoaderContainer() {
+  const HistoryLoader2 = useSlot("HistoryLoader");
+  const { hasOlderHistory, isLoadingOlderHistory, loadOlderHistory } = useTrueFoundryHistoryPagination();
+  const [sentinel, setSentinel] = useState10(null);
+  const inflightRef = useRef4(false);
+  const maybeLoadOlder = useCallback7(async () => {
+    if (inflightRef.current) return;
+    inflightRef.current = true;
+    const viewport = sentinel?.closest(VIEWPORT_SELECTOR) ?? null;
+    const prevScrollHeight = viewport?.scrollHeight ?? 0;
+    const prevScrollTop = viewport?.scrollTop ?? 0;
+    try {
+      await loadOlderHistory();
+      requestAnimationFrame(() => {
+        if (viewport == null) return;
+        const delta = viewport.scrollHeight - prevScrollHeight;
+        if (delta > 0) {
+          viewport.scrollTo({ top: prevScrollTop + delta, behavior: "instant" });
+        }
+      });
+    } catch {
+    } finally {
+      inflightRef.current = false;
+    }
+  }, [sentinel, loadOlderHistory]);
+  useEffect4(() => {
+    if (sentinel == null || !hasOlderHistory) return;
+    const viewport = sentinel.closest(VIEWPORT_SELECTOR);
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((entry) => entry.isIntersecting)) {
+          void maybeLoadOlder();
+        }
+      },
+      { root: viewport, rootMargin: `${TOP_THRESHOLD_PX}px 0px 0px 0px` }
+    );
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [sentinel, hasOlderHistory, maybeLoadOlder]);
+  if (!hasOlderHistory) return null;
+  return /* @__PURE__ */ jsx51(HistoryLoader2, { ref: setSentinel, isLoading: isLoadingOlderHistory });
+}
 // src/containers/UserEditComposerContainer.tsx
 import {
   ComposerPrimitive as ComposerPrimitive2,
@@ -2198,14 +2392,14 @@ import { useComposerCancel, useComposerSend, useThreadIsRunning as useThreadIsRu
 import { ComposerPrimitive, MessagePrimitive as MessagePrimitive3, useAui, useAuiState as useAuiState8 } from "@assistant-ui/react";
 // src/containers/useAttachmentPreviewSrc.ts
-import { useEffect as useEffect3, useState as useState10 } from "react";
+import { useEffect as useEffect5, useState as useState11 } from "react";
 import { useAuiState as useAuiState7 } from "@assistant-ui/react";
 function isImageAttachment(type, contentType) {
   return type === "image" || (contentType?.startsWith("image/") ?? false);
 }
 function useFileObjectUrl(file) {
-  const [src, setSrc] = useState10(void 0);
-  useEffect3(() => {
+  const [src, setSrc] = useState11(void 0);
+  useEffect5(() => {
     if (!file) {
       setSrc(void 0);
       return;
@@ -2233,7 +2427,7 @@ function useAttachmentPreviewSrc() {
 }
 // src/containers/AttachmentsContainer.tsx
-import { jsx as jsx49 } from "react/jsx-runtime";
+import { jsx as jsx52 } from "react/jsx-runtime";
 function ComposerAttachmentItem() {
   const AttachmentCard2 = useSlot("AttachmentCard");
   const AttachmentPreviewDialog2 = useSlot("AttachmentPreviewDialog");
@@ -2243,7 +2437,7 @@ function ComposerAttachmentItem() {
   const type = useAuiState8((s) => s.attachment.type);
   const isImage = isImageAttachment(type, contentType);
   const previewSrc = useAttachmentPreviewSrc();
-  return /* @__PURE__ */ jsx49(AttachmentPreviewDialog2, { previewSrc, children: /* @__PURE__ */ jsx49(
+  return /* @__PURE__ */ jsx52(AttachmentPreviewDialog2, { previewSrc, children: /* @__PURE__ */ jsx52(
     AttachmentCard2,
     {
       name,
@@ -2263,7 +2457,7 @@ function MessageAttachmentItem() {
   const type = useAuiState8((s) => s.attachment.type);
   const isImage = isImageAttachment(type, contentType);
   const previewSrc = useAttachmentPreviewSrc();
-  const card = /* @__PURE__ */ jsx49(
+  const card = /* @__PURE__ */ jsx52(
     AttachmentCard2,
     {
       name,
@@ -2275,23 +2469,23 @@ function MessageAttachmentItem() {
     }
   );
   if (isImage && previewSrc) {
-    return /* @__PURE__ */ jsx49(AttachmentPreviewDialog2, { previewSrc, children: card });
+    return /* @__PURE__ */ jsx52(AttachmentPreviewDialog2, { previewSrc, children: card });
   }
   return card;
 }
 function ComposerAttachmentsContainer() {
-  return /* @__PURE__ */ jsx49("div", { className: "aui-composer-attachments flex w-full flex-row flex-wrap items-center gap-2 empty:hidden", children: /* @__PURE__ */ jsx49(ComposerPrimitive.Attachments, { children: () => /* @__PURE__ */ jsx49(ComposerAttachmentItem, {}) }) });
+  return /* @__PURE__ */ jsx52("div", { className: "aui-composer-attachments flex w-full flex-row flex-wrap items-center gap-2 empty:hidden", children: /* @__PURE__ */ jsx52(ComposerPrimitive.Attachments, { children: () => /* @__PURE__ */ jsx52(ComposerAttachmentItem, {}) }) });
 }
 function MessageAttachmentsContainer() {
-  return /* @__PURE__ */ jsx49("div", { className: "aui-user-message-attachments-end col-span-full col-start-1 row-start-1 flex w-full flex-row justify-end gap-2", children: /* @__PURE__ */ jsx49(MessagePrimitive3.Attachments, { children: () => /* @__PURE__ */ jsx49(MessageAttachmentItem, {}) }) });
+  return /* @__PURE__ */ jsx52("div", { className: "aui-user-message-attachments-end col-span-full col-start-1 row-start-1 flex w-full flex-row justify-end gap-2", children: /* @__PURE__ */ jsx52(MessagePrimitive3.Attachments, { children: () => /* @__PURE__ */ jsx52(MessageAttachmentItem, {}) }) });
 }
 function ComposerAttachmentPickerContainer() {
   const AttachmentPickerButton2 = useSlot("AttachmentPickerButton");
-  return /* @__PURE__ */ jsx49(ComposerPrimitive.AddAttachment, { asChild: true, children: /* @__PURE__ */ jsx49(AttachmentPickerButton2, {}) });
+  return /* @__PURE__ */ jsx52(ComposerPrimitive.AddAttachment, { asChild: true, children: /* @__PURE__ */ jsx52(AttachmentPickerButton2, {}) });
 }
 // src/containers/UserEditComposerContainer.tsx
-import { jsx as jsx50, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs17 } from "react/jsx-runtime";
 function ReadOnlyMessageAttachments() {
   const hasAttachments = useAuiState9(
     (s) => (s.message.attachments?.length ?? 0) > 0
@@ -2299,7 +2493,7 @@ function ReadOnlyMessageAttachments() {
   if (!hasAttachments) {
     return null;
   }
-  return /* @__PURE__ */ jsx50("div", { className: "pointer-events-none mb-2 opacity-90", children: /* @__PURE__ */ jsx50(MessageAttachmentsContainer, {}) });
+  return /* @__PURE__ */ jsx53("div", { className: "pointer-events-none mb-2 opacity-90", children: /* @__PURE__ */ jsx53(MessageAttachmentsContainer, {}) });
 }
 function UserEditComposerContainer() {
   const Button4 = useSlot("Button");
@@ -2308,25 +2502,25 @@ function UserEditComposerContainer() {
   const isRunning = useThreadIsRunning3();
   const { cancel, disabled: cancelDisabled } = useComposerCancel();
   const { send, disabled: sendDisabled } = useComposerSend();
-  return /* @__PURE__ */ jsx50(MessagePrimitive4.Root, { "data-role": "user", children: /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx53(MessagePrimitive4.Root, { "data-role": "user", children: /* @__PURE__ */ jsx53(
     "div",
     {
       "data-slot": "aui_user-edit-composer-root",
       className: "fade-in slide-in-from-bottom-1 animate-in flex w-full justify-end px-2 duration-150",
-      children: /* @__PURE__ */ jsx50(ComposerPrimitive2.Root, { asChild: true, children: /* @__PURE__ */ jsx50(
+      children: /* @__PURE__ */ jsx53(ComposerPrimitive2.Root, { asChild: true, children: /* @__PURE__ */ jsx53(
         UserMessageEdit3,
         {
-          timestamp: /* @__PURE__ */ jsx50(MessageTimestamp2, { className: "text-gray-500" }),
-          attachments: /* @__PURE__ */ jsx50(ReadOnlyMessageAttachments, {}),
-          input: /* @__PURE__ */ jsx50("div", { className: "mt-1 rounded border border-gray-250 bg-gray-100 p-2 text-gray-750 dark:border-gray-275 dark:bg-gray-275", children: /* @__PURE__ */ jsx50(
+          timestamp: /* @__PURE__ */ jsx53(MessageTimestamp2, { className: "text-gray-500" }),
+          attachments: /* @__PURE__ */ jsx53(ReadOnlyMessageAttachments, {}),
+          input: /* @__PURE__ */ jsx53("div", { className: "mt-1 rounded border border-gray-250 bg-gray-100 p-2 text-gray-750 dark:border-gray-275 dark:bg-gray-275", children: /* @__PURE__ */ jsx53(
             ComposerPrimitive2.Input,
             {
               disabled: isRunning,
               className: "max-h-32 min-h-10 w-full resize-none border-none bg-transparent p-0 text-base leading-[1.34] outline-none focus:shadow-none"
             }
           ) }),
-          footer: /* @__PURE__ */ jsxs16("div", { className: "flex items-center justify-end gap-2", children: [
-            /* @__PURE__ */ jsx50(
+          footer: /* @__PURE__ */ jsxs17("div", { className: "flex items-center justify-end gap-2", children: [
+            /* @__PURE__ */ jsx53(
               Button4.Secondary,
               {
                 type: "button",
@@ -2335,7 +2529,7 @@ function UserEditComposerContainer() {
                 text: "Cancel"
               }
             ),
-            /* @__PURE__ */ jsx50(
+            /* @__PURE__ */ jsx53(
               Button4.Primary,
               {
                 type: "button",
@@ -2354,7 +2548,7 @@ function UserEditComposerContainer() {
 // src/containers/UserMessageContainer.tsx
 import { MessagePrimitive as MessagePrimitive5, useAuiState as useAuiState10 } from "@assistant-ui/react";
 import { useThreadIsRunning as useThreadIsRunning4 } from "@assistant-ui/core/react";
-import { jsx as jsx51 } from "react/jsx-runtime";
+import { jsx as jsx54 } from "react/jsx-runtime";
 function UserMessageContainer() {
   const UserMessageBubble2 = useSlot("UserMessageBubble");
   const UserMessageActionBar2 = useSlot("UserMessageActionBar");
@@ -2362,31 +2556,31 @@ function UserMessageContainer() {
   const text = useAuiState10(
     (s) => s.message.content.filter((part) => part.type === "text").map((part) => part.text).join("\n")
   );
-  return /* @__PURE__ */ jsx51(MessagePrimitive5.Root, { "data-role": "user", children: /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx54(MessagePrimitive5.Root, { "data-role": "user", children: /* @__PURE__ */ jsx54(
     UserMessageBubble2,
     {
       text,
-      attachments: /* @__PURE__ */ jsx51(MessageAttachmentsContainer, {}),
-      editAction: !isRunning ? /* @__PURE__ */ jsx51(UserMessageActionBar2, {}) : void 0
+      attachments: /* @__PURE__ */ jsx54(MessageAttachmentsContainer, {}),
+      editAction: !isRunning ? /* @__PURE__ */ jsx54(UserMessageActionBar2, {}) : void 0
     }
   ) });
 }
 // src/containers/ThreadContainer.tsx
-import { jsx as jsx52, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx55, jsxs as jsxs18 } from "react/jsx-runtime";
 var isNewChatView = (s) => s.thread.messages.length === 0 && (!s.thread.isLoading || s.threads.isLoading);
 function ThreadMessage({ isEditing }) {
   const role = useAuiState11((s) => s.message.role);
   if (role === "user") {
     if (isEditing) {
-      return /* @__PURE__ */ jsx52(UserEditComposerContainer, {});
+      return /* @__PURE__ */ jsx55(UserEditComposerContainer, {});
     }
-    return /* @__PURE__ */ jsx52(UserMessageContainer, {});
+    return /* @__PURE__ */ jsx55(UserMessageContainer, {});
   }
-  return /* @__PURE__ */ jsx52(AssistantMessageContainer, {});
+  return /* @__PURE__ */ jsx55(AssistantMessageContainer, {});
 }
 function ThreadContainer({ composer }) {
-  useEffect4(() => {
+  useEffect6(() => {
     void preloadMarkdownOpenUI();
   }, []);
   const ThreadRootShell2 = useSlot("ThreadRootShell");
@@ -2398,30 +2592,69 @@ function ThreadContainer({ composer }) {
   const ScrollToBottomButton2 = useSlot("ScrollToBottomButton");
   const isEmpty = useAuiState11(isNewChatView);
   const isLoading = useAuiState11((s) => s.thread.isLoading);
-  return /* @__PURE__ */ jsx52(ComposerBusyProvider, { children: /* @__PURE__ */ jsx52(ThreadPrimitive.Root, { asChild: true, children: /* @__PURE__ */ jsxs17(ThreadRootShell2, { children: [
-    /* @__PURE__ */ jsx52(ThreadPrimitive.Viewport, { asChild: true, turnAnchor: "top", autoScroll: true, children: /* @__PURE__ */ jsxs17(ThreadViewportShell2, { isEmpty, children: [
-      isEmpty && /* @__PURE__ */ jsx52(WelcomeScreen2, {}),
-      isLoading ? /* @__PURE__ */ jsx52(MessageListSkeleton2, {}) : /* @__PURE__ */ jsx52(MessageGroup2, { children: /* @__PURE__ */ jsx52(ThreadPrimitive.Messages, { children: ({ message }) => /* @__PURE__ */ jsx52(
-        ThreadMessage,
-        {
-          isEditing: message.role === "user" && message.composer.isEditing
-        }
-      ) }) })
+  return /* @__PURE__ */ jsx55(ComposerBusyProvider, { children: /* @__PURE__ */ jsx55(ThreadPrimitive.Root, { asChild: true, children: /* @__PURE__ */ jsxs18(ThreadRootShell2, { children: [
+    /* @__PURE__ */ jsx55(ThreadPrimitive.Viewport, { asChild: true, turnAnchor: "top", autoScroll: true, children: /* @__PURE__ */ jsxs18(ThreadViewportShell2, { isEmpty, children: [
+      isEmpty && /* @__PURE__ */ jsx55(WelcomeScreen2, {}),
+      isLoading ? /* @__PURE__ */ jsx55(MessageListSkeleton2, {}) : /* @__PURE__ */ jsxs18(Fragment3, { children: [
+        /* @__PURE__ */ jsx55(HistoryLoaderContainer, {}),
+        /* @__PURE__ */ jsx55(MessageGroup2, { children: /* @__PURE__ */ jsx55(ThreadPrimitive.Messages, { children: ({ message }) => /* @__PURE__ */ jsx55(
+          ThreadMessage,
+          {
+            isEditing: message.role === "user" && message.composer.isEditing
+          }
+        ) }) })
+      ] })
     ] }) }),
-    !isLoading && /* @__PURE__ */ jsxs17(ThreadComposerAreaShell2, { isEmpty, children: [
-      !isEmpty && /* @__PURE__ */ jsx52(ThreadPrimitive.ScrollToBottom, { asChild: true, children: /* @__PURE__ */ jsx52(ScrollToBottomButton2, {}) }),
+    !isLoading && /* @__PURE__ */ jsxs18(ThreadComposerAreaShell2, { isEmpty, children: [
+      !isEmpty && /* @__PURE__ */ jsx55(ThreadPrimitive.ScrollToBottom, { asChild: true, children: /* @__PURE__ */ jsx55(ScrollToBottomButton2, {}) }),
       composer
     ] })
   ] }) }) });
 }
+// src/containers/ToolGroupContainer.tsx
+import { useState as useState12 } from "react";
+import { useAuiState as useAuiState12 } from "@assistant-ui/react";
+import { jsx as jsx56 } from "react/jsx-runtime";
+function ToolGroupContainer({
+  children,
+  group
+}) {
+  const ToolGroupCard2 = useSlot("ToolGroupCard");
+  const toolCallCount = group.indices.length;
+  const active = useAuiState12((s) => {
+    if (s.message.status?.type !== "running") return false;
+    const lastIndex = s.message.parts.length - 1;
+    if (lastIndex < 0) return false;
+    if (s.message.parts[lastIndex]?.type !== "tool-call") return false;
+    const lastGroupIndex = group.indices[group.indices.length - 1];
+    return lastGroupIndex !== void 0 && lastIndex >= group.indices[0] && lastIndex <= lastGroupIndex;
+  });
+  const [expanded, setExpanded] = useState12(true);
+  const [prevActive, setPrevActive] = useState12(active);
+  if (active !== prevActive) {
+    setPrevActive(active);
+    if (active) setExpanded(true);
+  }
+  return /* @__PURE__ */ jsx56(
+    ToolGroupCard2,
+    {
+      toolCallCount,
+      expanded,
+      active,
+      onToggle: () => setExpanded((prev) => !prev),
+      children
+    }
+  );
+}
 // src/containers/ComposerContainer.tsx
-import { useRef as useRef3 } from "react";
-import { useAui as useAui2, useAuiState as useAuiState13 } from "@assistant-ui/react";
+import { useRef as useRef5 } from "react";
+import { useAui as useAui2, useAuiState as useAuiState14 } from "@assistant-ui/react";
 import { useTrueFoundryCancel } from "@truefoundry/assistant-ui-runtime";
 // src/hooks/useComposerPauseView.ts
-import { useAuiState as useAuiState12 } from "@assistant-ui/react";
+import { useAuiState as useAuiState13 } from "@assistant-ui/react";
 import { useTrueFoundryToolResponses } from "@truefoundry/assistant-ui-runtime";
 function threadHasPendingMcpAuth(s) {
   const messages = s.thread.messages;
@@ -2431,7 +2664,7 @@ function threadHasPendingMcpAuth(s) {
   return last.metadata?.custom?.pendingMcpAuth === true;
 }
 function useComposerPauseView() {
-  const mcpPending = useAuiState12(threadHasPendingMcpAuth);
+  const mcpPending = useAuiState13(threadHasPendingMcpAuth);
   const { pending: toolResponsesPending } = useTrueFoundryToolResponses();
   if (mcpPending) {
     return { kind: "mcp" };
@@ -2445,11 +2678,11 @@ function useComposerPauseView() {
 // src/containers/AskUserContainer.tsx
 import { useTrueFoundryToolResponses as useTrueFoundryToolResponses2 } from "@truefoundry/assistant-ui-runtime";
 import { useThreadIsRunning as useThreadIsRunning5 } from "@assistant-ui/core/react";
-import { useCallback as useCallback7, useEffect as useEffect5, useMemo as useMemo5, useState as useState11 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect7, useMemo as useMemo5, useState as useState13 } from "react";
 import {
   ASK_USER_CUSTOM_OPTION
 } from "tfy-web-components/components/molecules/agent-chat";
-import { jsx as jsx53 } from "react/jsx-runtime";
+import { jsx as jsx57 } from "react/jsx-runtime";
 var EMPTY_ANSWER = { radioValue: "", custom: "" };
 function AskUserContainer() {
   const AskUserPrompt2 = useSlot("AskUserPrompt");
@@ -2466,11 +2699,11 @@ function AskUserContainer() {
     ],
     [item]
   );
-  const [currentQuestionIndex, setCurrentQuestionIndex] = useState11(0);
-  const [answers, setAnswers] = useState11(
+  const [currentQuestionIndex, setCurrentQuestionIndex] = useState13(0);
+  const [answers, setAnswers] = useState13(
     {}
   );
-  useEffect5(() => {
+  useEffect7(() => {
     setCurrentQuestionIndex(0);
     setAnswers({});
   }, [item?.toolCallId]);
@@ -2480,7 +2713,7 @@ function AskUserContainer() {
   );
   const currentQuestion = questions[safeIndex];
   const currentAnswer = currentQuestion == null ? EMPTY_ANSWER : answers[currentQuestion.id] ?? EMPTY_ANSWER;
-  const getResponseForQuestion = useCallback7(
+  const getResponseForQuestion = useCallback8(
     (questionId) => {
       const answer = answers[questionId] ?? EMPTY_ANSWER;
       return answer.radioValue === ASK_USER_CUSTOM_OPTION ? answer.custom.trim() : answer.radioValue.trim();
@@ -2494,7 +2727,7 @@ function AskUserContainer() {
   const selectedResponse = currentAnswer.radioValue === ASK_USER_CUSTOM_OPTION ? currentAnswer.custom.trim() : currentAnswer.radioValue.trim();
   const isSubmitDisabled = isRunning || currentQuestion == null || selectedResponse.length === 0;
   const isSubmitAllDisabled = isSubmitDisabled || !allQuestionsAnswered;
-  const onCurrentAnswerChange = useCallback7(
+  const onCurrentAnswerChange = useCallback8(
     (questionId, update) => {
       setAnswers((previous) => ({
         ...previous,
@@ -2506,14 +2739,14 @@ function AskUserContainer() {
     },
     []
   );
-  const onSubmit = useCallback7(() => {
+  const onSubmit = useCallback8(() => {
     if (item == null || !allQuestionsAnswered) return;
     const content = getResponseForQuestion(item.toolCallId);
     if (!content) return;
     respond({ toolCallId: item.toolCallId, content });
   }, [allQuestionsAnswered, getResponseForQuestion, item, respond]);
   if (item == null || currentQuestion == null) return null;
-  return /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx57(
     AskUserPrompt2,
     {
       questions,
@@ -2537,7 +2770,7 @@ function AskUserContainer() {
 // src/containers/McpAuthContainer.tsx
 import { useTrueFoundryMcpAuth } from "@truefoundry/assistant-ui-runtime";
 import { useThreadIsRunning as useThreadIsRunning6 } from "@assistant-ui/core/react";
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx58 } from "react/jsx-runtime";
 function McpAuthContainer() {
   const McpAuthPrompt2 = useSlot("McpAuthPrompt");
   const { pending, resume } = useTrueFoundryMcpAuth();
@@ -2549,7 +2782,7 @@ function McpAuthContainer() {
       window.open(server.authUrl, "_blank", "noopener,noreferrer");
     }
   };
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx58(
     McpAuthPrompt2,
     {
       servers: pending.mcpServers,
@@ -2561,25 +2794,25 @@ function McpAuthContainer() {
 }
 // src/containers/ComposerContainer.tsx
-import { Fragment as Fragment4, jsx as jsx55, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx59, jsxs as jsxs19 } from "react/jsx-runtime";
 function ComposerContainer({
   placeholder = "Ask anything... (Shift+Enter for new line)"
 }) {
   const ComposerShell2 = useSlot("ComposerShell");
   const aui = useAui2();
-  const text = useAuiState13((s) => s.composer.text);
+  const text = useAuiState14((s) => s.composer.text);
   const { isBusy, send, resetBusy } = useComposerBusyState();
   const pauseView = useComposerPauseView();
   const cancel = useTrueFoundryCancel();
-  const fileInputRef = useRef3(null);
+  const fileInputRef = useRef5(null);
   if (pauseView.kind === "mcp") {
-    return /* @__PURE__ */ jsx55(McpAuthContainer, {});
+    return /* @__PURE__ */ jsx59(McpAuthContainer, {});
   }
   if (pauseView.kind === "ask-user") {
-    return /* @__PURE__ */ jsx55(AskUserContainer, {});
+    return /* @__PURE__ */ jsx59(AskUserContainer, {});
   }
-  return /* @__PURE__ */ jsxs18(Fragment4, { children: [
-    /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsxs19(Fragment4, { children: [
+    /* @__PURE__ */ jsx59(
       "input",
       {
         ref: fileInputRef,
@@ -2597,10 +2830,10 @@ function ComposerContainer({
         }
       }
     ),
-    /* @__PURE__ */ jsx55(
+    /* @__PURE__ */ jsx59(
       ComposerShell2,
       {
-        attachments: /* @__PURE__ */ jsx55(ComposerAttachmentsContainer, {}),
+        attachments: /* @__PURE__ */ jsx59(ComposerAttachmentsContainer, {}),
         value: text,
         placeholder,
         disabled: isBusy,
@@ -2618,9 +2851,9 @@ function ComposerContainer({
 }
 // src/containers/ThreadListContainer.tsx
-import { useAui as useAui3, useAuiState as useAuiState14 } from "@assistant-ui/react";
-import { useEffect as useEffect6, useRef as useRef4 } from "react";
-import { Fragment as Fragment5, jsx as jsx56, jsxs as jsxs19 } from "react/jsx-runtime";
+import { useAui as useAui3, useAuiState as useAuiState15 } from "@assistant-ui/react";
+import { useEffect as useEffect8, useRef as useRef6 } from "react";
+import { Fragment as Fragment5, jsx as jsx60, jsxs as jsxs20 } from "react/jsx-runtime";
 function ThreadListContainer() {
   const ThreadListShell2 = useSlot("ThreadListShell");
   const ThreadListNewButton2 = useSlot("ThreadListNewButton");
@@ -2628,14 +2861,14 @@ function ThreadListContainer() {
   const ThreadListRowSkeleton2 = useSlot("ThreadListRowSkeleton");
   const ThreadListEmptyState2 = useSlot("ThreadListEmptyState");
   const aui = useAui3();
-  const isLoading = useAuiState14((s) => s.threads.isLoading);
-  const isLoadingMore = useAuiState14((s) => s.threads.isLoadingMore);
-  const hasMore = useAuiState14((s) => s.threads.hasMore);
-  const threadIds = useAuiState14((s) => s.threads.threadIds);
-  const threadItems = useAuiState14((s) => s.threads.threadItems);
-  const mainThreadId = useAuiState14((s) => s.threads.mainThreadId);
-  const sentinelRef = useRef4(null);
-  useEffect6(() => {
+  const isLoading = useAuiState15((s) => s.threads.isLoading);
+  const isLoadingMore = useAuiState15((s) => s.threads.isLoadingMore);
+  const hasMore = useAuiState15((s) => s.threads.hasMore);
+  const threadIds = useAuiState15((s) => s.threads.threadIds);
+  const threadItems = useAuiState15((s) => s.threads.threadItems);
+  const mainThreadId = useAuiState15((s) => s.threads.mainThreadId);
+  const sentinelRef = useRef6(null);
+  useEffect8(() => {
     const node = sentinelRef.current;
     if (!node || !hasMore) return;
     const observer = new IntersectionObserver((entries) => {
@@ -2647,10 +2880,10 @@ function ThreadListContainer() {
     return () => observer.disconnect();
   }, [aui, hasMore, isLoadingMore]);
   const itemsById = new Map(threadItems.map((item) => [item.id, item]));
-  return /* @__PURE__ */ jsxs19(ThreadListShell2, { header: /* @__PURE__ */ jsx56(ThreadListNewButton2, { onClick: () => aui.threads().switchToNewThread() }), children: [
-    isLoading ? /* @__PURE__ */ jsx56(ThreadListRowSkeleton2, {}) : threadIds.length === 0 ? /* @__PURE__ */ jsx56(ThreadListEmptyState2, {}) : threadIds.map((id) => {
+  return /* @__PURE__ */ jsxs20(ThreadListShell2, { header: /* @__PURE__ */ jsx60(ThreadListNewButton2, { onClick: () => aui.threads().switchToNewThread() }), children: [
+    isLoading ? /* @__PURE__ */ jsx60(ThreadListRowSkeleton2, {}) : threadIds.length === 0 ? /* @__PURE__ */ jsx60(ThreadListEmptyState2, {}) : threadIds.map((id) => {
       const item = itemsById.get(id);
-      return /* @__PURE__ */ jsx56(
+      return /* @__PURE__ */ jsx60(
         ThreadListRow2,
         {
           title: item?.title ?? "New Chat",
@@ -2662,22 +2895,24 @@ function ThreadListContainer() {
         id
       );
     }),
-    !isLoading && hasMore && /* @__PURE__ */ jsxs19(Fragment5, { children: [
-      isLoadingMore && /* @__PURE__ */ jsx56(ThreadListRowSkeleton2, { count: 1 }),
-      /* @__PURE__ */ jsx56("div", { ref: sentinelRef, "aria-hidden": true })
+    !isLoading && hasMore && /* @__PURE__ */ jsxs20(Fragment5, { children: [
+      isLoadingMore && /* @__PURE__ */ jsx60(ThreadListRowSkeleton2, { count: 1 }),
+      /* @__PURE__ */ jsx60("div", { ref: sentinelRef, "aria-hidden": true })
     ] })
   ] });
 }
 // src/containers/Thread.tsx
-import { jsx as jsx57 } from "react/jsx-runtime";
+import { jsx as jsx61 } from "react/jsx-runtime";
 function Thread() {
-  return /* @__PURE__ */ jsx57(ThreadContainer, { composer: /* @__PURE__ */ jsx57(ComposerContainer, {}) });
+  return /* @__PURE__ */ jsx61(ThreadContainer, { composer: /* @__PURE__ */ jsx61(ComposerContainer, {}) });
 }
 export {
-  Accordion3 as Accordion,
-  AccordionDetails3 as AccordionDetails,
-  AccordionSummary3 as AccordionSummary,
+  Accordion4 as Accordion,
+  AccordionDetails4 as AccordionDetails,
+  AccordionSummary4 as AccordionSummary,
+  AgentStepsCard,
+  AgentStepsContainer,
   AskUserContainer,
   AssistantMessageBubble,
   AssistantMessageContainer,
@@ -2701,6 +2936,8 @@ export {
   default5 as Dialog,
   ErrorToasterProvider,
   GhostButton,
+  HistoryLoader,
+  HistoryLoaderContainer,
   default2 as IconButton,
   default3 as IconProvider,
   LightTooltip2 as LightTooltip,
@@ -2752,6 +2989,7 @@ export {
   UserMessageContainer,
   UserMessageEdit,
   WelcomeScreen,
+  computeAgentStepsSplit,
   defaultSlots,
   defaultTokens,
   registerIcons2 as registerIcons,