@nextclaw/agent-chat-ui 0.2.17 → 0.2.19

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, {})
           }
@@ -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,379 @@ 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/ui/chat-message-list/tool-card/tool-card-file-operation.tsx
+import { Fragment as Fragment4 } from "react";
+import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+function formatLineNumber(value) {
+  return typeof value === "number" ? String(value) : "";
+}
+function readVisibleLineNumber(line) {
+  return formatLineNumber(line.newLineNumber ?? line.oldLineNumber);
+}
+function isPreviewBlock(block) {
+  return block.display === "preview";
+}
+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__ */ 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 })
+  ] }, `${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(
+    "div",
+    {
+      className: cn(
+        "min-w-full whitespace-pre px-3 py-1 font-mono text-[11px] leading-relaxed",
+        rowTone
+      ),
+      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"}`
+  );
+}
+function FileOperationBlock({
+  block,
+  showPathRow,
+  isFirst
+}) {
+  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
+  ] });
+}
+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__ */ jsxs13("div", { className: cn("overflow-hidden bg-white", className), children: [
+    blocks.map((block, index) => {
+      return /* @__PURE__ */ jsx21(
+        FileOperationBlock,
+        {
+          block,
+          showPathRow: true,
+          isFirst: index === 0
+        },
+        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
+  ] });
+}
+
+// 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";
+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 expandTimerRef = useRef6(null);
   const prevRunningRef = useRef6(isRunning);
+  const isFirstRenderRef = useRef6(true);
+  useEffect7(() => {
+    return () => {
+      if (expandTimerRef.current !== null) {
+        window.clearTimeout(expandTimerRef.current);
+      }
+    };
+  }, []);
   useEffect7(() => {
-    if (wasEmptyRef.current && hasContent && isRunning) {
+    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__ */ jsxs14(
+    "section",
+    {
+      className: cn(
+        "overflow-hidden rounded-md border shadow-[inset_0_1px_0_rgba(255,255,255,0.45)]",
+        style.shell
+      ),
+      children: [
+        /* @__PURE__ */ jsxs14(
+          "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__ */ jsx22("span", { className: cn("h-1.5 w-1.5 rounded-full", style.dot) }),
+              /* @__PURE__ */ jsx22("span", { children: label })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx22("div", { className: "w-full overflow-hidden", children: /* @__PURE__ */ jsx22(
+          "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__ */ jsxs14(ToolCardRoot, { children: [
+    /* @__PURE__ */ jsx22(
       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__ */ 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: [
           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__ */ 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" }) })
       ] }) }),
-      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__ */ 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,
-        isRunning && /* @__PURE__ */ jsx21("span", { className: "inline-block w-1.5 h-3 ml-1 bg-amber-500/60 animate-pulse align-middle" })
+        isRunning && /* @__PURE__ */ jsx22("span", { className: "inline-block w-1.5 h-3 ml-1 bg-amber-500/60 animate-pulse align-middle" })
       ] }) })
     ] })
   ] });
@@ -2889,75 +3213,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__ */ jsxs14(ToolCardRoot, { children: [
+    /* @__PURE__ */ jsx22(
       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__ */ jsx22(ToolCardContent, { className: "border-t border-amber-200/20 bg-transparent px-0 pt-0 pb-0", children: /* @__PURE__ */ jsx22(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__ */ jsxs14(ToolCardRoot, { children: [
+    /* @__PURE__ */ jsx22(
       ToolCardHeader,
       {
         card,
@@ -2967,51 +3266,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__ */ 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 }) })
   ] });
 }
 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__ */ jsxs14(ToolCardRoot, { children: [
+    /* @__PURE__ */ jsx22(
       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__ */ 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(
+        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 jsx23 } 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 +3325,48 @@ function isSearchTool(name) {
 }
 function ChatToolCard({ card }) {
   if (isTerminalTool(card.toolName)) {
-    return /* @__PURE__ */ jsx22(TerminalExecutionView, { card });
+    return /* @__PURE__ */ jsx23(TerminalExecutionView, { card });
   }
   if (isFileEditTool(card.toolName)) {
-    return /* @__PURE__ */ jsx22(FileOperationView, { card });
+    return /* @__PURE__ */ jsx23(FileOperationView, { card });
   }
   if (isSearchTool(card.toolName)) {
-    return /* @__PURE__ */ jsx22(SearchSnippetView, { card });
+    return /* @__PURE__ */ jsx23(SearchSnippetView, { card });
   }
-  return /* @__PURE__ */ jsx22(GenericToolCard, { card });
+  return /* @__PURE__ */ jsx23(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 jsx24, jsxs as jsxs15 } 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__ */ 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: [
       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__ */ jsx24("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 jsx25 } 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__ */ jsx25(
     "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__ */ jsx25("div", { className: "space-y-2", children: message.parts.map((part, index) => {
         const { type } = part;
         if (type === "markdown") {
-          return /* @__PURE__ */ jsx24(
+          return /* @__PURE__ */ jsx25(
             ChatMessageMarkdown,
             {
               text: part.text,
@@ -3071,7 +3377,7 @@ var ChatMessage = memo(function ChatMessage2(props) {
           );
         }
         if (type === "inline-content") {
-          return /* @__PURE__ */ jsx24(
+          return /* @__PURE__ */ jsx25(
             ChatMessageInlineContent,
             {
               segments: part.segments,
@@ -3082,7 +3388,7 @@ var ChatMessage = memo(function ChatMessage2(props) {
           );
         }
         if (type === "reasoning") {
-          return /* @__PURE__ */ jsx24(
+          return /* @__PURE__ */ jsx25(
             ChatReasoningBlock,
             {
               label: part.label,
@@ -3094,10 +3400,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__ */ jsx25("div", { className: "mt-0.5", children: /* @__PURE__ */ jsx25(ChatToolCard, { card: part.card }) }, `tool-${index}`);
         }
         if (type === "file") {
-          return /* @__PURE__ */ jsx24(
+          return /* @__PURE__ */ jsx25(
             ChatMessageFile,
             {
               file: part.file,
@@ -3107,7 +3413,7 @@ var ChatMessage = memo(function ChatMessage2(props) {
           );
         }
         if (type === "unknown") {
-          return /* @__PURE__ */ jsx24(
+          return /* @__PURE__ */ jsx25(
             ChatUnknownPart,
             {
               label: part.label,
@@ -3124,9 +3430,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 jsxs16 } from "react/jsx-runtime";
 function ChatMessageMeta(props) {
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
       className: cn(
@@ -3145,7 +3451,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 jsx26 } from "react/jsx-runtime";
 function ChatMessageActionCopy({
   message,
   texts
@@ -3159,7 +3465,7 @@ function ChatMessageActionCopy({
   }, [message.parts]);
   const { copied, copy } = useCopyFeedback({ text: messageText });
   if (!messageText) return null;
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     "button",
     {
       type: "button",
@@ -3167,13 +3473,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__ */ jsx26(Check5, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx26(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 jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
 var INVISIBLE_ONLY_TEXT_PATTERN = /\u200B|\u200C|\u200D|\u2060|\uFEFF/g;
 function hasRenderableText(value) {
   const trimmed = value.trim();
@@ -3191,10 +3497,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__ */ 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]" })
   ] }) });
 }
 function ChatMessageList(props) {
@@ -3202,25 +3508,25 @@ 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__ */ jsxs17("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__ */ 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
           ] }) })
         ] }),
-        isUser ? /* @__PURE__ */ jsx26(ChatMessageAvatar, { role: message.role }) : null
+        isUser ? /* @__PURE__ */ jsx27(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__ */ 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 })
     ] }) : null
   ] });
 }

package/package.json

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