@nextclaw/agent-chat-ui 0.2.19 → 0.2.21

package/dist/index.d.ts

@@ -166,6 +166,13 @@ type ChatFileOperationBlockViewModel = {
     rawText?: string;
     truncated?: boolean;
 };
+type ChatToolActionViewModel = {
+    kind: "open-session";
+    sessionId: string;
+    sessionKind: "child" | "session";
+    label?: string;
+    parentSessionId?: string;
+};
 type ChatToolPartViewModel = {
     kind: "call" | "result";
     toolName: string;
@@ -180,6 +187,7 @@ type ChatToolPartViewModel = {
     titleLabel: string;
     outputLabel: string;
     emptyLabel: string;
+    action?: ChatToolActionViewModel;
     fileOperation?: {
         blocks: ChatFileOperationBlockViewModel[];
     };
@@ -246,6 +254,7 @@ type ChatMessageListProps = {
     hasAssistantDraft: boolean;
     texts: ChatMessageTexts;
     className?: string;
+    onToolAction?: (action: ChatToolActionViewModel) => void;
 };
 
 type ChatInputBarHandle = {
@@ -320,4 +329,4 @@ declare function resolveChatComposerSlashTrigger(nodes: ChatComposerNode[], sele
     end: number;
 } | null;
 
-export { type ChatComposerNode, type ChatComposerSelection, type ChatComposerTextNode, type ChatComposerTokenKind, type ChatComposerTokenNode, type ChatFileOperationBlockViewModel, type ChatFileOperationLineViewModel, type ChatInlineContentSegmentViewModel, type ChatInlineHint, type ChatInlineTokenViewModel, ChatInputBar, type ChatInputBarActionsProps, type ChatInputBarHandle, type ChatInputBarProps, type ChatInputBarToolbarProps, ChatMessageList, type ChatMessageListProps, type ChatMessagePartViewModel, type ChatMessageRole, type ChatMessageTexts, type ChatMessageViewModel, type ChatSelectedItem, type ChatSkillPickerOption, type ChatSkillPickerProps, type ChatSlashItem, type ChatSlashMenuProps, type ChatTexts, type ChatToolPartViewModel, type ChatToolbarAccessory, type ChatToolbarAccessoryIcon, type ChatToolbarIcon, type ChatToolbarSelect, type ChatToolbarSelectGroup, type ChatToolbarSelectOption, copyText, createChatComposerNodesFromText, createChatComposerTextNode, createChatComposerTokenNode, createEmptyChatComposerNodes, extractChatComposerTokenKeys, normalizeChatComposerNodes, removeChatComposerTokenNodes, replaceChatComposerRange, resolveChatComposerSlashTrigger, serializeChatComposerDocument, serializeChatComposerPlainText, useActiveItemScroll, useCopyFeedback, useElementWidth, useStickyBottomScroll };
+export { type ChatComposerNode, type ChatComposerSelection, type ChatComposerTextNode, type ChatComposerTokenKind, type ChatComposerTokenNode, type ChatFileOperationBlockViewModel, type ChatFileOperationLineViewModel, type ChatInlineContentSegmentViewModel, type ChatInlineHint, type ChatInlineTokenViewModel, ChatInputBar, type ChatInputBarActionsProps, type ChatInputBarHandle, type ChatInputBarProps, type ChatInputBarToolbarProps, ChatMessageList, type ChatMessageListProps, type ChatMessagePartViewModel, type ChatMessageRole, type ChatMessageTexts, type ChatMessageViewModel, type ChatSelectedItem, type ChatSkillPickerOption, type ChatSkillPickerProps, type ChatSlashItem, type ChatSlashMenuProps, type ChatTexts, type ChatToolActionViewModel, type ChatToolPartViewModel, type ChatToolbarAccessory, type ChatToolbarAccessoryIcon, type ChatToolbarIcon, type ChatToolbarSelect, type ChatToolbarSelectGroup, type ChatToolbarSelectOption, copyText, createChatComposerNodesFromText, createChatComposerTextNode, createChatComposerTokenNode, createEmptyChatComposerNodes, extractChatComposerTokenKeys, normalizeChatComposerNodes, removeChatComposerTokenNodes, replaceChatComposerRange, resolveChatComposerSlashTrigger, serializeChatComposerDocument, serializeChatComposerPlainText, useActiveItemScroll, useCopyFeedback, useElementWidth, useStickyBottomScroll };

package/dist/index.js

@@ -290,13 +290,20 @@ function ChatSlashMenu(props) {
               ] })
             }
           ),
-          /* @__PURE__ */ jsx5("div", { className: "max-w-[320px] p-3.5", children: activeItem ? /* @__PURE__ */ jsxs2("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsx5("div", { className: "min-w-0 p-2.5", children: activeItem ? /* @__PURE__ */ jsxs2("div", { className: "space-y-3", children: [
             /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx5("span", { className: "inline-flex rounded-full bg-primary/10 px-2 py-0.5 text-[11px] font-semibold text-primary", children: activeItem.subtitle }),
               /* @__PURE__ */ jsx5("span", { className: "text-sm font-semibold text-gray-900", children: activeItem.title })
             ] }),
             /* @__PURE__ */ jsx5("p", { className: "text-xs leading-5 text-gray-600", children: activeItem.description }),
-            /* @__PURE__ */ jsx5("div", { className: "space-y-1", children: activeItem.detailLines.map((line) => /* @__PURE__ */ jsx5("div", { className: "rounded-md bg-gray-50 px-2 py-1 text-[11px] text-gray-600", children: line }, line)) }),
+            /* @__PURE__ */ jsx5("div", { className: "space-y-1", children: activeItem.detailLines.map((line) => /* @__PURE__ */ jsx5(
+              "div",
+              {
+                className: "min-w-0 break-all rounded-md bg-gray-50 px-2 py-1 text-[11px] leading-5 text-gray-600",
+                children: line
+              },
+              line
+            )) }),
             /* @__PURE__ */ jsx5("div", { className: "pt-1 text-[11px] text-gray-500", children: texts.slashSkillHintLabel })
           ] }) : /* @__PURE__ */ jsx5("div", { className: "text-xs text-gray-500", children: texts.slashHintLabel }) })
         ] })
@@ -2752,7 +2759,7 @@ function ChatReasoningBlock({ label, text, isUser, isInProgress }) {
 
 // src/components/chat/ui/chat-message-list/tool-card/tool-card-views.tsx
 import { Terminal, FileText, Code2, Search as Search2, Globe } from "lucide-react";
-import { useState as useState7, useEffect as useEffect7, useRef as useRef6 } from "react";
+import { useState as useState7, useEffect as useEffect8, useRef as useRef8 } from "react";
 
 // src/components/chat/ui/chat-message-list/tool-card/tool-card-root.tsx
 import { jsx as jsx18 } from "react/jsx-runtime";
@@ -2833,18 +2840,230 @@ function ToolCardHeader({
   );
 }
 
+// src/components/chat/hooks/use-sticky-bottom-scroll.ts
+import { useEffect as useEffect7, useLayoutEffect as useLayoutEffect2, useRef as useRef6 } from "react";
+var DEFAULT_STICKY_THRESHOLD_PX = 10;
+function scrollElementToBottom(element) {
+  element.scrollTop = element.scrollHeight;
+}
+function queueScrollToBottom(params) {
+  const element = params.scrollRef.current;
+  if (!element) {
+    return;
+  }
+  if (params.scheduledScrollFrameRef.current !== null) {
+    cancelAnimationFrame(params.scheduledScrollFrameRef.current);
+  }
+  params.scheduledScrollFrameRef.current = requestAnimationFrame(() => {
+    params.scheduledScrollFrameRef.current = null;
+    const currentElement = params.scrollRef.current;
+    if (!currentElement) {
+      return;
+    }
+    params.isProgrammaticScrollRef.current = true;
+    scrollElementToBottom(currentElement);
+  });
+}
+function useStickyBottomScroll(params) {
+  const isStickyRef = useRef6(true);
+  const isProgrammaticScrollRef = useRef6(false);
+  const previousResetKeyRef = useRef6(null);
+  const pendingInitialScrollRef = useRef6(false);
+  const scheduledScrollFrameRef = useRef6(null);
+  const onScroll = () => {
+    if (isProgrammaticScrollRef.current) {
+      isProgrammaticScrollRef.current = false;
+      return;
+    }
+    const element = params.scrollRef.current;
+    if (!element) {
+      return;
+    }
+    const distanceFromBottom = element.scrollHeight - element.scrollTop - element.clientHeight;
+    isStickyRef.current = distanceFromBottom <= (params.stickyThresholdPx ?? DEFAULT_STICKY_THRESHOLD_PX);
+  };
+  useEffect7(() => {
+    if (previousResetKeyRef.current === params.resetKey) {
+      return;
+    }
+    previousResetKeyRef.current = params.resetKey;
+    isStickyRef.current = true;
+    pendingInitialScrollRef.current = true;
+  }, [params.resetKey]);
+  useEffect7(() => {
+    const scheduledScrollFrame = scheduledScrollFrameRef.current;
+    return () => {
+      if (scheduledScrollFrame !== null) {
+        cancelAnimationFrame(scheduledScrollFrame);
+      }
+    };
+  }, []);
+  useLayoutEffect2(() => {
+    if (!pendingInitialScrollRef.current || params.isLoading || !params.hasContent) {
+      return;
+    }
+    const element = params.scrollRef.current;
+    if (!element) {
+      return;
+    }
+    pendingInitialScrollRef.current = false;
+    queueScrollToBottom({
+      scrollRef: params.scrollRef,
+      scheduledScrollFrameRef,
+      isProgrammaticScrollRef
+    });
+  }, [params.hasContent, params.isLoading, params.scrollRef]);
+  useLayoutEffect2(() => {
+    if (!isStickyRef.current || !params.hasContent) {
+      return;
+    }
+    const element = params.scrollRef.current;
+    if (!element) {
+      return;
+    }
+    queueScrollToBottom({
+      scrollRef: params.scrollRef,
+      scheduledScrollFrameRef,
+      isProgrammaticScrollRef
+    });
+  }, [params.contentVersion, params.hasContent, params.scrollRef]);
+  return { onScroll };
+}
+
 // src/components/chat/ui/chat-message-list/tool-card/tool-card-file-operation.tsx
-import { Fragment as Fragment4 } from "react";
+import { Fragment as Fragment4, useRef as useRef7 } from "react";
+
+// src/components/chat/ui/chat-message-list/tool-card/tool-card-file-operation-lines.tsx
 import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+var FILE_ROW_CLASS_NAME = "h-5 font-mono text-[11px] leading-5";
+var FILE_GUTTER_NUMBER_CELL_CLASS_NAME = "sticky left-0 z-[1] flex h-5 items-center justify-center px-2.5 tabular-nums select-none";
 function formatLineNumber(value) {
   return typeof value === "number" ? String(value) : "";
 }
 function readVisibleLineNumber(line) {
   return formatLineNumber(line.newLineNumber ?? line.oldLineNumber);
 }
+function readLineKey(prefix, line, index) {
+  return `${prefix}-${index}-${line.oldLineNumber ?? "x"}-${line.newLineNumber ?? "x"}`;
+}
+function hasVisibleLineNumber(line) {
+  return typeof line.newLineNumber === "number" || typeof line.oldLineNumber === "number";
+}
+function readHasBlockLineNumbers(block) {
+  return block.lines.some(hasVisibleLineNumber);
+}
+function readLineNumberColumnWidth(block) {
+  const maxDigits = block.lines.reduce((currentMax, line) => {
+    if (!hasVisibleLineNumber(line)) {
+      return currentMax;
+    }
+    return Math.max(currentMax, readVisibleLineNumber(line).length);
+  }, 0);
+  const width = Math.max(6.5, Math.min(8, maxDigits + 3.5));
+  return `${width}ch`;
+}
+function buildRowTemplateColumns(params) {
+  if (!params.showLineNumbers) {
+    return void 0;
+  }
+  return {
+    gridTemplateColumns: `${params.lineNumberColumnWidth} minmax(0, 1fr)`
+  };
+}
+function getLineNumberTone(line) {
+  if (line.kind === "remove") {
+    return "border-r border-rose-200 bg-rose-50 text-rose-700";
+  }
+  if (line.kind === "add") {
+    return "border-r border-emerald-200 bg-emerald-50 text-emerald-700";
+  }
+  return "border-r border-stone-200 bg-stone-100 text-stone-500";
+}
+function getCodeRowTone(line) {
+  if (line.kind === "remove") {
+    return "bg-rose-50 text-rose-950";
+  }
+  if (line.kind === "add") {
+    return "bg-emerald-50 text-emerald-950";
+  }
+  return "bg-white text-amber-950/80";
+}
+function FileOperationLineRow({
+  line,
+  showLineNumbers,
+  lineNumberColumnWidth
+}) {
+  return /* @__PURE__ */ jsxs13(
+    "div",
+    {
+      "data-file-line-row": "true",
+      className: cn("grid w-max min-w-full", FILE_ROW_CLASS_NAME),
+      style: buildRowTemplateColumns({
+        showLineNumbers,
+        lineNumberColumnWidth
+      }),
+      children: [
+        showLineNumbers ? /* @__PURE__ */ jsx21(
+          "span",
+          {
+            "data-file-line-number-cell": "true",
+            style: { width: lineNumberColumnWidth },
+            className: cn(
+              FILE_GUTTER_NUMBER_CELL_CLASS_NAME,
+              getLineNumberTone(line)
+            ),
+            children: readVisibleLineNumber(line)
+          }
+        ) : null,
+        /* @__PURE__ */ jsx21(
+          "span",
+          {
+            "data-file-code-row": "true",
+            className: cn(
+              "block min-w-full whitespace-pre px-2.5",
+              getCodeRowTone(line)
+            ),
+            children: line.text || " "
+          }
+        )
+      ]
+    }
+  );
+}
+function FileOperationLinesGrid({
+  block
+}) {
+  const showLineNumbers = readHasBlockLineNumbers(block);
+  const lineNumberColumnWidth = readLineNumberColumnWidth(block);
+  return /* @__PURE__ */ jsx21("div", { className: "overflow-x-auto custom-scrollbar-amber bg-white", children: block.lines.map((line, index) => /* @__PURE__ */ jsx21(
+    FileOperationLineRow,
+    {
+      line,
+      showLineNumbers,
+      lineNumberColumnWidth
+    },
+    readLineKey("row", line, index)
+  )) });
+}
+
+// src/components/chat/ui/chat-message-list/tool-card/tool-card-file-operation.tsx
+import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
 function isPreviewBlock(block) {
   return block.display === "preview";
 }
+function readFileOperationContentVersion(block) {
+  if (block.rawText) {
+    return block.rawText;
+  }
+  return block.lines.map(
+    (line) => [
+      line.kind,
+      line.oldLineNumber ?? "",
+      line.newLineNumber ?? "",
+      line.text
+    ].join(":")
+  ).join("\n");
+}
 function getCaptionTone(part) {
   if (/^\+\d+$/.test(part)) {
     return "text-emerald-700";
@@ -2859,54 +3078,39 @@ function renderCaption(caption) {
   if (parts.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx21("div", { className: "flex shrink-0 items-center gap-x-1 whitespace-nowrap text-[10px] font-medium uppercase tracking-[0.08em]", children: parts.map((part, index) => /* @__PURE__ */ jsxs13(Fragment4, { children: [
-    index > 0 ? /* @__PURE__ */ jsx21("span", { className: "text-stone-300", children: "\xB7" }) : null,
-    /* @__PURE__ */ jsx21("span", { className: cn(getCaptionTone(part)), children: part })
+  return /* @__PURE__ */ jsx22("div", { className: "flex shrink-0 items-center gap-x-1 whitespace-nowrap text-[10px] font-medium uppercase tracking-[0.08em]", children: parts.map((part, index) => /* @__PURE__ */ jsxs14(Fragment4, { children: [
+    index > 0 ? /* @__PURE__ */ jsx22("span", { className: "text-stone-300", children: "\xB7" }) : null,
+    /* @__PURE__ */ jsx22("span", { className: cn(getCaptionTone(part)), children: part })
   ] }, `${part}-${index}`)) });
 }
-function renderDiffGutterRow(line, index) {
-  const gutterTone = line.kind === "add" ? "border-r border-emerald-200 bg-emerald-100 text-emerald-700" : line.kind === "remove" ? "border-r border-rose-200 bg-rose-100 text-rose-700" : "border-r border-stone-200 bg-stone-100 text-stone-500";
-  return /* @__PURE__ */ jsx21(
-    "div",
-    {
-      className: "font-mono text-[11px] leading-relaxed",
-      children: /* @__PURE__ */ jsx21("span", { className: cn("flex h-full w-11 items-center justify-center px-1 py-1 tabular-nums", gutterTone), children: readVisibleLineNumber(line) })
-    },
-    `diff-gutter-${index}-${line.oldLineNumber ?? "x"}-${line.newLineNumber ?? "x"}`
-  );
-}
-function renderPreviewGutterRow(line, index) {
-  return /* @__PURE__ */ jsx21(
-    "div",
-    {
-      className: "font-mono text-[11px] leading-relaxed",
-      children: /* @__PURE__ */ jsx21("span", { className: "flex h-full w-11 items-center justify-center border-r border-stone-200 bg-stone-100 px-1 py-1.5 tabular-nums text-stone-500", children: readVisibleLineNumber(line) })
-    },
-    `preview-gutter-${index}-${line.oldLineNumber ?? "x"}-${line.newLineNumber ?? "x"}`
-  );
-}
-function renderDiffCodeRow(line, index) {
-  const rowTone = line.kind === "add" ? "border-l-2 border-emerald-300 bg-emerald-50 text-emerald-950" : line.kind === "remove" ? "border-l-2 border-rose-300 bg-rose-50 text-rose-950" : "border-l-2 border-transparent text-amber-950/80";
-  return /* @__PURE__ */ jsx21(
+function StickyFileOperationScrollArea({
+  children,
+  contentVersion,
+  resetKey,
+  className,
+  scrollKind
+}) {
+  const scrollRef = useRef7(null);
+  const { onScroll } = useStickyBottomScroll({
+    scrollRef,
+    resetKey,
+    isLoading: false,
+    hasContent: true,
+    contentVersion,
+    stickyThresholdPx: 20
+  });
+  return /* @__PURE__ */ jsx22(
     "div",
     {
+      ref: scrollRef,
+      onScroll,
+      "data-file-scroll-kind": scrollKind,
       className: cn(
-        "min-w-full whitespace-pre px-3 py-1 font-mono text-[11px] leading-relaxed",
-        rowTone
+        "overflow-y-auto overscroll-contain bg-white custom-scrollbar-amber",
+        className
       ),
-      children: line.text || " "
-    },
-    `diff-code-${index}-${line.oldLineNumber ?? "x"}-${line.newLineNumber ?? "x"}`
-  );
-}
-function renderPreviewCodeRow(line, index) {
-  return /* @__PURE__ */ jsx21(
-    "div",
-    {
-      className: "min-w-full whitespace-pre px-3 py-1.5 font-mono text-[11px] leading-relaxed text-amber-950/85",
-      children: line.text || " "
-    },
-    `preview-code-${index}-${line.oldLineNumber ?? "x"}-${line.newLineNumber ?? "x"}`
+      children
+    }
   );
 }
 function FileOperationBlock({
@@ -2917,45 +3121,67 @@ function FileOperationBlock({
   const { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } = ChatUiPrimitives;
   const previewBlock = isPreviewBlock(block);
   const showMetaRow = showPathRow || Boolean(block.caption);
-  return /* @__PURE__ */ jsxs13("section", { className: cn("overflow-hidden bg-white", !isFirst && "border-t border-stone-200/80"), children: [
-    showMetaRow ? /* @__PURE__ */ jsxs13(
-      "div",
-      {
-        className: cn(
-          "flex items-center justify-between gap-4 border-b border-stone-200/80 px-4 text-stone-700",
-          showPathRow ? "py-3" : "py-2"
-        ),
-        children: [
-          /* @__PURE__ */ jsx21("div", { className: "min-w-0 flex-1", children: showPathRow ? /* @__PURE__ */ jsx21(TooltipProvider, { delayDuration: 250, children: /* @__PURE__ */ jsxs13(Tooltip, { children: [
-            /* @__PURE__ */ jsx21(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx21(
-              "div",
-              {
-                className: "truncate whitespace-nowrap font-mono text-[12px] font-medium text-stone-700",
-                title: block.path,
-                children: block.path
-              }
-            ) }),
-            /* @__PURE__ */ jsx21(TooltipContent, { side: "top", className: "max-w-[420px] text-xs font-mono break-all", children: block.path })
-          ] }) }) : null }),
-          block.caption ? renderCaption(block.caption) : null
-        ]
-      }
-    ) : null,
-    block.lines.length > 0 ? /* @__PURE__ */ jsx21("div", { className: "max-h-72 overflow-auto bg-white custom-scrollbar-amber", children: /* @__PURE__ */ jsxs13(
-      "div",
-      {
-        className: cn(
-          "grid min-w-0 max-w-full",
-          "grid-cols-[2.75rem_minmax(0,1fr)]"
-        ),
-        children: [
-          /* @__PURE__ */ jsx21("div", { className: "overflow-hidden", children: block.lines.map(previewBlock ? renderPreviewGutterRow : renderDiffGutterRow) }),
-          /* @__PURE__ */ jsx21("div", { className: "overflow-x-auto custom-scrollbar-amber bg-white", children: /* @__PURE__ */ jsx21("div", { className: "min-w-max", children: block.lines.map(previewBlock ? renderPreviewCodeRow : renderDiffCodeRow) }) })
-        ]
-      }
-    ) }) : block.rawText ? /* @__PURE__ */ jsx21("pre", { className: "max-h-72 min-w-full w-max overflow-auto bg-white px-4 py-3 font-mono text-[11px] leading-relaxed text-amber-950/80 whitespace-pre custom-scrollbar-amber", children: block.rawText }) : null,
-    block.truncated && !previewBlock ? /* @__PURE__ */ jsx21("div", { className: "border-t border-stone-200/85 bg-stone-50 px-4 py-2 text-[10px] text-stone-500", children: "Showing a shortened diff preview." }) : null
-  ] });
+  return /* @__PURE__ */ jsxs14(
+    "section",
+    {
+      className: cn(
+        "overflow-hidden bg-white",
+        !isFirst && "border-t border-stone-200/80"
+      ),
+      children: [
+        showMetaRow ? /* @__PURE__ */ jsxs14(
+          "div",
+          {
+            className: cn(
+              "flex items-center justify-between gap-4 border-b border-stone-200/80 px-4 text-stone-700",
+              showPathRow ? "py-2" : "py-1.5"
+            ),
+            children: [
+              /* @__PURE__ */ jsx22("div", { className: "min-w-0 flex-1", children: showPathRow ? /* @__PURE__ */ jsx22(TooltipProvider, { delayDuration: 250, children: /* @__PURE__ */ jsxs14(Tooltip, { children: [
+                /* @__PURE__ */ jsx22(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx22(
+                  "div",
+                  {
+                    className: "truncate whitespace-nowrap font-mono text-[12px] font-medium text-stone-700",
+                    title: block.path,
+                    children: block.path
+                  }
+                ) }),
+                /* @__PURE__ */ jsx22(
+                  TooltipContent,
+                  {
+                    side: "top",
+                    className: "max-w-[420px] text-xs font-mono break-all",
+                    children: block.path
+                  }
+                )
+              ] }) }) : null }),
+              block.caption ? renderCaption(block.caption) : null
+            ]
+          }
+        ) : null,
+        block.lines.length > 0 ? /* @__PURE__ */ jsx22(
+          StickyFileOperationScrollArea,
+          {
+            resetKey: `block:${block.key}`,
+            contentVersion: readFileOperationContentVersion(block),
+            className: "max-h-72",
+            scrollKind: "block",
+            children: /* @__PURE__ */ jsx22(FileOperationLinesGrid, { block })
+          }
+        ) : block.rawText ? /* @__PURE__ */ jsx22(
+          StickyFileOperationScrollArea,
+          {
+            resetKey: `raw:${block.key}`,
+            contentVersion: block.rawText,
+            className: "max-h-72",
+            scrollKind: "raw",
+            children: /* @__PURE__ */ jsx22("div", { className: "overflow-x-auto custom-scrollbar-amber", children: /* @__PURE__ */ jsx22("pre", { className: "min-w-max whitespace-pre bg-white px-4 py-2 font-mono text-[11px] leading-5 text-amber-950/80", children: block.rawText }) })
+          }
+        ) : null,
+        block.truncated && !previewBlock ? /* @__PURE__ */ jsx22("div", { className: "border-t border-stone-200/85 bg-stone-50 px-4 py-2 text-[10px] text-stone-500", children: "Showing a shortened diff preview." }) : null
+      ]
+    }
+  );
 }
 function ToolCardFileOperationContent({
   card,
@@ -2966,9 +3192,9 @@ function ToolCardFileOperationContent({
   if (blocks.length === 0 && !output) {
     return null;
   }
-  return /* @__PURE__ */ jsxs13("div", { className: cn("overflow-hidden bg-white", className), children: [
+  return /* @__PURE__ */ jsxs14("div", { className: cn("overflow-hidden bg-white", className), children: [
     blocks.map((block, index) => {
-      return /* @__PURE__ */ jsx21(
+      return /* @__PURE__ */ jsx22(
         FileOperationBlock,
         {
           block,
@@ -2978,15 +3204,24 @@ function ToolCardFileOperationContent({
         block.key
       );
     }),
-    output ? /* @__PURE__ */ jsx21("pre", { className: cn(
-      "max-h-56 min-w-full w-max overflow-auto bg-white px-4 py-3 font-mono text-[11px] leading-relaxed text-amber-950/80 whitespace-pre custom-scrollbar-amber",
-      blocks.length > 0 && "border-t border-stone-200/80"
-    ), children: output }) : null
+    output ? /* @__PURE__ */ jsx22(
+      StickyFileOperationScrollArea,
+      {
+        resetKey: `output:${card.toolName}:${card.summary ?? "none"}`,
+        contentVersion: output,
+        className: cn(
+          "max-h-56",
+          blocks.length > 0 && "border-t border-stone-200/80"
+        ),
+        scrollKind: "output",
+        children: /* @__PURE__ */ jsx22("div", { className: "overflow-x-auto custom-scrollbar-amber", children: /* @__PURE__ */ jsx22("pre", { className: "min-w-max whitespace-pre bg-white px-4 py-2 font-mono text-[11px] leading-5 text-amber-950/80", children: output }) })
+      }
+    ) : null
   ] });
 }
 
 // src/components/chat/ui/chat-message-list/tool-card/tool-card-views.tsx
-import { Fragment as Fragment5, jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
 var TOOL_CARD_AUTO_EXPAND_DELAY_MS = 200;
 var ANSI_ESCAPE_PREFIX = String.fromCharCode(27);
 var ANSI_ESCAPE_PATTERN = new RegExp(`${ANSI_ESCAPE_PREFIX}\\[[0-?]*[ -/]*[@-~]`, "g");
@@ -3060,17 +3295,17 @@ function useToolCardExpandedState({
 }) {
   const [expanded, setExpanded] = useState7(false);
   const [hasUserToggled, setHasUserToggled] = useState7(false);
-  const expandTimerRef = useRef6(null);
-  const prevRunningRef = useRef6(isRunning);
-  const isFirstRenderRef = useRef6(true);
-  useEffect7(() => {
+  const expandTimerRef = useRef8(null);
+  const prevRunningRef = useRef8(isRunning);
+  const isFirstRenderRef = useRef8(true);
+  useEffect8(() => {
     return () => {
       if (expandTimerRef.current !== null) {
         window.clearTimeout(expandTimerRef.current);
       }
     };
   }, []);
-  useEffect7(() => {
+  useEffect8(() => {
     if (expandOnError && statusTone === "error" && canExpand && !hasUserToggled) {
       if (expandTimerRef.current !== null) {
         window.clearTimeout(expandTimerRef.current);
@@ -3138,7 +3373,7 @@ function GenericToolSection({
     }
   };
   const style = tones[tone];
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     "section",
     {
       className: cn(
@@ -3146,7 +3381,7 @@ function GenericToolSection({
         style.shell
       ),
       children: [
-        /* @__PURE__ */ jsxs14(
+        /* @__PURE__ */ jsxs15(
           "div",
           {
             className: cn(
@@ -3154,12 +3389,12 @@ function GenericToolSection({
               style.header
             ),
             children: [
-              /* @__PURE__ */ jsx22("span", { className: cn("h-1.5 w-1.5 rounded-full", style.dot) }),
-              /* @__PURE__ */ jsx22("span", { children: label })
+              /* @__PURE__ */ jsx23("span", { className: cn("h-1.5 w-1.5 rounded-full", style.dot) }),
+              /* @__PURE__ */ jsx23("span", { children: label })
             ]
           }
         ),
-        /* @__PURE__ */ jsx22("div", { className: "w-full overflow-hidden", children: /* @__PURE__ */ jsx22(
+        /* @__PURE__ */ jsx23("div", { className: "w-full overflow-hidden", children: /* @__PURE__ */ jsx23(
           "pre",
           {
             className: cn(
@@ -3184,8 +3419,8 @@ function TerminalExecutionView({ card }) {
     statusTone: card.statusTone
   });
   const commandPart = card.summary?.replace(/^(command|path|args|query|input):\s*/i, "");
-  return /* @__PURE__ */ jsxs14(ToolCardRoot, { children: [
-    /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsxs15(ToolCardRoot, { children: [
+    /* @__PURE__ */ jsx23(
       ToolCardHeader,
       {
         card,
@@ -3195,17 +3430,17 @@ function TerminalExecutionView({ card }) {
         onToggle
       }
     ),
-    expanded && /* @__PURE__ */ jsxs14(Fragment5, { children: [
-      /* @__PURE__ */ jsx22("div", { className: "px-3 pb-2 font-mono w-full max-h-48 overflow-y-auto custom-scrollbar-amber min-h-0 text-[12px]", children: /* @__PURE__ */ jsxs14("div", { className: "flex items-start gap-2 leading-relaxed", children: [
-        /* @__PURE__ */ jsx22("span", { className: "text-amber-500/50 font-medium shrink-0 select-none mt-[1px]", children: "$" }),
-        /* @__PURE__ */ jsx22("div", { className: "flex-1 min-w-0", children: commandPart ? /* @__PURE__ */ jsxs14("div", { className: "text-amber-950/80 break-words whitespace-pre-wrap tracking-tight font-medium inline-block", children: [
+    expanded && /* @__PURE__ */ jsxs15(Fragment5, { children: [
+      /* @__PURE__ */ jsx23("div", { className: "px-3 pb-2 font-mono w-full max-h-48 overflow-y-auto custom-scrollbar-amber min-h-0 text-[12px]", children: /* @__PURE__ */ jsxs15("div", { className: "flex items-start gap-2 leading-relaxed", children: [
+        /* @__PURE__ */ jsx23("span", { className: "text-amber-500/50 font-medium shrink-0 select-none mt-[1px]", children: "$" }),
+        /* @__PURE__ */ jsx23("div", { className: "flex-1 min-w-0", children: commandPart ? /* @__PURE__ */ jsxs15("div", { className: "text-amber-950/80 break-words whitespace-pre-wrap tracking-tight font-medium inline-block", children: [
           commandPart,
-          isRunning && !output && /* @__PURE__ */ jsx22("span", { className: "inline-block w-1.5 h-3 ml-1 bg-amber-500/60 animate-pulse align-middle" })
-        ] }) : /* @__PURE__ */ jsx22("div", { className: "h-3 w-32 bg-amber-200/30 rounded animate-pulse mt-2" }) })
+          isRunning && !output && /* @__PURE__ */ jsx23("span", { className: "inline-block w-1.5 h-3 ml-1 bg-amber-500/60 animate-pulse align-middle" })
+        ] }) : /* @__PURE__ */ jsx23("div", { className: "h-3 w-32 bg-amber-200/30 rounded animate-pulse mt-2" }) })
       ] }) }),
-      output && /* @__PURE__ */ jsx22(ToolCardContent, { children: /* @__PURE__ */ jsxs14("pre", { className: "font-mono text-[12px] text-amber-950/70 whitespace-pre-wrap break-all w-full max-w-full max-h-64 overflow-y-auto overflow-x-hidden min-w-0 custom-scrollbar-amber leading-relaxed px-0", children: [
+      output && /* @__PURE__ */ jsx23(ToolCardContent, { children: /* @__PURE__ */ jsxs15("pre", { className: "font-mono text-[12px] text-amber-950/70 whitespace-pre-wrap break-all w-full max-w-full max-h-64 overflow-y-auto overflow-x-hidden min-w-0 custom-scrollbar-amber leading-relaxed px-0", children: [
         output,
-        isRunning && /* @__PURE__ */ jsx22("span", { className: "inline-block w-1.5 h-3 ml-1 bg-amber-500/60 animate-pulse align-middle" })
+        isRunning && /* @__PURE__ */ jsx23("span", { className: "inline-block w-1.5 h-3 ml-1 bg-amber-500/60 animate-pulse align-middle" })
       ] }) })
     ] })
   ] });
@@ -3232,8 +3467,8 @@ function FileOperationView({ card }) {
     statusTone: card.statusTone
   });
   const isEdit = card.toolName === "edit_file" || card.toolName === "write_file" || card.toolName === "apply_patch" || card.toolName === "file_change";
-  return /* @__PURE__ */ jsxs14(ToolCardRoot, { children: [
-    /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsxs15(ToolCardRoot, { children: [
+    /* @__PURE__ */ jsx23(
       ToolCardHeader,
       {
         card,
@@ -3244,7 +3479,7 @@ function FileOperationView({ card }) {
         onToggle
       }
     ),
-    expanded && hasContent && /* @__PURE__ */ jsx22(ToolCardContent, { className: "border-t border-amber-200/20 bg-transparent px-0 pt-0 pb-0", children: /* @__PURE__ */ jsx22(ToolCardFileOperationContent, { card }) })
+    expanded && hasContent && /* @__PURE__ */ jsx23(ToolCardContent, { className: "border-t border-amber-200/20 bg-transparent px-0 pt-0 pb-0", children: /* @__PURE__ */ jsx23(ToolCardFileOperationContent, { card }) })
   ] });
 }
 function SearchSnippetView({ card }) {
@@ -3255,8 +3490,8 @@ function SearchSnippetView({ card }) {
     isRunning,
     statusTone: card.statusTone
   });
-  return /* @__PURE__ */ jsxs14(ToolCardRoot, { children: [
-    /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsxs15(ToolCardRoot, { children: [
+    /* @__PURE__ */ jsx23(
       ToolCardHeader,
       {
         card,
@@ -3266,10 +3501,13 @@ function SearchSnippetView({ card }) {
         onToggle
       }
     ),
-    expanded && output && /* @__PURE__ */ jsx22(ToolCardContent, { children: /* @__PURE__ */ jsx22("pre", { className: "font-mono text-[12px] text-amber-950/70 whitespace-pre-wrap break-all w-full max-w-full max-h-64 overflow-y-auto overflow-x-hidden min-w-0 custom-scrollbar-amber leading-relaxed", children: output }) })
+    expanded && output && /* @__PURE__ */ jsx23(ToolCardContent, { children: /* @__PURE__ */ jsx23("pre", { className: "font-mono text-[12px] text-amber-950/70 whitespace-pre-wrap break-all w-full max-w-full max-h-64 overflow-y-auto overflow-x-hidden min-w-0 custom-scrollbar-amber leading-relaxed", children: output }) })
   ] });
 }
-function GenericToolCard({ card }) {
+function GenericToolCard({
+  card,
+  onToolAction
+}) {
   const input = card.input?.trim() ?? "";
   const output = card.output?.trim() ?? "";
   const isRunning = card.statusTone === "running";
@@ -3283,8 +3521,8 @@ function GenericToolCard({ card }) {
     isRunning,
     statusTone: card.statusTone
   });
-  return /* @__PURE__ */ jsxs14(ToolCardRoot, { children: [
-    /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsxs15(ToolCardRoot, { children: [
+    /* @__PURE__ */ jsx23(
       ToolCardHeader,
       {
         card,
@@ -3294,23 +3532,32 @@ function GenericToolCard({ card }) {
         onToggle
       }
     ),
-    expanded && hasContent && /* @__PURE__ */ jsxs14(ToolCardContent, { className: "bg-transparent px-2.5 py-2.5", children: [
-      hasInputSection && /* @__PURE__ */ jsx22(GenericToolSection, { label: inputLabel, tone: "input", children: input }),
-      hasInputSection && hasOutputSection && /* @__PURE__ */ jsx22("div", { className: "h-2" }),
-      hasOutputSection && /* @__PURE__ */ jsx22(
+    expanded && hasContent && /* @__PURE__ */ jsxs15(ToolCardContent, { className: "bg-transparent px-2.5 py-2.5", children: [
+      hasInputSection && /* @__PURE__ */ jsx23(GenericToolSection, { label: inputLabel, tone: "input", children: input }),
+      hasInputSection && hasOutputSection && /* @__PURE__ */ jsx23("div", { className: "h-2" }),
+      hasOutputSection && /* @__PURE__ */ jsx23(
         GenericToolSection,
         {
           label: outputLabel,
           tone: card.statusTone === "error" ? "error" : "output",
           children: output
         }
-      )
+      ),
+      card.action && onToolAction ? /* @__PURE__ */ jsx23("div", { className: "pt-2", children: /* @__PURE__ */ jsx23(
+        "button",
+        {
+          type: "button",
+          onClick: () => onToolAction(card.action),
+          className: "rounded-md border border-amber-300/70 bg-white/80 px-3 py-1.5 text-[11px] font-semibold text-amber-900 transition-colors hover:bg-amber-100/70",
+          children: card.action.sessionKind === "child" ? "Open child session" : "Open session"
+        }
+      ) }) : null
     ] })
   ] });
 }
 
 // src/components/chat/ui/chat-message-list/chat-tool-card.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 function isTerminalTool(name) {
   const lowered = name.toLowerCase();
   return lowered === "exec" || lowered === "exec_command" || lowered === "execute_command" || lowered === "command_execution" || lowered === "bash" || lowered === "shell" || lowered.includes("run_");
@@ -3323,50 +3570,53 @@ function isSearchTool(name) {
   const lowered = name.toLowerCase();
   return lowered === "grep_search" || lowered === "find_files" || lowered.includes("search");
 }
-function ChatToolCard({ card }) {
+function ChatToolCard({
+  card,
+  onToolAction
+}) {
   if (isTerminalTool(card.toolName)) {
-    return /* @__PURE__ */ jsx23(TerminalExecutionView, { card });
+    return /* @__PURE__ */ jsx24(TerminalExecutionView, { card });
   }
   if (isFileEditTool(card.toolName)) {
-    return /* @__PURE__ */ jsx23(FileOperationView, { card });
+    return /* @__PURE__ */ jsx24(FileOperationView, { card });
   }
   if (isSearchTool(card.toolName)) {
-    return /* @__PURE__ */ jsx23(SearchSnippetView, { card });
+    return /* @__PURE__ */ jsx24(SearchSnippetView, { card });
   }
-  return /* @__PURE__ */ jsx23(GenericToolCard, { card });
+  return /* @__PURE__ */ jsx24(GenericToolCard, { card, onToolAction });
 }
 
 // src/components/chat/ui/chat-message-list/chat-unknown-part.tsx
-import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
 function ChatUnknownPart(props) {
-  return /* @__PURE__ */ jsxs15("div", { className: "rounded-lg border border-gray-200 bg-gray-50 px-2.5 py-2 text-xs text-gray-600", children: [
-    /* @__PURE__ */ jsxs15("div", { className: "font-semibold text-gray-700", children: [
+  return /* @__PURE__ */ jsxs16("div", { className: "rounded-lg border border-gray-200 bg-gray-50 px-2.5 py-2 text-xs text-gray-600", children: [
+    /* @__PURE__ */ jsxs16("div", { className: "font-semibold text-gray-700", children: [
       props.label,
       ": ",
       props.rawType
     ] }),
-    props.text ? /* @__PURE__ */ jsx24("pre", { className: "mt-1 whitespace-pre-wrap break-words text-[11px] text-gray-500", children: props.text }) : null
+    props.text ? /* @__PURE__ */ jsx25("pre", { className: "mt-1 whitespace-pre-wrap break-words text-[11px] text-gray-500", children: props.text }) : null
   ] });
 }
 
 // src/components/chat/ui/chat-message-list/chat-message.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var ChatMessage = memo(function ChatMessage2(props) {
-  const { message, texts } = props;
+  const { message, texts, onToolAction } = props;
   const { role } = message;
   const isUser = role === "user";
   const isMessageInProgress = message.status === "pending" || message.status === "streaming";
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     "div",
     {
       className: cn(
         "inline-block w-fit max-w-full rounded-2xl border px-4 shadow-sm",
         isUser ? "border-primary bg-primary py-3 text-white" : role === "assistant" ? "border-gray-200 bg-white pb-3 pt-4 text-gray-900" : "border-orange-200/80 bg-orange-50/70 py-3 text-gray-900"
       ),
-      children: /* @__PURE__ */ jsx25("div", { className: "space-y-2", children: message.parts.map((part, index) => {
+      children: /* @__PURE__ */ jsx26("div", { className: "space-y-2", children: message.parts.map((part, index) => {
         const { type } = part;
         if (type === "markdown") {
-          return /* @__PURE__ */ jsx25(
+          return /* @__PURE__ */ jsx26(
             ChatMessageMarkdown,
             {
               text: part.text,
@@ -3377,7 +3627,7 @@ var ChatMessage = memo(function ChatMessage2(props) {
           );
         }
         if (type === "inline-content") {
-          return /* @__PURE__ */ jsx25(
+          return /* @__PURE__ */ jsx26(
             ChatMessageInlineContent,
             {
               segments: part.segments,
@@ -3388,7 +3638,7 @@ var ChatMessage = memo(function ChatMessage2(props) {
           );
         }
         if (type === "reasoning") {
-          return /* @__PURE__ */ jsx25(
+          return /* @__PURE__ */ jsx26(
             ChatReasoningBlock,
             {
               label: part.label,
@@ -3400,10 +3650,10 @@ var ChatMessage = memo(function ChatMessage2(props) {
           );
         }
         if (type === "tool-card") {
-          return /* @__PURE__ */ jsx25("div", { className: "mt-0.5", children: /* @__PURE__ */ jsx25(ChatToolCard, { card: part.card }) }, `tool-${index}`);
+          return /* @__PURE__ */ jsx26("div", { className: "mt-0.5", children: /* @__PURE__ */ jsx26(ChatToolCard, { card: part.card, onToolAction }) }, `tool-${index}`);
         }
         if (type === "file") {
-          return /* @__PURE__ */ jsx25(
+          return /* @__PURE__ */ jsx26(
             ChatMessageFile,
             {
               file: part.file,
@@ -3413,7 +3663,7 @@ var ChatMessage = memo(function ChatMessage2(props) {
           );
         }
         if (type === "unknown") {
-          return /* @__PURE__ */ jsx25(
+          return /* @__PURE__ */ jsx26(
             ChatUnknownPart,
             {
               label: part.label,
@@ -3430,9 +3680,9 @@ var ChatMessage = memo(function ChatMessage2(props) {
 });
 
 // src/components/chat/ui/chat-message-list/chat-message-meta.tsx
-import { jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsxs as jsxs17 } from "react/jsx-runtime";
 function ChatMessageMeta(props) {
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17(
     "div",
     {
       className: cn(
@@ -3451,7 +3701,7 @@ function ChatMessageMeta(props) {
 // src/components/chat/ui/chat-message-list/chat-message-action-copy.tsx
 import { useMemo as useMemo6 } from "react";
 import { Check as Check5, Copy as Copy2 } from "lucide-react";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 function ChatMessageActionCopy({
   message,
   texts
@@ -3465,7 +3715,7 @@ function ChatMessageActionCopy({
   }, [message.parts]);
   const { copied, copy } = useCopyFeedback({ text: messageText });
   if (!messageText) return null;
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(
     "button",
     {
       type: "button",
@@ -3473,13 +3723,13 @@ function ChatMessageActionCopy({
       className: "text-gray-400 hover:text-gray-600 transition-colors p-1 rounded-md hover:bg-gray-100 flex items-center justify-center",
       "aria-label": copied ? texts.copiedMessageLabel : texts.copyMessageLabel,
       title: copied ? texts.copiedMessageLabel : texts.copyMessageLabel,
-      children: copied ? /* @__PURE__ */ jsx26(Check5, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx26(Copy2, { className: "h-3.5 w-3.5" })
+      children: copied ? /* @__PURE__ */ jsx27(Check5, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx27(Copy2, { className: "h-3.5 w-3.5" })
     }
   );
 }
 
 // src/components/chat/ui/chat-message-list/chat-message-list.tsx
-import { Fragment as Fragment6, jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
 var INVISIBLE_ONLY_TEXT_PATTERN = /\u200B|\u200C|\u200D|\u2060|\uFEFF/g;
 function hasRenderableText(value) {
   const trimmed = value.trim();
@@ -3497,10 +3747,10 @@ function hasRenderableMessageContent(message) {
   });
 }
 function ChatMessageTypingFooter() {
-  return /* @__PURE__ */ jsx27("div", { className: "flex items-center gap-2 px-1 py-0.5 text-[11px] text-gray-400", children: /* @__PURE__ */ jsxs17("div", { className: "flex space-x-1 items-center h-full", children: [
-    /* @__PURE__ */ jsx27("div", { className: "h-1.5 w-1.5 rounded-full bg-gray-400 animate-pulse" }),
-    /* @__PURE__ */ jsx27("div", { className: "h-1.5 w-1.5 rounded-full bg-gray-400 animate-pulse [animation-delay:200ms]" }),
-    /* @__PURE__ */ jsx27("div", { className: "h-1.5 w-1.5 rounded-full bg-gray-400 animate-pulse [animation-delay:400ms]" })
+  return /* @__PURE__ */ jsx28("div", { className: "flex items-center gap-2 px-1 py-0.5 text-[11px] text-gray-400", children: /* @__PURE__ */ jsxs18("div", { className: "flex space-x-1 items-center h-full", children: [
+    /* @__PURE__ */ jsx28("div", { className: "h-1.5 w-1.5 rounded-full bg-gray-400 animate-pulse" }),
+    /* @__PURE__ */ jsx28("div", { className: "h-1.5 w-1.5 rounded-full bg-gray-400 animate-pulse [animation-delay:200ms]" }),
+    /* @__PURE__ */ jsx28("div", { className: "h-1.5 w-1.5 rounded-full bg-gray-400 animate-pulse [animation-delay:400ms]" })
   ] }) });
 }
 function ChatMessageList(props) {
@@ -3508,118 +3758,35 @@ function ChatMessageList(props) {
   const hasRenderableAssistantDraft = visibleMessages.some(
     (message) => message.role === "assistant" && (message.status === "streaming" || message.status === "pending")
   );
-  return /* @__PURE__ */ jsxs17("div", { className: cn("space-y-5", props.className), children: [
+  return /* @__PURE__ */ jsxs18("div", { className: cn("space-y-5", props.className), children: [
     visibleMessages.map((message) => {
       const isUser = message.role === "user";
       const isGenerating = !isUser && (message.status === "streaming" || message.status === "pending");
-      return /* @__PURE__ */ jsxs17("div", { className: cn("flex gap-3", isUser ? "justify-end" : "justify-start"), children: [
-        !isUser ? /* @__PURE__ */ jsx27(ChatMessageAvatar, { role: message.role }) : null,
-        /* @__PURE__ */ jsxs17("div", { className: cn("w-fit max-w-[92%] space-y-2", isUser && "flex flex-col items-end"), children: [
-          /* @__PURE__ */ jsx27(ChatMessage, { message, texts: props.texts }),
-          /* @__PURE__ */ jsx27("div", { className: cn("flex items-center gap-2", isUser && "justify-end"), children: isGenerating ? /* @__PURE__ */ jsx27(ChatMessageTypingFooter, {}) : /* @__PURE__ */ jsxs17(Fragment6, { children: [
-            /* @__PURE__ */ jsx27(ChatMessageMeta, { roleLabel: message.roleLabel, timestampLabel: message.timestampLabel, isUser }),
-            !isUser ? /* @__PURE__ */ jsx27(ChatMessageActionCopy, { message, texts: props.texts }) : null
+      return /* @__PURE__ */ jsxs18("div", { className: cn("flex gap-3", isUser ? "justify-end" : "justify-start"), children: [
+        !isUser ? /* @__PURE__ */ jsx28(ChatMessageAvatar, { role: message.role }) : null,
+        /* @__PURE__ */ jsxs18("div", { className: cn("w-fit max-w-[92%] space-y-2", isUser && "flex flex-col items-end"), children: [
+          /* @__PURE__ */ jsx28(
+            ChatMessage,
+            {
+              message,
+              texts: props.texts,
+              onToolAction: props.onToolAction
+            }
+          ),
+          /* @__PURE__ */ jsx28("div", { className: cn("flex items-center gap-2", isUser && "justify-end"), children: isGenerating ? /* @__PURE__ */ jsx28(ChatMessageTypingFooter, {}) : /* @__PURE__ */ jsxs18(Fragment6, { children: [
+            /* @__PURE__ */ jsx28(ChatMessageMeta, { roleLabel: message.roleLabel, timestampLabel: message.timestampLabel, isUser }),
+            !isUser ? /* @__PURE__ */ jsx28(ChatMessageActionCopy, { message, texts: props.texts }) : null
           ] }) })
         ] }),
-        isUser ? /* @__PURE__ */ jsx27(ChatMessageAvatar, { role: message.role }) : null
+        isUser ? /* @__PURE__ */ jsx28(ChatMessageAvatar, { role: message.role }) : null
       ] }, message.id);
     }),
-    props.isSending && !hasRenderableAssistantDraft ? /* @__PURE__ */ jsxs17("div", { className: "flex justify-start gap-3", children: [
-      /* @__PURE__ */ jsx27(ChatMessageAvatar, { role: "assistant" }),
-      /* @__PURE__ */ jsx27("div", { className: "rounded-2xl border border-gray-200 bg-white px-4 py-3 text-sm text-gray-500 shadow-sm", children: props.texts.typingLabel })
+    props.isSending && !hasRenderableAssistantDraft ? /* @__PURE__ */ jsxs18("div", { className: "flex justify-start gap-3", children: [
+      /* @__PURE__ */ jsx28(ChatMessageAvatar, { role: "assistant" }),
+      /* @__PURE__ */ jsx28("div", { className: "rounded-2xl border border-gray-200 bg-white px-4 py-3 text-sm text-gray-500 shadow-sm", children: props.texts.typingLabel })
     ] }) : null
   ] });
 }
-
-// src/components/chat/hooks/use-sticky-bottom-scroll.ts
-import { useEffect as useEffect8, useLayoutEffect as useLayoutEffect2, useRef as useRef7 } from "react";
-var DEFAULT_STICKY_THRESHOLD_PX = 10;
-function scrollElementToBottom(element) {
-  element.scrollTop = element.scrollHeight;
-}
-function queueScrollToBottom(params) {
-  const element = params.scrollRef.current;
-  if (!element) {
-    return;
-  }
-  if (params.scheduledScrollFrameRef.current !== null) {
-    cancelAnimationFrame(params.scheduledScrollFrameRef.current);
-  }
-  params.scheduledScrollFrameRef.current = requestAnimationFrame(() => {
-    params.scheduledScrollFrameRef.current = null;
-    const currentElement = params.scrollRef.current;
-    if (!currentElement) {
-      return;
-    }
-    params.isProgrammaticScrollRef.current = true;
-    scrollElementToBottom(currentElement);
-  });
-}
-function useStickyBottomScroll(params) {
-  const isStickyRef = useRef7(true);
-  const isProgrammaticScrollRef = useRef7(false);
-  const previousResetKeyRef = useRef7(null);
-  const pendingInitialScrollRef = useRef7(false);
-  const scheduledScrollFrameRef = useRef7(null);
-  const onScroll = () => {
-    if (isProgrammaticScrollRef.current) {
-      isProgrammaticScrollRef.current = false;
-      return;
-    }
-    const element = params.scrollRef.current;
-    if (!element) {
-      return;
-    }
-    const distanceFromBottom = element.scrollHeight - element.scrollTop - element.clientHeight;
-    isStickyRef.current = distanceFromBottom <= (params.stickyThresholdPx ?? DEFAULT_STICKY_THRESHOLD_PX);
-  };
-  useEffect8(() => {
-    if (previousResetKeyRef.current === params.resetKey) {
-      return;
-    }
-    previousResetKeyRef.current = params.resetKey;
-    isStickyRef.current = true;
-    pendingInitialScrollRef.current = true;
-  }, [params.resetKey]);
-  useEffect8(() => {
-    const scheduledScrollFrame = scheduledScrollFrameRef.current;
-    return () => {
-      if (scheduledScrollFrame !== null) {
-        cancelAnimationFrame(scheduledScrollFrame);
-      }
-    };
-  }, []);
-  useLayoutEffect2(() => {
-    if (!pendingInitialScrollRef.current || params.isLoading || !params.hasContent) {
-      return;
-    }
-    const element = params.scrollRef.current;
-    if (!element) {
-      return;
-    }
-    pendingInitialScrollRef.current = false;
-    queueScrollToBottom({
-      scrollRef: params.scrollRef,
-      scheduledScrollFrameRef,
-      isProgrammaticScrollRef
-    });
-  }, [params.hasContent, params.isLoading, params.scrollRef]);
-  useLayoutEffect2(() => {
-    if (!isStickyRef.current || !params.hasContent) {
-      return;
-    }
-    const element = params.scrollRef.current;
-    if (!element) {
-      return;
-    }
-    queueScrollToBottom({
-      scrollRef: params.scrollRef,
-      scheduledScrollFrameRef,
-      isProgrammaticScrollRef
-    });
-  }, [params.contentVersion, params.hasContent, params.scrollRef]);
-  return { onScroll };
-}
 export {
   ChatInputBar,
   ChatMessageList,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextclaw/agent-chat-ui",
-  "version": "0.2.19",
+  "version": "0.2.21",
   "private": false,
   "description": "Reusable Nextclaw agent chat UI primitives and default skin.",
   "type": "module",