@truefoundry/agent-ui-sdk 0.0.3 → 0.0.4

package/dist/index.js

@@ -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 })
       ]
     }
   );
@@ -379,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",
@@ -391,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" })
         ] })
       ]
     }
@@ -403,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,
@@ -422,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",
@@ -432,7 +501,7 @@ function ComposerShell({
       ),
       children: [
         attachments,
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx21(
           "textarea",
           {
             value,
@@ -450,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,
@@ -460,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,
@@ -487,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;
@@ -504,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,
@@ -537,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,
@@ -553,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",
@@ -563,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",
@@ -577,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",
@@ -598,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",
@@ -614,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",
@@ -636,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,
@@ -653,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",
@@ -682,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",
@@ -697,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",
@@ -721,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"
               ] })
             ]
@@ -740,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",
@@ -754,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(
@@ -779,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"],
@@ -795,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,
@@ -805,7 +874,7 @@ function Markdown({
   className
 }) {
   const mode = useThemeMode();
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(
     MarkdownWithOpenUI,
     {
       isStreaming,
@@ -821,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",
@@ -836,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",
@@ -852,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",
@@ -873,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;
@@ -906,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(
@@ -922,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$/, "");
 }
@@ -936,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,
@@ -945,7 +1035,7 @@ function UserMessageActionBar({ className }) {
         className
       ),
       children: [
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx36(
           IconButton5,
           {
             icon: "rotate-right",
@@ -953,7 +1043,7 @@ function UserMessageActionBar({ className }) {
             onClick: () => void resetFromTurn(turnId)
           }
         ),
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx36(
           IconButton5,
           {
             icon: "pencil",
@@ -962,7 +1052,7 @@ function UserMessageActionBar({ className }) {
             onClick: edit
           }
         ),
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx36(
           IconButton5,
           {
             icon: isCopied ? "check" : ["far", "clone"],
@@ -970,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,
@@ -1000,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(
@@ -1022,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,
@@ -1038,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,
@@ -1050,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 { 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(
@@ -1069,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" })
             ]
           }
         )
@@ -1089,7 +1179,7 @@ function Toast({ title, description, open, onOpenChange, className }) {
   );
 }
 function ToastStack({ children, duration = Number.POSITIVE_INFINITY }) {
-  return /* @__PURE__ */ jsx37("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 });
+  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
@@ -1100,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,
@@ -1119,6 +1209,7 @@ var defaultSlots = {
   SandboxToolCallCard,
   ToolApprovalBar,
   ToolGroupCard,
+  AgentStepsCard,
   MessageListSkeleton,
   ComposerShell,
   ComposerLeftSection,
@@ -1137,6 +1228,7 @@ var defaultSlots = {
   Markdown,
   // SDK atoms — SDK-owned (no tfy slot component)
   AssistantMessageBubble,
+  HistoryLoader,
   MessageErrorBanner,
   MessageTimestamp,
   UserMessageActionBar,
@@ -1151,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({
@@ -1165,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);
@@ -1252,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";
 
@@ -1307,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";
@@ -1318,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;
@@ -1351,9 +1485,9 @@ function ErrorToasterProvider({ children }) {
     setOpen(true);
   }, []);
   const value = useMemo2(() => ({ showError }), [showError]);
-  return /* @__PURE__ */ jsxs15(ErrorToasterContext.Provider, { value, children: [
+  return /* @__PURE__ */ jsxs16(ErrorToasterContext.Provider, { value, children: [
     children,
-    /* @__PURE__ */ jsx39(ToastStack2, { 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() {
@@ -1368,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";
 }
@@ -1405,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");
@@ -1421,7 +1555,7 @@ function MessageImageContainer() {
   if (!image) {
     return null;
   }
-  const card = /* @__PURE__ */ jsx41(
+  const card = /* @__PURE__ */ jsx43(
     AttachmentCard2,
     {
       name: filename ?? "image",
@@ -1431,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(
@@ -1478,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,
@@ -1514,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");
@@ -1528,7 +1662,7 @@ function SandboxToolCallContainer(props) {
     props.resultText,
     viewMode
   ]);
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx45(
     SandboxToolCallCard2,
     {
       ...props,
@@ -1541,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,
@@ -1590,7 +1724,7 @@ function ToolApprovalContainer({
       onDenyOptionChange(null);
     }
   }, [denialReason, onDenyOptionChange, onSelectOption, selectedDenyOptionId]);
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx46(
     ToolApprovalBar2,
     {
       toolName,
@@ -1609,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);
@@ -1633,7 +1767,7 @@ function ToolCallContentBlockContainer(props) {
     },
     []
   );
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx47(
     ToolCallContentBlock2,
     {
       ...props,
@@ -1646,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: {
@@ -1831,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,
@@ -1849,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);
@@ -1868,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: [],
@@ -1900,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,
@@ -1916,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: {
@@ -1934,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,
@@ -1957,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}`,
@@ -1968,7 +2102,7 @@ var ToolCallContainer = (part) => {
           awaitingText: durationText ?? "Awaiting Response\u2026",
           showResponseLine: status !== "running" && !!resultDisplay2.data,
           mcpServerName: mcpServer,
-          requestSlot: argsDisplay2.value ? /* @__PURE__ */ jsx46(
+          requestSlot: argsDisplay2.value ? /* @__PURE__ */ jsx48(
             ToolCallContentBlockContainer,
             {
               title: "Request",
@@ -1976,7 +2110,7 @@ var ToolCallContainer = (part) => {
               isJson: argsDisplay2.isJson,
               maxHeight: "10.5rem"
             }
-          ) : resultDisplay2.data ? /* @__PURE__ */ jsx46(
+          ) : resultDisplay2.data ? /* @__PURE__ */ jsx48(
             ToolCallContentBlockContainer,
             {
               title: "Request",
@@ -1985,7 +2119,7 @@ var ToolCallContainer = (part) => {
               maxHeight: "10.5rem"
             }
           ) : void 0,
-          responseSlot: resultDisplay2.data ? /* @__PURE__ */ jsx46(
+          responseSlot: resultDisplay2.data ? /* @__PURE__ */ jsx48(
             ToolCallContentBlockContainer,
             {
               title: "Response",
@@ -2004,7 +2138,7 @@ 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,
@@ -2015,7 +2149,7 @@ var ToolCallContainer = (part) => {
         awaitingText: durationText ?? "Awaiting Response\u2026",
         showResponseLine: status !== "running" && resultDisplay2.data !== void 0,
         mcpServerName: mcpServer,
-        requestSlot: inputDisplay.value ? /* @__PURE__ */ jsx46(
+        requestSlot: inputDisplay.value ? /* @__PURE__ */ jsx48(
           ToolCallContentBlockContainer,
           {
             title: "Request",
@@ -2023,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",
@@ -2032,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",
@@ -2041,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,
@@ -2056,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",
@@ -2064,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",
@@ -2073,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",
@@ -2082,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),
@@ -2124,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;
   }
@@ -2148,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,
@@ -2199,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;
@@ -2234,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");
@@ -2244,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,
@@ -2264,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,
@@ -2276,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
@@ -2300,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");
@@ -2309,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",
@@ -2336,7 +2529,7 @@ function UserEditComposerContainer() {
                 text: "Cancel"
               }
             ),
-            /* @__PURE__ */ jsx50(
+            /* @__PURE__ */ jsx53(
               Button4.Primary,
               {
                 type: "button",
@@ -2355,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");
@@ -2363,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");
@@ -2399,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;
@@ -2432,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" };
@@ -2446,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");
@@ -2467,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]);
@@ -2481,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();
@@ -2495,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,
@@ -2507,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,
@@ -2538,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();
@@ -2550,7 +2782,7 @@ function McpAuthContainer() {
       window.open(server.authUrl, "_blank", "noopener,noreferrer");
     }
   };
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx58(
     McpAuthPrompt2,
     {
       servers: pending.mcpServers,
@@ -2562,25 +2794,25 @@ function McpAuthContainer() {
 }
 
 // src/containers/ComposerContainer.tsx
-import { Fragment as Fragment3, 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(Fragment3, { children: [
-    /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsxs19(Fragment4, { children: [
+    /* @__PURE__ */ jsx59(
       "input",
       {
         ref: fileInputRef,
@@ -2598,10 +2830,10 @@ function ComposerContainer({
         }
       }
     ),
-    /* @__PURE__ */ jsx55(
+    /* @__PURE__ */ jsx59(
       ComposerShell2,
       {
-        attachments: /* @__PURE__ */ jsx55(ComposerAttachmentsContainer, {}),
+        attachments: /* @__PURE__ */ jsx59(ComposerAttachmentsContainer, {}),
         value: text,
         placeholder,
         disabled: isBusy,
@@ -2619,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 Fragment4, 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");
@@ -2629,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) => {
@@ -2648,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",
@@ -2663,22 +2895,24 @@ function ThreadListContainer() {
         id
       );
     }),
-    !isLoading && hasMore && /* @__PURE__ */ jsxs19(Fragment4, { 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,
@@ -2702,6 +2936,8 @@ export {
   default5 as Dialog,
   ErrorToasterProvider,
   GhostButton,
+  HistoryLoader,
+  HistoryLoaderContainer,
   default2 as IconButton,
   default3 as IconProvider,
   LightTooltip2 as LightTooltip,
@@ -2753,6 +2989,7 @@ export {
   UserMessageContainer,
   UserMessageEdit,
   WelcomeScreen,
+  computeAgentStepsSplit,
   defaultSlots,
   defaultTokens,
   registerIcons2 as registerIcons,