@nextclaw/agent-chat-ui 0.2.18 → 0.2.20

package/dist/index.d.ts

@@ -151,17 +151,38 @@ type ChatInputBarProps = {
     toolbar: ChatInputBarToolbarProps;
 };
 type ChatMessageRole = "user" | "assistant" | "tool" | "system" | "message";
+type ChatFileOperationLineViewModel = {
+    kind: "context" | "add" | "remove";
+    text: string;
+    oldLineNumber?: number;
+    newLineNumber?: number;
+};
+type ChatFileOperationBlockViewModel = {
+    key: string;
+    path: string;
+    display?: "preview" | "diff";
+    caption?: string;
+    lines: ChatFileOperationLineViewModel[];
+    rawText?: string;
+    truncated?: boolean;
+};
 type ChatToolPartViewModel = {
     kind: "call" | "result";
     toolName: string;
     summary?: string;
+    inputLabel?: string;
+    input?: string;
     output?: string;
+    outputData?: unknown;
     hasResult: boolean;
     statusTone: "running" | "success" | "error" | "cancelled";
     statusLabel: string;
     titleLabel: string;
     outputLabel: string;
     emptyLabel: string;
+    fileOperation?: {
+        blocks: ChatFileOperationBlockViewModel[];
+    };
 };
 type ChatInlineTokenViewModel = {
     kind: string;
@@ -299,4 +320,4 @@ declare function resolveChatComposerSlashTrigger(nodes: ChatComposerNode[], sele
     end: number;
 } | null;
 
-export { type ChatComposerNode, type ChatComposerSelection, type ChatComposerTextNode, type ChatComposerTokenKind, type ChatComposerTokenNode, 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 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

@@ -2314,8 +2314,8 @@ function ChatInlineTokenBadge({
     "span",
     {
       className: cn(
-        "mx-[2px] inline-flex h-7 max-w-full items-center gap-1.5 rounded-lg border px-2 align-baseline text-[11px] font-medium",
-        isSkill ? isUser ? "border-white/25 bg-white/16 text-white" : "border-primary/12 bg-primary/8 text-primary" : isUser ? "border-white/20 bg-white/12 text-white" : "border-slate-200/80 bg-slate-50 text-slate-700"
+        "mx-[2px] inline-flex h-7 max-w-full items-center gap-1.5 rounded-xl border px-2.5 align-baseline text-[11px] font-medium shadow-[0_0_0_1px_rgba(15,23,42,0.03)]",
+        isSkill ? isUser ? "border-emerald-200/35 bg-emerald-400/18 text-emerald-50/95" : "border-emerald-200/70 bg-emerald-50 text-emerald-700" : isUser ? "border-white/30 bg-white/18 text-white" : "border-slate-200/80 bg-slate-100 text-slate-700"
       ),
       title: label,
       children: [
@@ -2324,7 +2324,7 @@ function ChatInlineTokenBadge({
           {
             className: cn(
               "inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center",
-              isSkill ? isUser ? "text-white/75" : "text-primary/70" : isUser ? "text-white/70" : "text-slate-500"
+              isSkill ? isUser ? "text-emerald-100/90" : "text-emerald-600" : isUser ? "text-white/70" : "text-slate-500"
             ),
             children: /* @__PURE__ */ jsx15(ChatInlineSkillIcon, {})
           }
@@ -2752,7 +2752,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";
@@ -2801,9 +2801,10 @@ function ToolCardHeader({
   icon: Icon2,
   expanded,
   canExpand,
+  hideSummary = false,
   onToggle
 }) {
-  const summaryPart = card.summary?.replace(/^(command|path|args|query|input):\s*/i, "");
+  const summaryPart = hideSummary ? "" : card.summary?.replace(/^(command|path|args|query|input):\s*/i, "") ?? "";
   return /* @__PURE__ */ jsxs12(
     "div",
     {
@@ -2832,56 +2833,607 @@ function ToolCardHeader({
   );
 }
 
-// src/components/chat/ui/chat-message-list/tool-card/tool-card-views.tsx
-import { Fragment as Fragment4, jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
-function TerminalExecutionView({ card }) {
+// 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, 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";
+  }
+  if (/^-\d+$/.test(part)) {
+    return "text-rose-700";
+  }
+  return "text-stone-500";
+}
+function renderCaption(caption) {
+  const parts = caption.split("\xB7").map((part) => part.trim()).filter((part) => /^\+\d+$/.test(part) || /^-\d+$/.test(part));
+  if (parts.length === 0) {
+    return null;
+  }
+  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 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(
+        "overflow-y-auto overscroll-contain bg-white custom-scrollbar-amber",
+        className
+      ),
+      children
+    }
+  );
+}
+function FileOperationBlock({
+  block,
+  showPathRow,
+  isFirst
+}) {
+  const { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } = ChatUiPrimitives;
+  const previewBlock = isPreviewBlock(block);
+  const showMetaRow = showPathRow || Boolean(block.caption);
+  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,
+  className
+}) {
+  const blocks = card.fileOperation?.blocks ?? [];
   const output = card.output?.trim() ?? "";
-  const isRunning = card.statusTone === "running";
-  const hasContent = !!(card.summary?.trim() || output.length > 0);
-  const wasEmptyRef = useRef6(!hasContent);
-  const [expanded, setExpanded] = useState7(hasContent && (isRunning || card.statusTone === "error"));
+  if (blocks.length === 0 && !output) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs14("div", { className: cn("overflow-hidden bg-white", className), children: [
+    blocks.map((block, index) => {
+      return /* @__PURE__ */ jsx22(
+        FileOperationBlock,
+        {
+          block,
+          showPathRow: true,
+          isFirst: index === 0
+        },
+        block.key
+      );
+    }),
+    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 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");
+function readNonEmptyString(value) {
+  if (typeof value !== "string") {
+    return null;
+  }
+  return value.length > 0 ? value : null;
+}
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function stripAnsi(value) {
+  return value.replace(ANSI_ESCAPE_PATTERN, "");
+}
+function isStructuredTerminalRecord(record) {
+  return "command" in record || "workingDir" in record || "exitCode" in record || "durationMs" in record || "stdout" in record || "stderr" in record || "aggregated_output" in record || "combinedOutput" in record;
+}
+function extractTerminalOutputFromRecord(record) {
+  const aggregatedOutput = readNonEmptyString(record.aggregated_output) ?? readNonEmptyString(record.combinedOutput) ?? readNonEmptyString(record.output);
+  if (aggregatedOutput) {
+    return aggregatedOutput;
+  }
+  const stdout = readNonEmptyString(record.stdout);
+  const stderr = readNonEmptyString(record.stderr);
+  if (!stdout && !stderr) {
+    return null;
+  }
+  return [stdout, stderr].filter((value) => Boolean(value)).join("\n");
+}
+function normalizeTerminalOutput(rawOutput, structuredOutput) {
+  if (isRecord(structuredOutput)) {
+    const terminalOutput = extractTerminalOutputFromRecord(structuredOutput);
+    if (terminalOutput) {
+      return stripAnsi(terminalOutput);
+    }
+    if (isStructuredTerminalRecord(structuredOutput)) {
+      return "";
+    }
+  }
+  if (!rawOutput) {
+    return "";
+  }
+  const trimmed = rawOutput.trim();
+  if (!trimmed.startsWith("{")) {
+    return stripAnsi(rawOutput);
+  }
+  try {
+    const parsed = JSON.parse(trimmed);
+    if (!isRecord(parsed)) {
+      return stripAnsi(rawOutput);
+    }
+    const terminalOutput = extractTerminalOutputFromRecord(parsed);
+    if (terminalOutput) {
+      return stripAnsi(terminalOutput);
+    }
+    if (isStructuredTerminalRecord(parsed)) {
+      return "";
+    }
+    return stripAnsi(rawOutput);
+  } catch {
+    return stripAnsi(rawOutput);
+  }
+}
+function useToolCardExpandedState({
+  canExpand,
+  isRunning,
+  autoExpandWhileRunning = true,
+  expandOnError = false,
+  statusTone
+}) {
+  const [expanded, setExpanded] = useState7(false);
   const [hasUserToggled, setHasUserToggled] = useState7(false);
-  const prevRunningRef = useRef6(isRunning);
-  useEffect7(() => {
-    if (wasEmptyRef.current && hasContent && isRunning) {
+  const expandTimerRef = useRef8(null);
+  const prevRunningRef = useRef8(isRunning);
+  const isFirstRenderRef = useRef8(true);
+  useEffect8(() => {
+    return () => {
+      if (expandTimerRef.current !== null) {
+        window.clearTimeout(expandTimerRef.current);
+      }
+    };
+  }, []);
+  useEffect8(() => {
+    if (expandOnError && statusTone === "error" && canExpand && !hasUserToggled) {
+      if (expandTimerRef.current !== null) {
+        window.clearTimeout(expandTimerRef.current);
+        expandTimerRef.current = null;
+      }
       setExpanded(true);
-      wasEmptyRef.current = false;
+      prevRunningRef.current = isRunning;
+      isFirstRenderRef.current = false;
+      return;
     }
-  }, [hasContent, isRunning]);
-  useEffect7(() => {
-    if (prevRunningRef.current && !isRunning && !hasUserToggled) {
-      setExpanded(false);
+    if (autoExpandWhileRunning && isRunning && canExpand && !hasUserToggled && !expanded && (isFirstRenderRef.current || !prevRunningRef.current)) {
+      expandTimerRef.current = window.setTimeout(() => {
+        setExpanded(true);
+        expandTimerRef.current = null;
+      }, TOOL_CARD_AUTO_EXPAND_DELAY_MS);
+    }
+    if (!isRunning) {
+      if (expandTimerRef.current !== null) {
+        window.clearTimeout(expandTimerRef.current);
+        expandTimerRef.current = null;
+      }
+      if (prevRunningRef.current && !hasUserToggled) {
+        setExpanded(false);
+      }
     }
     prevRunningRef.current = isRunning;
-  }, [isRunning, hasUserToggled]);
+    isFirstRenderRef.current = false;
+  }, [autoExpandWhileRunning, canExpand, expandOnError, expanded, hasUserToggled, isRunning, statusTone]);
   const onToggle = () => {
-    if (!output && !isRunning) return;
-    setExpanded(!expanded);
+    if (!canExpand) {
+      return;
+    }
+    if (expandTimerRef.current !== null) {
+      window.clearTimeout(expandTimerRef.current);
+      expandTimerRef.current = null;
+    }
+    setExpanded((current) => !current);
     setHasUserToggled(true);
   };
+  return { expanded, onToggle };
+}
+function GenericToolSection({
+  label,
+  tone,
+  children
+}) {
+  const tones = {
+    input: {
+      shell: "border-stone-200/80 bg-stone-50/90",
+      header: "border-stone-200/80 bg-stone-100/85 text-stone-500",
+      dot: "bg-stone-400/80",
+      body: "text-stone-700"
+    },
+    output: {
+      shell: "border-amber-200/70 bg-white/90",
+      header: "border-amber-200/70 bg-amber-50/90 text-amber-700",
+      dot: "bg-amber-500/80",
+      body: "text-amber-950/80"
+    },
+    error: {
+      shell: "border-rose-200/80 bg-rose-50/85",
+      header: "border-rose-200/80 bg-rose-100/80 text-rose-700",
+      dot: "bg-rose-500/80",
+      body: "text-rose-950/85"
+    }
+  };
+  const style = tones[tone];
+  return /* @__PURE__ */ jsxs15(
+    "section",
+    {
+      className: cn(
+        "overflow-hidden rounded-md border shadow-[inset_0_1px_0_rgba(255,255,255,0.45)]",
+        style.shell
+      ),
+      children: [
+        /* @__PURE__ */ jsxs15(
+          "div",
+          {
+            className: cn(
+              "flex items-center gap-2 border-b px-3 py-2 text-[10px] font-semibold uppercase tracking-[0.16em]",
+              style.header
+            ),
+            children: [
+              /* @__PURE__ */ jsx23("span", { className: cn("h-1.5 w-1.5 rounded-full", style.dot) }),
+              /* @__PURE__ */ jsx23("span", { children: label })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx23("div", { className: "w-full overflow-hidden", children: /* @__PURE__ */ jsx23(
+          "pre",
+          {
+            className: cn(
+              "w-full max-w-full min-w-0 max-h-64 overflow-x-auto overflow-y-auto px-3 py-2.5 font-mono text-[12px] leading-relaxed whitespace-pre custom-scrollbar-amber",
+              style.body
+            ),
+            children
+          }
+        ) })
+      ]
+    }
+  );
+}
+function TerminalExecutionView({ card }) {
+  const output = normalizeTerminalOutput(card.output, card.outputData);
+  const isRunning = card.statusTone === "running";
+  const hasContent = !!(card.summary?.trim() || output.trim().length > 0);
+  const { expanded, onToggle } = useToolCardExpandedState({
+    canExpand: output.trim().length > 0 || isRunning,
+    isRunning,
+    expandOnError: hasContent,
+    statusTone: card.statusTone
+  });
   const commandPart = card.summary?.replace(/^(command|path|args|query|input):\s*/i, "");
-  return /* @__PURE__ */ jsxs13(ToolCardRoot, { children: [
-    /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsxs15(ToolCardRoot, { children: [
+    /* @__PURE__ */ jsx23(
       ToolCardHeader,
       {
         card,
         icon: Terminal,
         expanded,
-        canExpand: !!output || isRunning,
+        canExpand: output.trim().length > 0 || isRunning,
         onToggle
       }
     ),
-    expanded && /* @__PURE__ */ jsxs13(Fragment4, { children: [
-      /* @__PURE__ */ jsx21("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__ */ jsxs13("div", { className: "flex items-start gap-2 leading-relaxed", children: [
-        /* @__PURE__ */ jsx21("span", { className: "text-amber-500/50 font-medium shrink-0 select-none mt-[1px]", children: "$" }),
-        /* @__PURE__ */ jsx21("div", { className: "flex-1 min-w-0", children: commandPart ? /* @__PURE__ */ jsxs13("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__ */ jsx21("span", { className: "inline-block w-1.5 h-3 ml-1 bg-amber-500/60 animate-pulse align-middle" })
-        ] }) : /* @__PURE__ */ jsx21("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__ */ jsx21(ToolCardContent, { children: /* @__PURE__ */ jsxs13("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__ */ jsx21("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" })
       ] }) })
     ] })
   ] });
@@ -2889,75 +3441,50 @@ function TerminalExecutionView({ card }) {
 function FileOperationView({ card }) {
   const output = card.output?.trim() ?? "";
   const isRunning = card.statusTone === "running";
-  const [expanded, setExpanded] = useState7(false);
-  const [hasUserToggled, setHasUserToggled] = useState7(false);
-  const prevRunningRef = useRef6(isRunning);
-  useEffect7(() => {
-    if (prevRunningRef.current && !isRunning && !hasUserToggled) {
-      setExpanded(false);
-    }
-    prevRunningRef.current = isRunning;
-  }, [isRunning, hasUserToggled]);
-  const onToggle = () => {
-    if (!output && !isRunning) return;
-    setExpanded(!expanded);
-    setHasUserToggled(true);
-  };
-  const isEdit = card.toolName === "edit_file" || card.toolName === "write_file";
-  const renderLine = (line, idx) => {
-    if (isEdit) {
-      if (line.startsWith("+") && !line.startsWith("+++")) {
-        return /* @__PURE__ */ jsxs13("div", { className: "bg-emerald-500/10 text-emerald-700 px-2 py-0.5 w-full break-all whitespace-pre-wrap", children: [
-          /* @__PURE__ */ jsx21("span", { className: "select-none opacity-40 mr-2 w-3 inline-block shrink-0", children: "+" }),
-          /* @__PURE__ */ jsx21("span", { children: line.slice(1) })
-        ] }, idx);
-      }
-      if (line.startsWith("-") && !line.startsWith("---")) {
-        return /* @__PURE__ */ jsxs13("div", { className: "bg-rose-500/10 text-rose-700 px-2 py-0.5 w-full break-all whitespace-pre-wrap", children: [
-          /* @__PURE__ */ jsx21("span", { className: "select-none opacity-40 mr-2 w-3 inline-block shrink-0", children: "-" }),
-          /* @__PURE__ */ jsx21("span", { className: "line-through decoration-rose-400/50", children: line.slice(1) })
-        ] }, idx);
-      }
-    }
-    return /* @__PURE__ */ jsx21("div", { className: "py-0.5 text-amber-950/80 w-full break-all whitespace-pre-wrap", children: /* @__PURE__ */ jsx21("span", { children: line }) }, idx);
-  };
-  const lines = output.split("\n");
-  const maxLines = 15;
-  const isLong = lines.length > maxLines;
-  const displayLines = !expanded && isLong ? lines.slice(0, maxLines) : lines;
-  return /* @__PURE__ */ jsxs13(ToolCardRoot, { children: [
-    /* @__PURE__ */ jsx21(
+  const hasStructuredPreview = Boolean(card.fileOperation?.blocks.length);
+  const hasContent = hasStructuredPreview || Boolean(output);
+  const previewBlocks = card.fileOperation?.blocks ?? [];
+  const previewLineCount = previewBlocks.reduce((count, block) => count + block.lines.length, 0);
+  const previewCharCount = previewBlocks.reduce((count, block) => {
+    if (block.rawText) {
+      return count + block.rawText.length;
+    }
+    return count + block.lines.reduce((lineCount, line) => lineCount + line.text.length + 1, 0);
+  }, 0);
+  const shouldAutoExpandWhileRunning = !(isRunning && card.toolName === "write_file" && (previewLineCount > 24 || previewCharCount > 1200));
+  const { expanded, onToggle } = useToolCardExpandedState({
+    canExpand: hasContent || isRunning,
+    isRunning,
+    autoExpandWhileRunning: shouldAutoExpandWhileRunning,
+    expandOnError: hasContent,
+    statusTone: card.statusTone
+  });
+  const isEdit = card.toolName === "edit_file" || card.toolName === "write_file" || card.toolName === "apply_patch" || card.toolName === "file_change";
+  return /* @__PURE__ */ jsxs15(ToolCardRoot, { children: [
+    /* @__PURE__ */ jsx23(
       ToolCardHeader,
       {
         card,
         icon: isEdit ? Code2 : FileText,
         expanded,
-        canExpand: !!output || isRunning,
+        canExpand: hasContent || isRunning,
+        hideSummary: expanded && hasStructuredPreview,
         onToggle
       }
     ),
-    expanded && output && /* @__PURE__ */ jsx21(ToolCardContent, { children: /* @__PURE__ */ jsx21("div", { className: "font-mono text-[12px] leading-relaxed max-h-48 overflow-y-auto overflow-x-hidden min-w-0 custom-scrollbar-amber text-amber-950/80 w-full", children: displayLines.map(renderLine) }) })
+    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 }) {
   const isRunning = card.statusTone === "running";
-  const [expanded, setExpanded] = useState7(isRunning);
-  const [hasUserToggled, setHasUserToggled] = useState7(false);
-  const prevRunningRef = useRef6(isRunning);
   const output = card.output?.trim() ?? "";
-  useEffect7(() => {
-    if (prevRunningRef.current && !isRunning && !hasUserToggled) {
-      setExpanded(false);
-    }
-    prevRunningRef.current = isRunning;
-  }, [isRunning, hasUserToggled]);
-  const onToggle = () => {
-    if (!output && !isRunning) return;
-    setExpanded(!expanded);
-    setHasUserToggled(true);
-  };
-  return /* @__PURE__ */ jsxs13(ToolCardRoot, { children: [
-    /* @__PURE__ */ jsx21(
+  const { expanded, onToggle } = useToolCardExpandedState({
+    canExpand: !!output || isRunning,
+    isRunning,
+    statusTone: card.statusTone
+  });
+  return /* @__PURE__ */ jsxs15(ToolCardRoot, { children: [
+    /* @__PURE__ */ jsx23(
       ToolCardHeader,
       {
         card,
@@ -2967,51 +3494,58 @@ function SearchSnippetView({ card }) {
         onToggle
       }
     ),
-    expanded && output && /* @__PURE__ */ jsx21(ToolCardContent, { children: /* @__PURE__ */ jsx21("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 }) {
+  const input = card.input?.trim() ?? "";
   const output = card.output?.trim() ?? "";
   const isRunning = card.statusTone === "running";
-  const [expanded, setExpanded] = useState7(isRunning);
-  const [hasUserToggled, setHasUserToggled] = useState7(false);
-  const prevRunningRef = useRef6(isRunning);
-  const showOutputSection = card.kind === "result" || card.hasResult;
-  useEffect7(() => {
-    if (prevRunningRef.current && !isRunning && !hasUserToggled) {
-      setExpanded(false);
-    }
-    prevRunningRef.current = isRunning;
-  }, [isRunning, hasUserToggled]);
-  const onToggle = () => {
-    if (!showOutputSection) return;
-    setExpanded(!expanded);
-    setHasUserToggled(true);
-  };
-  return /* @__PURE__ */ jsxs13(ToolCardRoot, { children: [
-    /* @__PURE__ */ jsx21(
+  const hasInputSection = input.length > 0;
+  const hasOutputSection = output.length > 0;
+  const hasContent = hasInputSection || hasOutputSection;
+  const inputLabel = card.inputLabel?.trim() || "Input";
+  const outputLabel = card.outputLabel?.trim() || "Output";
+  const { expanded, onToggle } = useToolCardExpandedState({
+    canExpand: hasContent || isRunning,
+    isRunning,
+    statusTone: card.statusTone
+  });
+  return /* @__PURE__ */ jsxs15(ToolCardRoot, { children: [
+    /* @__PURE__ */ jsx23(
       ToolCardHeader,
       {
         card,
         icon: Globe,
         expanded,
-        canExpand: showOutputSection,
+        canExpand: hasContent || isRunning,
         onToggle
       }
     ),
-    expanded && output && /* @__PURE__ */ jsx21(ToolCardContent, { children: /* @__PURE__ */ jsx21("pre", { className: "text-amber-950/80 whitespace-pre-wrap break-all overflow-y-auto overflow-x-hidden max-h-64 custom-scrollbar-amber w-full min-w-0 max-w-full leading-relaxed", children: output }) })
+    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
+        }
+      )
+    ] })
   ] });
 }
 
 // src/components/chat/ui/chat-message-list/chat-tool-card.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 function isTerminalTool(name) {
   const lowered = name.toLowerCase();
-  return lowered === "exec" || lowered === "execute_command" || lowered === "bash" || lowered === "shell" || lowered.includes("run_");
+  return lowered === "exec" || lowered === "exec_command" || lowered === "execute_command" || lowered === "command_execution" || lowered === "bash" || lowered === "shell" || lowered.includes("run_");
 }
 function isFileEditTool(name) {
   const lowered = name.toLowerCase();
-  return lowered === "read_file" || lowered === "write_file" || lowered === "edit_file" || lowered === "apply_patch";
+  return lowered === "read_file" || lowered === "write_file" || lowered === "edit_file" || lowered === "apply_patch" || lowered === "file_change";
 }
 function isSearchTool(name) {
   const lowered = name.toLowerCase();
@@ -3019,48 +3553,48 @@ function isSearchTool(name) {
 }
 function ChatToolCard({ card }) {
   if (isTerminalTool(card.toolName)) {
-    return /* @__PURE__ */ jsx22(TerminalExecutionView, { card });
+    return /* @__PURE__ */ jsx24(TerminalExecutionView, { card });
   }
   if (isFileEditTool(card.toolName)) {
-    return /* @__PURE__ */ jsx22(FileOperationView, { card });
+    return /* @__PURE__ */ jsx24(FileOperationView, { card });
   }
   if (isSearchTool(card.toolName)) {
-    return /* @__PURE__ */ jsx22(SearchSnippetView, { card });
+    return /* @__PURE__ */ jsx24(SearchSnippetView, { card });
   }
-  return /* @__PURE__ */ jsx22(GenericToolCard, { card });
+  return /* @__PURE__ */ jsx24(GenericToolCard, { card });
 }
 
 // src/components/chat/ui/chat-message-list/chat-unknown-part.tsx
-import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
 function ChatUnknownPart(props) {
-  return /* @__PURE__ */ jsxs14("div", { className: "rounded-lg border border-gray-200 bg-gray-50 px-2.5 py-2 text-xs text-gray-600", children: [
-    /* @__PURE__ */ jsxs14("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__ */ jsx23("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 jsx24 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var ChatMessage = memo(function ChatMessage2(props) {
   const { message, texts } = props;
   const { role } = message;
   const isUser = role === "user";
   const isMessageInProgress = message.status === "pending" || message.status === "streaming";
-  return /* @__PURE__ */ jsx24(
+  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__ */ jsx24("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__ */ jsx24(
+          return /* @__PURE__ */ jsx26(
             ChatMessageMarkdown,
             {
               text: part.text,
@@ -3071,7 +3605,7 @@ var ChatMessage = memo(function ChatMessage2(props) {
           );
         }
         if (type === "inline-content") {
-          return /* @__PURE__ */ jsx24(
+          return /* @__PURE__ */ jsx26(
             ChatMessageInlineContent,
             {
               segments: part.segments,
@@ -3082,7 +3616,7 @@ var ChatMessage = memo(function ChatMessage2(props) {
           );
         }
         if (type === "reasoning") {
-          return /* @__PURE__ */ jsx24(
+          return /* @__PURE__ */ jsx26(
             ChatReasoningBlock,
             {
               label: part.label,
@@ -3094,10 +3628,10 @@ var ChatMessage = memo(function ChatMessage2(props) {
           );
         }
         if (type === "tool-card") {
-          return /* @__PURE__ */ jsx24("div", { className: "mt-0.5", children: /* @__PURE__ */ jsx24(ChatToolCard, { card: part.card }) }, `tool-${index}`);
+          return /* @__PURE__ */ jsx26("div", { className: "mt-0.5", children: /* @__PURE__ */ jsx26(ChatToolCard, { card: part.card }) }, `tool-${index}`);
         }
         if (type === "file") {
-          return /* @__PURE__ */ jsx24(
+          return /* @__PURE__ */ jsx26(
             ChatMessageFile,
             {
               file: part.file,
@@ -3107,7 +3641,7 @@ var ChatMessage = memo(function ChatMessage2(props) {
           );
         }
         if (type === "unknown") {
-          return /* @__PURE__ */ jsx24(
+          return /* @__PURE__ */ jsx26(
             ChatUnknownPart,
             {
               label: part.label,
@@ -3124,9 +3658,9 @@ var ChatMessage = memo(function ChatMessage2(props) {
 });
 
 // src/components/chat/ui/chat-message-list/chat-message-meta.tsx
-import { jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsxs as jsxs17 } from "react/jsx-runtime";
 function ChatMessageMeta(props) {
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs17(
     "div",
     {
       className: cn(
@@ -3145,7 +3679,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 jsx25 } from "react/jsx-runtime";
+import { jsx as jsx27 } from "react/jsx-runtime";
 function ChatMessageActionCopy({
   message,
   texts
@@ -3159,7 +3693,7 @@ function ChatMessageActionCopy({
   }, [message.parts]);
   const { copied, copy } = useCopyFeedback({ text: messageText });
   if (!messageText) return null;
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx27(
     "button",
     {
       type: "button",
@@ -3167,13 +3701,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__ */ jsx25(Check5, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx25(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 Fragment5, jsx as jsx26, jsxs as jsxs16 } 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();
@@ -3191,10 +3725,10 @@ function hasRenderableMessageContent(message) {
   });
 }
 function ChatMessageTypingFooter() {
-  return /* @__PURE__ */ jsx26("div", { className: "flex items-center gap-2 px-1 py-0.5 text-[11px] text-gray-400", children: /* @__PURE__ */ jsxs16("div", { className: "flex space-x-1 items-center h-full", children: [
-    /* @__PURE__ */ jsx26("div", { className: "h-1.5 w-1.5 rounded-full bg-gray-400 animate-pulse" }),
-    /* @__PURE__ */ jsx26("div", { className: "h-1.5 w-1.5 rounded-full bg-gray-400 animate-pulse [animation-delay:200ms]" }),
-    /* @__PURE__ */ jsx26("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) {
@@ -3202,118 +3736,28 @@ function ChatMessageList(props) {
   const hasRenderableAssistantDraft = visibleMessages.some(
     (message) => message.role === "assistant" && (message.status === "streaming" || message.status === "pending")
   );
-  return /* @__PURE__ */ jsxs16("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__ */ jsxs16("div", { className: cn("flex gap-3", isUser ? "justify-end" : "justify-start"), children: [
-        !isUser ? /* @__PURE__ */ jsx26(ChatMessageAvatar, { role: message.role }) : null,
-        /* @__PURE__ */ jsxs16("div", { className: cn("w-fit max-w-[92%] space-y-2", isUser && "flex flex-col items-end"), children: [
-          /* @__PURE__ */ jsx26(ChatMessage, { message, texts: props.texts }),
-          /* @__PURE__ */ jsx26("div", { className: cn("flex items-center gap-2", isUser && "justify-end"), children: isGenerating ? /* @__PURE__ */ jsx26(ChatMessageTypingFooter, {}) : /* @__PURE__ */ jsxs16(Fragment5, { children: [
-            /* @__PURE__ */ jsx26(ChatMessageMeta, { roleLabel: message.roleLabel, timestampLabel: message.timestampLabel, isUser }),
-            !isUser ? /* @__PURE__ */ jsx26(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 }),
+          /* @__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__ */ jsx26(ChatMessageAvatar, { role: message.role }) : null
+        isUser ? /* @__PURE__ */ jsx28(ChatMessageAvatar, { role: message.role }) : null
       ] }, message.id);
     }),
-    props.isSending && !hasRenderableAssistantDraft ? /* @__PURE__ */ jsxs16("div", { className: "flex justify-start gap-3", children: [
-      /* @__PURE__ */ jsx26(ChatMessageAvatar, { role: "assistant" }),
-      /* @__PURE__ */ jsx26("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.18",
+  "version": "0.2.20",
   "private": false,
   "description": "Reusable Nextclaw agent chat UI primitives and default skin.",
   "type": "module",