@xpert-ai/chatkit-ui 0.1.0 → 0.1.2

package/dist/index.cjs

@@ -66,8 +66,8 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/chat.tsx
-var React21 = __toESM(require("react"), 1);
-var import_lucide_react10 = require("lucide-react");
+var React23 = __toESM(require("react"), 1);
+var import_lucide_react12 = require("lucide-react");
 
 // src/lib/utils.ts
 var import_clsx = require("clsx");
@@ -283,6 +283,9 @@ function isObjectLike(value) {
 function isNonEmptyString(value) {
   return typeof value === "string" && value.trim().length > 0;
 }
+function isOptionalString(value) {
+  return value === void 0 || typeof value === "string";
+}
 function toOptionalString(value) {
   return isNonEmptyString(value) ? value.trim() : void 0;
 }
@@ -295,42 +298,90 @@ function toLineNumber(value) {
   }
   return null;
 }
-function normalizeCodeReference(candidate) {
-  const path = toOptionalString(candidate.path);
-  const text = toReferenceText(candidate.text);
-  const startLine = toLineNumber(candidate.startLine);
-  const endLine = toLineNumber(candidate.endLine);
-  if (!path || !text || startLine === null || endLine === null) {
-    return null;
+function isOptionalNumber(value) {
+  return value === void 0 || Number.isFinite(value);
+}
+function toOptionalNumber(value, options) {
+  const allowZero = options?.allowZero ?? false;
+  if (!Number.isFinite(value)) {
+    return void 0;
+  }
+  const numberValue = value;
+  if (numberValue > 0 || allowZero && numberValue === 0) {
+    return numberValue;
+  }
+  return void 0;
+}
+function hasImageReferenceLocator(candidate) {
+  return isNonEmptyString(candidate.fileId) || isNonEmptyString(candidate.url) || isNonEmptyString(candidate.name) || isNonEmptyString(candidate.label) || isNonEmptyString(candidate.text);
+}
+function isCodeReferenceCandidate(value) {
+  if (!isObjectLike(value)) {
+    return false;
+  }
+  const candidate = value;
+  return isNonEmptyString(candidate.path) && toLineNumber(candidate.startLine) !== null && toLineNumber(candidate.endLine) !== null && toReferenceText(candidate.text) !== null && isOptionalString(candidate.id) && isOptionalString(candidate.label) && isOptionalString(candidate.language) && isOptionalString(candidate.taskId);
+}
+function isQuoteReferenceCandidate(value) {
+  if (!isObjectLike(value)) {
+    return false;
+  }
+  const candidate = value;
+  return candidate.type === "quote" && toReferenceText(candidate.text) !== null && isOptionalString(candidate.id) && isOptionalString(candidate.label) && isOptionalString(candidate.messageId) && isOptionalString(candidate.source);
+}
+function isImageReferenceCandidate(value) {
+  if (!isObjectLike(value)) {
+    return false;
   }
+  const candidate = value;
+  return candidate.type === "image" && isOptionalString(candidate.id) && isOptionalString(candidate.label) && isOptionalString(candidate.text) && isOptionalString(candidate.fileId) && isOptionalString(candidate.url) && isOptionalString(candidate.mimeType) && isOptionalString(candidate.name) && isOptionalNumber(candidate.size) && isOptionalNumber(candidate.width) && isOptionalNumber(candidate.height) && hasImageReferenceLocator(candidate);
+}
+function toCodeReference(candidate) {
   return {
     type: "code",
     ...toOptionalString(candidate.id) ? { id: toOptionalString(candidate.id) } : {},
     ...toOptionalString(candidate.label) ? { label: toOptionalString(candidate.label) } : {},
-    path,
-    startLine,
-    endLine,
-    text,
+    path: candidate.path.trim(),
+    startLine: candidate.startLine,
+    endLine: candidate.endLine,
+    text: candidate.text,
     ...toOptionalString(candidate.language) ? { language: toOptionalString(candidate.language) } : {},
     ...toOptionalString(candidate.taskId) ? { taskId: toOptionalString(candidate.taskId) } : {}
   };
 }
-function normalizeQuoteReference(candidate) {
-  const text = toReferenceText(candidate.text);
-  if (!text) {
-    return null;
-  }
+function toQuoteReference(candidate) {
   return {
     type: "quote",
     ...toOptionalString(candidate.id) ? { id: toOptionalString(candidate.id) } : {},
     ...toOptionalString(candidate.label) ? { label: toOptionalString(candidate.label) } : {},
-    text,
+    text: candidate.text,
     ...toOptionalString(candidate.messageId) ? { messageId: toOptionalString(candidate.messageId) } : {},
     ...toOptionalString(candidate.source) ? { source: toOptionalString(candidate.source) } : {}
   };
 }
+function toImageReference(candidate) {
+  const fileId = toOptionalString(candidate.fileId);
+  const url = toOptionalString(candidate.url);
+  const name = toOptionalString(candidate.name);
+  const label = toOptionalString(candidate.label);
+  const rawText = toReferenceText(candidate.text);
+  const text = rawText ?? name ?? label ?? "Pasted image";
+  return {
+    type: "image",
+    ...toOptionalString(candidate.id) ? { id: toOptionalString(candidate.id) } : {},
+    ...label ? { label } : {},
+    text,
+    ...fileId ? { fileId } : {},
+    ...url ? { url } : {},
+    ...toOptionalString(candidate.mimeType) ? { mimeType: toOptionalString(candidate.mimeType) } : {},
+    ...name ? { name } : {},
+    ...toOptionalNumber(candidate.size, { allowZero: true }) !== void 0 ? { size: toOptionalNumber(candidate.size, { allowZero: true }) } : {},
+    ...toOptionalNumber(candidate.width) !== void 0 ? { width: toOptionalNumber(candidate.width) } : {},
+    ...toOptionalNumber(candidate.height) !== void 0 ? { height: toOptionalNumber(candidate.height) } : {}
+  };
+}
 function isLegacyCodeReference(candidate) {
-  return isNonEmptyString(candidate.path) && toLineNumber(candidate.startLine) !== null && toLineNumber(candidate.endLine) !== null && toReferenceText(candidate.text) !== null;
+  return candidate.type === void 0 && isNonEmptyString(candidate.path) && toLineNumber(candidate.startLine) !== null && toLineNumber(candidate.endLine) !== null && toReferenceText(candidate.text) !== null;
 }
 function normalizeReference(value) {
   if (!isObjectLike(value)) {
@@ -338,14 +389,17 @@ function normalizeReference(value) {
   }
   const candidate = value;
   const type = toOptionalString(candidate.type);
-  if (type === "code") {
-    return normalizeCodeReference(candidate);
+  if (type === "code" && isCodeReferenceCandidate(candidate)) {
+    return toCodeReference(candidate);
+  }
+  if (isQuoteReferenceCandidate(candidate)) {
+    return toQuoteReference(candidate);
   }
-  if (type === "quote") {
-    return normalizeQuoteReference(candidate);
+  if (isImageReferenceCandidate(candidate)) {
+    return toImageReference(candidate);
   }
   if (type === void 0 && isLegacyCodeReference(candidate)) {
-    return normalizeCodeReference(candidate);
+    return toCodeReference(candidate);
   }
   return null;
 }
@@ -368,7 +422,32 @@ function getQuoteExcerpt(reference) {
 function getCodeReferenceLocation(reference) {
   return `${reference.path}:${getCodeReferenceRange(reference)}`;
 }
+function formatReferenceSize(size2) {
+  if (size2 < 1024) {
+    return `${size2} B`;
+  }
+  if (size2 < 1024 * 1024) {
+    return `${(size2 / 1024).toFixed(size2 < 10 * 1024 ? 1 : 0)} KB`;
+  }
+  return `${(size2 / (1024 * 1024)).toFixed(size2 < 10 * 1024 * 1024 ? 1 : 0)} MB`;
+}
+function getImageReferenceDimensions(reference) {
+  if (!reference.width || !reference.height) {
+    return null;
+  }
+  return `${reference.width}x${reference.height}`;
+}
+function getImageReferenceMetaParts(reference) {
+  return [
+    reference.mimeType?.trim() || null,
+    getImageReferenceDimensions(reference),
+    typeof reference.size === "number" ? formatReferenceSize(reference.size) : null
+  ].filter((part) => Boolean(part));
+}
 function getReferenceKey(reference) {
+  if (reference.type === "image" && reference.fileId?.trim()) {
+    return `image:${reference.fileId.trim()}`;
+  }
   if (reference.id && reference.id.trim()) {
     return reference.id.trim();
   }
@@ -381,6 +460,18 @@ function getReferenceKey(reference) {
       reference.text
     ].join(":");
   }
+  if (reference.type === "image") {
+    return [
+      reference.type,
+      reference.url ?? "",
+      reference.name ?? "",
+      reference.mimeType ?? "",
+      reference.size ?? "",
+      reference.width ?? "",
+      reference.height ?? "",
+      reference.text
+    ].join(":");
+  }
   return [
     reference.type,
     reference.messageId ?? "",
@@ -410,6 +501,9 @@ function getReferenceLabel(reference) {
     const fileName = segments[segments.length - 1] || reference.path;
     return `${fileName} ${getCodeReferenceRange(reference)}`;
   }
+  if (reference.type === "image") {
+    return reference.name?.trim() || "Pasted image";
+  }
   if (reference.source && reference.source.trim()) {
     return reference.source.trim();
   }
@@ -419,6 +513,10 @@ function getReferenceMetaLine(reference) {
   if (reference.type === "code") {
     return getCodeReferenceLocation(reference);
   }
+  if (reference.type === "image") {
+    const parts = getImageReferenceMetaParts(reference);
+    return parts.length ? parts.join(" \u2022 ") : null;
+  }
   if (reference.source && reference.source.trim()) {
     return getQuoteExcerpt(reference);
   }
@@ -433,6 +531,21 @@ function getReferenceTitle(reference) {
 
 ${reference.text}`;
   }
+  if (reference.type === "image") {
+    const titleLines = [getReferenceLabel(reference)];
+    const metaLine = getReferenceMetaLine(reference);
+    const url = reference.url?.trim() && !reference.url.trim().startsWith("data:") ? reference.url.trim() : null;
+    if (metaLine) {
+      titleLines.push(metaLine);
+    }
+    if (url) {
+      titleLines.push(url);
+    }
+    if (reference.text.trim() && reference.text.trim() !== getReferenceLabel(reference)) {
+      titleLines.push("", reference.text.trim());
+    }
+    return titleLines.join("\n");
+  }
   const header = reference.label?.trim() || reference.source?.trim() || "Quoted text";
   return `${header}
 
@@ -837,6 +950,22 @@ function resolveUsedContextSize(options) {
   return normalizeContextUsageNumber(options.fallbackUsedTokens) ?? 0;
 }
 
+// src/lib/follow-ups.ts
+function getComposerFollowUpShortcutLabels(queueShortcutLabel) {
+  return {
+    steer: "Enter",
+    queue: queueShortcutLabel
+  };
+}
+function getBusyComposerShortcutFollowUpMode(useQueueShortcut) {
+  return useQueueShortcut ? "queue" : "steer";
+}
+
+// src/lib/todos.ts
+function countCompletedTodos(items) {
+  return items.filter((item) => item.status === "completed").length;
+}
+
 // src/providers/Stream.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var import_meta = {};
@@ -991,6 +1120,9 @@ var en_US_default = {
       manualQueueHint: "Ready to send as a new run",
       steerHint: "Injects after the current tool call"
     },
+    todos: {
+      summary: "{{total}} tasks, {{completed}} completed"
+    },
     errors: {
       loadMessages: "Failed to load thread messages",
       createThread: "Failed to create thread",
@@ -1029,7 +1161,16 @@ var en_US_default = {
     close: "Close"
   },
   markdown: {
-    copy: "Copy"
+    copy: "Copy",
+    mermaid: {
+      title: "Mermaid",
+      diagram: "Diagram",
+      code: "Code",
+      download: "Download SVG",
+      fullScreen: "Open full screen",
+      rendering: "Rendering diagram",
+      failed: "Failed to render diagram"
+    }
   },
   thread: {
     errorToast: "An error occurred. Please try again.",
@@ -1075,7 +1216,7 @@ var zh_CN_default = {
       pending: "\u5F85\u5904\u7406 Follow-up",
       queue: "\u6392\u961F",
       steer: "\u5F15\u5BFC",
-      steerAction: "Steer",
+      steerAction: "\u5F15\u5BFC",
       promoteToSteer: "\u8F6C\u4E3A\u5F15\u5BFC",
       sendNow: "\u7ACB\u5373\u53D1\u9001",
       remove: "\u79FB\u9664\u6B64\u5F85\u5904\u7406 Follow-up",
@@ -1086,6 +1227,9 @@ var zh_CN_default = {
       manualQueueHint: "\u4FDD\u7559\u4E3A\u5F85\u53D1\u9001\uFF0C\u53EF\u624B\u52A8\u5F00\u542F\u65B0\u4E00\u8F6E",
       steerHint: "\u5F53\u524D\u5DE5\u5177\u8C03\u7528\u5B8C\u6210\u540E\u6CE8\u5165"
     },
+    todos: {
+      summary: "\u5171 {{total}} \u4E2A\u4EFB\u52A1\uFF0C\u5DF2\u7ECF\u5B8C\u6210 {{completed}} \u4E2A"
+    },
     errors: {
       loadMessages: "\u52A0\u8F7D\u7EBF\u7A0B\u6D88\u606F\u5931\u8D25",
       createThread: "\u521B\u5EFA\u7EBF\u7A0B\u5931\u8D25",
@@ -1124,7 +1268,16 @@ var zh_CN_default = {
     close: "\u5173\u95ED"
   },
   markdown: {
-    copy: "\u590D\u5236"
+    copy: "\u590D\u5236",
+    mermaid: {
+      title: "Mermaid",
+      diagram: "\u56FE\u8868",
+      code: "\u4EE3\u7801",
+      download: "\u4E0B\u8F7D SVG",
+      fullScreen: "\u5168\u5C4F\u67E5\u770B",
+      rendering: "\u6B63\u5728\u6E32\u67D3\u56FE\u8868",
+      failed: "\u56FE\u8868\u6E32\u67D3\u5931\u8D25"
+    }
   },
   thread: {
     errorToast: "\u53D1\u751F\u9519\u8BEF\uFF0C\u8BF7\u91CD\u8BD5\u3002",
@@ -1657,19 +1810,86 @@ function ComposerMenu({
 
 // src/components/composer/SendButton.tsx
 var import_lucide_react2 = require("lucide-react");
+
+// src/components/ui/tooltip.tsx
+var React6 = require("react");
+var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
 var import_jsx_runtime7 = require("react/jsx-runtime");
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    TooltipPrimitive.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props
+    }
+  );
+}
+function Tooltip({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    TooltipPrimitive.Root,
+    {
+      "data-slot": "tooltip",
+      ...props
+    }
+  ) });
+}
+function TooltipTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    TooltipPrimitive.Trigger,
+    {
+      "data-slot": "tooltip-trigger",
+      ...props
+    }
+  );
+}
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  hideArrow = false,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    TooltipPrimitive.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        !hideArrow ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TooltipPrimitive.Arrow, { className: "bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" }) : null
+      ]
+    }
+  ) });
+}
+
+// src/components/composer/SendButton.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function SendButton({
   disabled = false,
   isLoading = false,
   showStop = isLoading,
   onStop,
   stopLabel = "Stop",
-  sendLabel = "Send"
+  sendLabel = "Send",
+  shortcuts
 }) {
   const { theme } = useTheme();
   const roundedClass = getRoundedClass(theme.radius);
   if (showStop) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "button",
       {
         type: "button",
@@ -1682,11 +1902,11 @@ function SendButton({
           "hover:scale-105 active:scale-95"
         ),
         "aria-label": stopLabel,
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.Square, { size: 14, fill: "currentColor", stroke: "currentColor", strokeWidth: 0 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.Square, { size: 14, fill: "currentColor", stroke: "currentColor", strokeWidth: 0 })
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  const button = /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "button",
     {
       type: "submit",
@@ -1700,34 +1920,63 @@ function SendButton({
         "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:scale-100"
       ),
       "aria-label": sendLabel,
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.ArrowUp, { size: 18, strokeWidth: 2.5 })
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.ArrowUp, { size: 18, strokeWidth: 2.5 })
     }
   );
+  if (!shortcuts?.length || disabled) {
+    return button;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TooltipTrigger, { asChild: true, children: button }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      TooltipContent,
+      {
+        side: "top",
+        sideOffset: 10,
+        hideArrow: true,
+        className: cn(
+          "min-w-36 border border-border/70 bg-background px-3 py-2 text-foreground shadow-lg",
+          roundedClass
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "space-y-1", children: shortcuts.map((shortcut) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          "div",
+          {
+            className: "flex items-center justify-between gap-4 text-sm",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "font-medium", children: shortcut.label }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("kbd", { className: "inline-flex min-w-16 items-center justify-center rounded-full bg-muted px-2.5 py-0.5 text-xs font-medium text-muted-foreground", children: shortcut.keys })
+            ]
+          },
+          `${shortcut.label}-${shortcut.keys}`
+        )) })
+      }
+    )
+  ] });
 }
 
 // src/components/history/HistorySidebar.tsx
-var React8 = __toESM(require("react"), 1);
+var React9 = __toESM(require("react"), 1);
 var import_lucide_react4 = require("lucide-react");
 
 // src/components/ui/scroll-area.tsx
-var React6 = __toESM(require("react"), 1);
+var React7 = __toESM(require("react"), 1);
 var ScrollAreaPrimitive = __toESM(require("@radix-ui/react-scroll-area"), 1);
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var ScrollArea = React6.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var ScrollArea = React7.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
   ScrollAreaPrimitive.Root,
   {
     ref,
     className: cn("relative overflow-hidden", className),
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ScrollBar, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ScrollAreaPrimitive.Corner, {})
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ScrollBar, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ScrollAreaPrimitive.Corner, {})
     ]
   }
 ));
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React6.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+var ScrollBar = React7.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
   ScrollAreaPrimitive.ScrollAreaScrollbar,
   {
     ref,
@@ -1739,30 +1988,30 @@ var ScrollBar = React6.forwardRef(({ className, orientation = "vertical", ...pro
       className
     ),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
   }
 ));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
 // src/components/ui/sheet.tsx
-var React7 = require("react");
+var React8 = require("react");
 var import_lucide_react3 = require("lucide-react");
 var SheetPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function Sheet({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SheetPrimitive.Root, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SheetPrimitive.Root, { ...props });
 }
 function SheetTrigger({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SheetPrimitive.Trigger, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SheetPrimitive.Trigger, { ...props });
 }
 function SheetPortal({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SheetPrimitive.Portal, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SheetPrimitive.Portal, { ...props });
 }
 function SheetOverlay({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     SheetPrimitive.Overlay,
     {
       className: cn(
@@ -1786,9 +2035,9 @@ function SheetContent({
     left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
     right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(SheetPortal, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SheetOverlay, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(SheetPortal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SheetOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       SheetPrimitive.Content,
       {
         className: cn(
@@ -1799,9 +2048,9 @@ function SheetContent({
         ...props,
         children: [
           children,
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.X, { size: 16 }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "sr-only", children: t("sheet.close") })
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.X, { size: 16 }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "sr-only", children: t("sheet.close") })
           ] })
         ]
       }
@@ -1812,7 +2061,7 @@ function SheetHeader({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "div",
     {
       className: cn(
@@ -1827,7 +2076,7 @@ function SheetTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     SheetPrimitive.Title,
     {
       className: cn("text-lg font-semibold text-foreground", className),
@@ -1837,7 +2086,7 @@ function SheetTitle({
 }
 
 // src/components/history/HistorySidebar.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function HistorySidebar({
   threads = [],
   currentThreadId,
@@ -1848,7 +2097,7 @@ function HistorySidebar({
   disabled = false
 }) {
   const { t } = useChatkitTranslation();
-  const [open, setOpen] = React8.useState(false);
+  const [open, setOpen] = React9.useState(false);
   const handleNewThread = () => {
     onNewThread?.();
     setOpen(false);
@@ -1857,8 +2106,8 @@ function HistorySidebar({
     onSelectThread?.(id);
     setOpen(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Sheet, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SheetTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Sheet, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SheetTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
       Button,
       {
         variant: "ghost",
@@ -1866,26 +2115,26 @@ function HistorySidebar({
         disabled,
         className: "h-8 w-8 cursor-pointer",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.History, { size: 16 }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "sr-only", children: t("history.threadHistory") })
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.History, { size: 16 }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "sr-only", children: t("history.threadHistory") })
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(SheetContent, { side: "right", className: "w-80 p-0", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SheetHeader, { className: "border-b p-4", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SheetTitle, { children: t("history.title") }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "p-4", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(SheetContent, { side: "right", className: "w-80 p-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SheetHeader, { className: "border-b p-4", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SheetTitle, { children: t("history.title") }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "p-4", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
         Button,
         {
           onClick: handleNewThread,
           className: "w-full justify-start gap-2",
           variant: "secondary",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.PlusCircle, { size: 16 }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.PlusCircle, { size: 16 }),
             t("history.newThread")
           ]
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ScrollArea, { className: "h-[calc(100vh-140px)]", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "px-4 pb-4", children: threads.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "py-8 text-center text-sm text-muted-foreground", children: t("history.empty") }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "space-y-1", children: threads.map((thread) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ScrollArea, { className: "h-[calc(100vh-140px)]", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "px-4 pb-4", children: threads.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "py-8 text-center text-sm text-muted-foreground", children: t("history.empty") }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "space-y-1", children: threads.map((thread) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
         "div",
         {
           className: cn(
@@ -1895,9 +2144,9 @@ function HistorySidebar({
           ),
           onClick: () => handleSelectThread(thread.id),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.MessageSquare, { size: 16 }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "flex-1 truncate", children: thread.title }),
-            showDelete && onDeleteThread && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.MessageSquare, { size: 16 }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "flex-1 truncate", children: thread.title }),
+            showDelete && onDeleteThread && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               "button",
               {
                 type: "button",
@@ -1906,7 +2155,7 @@ function HistorySidebar({
                   onDeleteThread(thread.id);
                 },
                 className: "opacity-0 group-hover:opacity-100 p-1 rounded hover:bg-destructive/10 hover:text-destructive transition-all",
-                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react4.Trash2, { size: 14 })
+                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react4.Trash2, { size: 14 })
               }
             )
           ]
@@ -1920,71 +2169,6 @@ function HistorySidebar({
 // src/components/composer/pending-follow-ups.tsx
 var React10 = __toESM(require("react"), 1);
 var import_lucide_react5 = require("lucide-react");
-
-// src/components/ui/tooltip.tsx
-var React9 = require("react");
-var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
-var import_jsx_runtime11 = require("react/jsx-runtime");
-function TooltipProvider({
-  delayDuration = 0,
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    TooltipPrimitive.Provider,
-    {
-      "data-slot": "tooltip-provider",
-      delayDuration,
-      ...props
-    }
-  );
-}
-function Tooltip({
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    TooltipPrimitive.Root,
-    {
-      "data-slot": "tooltip",
-      ...props
-    }
-  ) });
-}
-function TooltipTrigger({
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    TooltipPrimitive.Trigger,
-    {
-      "data-slot": "tooltip-trigger",
-      ...props
-    }
-  );
-}
-function TooltipContent({
-  className,
-  sideOffset = 0,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-    TooltipPrimitive.Content,
-    {
-      "data-slot": "tooltip-content",
-      sideOffset,
-      className: cn(
-        "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TooltipPrimitive.Arrow, { className: "bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
-      ]
-    }
-  ) });
-}
-
-// src/components/composer/pending-follow-ups.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function getPendingFollowUpText(item, referencedContentFallback) {
   const text = item.request?.input?.input?.trim() ?? "";
@@ -2024,6 +2208,7 @@ function PendingFollowUps({
   onSendNow,
   onEdit,
   onRemove,
+  attachToComposer = true,
   className
 }) {
   const { t } = useChatkitTranslation();
@@ -2046,8 +2231,9 @@ function PendingFollowUps({
     "div",
     {
       className: cn(
-        "space-y-2 mx-2 p-2 border border-border border-b-0",
-        rounded.top,
+        "space-y-2 mx-2 p-2 border border-border",
+        attachToComposer ? "border-b-0" : null,
+        attachToComposer ? rounded.top : rounded.panel,
         className
       ),
       children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "space-y-1", children: [
@@ -2278,31 +2464,150 @@ function PendingFollowUps({
   );
 }
 
+// src/components/composer/pending-todos.tsx
+var React11 = __toESM(require("react"), 1);
+var import_lucide_react6 = require("lucide-react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function useRoundedClasses2() {
+  const { theme } = useTheme();
+  return {
+    top: theme.radius ? {
+      pill: "rounded-t-full",
+      round: "rounded-t-xl",
+      soft: "rounded-t-lg",
+      sharp: "rounded-t-none"
+    }[theme.radius] : "rounded-t-lg",
+    panel: getRoundedClass(theme.radius, "rounded-lg")
+  };
+}
+function TodoStatusIcon({ status }) {
+  if (status === "completed") {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react6.CheckCircle2, { className: "mt-1 h-4 w-4 shrink-0 text-emerald-600" });
+  }
+  if (status === "in_progress") {
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react6.CircleDashed, { className: "mt-1 h-4 w-4 shrink-0 text-foreground/70" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react6.Circle, { className: "mt-1 h-4 w-4 shrink-0 text-muted-foreground" });
+}
+function PendingTodos({
+  snapshot,
+  attachToComposer = true,
+  className
+}) {
+  const { t } = useChatkitTranslation();
+  const rounded = useRoundedClasses2();
+  const listId = React11.useId();
+  const [isCollapsed, setIsCollapsed] = React11.useState(false);
+  React11.useEffect(() => {
+    setIsCollapsed(false);
+  }, [snapshot?.componentId]);
+  if (!snapshot || snapshot.items.length === 0) {
+    return null;
+  }
+  const completedCount = countCompletedTodos(snapshot.items);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    "div",
+    {
+      "aria-live": "polite",
+      className: cn(
+        "mx-2 border border-border bg-background/95 px-3 py-3 shadow-sm",
+        attachToComposer ? "border-b-0" : null,
+        attachToComposer ? rounded.top : rounded.panel,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          "button",
+          {
+            type: "button",
+            className: "flex w-full items-center justify-between gap-3 text-left",
+            "aria-expanded": !isCollapsed,
+            "aria-controls": listId,
+            onClick: () => setIsCollapsed((prev) => !prev),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex min-w-0 items-center gap-2 text-sm font-medium text-foreground", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react6.ListTodo, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "truncate", children: t("chat.todos.summary", {
+                  total: snapshot.items.length,
+                  completed: completedCount
+                }) })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex items-center shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                import_lucide_react6.ChevronDown,
+                {
+                  className: cn(
+                    "h-4 w-4 text-muted-foreground transition-transform",
+                    isCollapsed ? null : "rotate-180"
+                  )
+                }
+              ) })
+            ]
+          }
+        ),
+        !isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("ol", { id: listId, className: "mt-3 space-y-2.5", children: snapshot.items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          "li",
+          {
+            className: "grid min-w-0 grid-cols-[16px_24px_minmax(0,1fr)] items-start gap-2 overflow-hidden",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TodoStatusIcon, { status: item.status }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+                "span",
+                {
+                  className: cn(
+                    "text-sm leading-6 text-foreground",
+                    item.status === "completed" ? "text-muted-foreground" : null
+                  ),
+                  children: [
+                    index + 1,
+                    "."
+                  ]
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                "span",
+                {
+                  title: item.content,
+                  className: cn(
+                    "block min-w-0 truncate text-sm leading-6 text-foreground",
+                    item.status === "completed" ? "text-muted-foreground line-through" : item.status === "in_progress" ? "font-medium" : null
+                  ),
+                  children: item.content
+                }
+              )
+            ]
+          },
+          item.id
+        )) })
+      ]
+    }
+  );
+}
+
 // src/components/thread/messages/ai.tsx
-var React14 = __toESM(require("react"), 1);
-var import_lucide_react7 = require("lucide-react");
+var React16 = __toESM(require("react"), 1);
+var import_lucide_react9 = require("lucide-react");
 
 // src/components/ui/badge.tsx
-var React11 = __toESM(require("react"), 1);
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var React12 = __toESM(require("react"), 1);
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var base = "inline-flex items-center rounded-full border border-transparent px-2.5 py-0.5 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background";
 var variants = {
   default: "bg-primary text-primary-foreground",
   secondary: "bg-secondary text-secondary-foreground",
   outline: "border-input text-foreground"
 };
-var Badge = React11.forwardRef(
+var Badge = React12.forwardRef(
   ({ className, variant = "default", ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { ref, className: cn(base, variants[variant], className), ...props });
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { ref, className: cn(base, variants[variant], className), ...props });
   }
 );
 Badge.displayName = "Badge";
 
 // src/components/ui/card.tsx
-var React12 = __toESM(require("react"), 1);
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var Card = React12.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+var React13 = __toESM(require("react"), 1);
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var Card = React13.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "div",
     {
       ref,
@@ -2315,50 +2620,50 @@ var Card = React12.forwardRef(
   )
 );
 Card.displayName = "Card";
-var CardHeader = React12.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ref, className: cn("flex flex-col gap-1.5 px-6 pt-6", className), ...props })
+var CardHeader = React13.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { ref, className: cn("flex flex-col gap-1.5 px-6 pt-6", className), ...props })
 );
 CardHeader.displayName = "CardHeader";
-var CardTitle = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { ref, className: cn("text-lg font-semibold leading-tight", className), ...props }));
+var CardTitle = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h3", { ref, className: cn("text-lg font-semibold leading-tight", className), ...props }));
 CardTitle.displayName = "CardTitle";
-var CardDescription = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
+var CardDescription = React13.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
 CardDescription.displayName = "CardDescription";
-var CardContent = React12.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ref, className: cn("px-6 pb-6", className), ...props })
+var CardContent = React13.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { ref, className: cn("px-6 pb-6", className), ...props })
 );
 CardContent.displayName = "CardContent";
-var CardFooter = React12.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ref, className: cn("flex items-center px-6 pb-6", className), ...props })
+var CardFooter = React13.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { ref, className: cn("flex items-center px-6 pb-6", className), ...props })
 );
 CardFooter.displayName = "CardFooter";
-var CardAction = React12.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ref, className: cn("ml-auto flex items-center", className), ...props })
+var CardAction = React13.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { ref, className: cn("ml-auto flex items-center", className), ...props })
 );
 CardAction.displayName = "CardAction";
 
 // src/components/ui/tabs.tsx
-var React13 = __toESM(require("react"), 1);
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var TabsContext = React13.createContext(null);
+var React14 = __toESM(require("react"), 1);
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var TabsContext = React14.createContext(null);
 function Tabs({ className, defaultValue, value, onValueChange, ...props }) {
-  const [internalValue, setInternalValue] = React13.useState(defaultValue ?? "");
+  const [internalValue, setInternalValue] = React14.useState(defaultValue ?? "");
   const activeValue = value ?? internalValue;
-  const setValue = React13.useCallback(
+  const setValue = React14.useCallback(
     (nextValue) => {
       if (value === void 0) setInternalValue(nextValue);
       onValueChange?.(nextValue);
     },
     [onValueChange, value]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TabsContext.Provider, { value: { value: activeValue, setValue }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: cn("w-full", className), ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TabsContext.Provider, { value: { value: activeValue, setValue }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: cn("w-full", className), ...props }) });
 }
-var TabsList = React13.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+var TabsList = React14.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "div",
     {
       ref,
       className: cn(
-        "inline-flex h-11 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+        "inline-flex items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
         className
       ),
       role: "tablist",
@@ -2367,14 +2672,14 @@ var TabsList = React13.forwardRef(
   )
 );
 TabsList.displayName = "TabsList";
-var TabsTrigger = React13.forwardRef(
+var TabsTrigger = React14.forwardRef(
   ({ className, value, onClick, ...props }, ref) => {
-    const context = React13.useContext(TabsContext);
+    const context = React14.useContext(TabsContext);
     if (!context) {
       throw new Error("TabsTrigger must be used within Tabs");
     }
     const isActive = context.value === value;
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "button",
       {
         ref,
@@ -2383,7 +2688,7 @@ var TabsTrigger = React13.forwardRef(
         "aria-selected": isActive,
         "data-state": isActive ? "active" : "inactive",
         className: cn(
-          "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-2 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+          "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ring-offset-background disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
           className
         ),
         onClick: (event) => {
@@ -2396,14 +2701,14 @@ var TabsTrigger = React13.forwardRef(
   }
 );
 TabsTrigger.displayName = "TabsTrigger";
-var TabsContent = React13.forwardRef(
+var TabsContent = React14.forwardRef(
   ({ className, value, ...props }, ref) => {
-    const context = React13.useContext(TabsContext);
+    const context = React14.useContext(TabsContext);
     if (!context) {
       throw new Error("TabsContent must be used within Tabs");
     }
     if (context.value !== value) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "div",
       {
         ref,
@@ -2425,7 +2730,7 @@ var import_remark_gfm = __toESM(require("remark-gfm"), 1);
 var import_rehype_katex = __toESM(require("rehype-katex"), 1);
 var import_remark_math = __toESM(require("remark-math"), 1);
 var import_react6 = require("react");
-var import_lucide_react6 = require("lucide-react");
+var import_lucide_react8 = require("lucide-react");
 
 // src/components/thread/syntax-highlighter.tsx
 var import_react_syntax_highlighter = require("react-syntax-highlighter");
@@ -2433,7 +2738,7 @@ var import_tsx = __toESM(require("react-syntax-highlighter/dist/esm/languages/pr
 var import_python = __toESM(require("react-syntax-highlighter/dist/esm/languages/prism/python"), 1);
 var import_prism = require("react-syntax-highlighter/dist/cjs/styles/prism");
 var import_react4 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 import_react_syntax_highlighter.PrismAsyncLight.registerLanguage("js", import_tsx.default);
 import_react_syntax_highlighter.PrismAsyncLight.registerLanguage("jsx", import_tsx.default);
 import_react_syntax_highlighter.PrismAsyncLight.registerLanguage("ts", import_tsx.default);
@@ -2444,7 +2749,7 @@ var SyntaxHighlighter = ({
   language,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     import_react_syntax_highlighter.PrismAsyncLight,
     {
       language,
@@ -2459,41 +2764,544 @@ var SyntaxHighlighter = ({
       children
     }
   );
-};
-
-// src/components/thread/tooltip-icon-button.tsx
-var import_react5 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var TooltipIconButton = (0, import_react5.forwardRef)(({ children, tooltip, side = "bottom", className, ...rest }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Tooltip, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-      Button,
+};
+
+// src/components/thread/mermaid-block.tsx
+var Dialog = __toESM(require("@radix-ui/react-dialog"), 1);
+var import_mermaid = __toESM(require("mermaid"), 1);
+var import_lucide_react7 = require("lucide-react");
+var React15 = __toESM(require("react"), 1);
+
+// src/components/thread/tooltip-icon-button.tsx
+var import_react5 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var TooltipIconButton = (0, import_react5.forwardRef)(({ children, tooltip, side = "bottom", className, ...rest }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        ...rest,
+        className: cn("size-6 p-1", className),
+        ref,
+        children: [
+          children,
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "sr-only", children: tooltip })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TooltipContent, { side, children: tooltip })
+  ] }) });
+});
+TooltipIconButton.displayName = "TooltipIconButton";
+
+// src/components/thread/mermaid-block.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var HEX_COLOR_PATTERN = /^#([\da-f]{3,8})$/i;
+var MERMAID_DIRECTIVE_PATTERN = /%{2}{\s*(?:(\w+)\s*:|(\w+))\s*(?:(\w+)|((?:(?!}%{2}).|\r?\n)*))?\s*(?:}%{2})?/gi;
+var MERMAID_FRONTMATTER_PATTERN = /^-{3}\s*[\n\r](.*?)[\n\r]-{3}\s*[\n\r]+/s;
+var OKLCH_COLOR_PATTERN = /^oklch\((.+)\)$/i;
+var RGB_COLOR_PATTERN = /^rgba?\((.+)\)$/i;
+var MERMAID_SECURE_KEYS = [
+  "fontFamily",
+  "maxEdges",
+  "maxTextSize",
+  "securityLevel",
+  "secure",
+  "startOnLoad",
+  "suppressErrorRendering",
+  "theme",
+  "themeVariables"
+];
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function normalizeMermaidCode(code) {
+  return code.replace(MERMAID_FRONTMATTER_PATTERN, "").replace(MERMAID_DIRECTIVE_PATTERN, "").trim();
+}
+function parseAlpha(value) {
+  if (!value) return 1;
+  const normalized = value.trim();
+  if (!normalized) return 1;
+  if (normalized.endsWith("%")) {
+    return clamp(Number.parseFloat(normalized) / 100, 0, 1);
+  }
+  return clamp(Number.parseFloat(normalized), 0, 1);
+}
+function parseHexColor(value) {
+  const match = value.trim().match(HEX_COLOR_PATTERN);
+  if (!match) return null;
+  const hex = match[1];
+  if (hex.length === 3 || hex.length === 4) {
+    const [r, g, b, a = "f"] = hex.split("");
+    return {
+      r: Number.parseInt(r + r, 16),
+      g: Number.parseInt(g + g, 16),
+      b: Number.parseInt(b + b, 16),
+      a: Number.parseInt(a + a, 16) / 255
+    };
+  }
+  if (hex.length === 6 || hex.length === 8) {
+    const alphaHex = hex.length === 8 ? hex.slice(6, 8) : "ff";
+    return {
+      r: Number.parseInt(hex.slice(0, 2), 16),
+      g: Number.parseInt(hex.slice(2, 4), 16),
+      b: Number.parseInt(hex.slice(4, 6), 16),
+      a: Number.parseInt(alphaHex, 16) / 255
+    };
+  }
+  return null;
+}
+function parseRgbChannel(value) {
+  const normalized = value.trim();
+  if (normalized.endsWith("%")) {
+    return clamp(Math.round(Number.parseFloat(normalized) / 100 * 255), 0, 255);
+  }
+  return clamp(Math.round(Number.parseFloat(normalized)), 0, 255);
+}
+function parseRgbColor(value) {
+  const match = value.trim().match(RGB_COLOR_PATTERN);
+  if (!match) return null;
+  const parts = match[1].split(/[,\s/]+/).map((part) => part.trim()).filter(Boolean);
+  if (parts.length < 3) return null;
+  return {
+    r: parseRgbChannel(parts[0]),
+    g: parseRgbChannel(parts[1]),
+    b: parseRgbChannel(parts[2]),
+    a: parseAlpha(parts[3])
+  };
+}
+function parseOklchLightness(value) {
+  const normalized = value.trim();
+  if (normalized.endsWith("%")) {
+    return clamp(Number.parseFloat(normalized) / 100, 0, 1);
+  }
+  return clamp(Number.parseFloat(normalized), 0, 1);
+}
+function parseHue(value) {
+  const normalized = value.trim().toLowerCase();
+  const numeric = Number.parseFloat(normalized);
+  if (Number.isNaN(numeric)) return 0;
+  if (normalized.endsWith("turn")) return numeric * 360;
+  if (normalized.endsWith("rad")) return numeric * (180 / Math.PI);
+  if (normalized.endsWith("grad")) return numeric * 0.9;
+  return numeric;
+}
+function linearToSrgb(linear) {
+  if (linear <= 31308e-7) {
+    return 12.92 * linear;
+  }
+  return 1.055 * Math.pow(linear, 1 / 2.4) - 0.055;
+}
+function parseOklchColor(value) {
+  const match = value.trim().match(OKLCH_COLOR_PATTERN);
+  if (!match) return null;
+  const [base2, alphaSegment] = match[1].split("/");
+  const parts = base2.trim().split(/\s+/).map((part) => part.trim()).filter(Boolean);
+  if (parts.length < 3) return null;
+  const lightness = parseOklchLightness(parts[0]);
+  const chroma = Number.parseFloat(parts[1]);
+  const hueRadians = parseHue(parts[2]) * Math.PI / 180;
+  const alpha = parseAlpha(alphaSegment);
+  const a = chroma * Math.cos(hueRadians);
+  const b = chroma * Math.sin(hueRadians);
+  const l_ = lightness + 0.3963377774 * a + 0.2158037573 * b;
+  const m_ = lightness - 0.1055613458 * a - 0.0638541728 * b;
+  const s_ = lightness - 0.0894841775 * a - 1.291485548 * b;
+  const l = l_ * l_ * l_;
+  const m = m_ * m_ * m_;
+  const s = s_ * s_ * s_;
+  const linearR = 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s;
+  const linearG = -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s;
+  const linearB = -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s;
+  return {
+    r: clamp(Math.round(linearToSrgb(linearR) * 255), 0, 255),
+    g: clamp(Math.round(linearToSrgb(linearG) * 255), 0, 255),
+    b: clamp(Math.round(linearToSrgb(linearB) * 255), 0, 255),
+    a: alpha
+  };
+}
+function parseCssColor(value) {
+  const normalized = value.trim();
+  if (!normalized) return null;
+  return parseHexColor(normalized) ?? parseRgbColor(normalized) ?? parseOklchColor(normalized);
+}
+function compositeColor(foreground, background) {
+  const alpha = foreground.a + background.a * (1 - foreground.a);
+  if (alpha <= 0) {
+    return { r: 0, g: 0, b: 0, a: 0 };
+  }
+  const r = (foreground.r * foreground.a + background.r * background.a * (1 - foreground.a)) / alpha;
+  const g = (foreground.g * foreground.a + background.g * background.a * (1 - foreground.a)) / alpha;
+  const b = (foreground.b * foreground.a + background.b * background.a * (1 - foreground.a)) / alpha;
+  return {
+    r: clamp(Math.round(r), 0, 255),
+    g: clamp(Math.round(g), 0, 255),
+    b: clamp(Math.round(b), 0, 255),
+    a: clamp(alpha, 0, 1)
+  };
+}
+function toHexChannel(value) {
+  return value.toString(16).padStart(2, "0");
+}
+function rgbaToHex(value) {
+  return `#${toHexChannel(value.r)}${toHexChannel(value.g)}${toHexChannel(value.b)}`;
+}
+function getFallbackPalette(isDarkMode) {
+  if (isDarkMode) {
+    return {
+      background: "#171717",
+      border: "#52525b",
+      fontFamily: "Inter Variable, sans-serif",
+      line: "#a1a1aa",
+      surface: "#262626",
+      surfaceAlt: "#3f3f46",
+      text: "#fafafa"
+    };
+  }
+  return {
+    background: "#ffffff",
+    border: "#e4e4e7",
+    fontFamily: "Inter Variable, sans-serif",
+    line: "#71717a",
+    surface: "#ffffff",
+    surfaceAlt: "#f4f4f5",
+    text: "#18181b"
+  };
+}
+function resolveColor(styles, property, fallback, background) {
+  const parsed = parseCssColor(styles.getPropertyValue(property));
+  if (!parsed) return fallback;
+  if (parsed.a < 1 && background) {
+    return rgbaToHex(compositeColor(parsed, background));
+  }
+  return rgbaToHex(parsed);
+}
+function resolvePalette(element, isDarkMode) {
+  const fallback = getFallbackPalette(isDarkMode);
+  const styles = window.getComputedStyle(element);
+  const backgroundColor = parseCssColor(styles.getPropertyValue("--card")) ?? parseCssColor(styles.getPropertyValue("--background")) ?? parseCssColor(fallback.surface);
+  return {
+    background: resolveColor(styles, "--background", fallback.background, backgroundColor),
+    border: resolveColor(styles, "--border", fallback.border, backgroundColor),
+    fontFamily: styles.getPropertyValue("font-family").trim() || fallback.fontFamily,
+    line: resolveColor(styles, "--muted-foreground", fallback.line, backgroundColor),
+    surface: resolveColor(styles, "--card", fallback.surface, backgroundColor),
+    surfaceAlt: resolveColor(styles, "--muted", fallback.surfaceAlt, backgroundColor),
+    text: resolveColor(styles, "--foreground", fallback.text, backgroundColor)
+  };
+}
+function buildThemeVariables(palette) {
+  return {
+    background: palette.background,
+    clusterBkg: palette.surfaceAlt,
+    clusterBorder: palette.border,
+    edgeLabelBackground: palette.surface,
+    fontFamily: palette.fontFamily,
+    lineColor: palette.line,
+    mainBkg: palette.surface,
+    nodeBorder: palette.border,
+    nodeTextColor: palette.text,
+    primaryBorderColor: palette.border,
+    primaryColor: palette.surfaceAlt,
+    primaryTextColor: palette.text,
+    secondaryBorderColor: palette.border,
+    secondaryColor: palette.surface,
+    secondaryTextColor: palette.text,
+    tertiaryBorderColor: palette.border,
+    tertiaryColor: palette.surface,
+    tertiaryTextColor: palette.text,
+    textColor: palette.text
+  };
+}
+async function renderMermaidDiagram({
+  code,
+  host,
+  id,
+  palette
+}) {
+  host.innerHTML = "";
+  import_mermaid.default.initialize({
+    flowchart: {
+      htmlLabels: false,
+      useMaxWidth: true
+    },
+    fontFamily: palette.fontFamily,
+    secure: [...MERMAID_SECURE_KEYS],
+    securityLevel: "strict",
+    startOnLoad: false,
+    theme: "base",
+    themeVariables: buildThemeVariables(palette)
+  });
+  const { svg } = await import_mermaid.default.render(id, code, host);
+  host.innerHTML = "";
+  return svg;
+}
+function MermaidPreviewDialog({
+  closeLabel,
+  onOpenChange,
+  open,
+  svgMarkup,
+  title
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Dialog.Root, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Dialog.Portal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Dialog.Overlay, { className: "fixed inset-0 z-50 bg-black/60 backdrop-blur-sm data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Dialog.Content, { className: "fixed inset-[5vh] z-50 flex flex-col overflow-hidden rounded-3xl border border-border bg-background shadow-2xl outline-none data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center justify-between gap-4 border-b border-border px-5 py-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Dialog.Title, { className: "text-base font-semibold text-foreground", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+          "button",
+          {
+            type: "button",
+            className: "inline-flex size-10 items-center justify-center rounded-full border border-border bg-card text-muted-foreground transition-colors hover:text-foreground",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.X, { className: "size-4" }),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "sr-only", children: closeLabel })
+            ]
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex-1 overflow-auto bg-card p-6", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        "div",
+        {
+          "data-slot": "mermaid-preview",
+          className: "min-h-full rounded-[calc(var(--radius)+0.5rem)] border border-border bg-background p-6 [&_svg]:mx-auto [&_svg]:h-auto [&_svg]:max-w-none",
+          dangerouslySetInnerHTML: { __html: svgMarkup }
+        }
+      ) })
+    ] })
+  ] }) });
+}
+function MermaidBlock({ code }) {
+  const { t } = useChatkitTranslation();
+  const { theme, isDarkMode } = useTheme();
+  const containerRef = React15.useRef(null);
+  const renderHostRef = React15.useRef(null);
+  const renderSequenceRef = React15.useRef(0);
+  const copyResetTimeoutRef = React15.useRef(null);
+  const diagramId = React15.useId().replace(/:/g, "");
+  const [activeTab, setActiveTab] = React15.useState("diagram");
+  const [isCopied, setIsCopied] = React15.useState(false);
+  const [isPreviewOpen, setIsPreviewOpen] = React15.useState(false);
+  const [isRendering, setIsRendering] = React15.useState(true);
+  const [renderError, setRenderError] = React15.useState(null);
+  const [svgMarkup, setSvgMarkup] = React15.useState(null);
+  const normalizedCode = React15.useMemo(() => normalizeMermaidCode(code), [code]);
+  const clearCopyResetTimeout = React15.useCallback(() => {
+    if (copyResetTimeoutRef.current === null) return;
+    window.clearTimeout(copyResetTimeoutRef.current);
+    copyResetTimeoutRef.current = null;
+  }, []);
+  React15.useEffect(() => {
+    let isActive = true;
+    async function runRender() {
+      const container = containerRef.current;
+      const renderHost = renderHostRef.current;
+      if (!container || !renderHost) return;
+      setIsRendering(true);
+      setRenderError(null);
+      try {
+        renderSequenceRef.current += 1;
+        const svg = await renderMermaidDiagram({
+          code: normalizedCode,
+          host: renderHost,
+          id: `mermaid-${diagramId}-${renderSequenceRef.current}`,
+          palette: resolvePalette(container, isDarkMode)
+        });
+        if (!isActive) return;
+        setSvgMarkup(svg);
+      } catch (error) {
+        if (!isActive) return;
+        setSvgMarkup(null);
+        setRenderError(error instanceof Error ? error.message : "render_failed");
+        setActiveTab((currentTab) => currentTab === "diagram" ? "code" : currentTab);
+      } finally {
+        if (isActive) {
+          setIsRendering(false);
+          renderHost.innerHTML = "";
+        }
+      }
+    }
+    void runRender();
+    return () => {
+      isActive = false;
+      if (renderHostRef.current) {
+        renderHostRef.current.innerHTML = "";
+      }
+    };
+  }, [diagramId, isDarkMode, normalizedCode, theme]);
+  React15.useEffect(() => {
+    clearCopyResetTimeout();
+    setIsCopied(false);
+  }, [activeTab, clearCopyResetTimeout, code]);
+  React15.useEffect(
+    () => () => {
+      clearCopyResetTimeout();
+    },
+    [clearCopyResetTimeout]
+  );
+  const handleDownload = React15.useCallback(() => {
+    if (!svgMarkup) return;
+    const blob = new Blob([svgMarkup], {
+      type: "image/svg+xml;charset=utf-8"
+    });
+    const url = window.URL.createObjectURL(blob);
+    const anchor = document.createElement("a");
+    anchor.href = url;
+    anchor.download = `mermaid-diagram-${diagramId}.svg`;
+    document.body.append(anchor);
+    anchor.click();
+    anchor.remove();
+    window.URL.revokeObjectURL(url);
+  }, [diagramId, svgMarkup]);
+  const handleCopyCode = React15.useCallback(() => {
+    if (!code || isCopied) return;
+    navigator.clipboard.writeText(code).then(() => {
+      setIsCopied(true);
+      clearCopyResetTimeout();
+      copyResetTimeoutRef.current = window.setTimeout(() => {
+        setIsCopied(false);
+        copyResetTimeoutRef.current = null;
+      }, 3e3);
+    }).catch(() => {
+    });
+  }, [clearCopyResetTimeout, code, isCopied]);
+  const hasRenderedDiagram = svgMarkup !== null && !renderError;
+  const statusMessage = isRendering ? t("markdown.mermaid.rendering") : t("markdown.mermaid.failed");
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      Tabs,
       {
-        variant: "ghost",
-        size: "icon",
-        ...rest,
-        className: cn("size-6 p-1", className),
-        ref,
-        children: [
-          children,
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "sr-only", children: tooltip })
-        ]
+        className: "w-full",
+        onValueChange: (value) => setActiveTab(value),
+        value: activeTab,
+        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+          "div",
+          {
+            ref: containerRef,
+            "data-slot": "mermaid-block",
+            className: "relative overflow-hidden text-card-foreground",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                "div",
+                {
+                  ref: renderHostRef,
+                  "aria-hidden": "true",
+                  className: "pointer-events-none absolute inset-0 -z-10 overflow-hidden opacity-0",
+                  "data-slot": "mermaid-render-host"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-3 px-4 py-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex min-w-0 items-center gap-3", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "inline-flex size-9 shrink-0 items-center justify-center rounded-full bg-muted text-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.Code2Icon, { className: "size-4" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "truncate text-base font-semibold text-foreground", children: t("markdown.mermaid.title") })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex shrink-0 items-center gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-1", children: [
+                    activeTab === "diagram" && hasRenderedDiagram ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                      TooltipIconButton,
+                      {
+                        onClick: handleDownload,
+                        tooltip: t("markdown.mermaid.download"),
+                        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.DownloadIcon, { className: "size-4" })
+                      }
+                    ) : null,
+                    activeTab === "diagram" && hasRenderedDiagram ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                      TooltipIconButton,
+                      {
+                        onClick: () => setIsPreviewOpen(true),
+                        tooltip: t("markdown.mermaid.fullScreen"),
+                        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.ExpandIcon, { className: "size-4" })
+                      }
+                    ) : null,
+                    activeTab === "code" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                      TooltipIconButton,
+                      {
+                        onClick: handleCopyCode,
+                        tooltip: t("markdown.copy"),
+                        children: isCopied ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.CheckIcon, { className: "size-4" }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.CopyIcon, { className: "size-4" })
+                      }
+                    ) : null
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(TabsList, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TabsTrigger, { value: "diagram", children: t("markdown.mermaid.diagram") }),
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TabsTrigger, { value: "code", children: t("markdown.mermaid.code") })
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "border-t border-border pt-4", children: [
+                renderError ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { role: "alert", className: "mb-4 text-sm font-medium text-destructive", children: t("markdown.mermaid.failed") }) : null,
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TabsContent, { value: "diagram", className: "mt-0 space-y-4", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                  "div",
+                  {
+                    className: cn(
+                      "relative overflow-auto rounded-[calc(var(--radius)+0.5rem)] border border-border bg-background p-4",
+                      hasRenderedDiagram ? "[&_svg]:mx-auto [&_svg]:h-auto [&_svg]:w-full [&_svg]:max-w-none" : "min-h-[14rem]"
+                    ),
+                    children: hasRenderedDiagram ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                      "div",
+                      {
+                        "data-slot": "mermaid-diagram",
+                        dangerouslySetInnerHTML: { __html: svgMarkup }
+                      }
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex min-h-[12rem] flex-col items-center justify-center gap-3 text-center text-muted-foreground", children: [
+                      isRendering ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.Loader2, { className: "size-5 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react7.TriangleAlert, { className: "size-5 text-destructive" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                        "p",
+                        {
+                          className: cn("text-sm font-medium", !isRendering && "text-destructive"),
+                          role: renderError ? "alert" : void 0,
+                          children: statusMessage
+                        }
+                      )
+                    ] })
+                  }
+                ) }),
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TabsContent, { value: "code", className: "mt-0", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                  "pre",
+                  {
+                    "data-slot": "mermaid-code",
+                    className: "overflow-x-auto rounded-[calc(var(--radius)+0.5rem)] border border-border bg-zinc-950 px-4 py-4 text-sm text-zinc-50",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("code", { className: "block whitespace-pre font-mono", children: code })
+                  }
+                ) })
+              ] })
+            ]
+          }
+        )
       }
-    ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TooltipContent, { side, children: tooltip })
-  ] }) });
-});
-TooltipIconButton.displayName = "TooltipIconButton";
+    ),
+    svgMarkup ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      MermaidPreviewDialog,
+      {
+        closeLabel: t("sheet.close"),
+        onOpenChange: setIsPreviewOpen,
+        open: isPreviewOpen,
+        svgMarkup,
+        title: t("markdown.mermaid.title")
+      }
+    ) : null
+  ] });
+}
 
 // src/components/thread/markdown-text.tsx
 var import_katex_min = require("katex/dist/katex.min.css");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var markdownTableMinWidth = "max(7rem, calc(8rem * var(--density-spacing, 1)))";
+var markdownTableCellPaddingInline = "calc(var(--density-padding, 1rem) * 1.25)";
+var markdownTableCellPaddingBlock = "max(0.5rem, calc(var(--density-padding, 1rem) * 0.75))";
+var markdownTableLineHeight = "max(1.375rem, calc(1.5rem * var(--density-spacing, 1)))";
+var markdownInlineCodePaddingInline = "max(0.25rem, calc(var(--density-gap, 0.5rem) * 0.75))";
+var markdownInlineCodePaddingBlock = "max(0.125rem, calc(var(--density-gap, 0.5rem) * 0.5))";
 var getTextContent = (children) => import_react6.Children.toArray(children).map((child) => {
   if (typeof child === "string" || typeof child === "number") {
     return String(child);
   }
   return "";
 }).join("");
+var isMermaidBlockChild = (child) => (0, import_react6.isValidElement)(child) && child.type === MermaidBlock;
+var isMermaidCodeElement = (child) => (0, import_react6.isValidElement)(child) && typeof child.props.className === "string" && child.props.className.includes("language-mermaid");
 var useCopyToClipboard = ({
   copiedDuration = 3e3
 } = {}) => {
@@ -2514,23 +3322,23 @@ var CodeHeader = ({ language, code }) => {
     if (!code || isCopied) return;
     copyToClipboard(code);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center justify-between gap-4 rounded-t-lg bg-zinc-900 px-4 py-2 text-sm font-semibold text-white", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "lowercase [&>span]:text-xs", children: language }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center justify-between gap-4 rounded-t-lg bg-zinc-900 px-4 py-2 text-sm font-semibold text-white", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "lowercase [&>span]:text-xs", children: language }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
       TooltipIconButton,
       {
         tooltip: t("markdown.copy"),
         onClick: onCopy,
         children: [
-          !isCopied && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react6.CopyIcon, {}),
-          isCopied && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react6.CheckIcon, {})
+          !isCopied && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.CopyIcon, {}),
+          isCopied && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react8.CheckIcon, {})
         ]
       }
     )
   ] });
 };
 var defaultComponents = {
-  h1: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  h1: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "h1",
     {
       className: cn(
@@ -2540,7 +3348,7 @@ var defaultComponents = {
       ...props
     }
   ),
-  h2: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  h2: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "h2",
     {
       className: cn(
@@ -2550,7 +3358,7 @@ var defaultComponents = {
       ...props
     }
   ),
-  h3: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  h3: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "h3",
     {
       className: cn(
@@ -2560,7 +3368,7 @@ var defaultComponents = {
       ...props
     }
   ),
-  h4: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  h4: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "h4",
     {
       className: cn(
@@ -2570,7 +3378,7 @@ var defaultComponents = {
       ...props
     }
   ),
-  h5: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  h5: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "h5",
     {
       className: cn(
@@ -2580,21 +3388,21 @@ var defaultComponents = {
       ...props
     }
   ),
-  h6: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  h6: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "h6",
     {
       className: cn("my-4 font-semibold first:mt-0 last:mb-0", className),
       ...props
     }
   ),
-  p: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  p: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "p",
     {
       className: cn("mt-5 mb-5 leading-7 first:mt-0 last:mb-0", className),
       ...props
     }
   ),
-  a: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  a: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "a",
     {
       className: cn(
@@ -2610,7 +3418,7 @@ var defaultComponents = {
     className,
     node: _node,
     ...props
-  }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "blockquote",
     {
       className: cn(
@@ -2620,21 +3428,21 @@ var defaultComponents = {
       ...props
     }
   ),
-  ul: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  ul: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "ul",
     {
       className: cn("my-5 list-outside list-disc pl-6 [&>li]:mt-2", className),
       ...props
     }
   ),
-  ol: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  ol: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "ol",
     {
       className: cn("my-5 list-outside list-decimal pl-8 [&>li]:mt-2", className),
       ...props
     }
   ),
-  hr: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  hr: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "hr",
     {
       className: cn("my-5 border-b", className),
@@ -2644,85 +3452,123 @@ var defaultComponents = {
   table: ({
     className,
     node: _node,
+    style,
     ...props
-  }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-    "table",
+  }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    "div",
     {
-      className: cn(
-        "my-5 w-full border-separate border-spacing-0 overflow-y-auto",
-        className
-      ),
-      ...props
+      "data-slot": "markdown-table-container",
+      className: "my-5 max-w-full overflow-x-auto rounded-xl border border-border bg-background",
+      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        "table",
+        {
+          className: cn(
+            "min-w-full w-max border-separate border-spacing-0 text-sm",
+            className
+          ),
+          style: {
+            lineHeight: markdownTableLineHeight,
+            ...style
+          },
+          ...props
+        }
+      )
     }
   ),
-  th: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  th: ({
+    className,
+    node: _node,
+    style,
+    ...props
+  }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "th",
     {
       className: cn(
-        "bg-muted border-border border-y border-l px-4 py-2 text-left font-bold first:rounded-tl-lg last:rounded-tr-lg last:border-r [&[align=center]]:text-center [&[align=right]]:text-right",
+        "bg-muted/80 border-border border-l text-left align-top font-semibold whitespace-normal break-words first:border-l-0 first:rounded-tl-xl last:rounded-tr-xl [&[align=center]]:text-center [&[align=right]]:text-right",
         className
       ),
+      style: {
+        minWidth: markdownTableMinWidth,
+        paddingInline: markdownTableCellPaddingInline,
+        paddingBlock: markdownTableCellPaddingBlock,
+        ...style
+      },
       ...props
     }
   ),
-  td: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  td: ({
+    className,
+    node: _node,
+    style,
+    ...props
+  }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "td",
     {
       className: cn(
-        "border-border border-b border-l px-4 py-2 text-left last:border-r [&[align=center]]:text-center [&[align=right]]:text-right",
+        "border-border border-t border-l text-left align-top whitespace-normal break-words first:border-l-0 [&[align=center]]:text-center [&[align=right]]:text-right [&_code]:break-words [&_code]:whitespace-pre-wrap [&_code]:[overflow-wrap:anywhere]",
         className
       ),
+      style: {
+        minWidth: markdownTableMinWidth,
+        paddingInline: markdownTableCellPaddingInline,
+        paddingBlock: markdownTableCellPaddingBlock,
+        ...style
+      },
       ...props
     }
   ),
-  tr: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  tr: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "tr",
     {
       className: cn(
-        "m-0 p-0 even:bg-muted/50 [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg",
+        "m-0 p-0 even:bg-muted/30 [&:last-child>td:first-child]:rounded-bl-xl [&:last-child>td:last-child]:rounded-br-xl",
         className
       ),
       ...props
     }
   ),
-  sup: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  sup: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "sup",
     {
       className: cn("[&>a]:text-xs [&>a]:no-underline", className),
       ...props
     }
   ),
-  pre: ({ className, node: _node, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  pre: ({ className, children, node: _node }) => import_react6.Children.toArray(children).length === 1 && (isMermaidBlockChild(import_react6.Children.toArray(children)[0]) || isMermaidCodeElement(import_react6.Children.toArray(children)[0])) ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_jsx_runtime20.Fragment, { children }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "div",
     {
       className: cn(
         "max-w-4xl overflow-x-auto rounded-lg text-sm bg-black text-white dark:bg-zinc-800",
         className
       ),
-      ...props
+      children
     }
   ),
   code: ({
     className,
     children,
     node: _node,
+    style,
     ...props
   }) => {
-    const match = /language-(\w+)/.exec(className || "");
+    const match = /language-([\w-]+)/.exec(className || "");
     const code = getTextContent(children);
     const isBlockCode = code.includes("\n");
     if (match) {
       const language = match[1];
       const normalizedCode = code.replace(/\n$/, "");
-      return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      if (language === "mermaid") {
+        return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MermaidBlock, { code: normalizedCode });
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           CodeHeader,
           {
             language,
             code: normalizedCode
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           SyntaxHighlighter,
           {
             language,
@@ -2733,7 +3579,7 @@ var defaultComponents = {
       ] });
     }
     if (isBlockCode) {
-      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         "code",
         {
           className: cn(
@@ -2745,13 +3591,18 @@ var defaultComponents = {
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       "code",
       {
         className: cn(
-          "bg-muted rounded px-1.5 py-0.5 font-mono text-[0.9em] font-semibold break-all",
+          "bg-muted rounded font-mono text-[0.9em] font-semibold whitespace-pre-wrap [overflow-wrap:anywhere]",
           className
         ),
+        style: {
+          paddingInline: markdownInlineCodePaddingInline,
+          paddingBlock: markdownInlineCodePaddingBlock,
+          ...style
+        },
         ...props,
         children
       }
@@ -2759,7 +3610,7 @@ var defaultComponents = {
   }
 };
 var MarkdownTextImpl = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "markdown-content", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "markdown-content", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     import_react_markdown.default,
     {
       remarkPlugins: [import_remark_gfm.default, import_remark_math.default],
@@ -2773,18 +3624,18 @@ var MarkdownText = (0, import_react6.memo)(MarkdownTextImpl);
 
 // src/components/thread/messages/widget.tsx
 var import_a2ui_react = require("@xpert-ai/a2ui-react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function WidgetMessage({ messageId, data }) {
   const widgets = Array.isArray(data.widgets) ? data.widgets : [];
   if (widgets.length === 0) return null;
   const baseSurfaceId = `widget-${messageId}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "space-y-3", children: widgets.map((widget, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "space-y-3", children: widgets.map((widget, index) => {
     const config = widget?.config;
     if (!config || typeof config !== "object") {
       return null;
     }
     const surfaceId = widgets.length > 1 ? `${baseSurfaceId}-${index}` : baseSurfaceId;
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       import_a2ui_react.SurfaceRenderer,
       {
         surfaceId,
@@ -2796,7 +3647,7 @@ function WidgetMessage({ messageId, data }) {
 }
 
 // src/components/thread/messages/ai.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function isTextContent(content) {
   return content.type === "text";
 }
@@ -2812,15 +3663,15 @@ function isComponentContent(content) {
 var statusConfig = {
   success: {
     iconClass: "border-green-500 text-green-700",
-    icon: import_lucide_react7.CheckCircle2
+    icon: import_lucide_react9.CheckCircle2
   },
   fail: {
     iconClass: "border-red-500 text-red-700",
-    icon: import_lucide_react7.XCircle
+    icon: import_lucide_react9.XCircle
   },
   running: {
     iconClass: "border-blue-500 text-blue-700",
-    icon: import_lucide_react7.Loader2
+    icon: import_lucide_react9.Loader2
   }
 };
 function isWidgetComponent(content) {
@@ -2837,14 +3688,17 @@ function safeJson(value) {
     return String(value);
   }
 }
+function formatDisplayValue(value) {
+  return typeof value === "string" ? value : safeJson(value);
+}
 function ReasoningBlock({ reasoning }) {
   const blocks = reasoning.filter((item) => item.text?.trim());
   if (blocks.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "space-y-2", children: blocks.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "space-y-2", children: blocks.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "div",
     {
       className: "rounded-lg border bg-muted/40 p-3 text-xs text-muted-foreground",
-      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "whitespace-pre-wrap wrap-break-word leading-relaxed", children: item.text })
+      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "whitespace-pre-wrap wrap-break-word leading-relaxed", children: item.text })
     },
     item.id ?? `reasoning-${index}`
   )) });
@@ -2852,27 +3706,57 @@ function ReasoningBlock({ reasoning }) {
 function ImageBlock({ content }) {
   const imageUrl = typeof content.image_url === "string" ? content.image_url : typeof content.image_url?.url === "string" ? content.image_url.url : null;
   if (!imageUrl) {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Card, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CardHeader, { className: "space-y-1", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CardTitle, { className: "text-sm", children: "Image" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CardContent, { className: "text-xs text-muted-foreground", children: safeJson(content) })
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Card, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CardHeader, { className: "space-y-1", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CardTitle, { className: "text-sm", children: "Image" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CardContent, { className: "text-xs text-muted-foreground", children: safeJson(content) })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("figure", { className: "overflow-hidden rounded-lg border bg-background", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("img", { src: imageUrl, alt: "Assistant output", className: "h-auto w-full object-cover" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("figure", { className: "overflow-hidden rounded-lg border bg-background", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("img", { src: imageUrl, alt: "Assistant output", className: "h-auto w-full object-cover" }) });
 }
 function MemoryBlock({ content }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Card, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(CardHeader, { className: "flex flex-row items-center justify-between gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CardTitle, { className: "text-sm", children: "Memory" }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Badge, { variant: "secondary", children: "Memory" })
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Card, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(CardHeader, { className: "flex flex-row items-center justify-between gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CardTitle, { className: "text-sm", children: "Memory" }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Badge, { variant: "secondary", children: "Memory" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CardContent, { className: "text-xs text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("pre", { className: "whitespace-pre-wrap wrap-break-word", children: safeJson(content.data ?? []) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CardContent, { className: "text-xs text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("pre", { className: "whitespace-pre-wrap wrap-break-word", children: safeJson(content.data ?? []) }) })
   ] });
 }
+function parseStepDate(value) {
+  if (value instanceof Date) {
+    const timestamp2 = value.getTime();
+    return Number.isNaN(timestamp2) ? null : timestamp2;
+  }
+  if (typeof value !== "string") {
+    return null;
+  }
+  const timestamp = Date.parse(value);
+  return Number.isNaN(timestamp) ? null : timestamp;
+}
+function formatStepDuration(durationMs) {
+  if (durationMs < 1e3) {
+    return `${durationMs}ms`;
+  }
+  if (durationMs < 1e4) {
+    return `${(durationMs / 1e3).toFixed(1)}s`;
+  }
+  if (durationMs < 6e4) {
+    return `${Math.round(durationMs / 1e3)}s`;
+  }
+  const hours = Math.floor(durationMs / 36e5);
+  const minutes = Math.floor(durationMs % 36e5 / 6e4);
+  const seconds = Math.floor(durationMs % 6e4 / 1e3);
+  if (hours > 0) {
+    return `${hours}h ${minutes}m ${seconds}s`;
+  }
+  return `${minutes}m ${seconds}s`;
+}
 function ComponentBlock({ content }) {
-  const [isExpanded, setIsExpanded] = React14.useState(false);
-  const contentRef = React14.useRef(null);
-  const shouldAutoScrollRef = React14.useRef(true);
-  const previousScrollTopRef = React14.useRef(0);
+  const [isExpanded, setIsExpanded] = React16.useState(false);
+  const contentRef = React16.useRef(null);
+  const shouldAutoScrollRef = React16.useRef(true);
+  const previousScrollTopRef = React16.useRef(0);
+  const [durationNow, setDurationNow] = React16.useState(() => Date.now());
   const data = content.data ?? {};
   const category = data.category ?? "Component";
   const title = data.tool && category === "Tool" ? data.tool : data.title ?? data.type ?? "Component";
@@ -2880,12 +3764,28 @@ function ComponentBlock({ content }) {
   const message = data.message ?? null;
   const output = data.output ?? null;
   const error = data.error ?? null;
-  const fallback = message ?? output ?? safeJson(data.data ?? data);
+  const fallback = message ?? output ?? data.data ?? data;
   const hasOutput = message !== null || output !== null;
-  React14.useEffect(() => {
+  const createdAt = parseStepDate(data.created_date);
+  const endedAt = parseStepDate(data.end_date);
+  const durationMs = createdAt === null ? null : Math.max(0, (endedAt ?? durationNow) - createdAt);
+  const durationLabel = durationMs === null ? null : formatStepDuration(durationMs);
+  React16.useEffect(() => {
     if (status === "running" && output !== null) setIsExpanded(true);
   }, [status, output]);
-  React14.useEffect(() => {
+  React16.useEffect(() => {
+    if (status !== "running" || createdAt === null || endedAt !== null) {
+      return;
+    }
+    setDurationNow(Date.now());
+    const timer = window.setInterval(() => {
+      setDurationNow(Date.now());
+    }, 100);
+    return () => {
+      window.clearInterval(timer);
+    };
+  }, [createdAt, endedAt, status]);
+  React16.useEffect(() => {
     const element = contentRef.current;
     if (!element) return;
     previousScrollTopRef.current = element.scrollTop;
@@ -2905,7 +3805,7 @@ function ComponentBlock({ content }) {
       element.removeEventListener("scroll", updateAutoScrollState);
     };
   }, [isExpanded]);
-  React14.useEffect(() => {
+  React16.useEffect(() => {
     if (status !== "running") {
       shouldAutoScrollRef.current = true;
       return;
@@ -2918,21 +3818,25 @@ function ComponentBlock({ content }) {
   }, [isExpanded, output, status]);
   const config = status ? statusConfig[status] : null;
   const StatusIcon = config?.icon;
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Card, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(CardHeader, { className: "flex flex-row items-center justify-between gap-2 px-2 py-1 cursor-pointer", onClick: () => setIsExpanded(!isExpanded), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center space-x-1 flex-1 min-w-0", children: [
-        status && StatusIcon && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(StatusIcon, { className: cn("h-4 w-4", config?.iconClass, status === "running" && "animate-spin") }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CardTitle, { className: "text-sm truncate", children: title })
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Card, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(CardHeader, { className: "flex flex-row items-center justify-between gap-2 px-2 py-1 cursor-pointer", onClick: () => setIsExpanded(!isExpanded), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center space-x-1 flex-1 min-w-0", children: [
+        status && StatusIcon && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StatusIcon, { className: cn("h-4 w-4", config?.iconClass, status === "running" && "animate-spin") }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CardTitle, { className: "text-sm truncate", children: title })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex flex-wrap items-center gap-2 shrink-0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Badge, { variant: "secondary", className: "rounded-lg px-1.5", children: category }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-wrap items-center gap-2 shrink-0", children: [
+        durationLabel && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "inline-flex items-center gap-1 text-[11px] text-muted-foreground tabular-nums", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react9.Clock3, { className: "h-3 w-3" }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: durationLabel })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Badge, { variant: "secondary", className: "rounded-lg px-1.5", children: category }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "button",
           {
             className: "text-muted-foreground hover:text-foreground transition-colors",
             "aria-label": isExpanded ? "Collapse" : "Expand",
-            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-              import_lucide_react7.ChevronDown,
+            children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              import_lucide_react9.ChevronDown,
               {
                 className: cn("h-4 w-4 transition-transform", isExpanded && "rotate-180")
               }
@@ -2941,55 +3845,55 @@ function ComponentBlock({ content }) {
         )
       ] })
     ] }),
-    isExpanded && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(CardContent, { ref: contentRef, className: "text-xs text-muted-foreground max-h-60 overflow-auto", children: [
-      data.input && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("pre", { className: "whitespace-pre-wrap wrap-break-word", children: JSON.stringify(data.input, null, 2) }),
-      error ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("pre", { className: "whitespace-pre-wrap wrap-break-word text-destructive", children: typeof error === "string" ? error : safeJson(error) }) : hasOutput && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("pre", { className: "whitespace-pre-wrap wrap-break-word", children: fallback })
+    isExpanded && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(CardContent, { ref: contentRef, className: "text-xs text-muted-foreground max-h-60 overflow-auto", children: [
+      data.input && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("pre", { className: "whitespace-pre-wrap wrap-break-word", children: formatDisplayValue(data.input) }),
+      error ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("pre", { className: "whitespace-pre-wrap wrap-break-word text-destructive", children: formatDisplayValue(error) }) : hasOutput && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("pre", { className: "whitespace-pre-wrap wrap-break-word", children: formatDisplayValue(fallback) })
     ] })
   ] });
 }
 function UnknownBlock({ content }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Card, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(CardHeader, { className: "flex flex-row items-center justify-between gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CardTitle, { className: "text-sm", children: "Assistant Content" }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Badge, { variant: "outline", children: content.type ?? "unknown" })
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Card, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(CardHeader, { className: "flex flex-row items-center justify-between gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CardTitle, { className: "text-sm", children: "Assistant Content" }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Badge, { variant: "outline", children: content.type ?? "unknown" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(CardContent, { className: "text-xs text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("pre", { className: "whitespace-pre-wrap break-words", children: safeJson(content) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CardContent, { className: "text-xs text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("pre", { className: "whitespace-pre-wrap break-words", children: safeJson(content) }) })
   ] });
 }
 function renderContentItem(content, index, messageId) {
   if (typeof content === "string") {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MarkdownText, { children: content }),
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(MarkdownText, { children: content }),
       ";"
     ] }, `text-${index}`);
   }
   if (isTextContent(content)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MarkdownText, { children: content.text }) }, content.id ?? `text-${index}`);
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(MarkdownText, { children: content.text }) }, content.id ?? `text-${index}`);
   }
   if (isReasoningContent(content)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ReasoningBlock, { reasoning: [content] }) }, content.id ?? `reasoning-${index}`);
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ReasoningBlock, { reasoning: [content] }) }, content.id ?? `reasoning-${index}`);
   }
   if (isImageContent(content)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ImageBlock, { content }) }, content.id ?? `image-${index}`);
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ImageBlock, { content }) }, content.id ?? `image-${index}`);
   }
   if (isComponentContent(content)) {
     if (isWidgetComponent(content)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(WidgetMessage, { messageId, data: content.data }) }, content.id ?? `widget-${index}`);
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(WidgetMessage, { messageId, data: content.data }) }, content.id ?? `widget-${index}`);
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ComponentBlock, { content }) }, content.id ?? `component-${index}`);
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ComponentBlock, { content }) }, content.id ?? `component-${index}`);
   }
   if (isMemoryContent(content)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MemoryBlock, { content }) }, content.id ?? `memory-${index}`);
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(MemoryBlock, { content }) }, content.id ?? `memory-${index}`);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(UnknownBlock, { content }) }, content.id ?? `unknown-${index}`);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(UnknownBlock, { content }) }, content.id ?? `unknown-${index}`);
 }
 function renderContent(content, messageId) {
   if (typeof content === "string") {
     if (!content.trim()) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MarkdownText, { children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(MarkdownText, { children: content });
   }
   if (!Array.isArray(content) || content.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "space-y-3", children: content.map((item, index) => renderContentItem(item, index, messageId)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "space-y-3", children: content.map((item, index) => renderContentItem(item, index, messageId)) });
 }
 function AssistantStreamingIndicator({
   status,
@@ -3001,19 +3905,19 @@ function AssistantStreamingIndicator({
     thinking: t("message.thinking"),
     answering: t("message.answering")
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cn("flex items-center gap-2 text-xs text-muted-foreground", className), children: [
-    status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react7.Loader2, { className: "h-3.5 w-3.5 animate-spin" }),
-    status === "thinking" && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-end gap-1", "aria-hidden": "true", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-current animate-bounce [animation-delay:-0.3s]" }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-current animate-bounce [animation-delay:-0.15s]" }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-current animate-bounce" })
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cn("flex items-center gap-2 text-xs text-muted-foreground", className), children: [
+    status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react9.Loader2, { className: "h-3.5 w-3.5 animate-spin" }),
+    status === "thinking" && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-end gap-1", "aria-hidden": "true", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-current animate-bounce [animation-delay:-0.3s]" }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-current animate-bounce [animation-delay:-0.15s]" }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-current animate-bounce" })
     ] }),
-    status === "answering" && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-end gap-1", "aria-hidden": "true", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "h-2 w-0.5 rounded-full bg-current animate-pulse [animation-delay:-0.25s]" }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "h-3 w-0.5 rounded-full bg-current animate-pulse [animation-delay:-0.1s]" }),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "h-2.5 w-0.5 rounded-full bg-current animate-pulse" })
+    status === "answering" && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-end gap-1", "aria-hidden": "true", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "h-2 w-0.5 rounded-full bg-current animate-pulse [animation-delay:-0.25s]" }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "h-3 w-0.5 rounded-full bg-current animate-pulse [animation-delay:-0.1s]" }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "h-2.5 w-0.5 rounded-full bg-current animate-pulse" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: labelMap[status] })
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: labelMap[status] })
   ] });
 }
 function AssistantMessage({
@@ -3027,42 +3931,42 @@ function AssistantMessage({
   const hasReasoning = hasRenderableReasoning(message.reasoning);
   const resolvedStreamingStatus = streamingStatus ?? getAssistantStreamingStatus(message, isStreaming);
   const answerNode = renderContent(message.content, message.id);
-  const reasoningNode = hasReasoning ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ReasoningBlock, { reasoning: message.reasoning ?? [] }) : null;
+  const reasoningNode = hasReasoning ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ReasoningBlock, { reasoning: message.reasoning ?? [] }) : null;
   if (!hasRenderableAssistantMessage(message) && !resolvedStreamingStatus) return null;
   const streamingClass = isStreaming ? "streaming-active" : "";
   if (!hasRenderableAssistantMessage(message) && resolvedStreamingStatus) {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: cn("space-y-3", streamingClass, className), children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AssistantStreamingIndicator, { status: resolvedStreamingStatus }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cn("space-y-3", streamingClass, className), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(AssistantStreamingIndicator, { status: resolvedStreamingStatus }) });
   }
   if (hasContent && hasReasoning) {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cn("space-y-3", streamingClass, className), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cn("space-y-3", streamingClass, className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
         Tabs,
         {
           defaultValue: message.status === "reasoning" ? "reasoning" : "answer",
           className: "w-full",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(TabsList, { className: "h-9", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TabsTrigger, { value: "answer", children: t("message.answer") }),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TabsTrigger, { value: "reasoning", children: t("message.reasoning") })
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(TabsList, { className: "", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TabsTrigger, { value: "answer", children: t("message.answer") }),
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TabsTrigger, { value: "reasoning", children: t("message.reasoning") })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TabsContent, { value: "answer", className: "space-y-3", children: answerNode }),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TabsContent, { value: "reasoning", className: "space-y-3", children: reasoningNode })
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TabsContent, { value: "answer", className: "space-y-3", children: answerNode }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TabsContent, { value: "reasoning", className: "space-y-3", children: reasoningNode })
           ]
         }
       ),
-      resolvedStreamingStatus ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AssistantStreamingIndicator, { status: resolvedStreamingStatus }) : null
+      resolvedStreamingStatus ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(AssistantStreamingIndicator, { status: resolvedStreamingStatus }) : null
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cn("space-y-3", streamingClass, className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cn("space-y-3", streamingClass, className), children: [
     hasReasoning ? reasoningNode : answerNode,
-    resolvedStreamingStatus ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(AssistantStreamingIndicator, { status: resolvedStreamingStatus }) : null
+    resolvedStreamingStatus ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(AssistantStreamingIndicator, { status: resolvedStreamingStatus }) : null
   ] });
 }
 
 // src/components/thread/MessageActions.tsx
-var React15 = __toESM(require("react"), 1);
-var import_lucide_react8 = require("lucide-react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var React17 = __toESM(require("react"), 1);
+var import_lucide_react10 = require("lucide-react");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function MessageActions({
   content,
   isAssistant = false,
@@ -3071,7 +3975,7 @@ function MessageActions({
   className
 }) {
   const { t } = useChatkitTranslation();
-  const [copied, setCopied] = React15.useState(false);
+  const [copied, setCopied] = React17.useState(false);
   const handleCopy = async () => {
     try {
       await navigator.clipboard.writeText(content);
@@ -3084,7 +3988,7 @@ function MessageActions({
   if (isStreaming) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     "div",
     {
       className: cn(
@@ -3092,7 +3996,7 @@ function MessageActions({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           "button",
           {
             type: "button",
@@ -3102,17 +4006,17 @@ function MessageActions({
               copied && "text-green-500"
             ),
             title: copied ? t("messageActions.copied") : t("messageActions.copy"),
-            children: copied ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react8.Check, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react8.Copy, { size: 14 })
+            children: copied ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react10.Check, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react10.Copy, { size: 14 })
           }
         ),
-        isAssistant && onRetry && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        isAssistant && onRetry && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           "button",
           {
             type: "button",
             onClick: onRetry,
             className: "p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors",
             title: t("messageActions.regenerate"),
-            children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react8.RefreshCw, { size: 14 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react10.RefreshCw, { size: 14 })
           }
         )
       ]
@@ -3121,20 +4025,20 @@ function MessageActions({
 }
 
 // src/components/thread/StartScreen.tsx
-var React16 = require("react");
-var import_lucide_react9 = require("lucide-react");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var React18 = require("react");
+var import_lucide_react11 = require("lucide-react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function getIconComponent2(icon) {
   const iconMap = {
-    "circle-question": /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react9.HelpCircle, { size: 20 }),
-    "lightbulb": /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react9.Lightbulb, { size: 20 }),
-    "sparkle": /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react9.Sparkles, { size: 20 }),
-    "write": /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react9.Pencil, { size: 20 }),
-    "search": /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react9.Search, { size: 20 }),
-    "globe": /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react9.Globe, { size: 20 }),
-    "book-open": /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react9.BookOpen, { size: 20 }),
-    "compass": /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react9.Compass, { size: 20 }),
-    "bolt": /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react9.Zap, { size: 20 })
+    "circle-question": /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.HelpCircle, { size: 20 }),
+    "lightbulb": /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.Lightbulb, { size: 20 }),
+    "sparkle": /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.Sparkles, { size: 20 }),
+    "write": /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.Pencil, { size: 20 }),
+    "search": /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.Search, { size: 20 }),
+    "globe": /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.Globe, { size: 20 }),
+    "book-open": /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.BookOpen, { size: 20 }),
+    "compass": /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.Compass, { size: 20 }),
+    "bolt": /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.Zap, { size: 20 })
   };
   return icon ? iconMap[icon] || iconMap["sparkle"] : iconMap["sparkle"];
 }
@@ -3142,9 +4046,9 @@ function StartScreen({ startScreen, onPromptClick, className }) {
   const { t } = useChatkitTranslation();
   const greeting = startScreen?.greeting ?? t("startScreen.greeting");
   const prompts = startScreen?.prompts ?? [];
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cn("flex flex-col items-center justify-center py-12 px-4", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "mb-8 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h2", { className: "text-2xl font-semibold text-foreground mb-2", children: greeting }) }),
-    prompts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: prompts.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: cn("flex flex-col items-center justify-center py-12 px-4", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "mb-8 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h2", { className: "text-2xl font-semibold text-foreground mb-2", children: greeting }) }),
+    prompts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: prompts.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
       "button",
       {
         type: "button",
@@ -3155,8 +4059,8 @@ function StartScreen({ startScreen, onPromptClick, className }) {
           "focus:outline-none focus:ring-2 focus:ring-primary/20"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary", children: getIconComponent2(item.icon) }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-sm font-medium text-foreground", children: item.label })
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary", children: getIconComponent2(item.icon) }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-sm font-medium text-foreground", children: item.label })
         ]
       },
       `prompt-${index}`
@@ -3165,13 +4069,13 @@ function StartScreen({ startScreen, onPromptClick, className }) {
 }
 
 // src/components/ui/chatkit-avatar.tsx
-var React18 = require("react");
+var React20 = require("react");
 
 // src/components/ui/avatar.tsx
-var React17 = __toESM(require("react"), 1);
+var React19 = __toESM(require("react"), 1);
 var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"), 1);
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var Avatar = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var Avatar = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
   AvatarPrimitive.Root,
   {
     ref,
@@ -3183,7 +4087,7 @@ var Avatar = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   }
 ));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+var AvatarImage = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
   AvatarPrimitive.Image,
   {
     ref,
@@ -3192,7 +4096,7 @@ var AvatarImage = React17.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+var AvatarFallback = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
   AvatarPrimitive.Fallback,
   {
     ref,
@@ -3206,7 +4110,7 @@ var AvatarFallback = React17.forwardRef(({ className, ...props }, ref) => /* @__
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
 // src/components/ui/chatkit-avatar.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function asRecord(value) {
   return value && typeof value === "object" ? value : null;
 }
@@ -3279,21 +4183,21 @@ function ChatkitAvatar({
   const fallbackStyle = {
     ...avatar?.background ? { background: avatar.background } : {}
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Avatar, { className: cn(roundedClass, className), style, ...props, children: [
-    avatar?.url ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AvatarImage, { className: imageClassName, src: avatar.url, alt: label }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Avatar, { className: cn(roundedClass, className), style, ...props, children: [
+    avatar?.url ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(AvatarImage, { className: imageClassName, src: avatar.url, alt: label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       AvatarFallback,
       {
         className: cn(roundedClass, "text-sm font-medium text-foreground", fallbackClassName),
         style: fallbackStyle,
-        children: emojiCharacter ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-[1.1em] leading-none", style: emojiStyle, children: emojiCharacter }) : fallbackText
+        children: emojiCharacter ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-[1.1em] leading-none", style: emojiStyle, children: emojiCharacter }) : fallbackText
       }
     )
   ] });
 }
 
 // src/hooks/useThreads.ts
-var React19 = __toESM(require("react"), 1);
+var React21 = __toESM(require("react"), 1);
 var DEFAULT_LIMIT = 50;
 var getThreadTitle = (threadRecord) => {
   const title = threadRecord.title?.trim();
@@ -3331,16 +4235,16 @@ function useThreads(limit = DEFAULT_LIMIT) {
     isReady,
     isLoading: isStreamLoading
   } = useStreamContext();
-  const [threadRecords, setThreadRecords] = React19.useState([]);
-  const [isLoading, setIsLoading] = React19.useState(false);
-  const [error, setError] = React19.useState(null);
-  const upsertThreadRecord = React19.useCallback((threadRecord) => {
+  const [threadRecords, setThreadRecords] = React21.useState([]);
+  const [isLoading, setIsLoading] = React21.useState(false);
+  const [error, setError] = React21.useState(null);
+  const upsertThreadRecord = React21.useCallback((threadRecord) => {
     setThreadRecords((prev) => {
       const next = prev.filter((item) => item.id !== threadRecord.id);
       return sortThreadRecords([threadRecord, ...next]);
     });
   }, []);
-  const refreshThreads = React19.useCallback(async () => {
+  const refreshThreads = React21.useCallback(async () => {
     setIsLoading(true);
     setError(null);
     try {
@@ -3356,7 +4260,7 @@ function useThreads(limit = DEFAULT_LIMIT) {
       setIsLoading(false);
     }
   }, [client, limit, assistantId]);
-  const createThread = React19.useCallback(
+  const createThread = React21.useCallback(
     async (input) => {
       setError(null);
       const payload = {};
@@ -3370,7 +4274,7 @@ function useThreads(limit = DEFAULT_LIMIT) {
     },
     [client, upsertThreadRecord]
   );
-  const updateThread = React19.useCallback(
+  const updateThread = React21.useCallback(
     async (recordId, payload) => {
       setError(null);
       const updated = await client.conversations.update(recordId, payload);
@@ -3379,7 +4283,7 @@ function useThreads(limit = DEFAULT_LIMIT) {
     },
     [client, upsertThreadRecord]
   );
-  const deleteThread = React19.useCallback(
+  const deleteThread = React21.useCallback(
     async (recordId) => {
       setError(null);
       await client.conversations.delete(recordId);
@@ -3387,23 +4291,24 @@ function useThreads(limit = DEFAULT_LIMIT) {
     },
     [client]
   );
-  React19.useEffect(() => {
+  React21.useEffect(() => {
     if (!isReady) return;
     void refreshThreads();
   }, [refreshThreads, isReady]);
-  React19.useEffect(() => {
+  React21.useEffect(() => {
     if (!threadId || !isStreamLoading) return;
     const now = (/* @__PURE__ */ new Date()).toISOString();
+    const busyStatus = "busy";
     setThreadRecords((prev) => {
       let changed = false;
       const next = prev.map((item) => {
         const isCurrentThread = item.threadId === threadId || item.id === threadId;
         if (!isCurrentThread) return item;
-        if (item.status === "busy" && !item.error) return item;
+        if (item.status === busyStatus && !item.error) return item;
         changed = true;
         return {
           ...item,
-          status: "busy",
+          status: busyStatus,
           error: void 0,
           updatedAt: now
         };
@@ -3411,7 +4316,7 @@ function useThreads(limit = DEFAULT_LIMIT) {
       return changed ? sortThreadRecords(next) : prev;
     });
   }, [threadId, isStreamLoading]);
-  React19.useEffect(() => {
+  React21.useEffect(() => {
     if (!isReady || !threadId || isStreamLoading) return;
     let cancelled = false;
     void client.conversations.search({ where: { threadId }, limit: 1 }).then((result) => {
@@ -3425,7 +4330,7 @@ function useThreads(limit = DEFAULT_LIMIT) {
       cancelled = true;
     };
   }, [client, threadId, upsertThreadRecord, isReady, isStreamLoading]);
-  const threads = React19.useMemo(
+  const threads = React21.useMemo(
     () => threadRecords.map((threadRecord) => toThreadItem(threadRecord)),
     [threadRecords]
   );
@@ -3442,22 +4347,22 @@ function useThreads(limit = DEFAULT_LIMIT) {
 }
 
 // src/components/thread/context-usage-indicator.tsx
-var React20 = __toESM(require("react"), 1);
+var React22 = __toESM(require("react"), 1);
 
 // src/components/ui/progress-circle.tsx
-var import_jsx_runtime25 = (
+var import_jsx_runtime27 = (
   // biome-ignore lint/a11y/useFocusableInteractive: false positive (progress + progressbar are not focusable interactives)
   // biome-ignore lint/nursery/useAriaPropsSupportedByRole: biome rule at odds with mdn docs (presumed nursary bug with rule)
   require("react/jsx-runtime")
 );
-function clamp(input, a, b) {
+function clamp2(input, a, b) {
   return Math.max(Math.min(input, Math.max(a, b)), Math.min(a, b));
 }
 var size = 24;
 var strokeWidth = 4;
 var total = 100;
 var ProgressCircle = ({ value, className, ...restSvgProps }) => {
-  const normalizedValue = clamp(value, 0, total);
+  const normalizedValue = clamp2(value, 0, total);
   const radius = (size - strokeWidth) / 2;
   const circumference = 2 * Math.PI * radius;
   const progress = normalizedValue / total * circumference;
@@ -3469,7 +4374,7 @@ var ProgressCircle = ({ value, className, ...restSvgProps }) => {
     fill: "none",
     strokeWidth
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     "svg",
     {
       role: "progressbar",
@@ -3480,8 +4385,8 @@ var ProgressCircle = ({ value, className, ...restSvgProps }) => {
       "aria-valuemax": 100,
       ...restSvgProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("circle", { ...commonParams, className: "stroke-current/25" }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("circle", { ...commonParams, className: "stroke-current/25" }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "circle",
           {
             ...commonParams,
@@ -3499,7 +4404,7 @@ var ProgressCircle = ({ value, className, ...restSvgProps }) => {
 };
 
 // src/components/thread/context-usage-indicator.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var kNumberFormatter = new Intl.NumberFormat("en-US", {
   minimumFractionDigits: 0,
   maximumFractionDigits: 1
@@ -3532,20 +4437,20 @@ function ContextUsageIndicator({
 }) {
   const { t } = useChatkitTranslation();
   const stream = useStreamContext();
-  const [maxContextSize, setMaxContextSize] = React20.useState(null);
-  const [usedContextSize, setUsedContextSize] = React20.useState(null);
-  const [assistantAgentKey, setAssistantAgentKey] = React20.useState(null);
-  const latestRealtimeUsageRef = React20.useRef({
+  const [maxContextSize, setMaxContextSize] = React22.useState(null);
+  const [usedContextSize, setUsedContextSize] = React22.useState(null);
+  const [assistantAgentKey, setAssistantAgentKey] = React22.useState(null);
+  const latestRealtimeUsageRef = React22.useRef({
     threadId: null,
     agentKey: null,
     usedTokens: null
   });
-  const realtimeUsage = React20.useMemo(
+  const realtimeUsage = React22.useMemo(
     () => getThreadContextUsage(stream.contextUsageByAgentKey, assistantAgentKey),
     [assistantAgentKey, stream.contextUsageByAgentKey]
   );
   const realtimeUsedContextSize = getThreadContextUsageTotalTokens(realtimeUsage);
-  React20.useEffect(() => {
+  React22.useEffect(() => {
     if (!stream.client || !stream.assistantId) {
       setMaxContextSize(null);
       setAssistantAgentKey(null);
@@ -3565,18 +4470,18 @@ function ContextUsageIndicator({
       cancelled = true;
     };
   }, [stream.client, stream.assistantId]);
-  React20.useEffect(() => {
+  React22.useEffect(() => {
     latestRealtimeUsageRef.current = {
       threadId: stream.threadId ?? null,
       agentKey: assistantAgentKey,
       usedTokens: realtimeUsedContextSize
     };
   }, [assistantAgentKey, realtimeUsedContextSize, stream.threadId]);
-  React20.useEffect(() => {
+  React22.useEffect(() => {
     if (realtimeUsedContextSize == null) return;
     setUsedContextSize(realtimeUsedContextSize);
   }, [realtimeUsedContextSize]);
-  React20.useEffect(() => {
+  React22.useEffect(() => {
     if (!stream.client) {
       setUsedContextSize(null);
       return;
@@ -3641,8 +4546,8 @@ function ContextUsageIndicator({
   });
   const usageLabelWithSuffix = usageLabel.endsWith(":") ? usageLabel : `${usageLabel}:`;
   const progressClassName = percent >= 90 ? "text-destructive" : percent >= 75 ? "text-amber-500" : "text-primary dark:text-zinc-300";
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Tooltip, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       "button",
       {
         type: "button",
@@ -3651,22 +4556,74 @@ function ContextUsageIndicator({
           className
         ),
         "aria-label": `${usageLabelWithSuffix} ${usageFullLabel}. ${usageTokensLabel}`,
-        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ProgressCircle, { value: percent, className: cn("size-3.5", progressClassName) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ProgressCircle, { value: percent, className: cn("size-3.5", progressClassName) })
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(TooltipContent, { side: "top", sideOffset: 6, className: "space-y-0.5 px-3 py-2 text-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "text-primary-foreground/70", children: usageLabelWithSuffix }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "font-medium text-primary-foreground/80", children: usageFullLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "text-sm font-semibold", children: usageTokensLabel })
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(TooltipContent, { side: "top", sideOffset: 6, className: "space-y-0.5 px-3 py-2 text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "text-primary-foreground/70", children: usageLabelWithSuffix }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "font-medium text-primary-foreground/80", children: usageFullLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "text-sm font-semibold", children: usageTokensLabel })
     ] })
   ] });
 }
 
 // src/components/chat.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var import_meta2 = {};
 var defaultApiUrl2 = import_meta2.env.VITE_XPERTAI_API_URL;
 var COMPOSER_INPUT_MAX_HEIGHT = 128;
+var LONG_TEXT_REFERENCE_THRESHOLD = 5e3;
+async function readImageDimensions(file) {
+  if (typeof window === "undefined" || typeof URL === "undefined") {
+    return {};
+  }
+  return new Promise((resolve) => {
+    const objectUrl = URL.createObjectURL(file);
+    const image = new window.Image();
+    const cleanup = () => {
+      URL.revokeObjectURL(objectUrl);
+    };
+    image.onload = () => {
+      resolve({
+        width: image.naturalWidth || void 0,
+        height: image.naturalHeight || void 0
+      });
+      cleanup();
+    };
+    image.onerror = () => {
+      resolve({});
+      cleanup();
+    };
+    image.src = objectUrl;
+  });
+}
+function getStorageFileUrl(file) {
+  return file.url ?? file.fileUrl ?? file.thumbUrl;
+}
+function buildPastedImageReference(file, storageFile, dimensions) {
+  const name = storageFile.originalName?.trim() || file.name.trim() || "Pasted image";
+  const mimeType = storageFile.mimetype?.trim() || file.type.trim() || "image/*";
+  const size2 = storageFile.size ?? file.size;
+  const width = dimensions?.width;
+  const height = dimensions?.height;
+  const metaParts = [
+    mimeType,
+    width && height ? `${width}x${height}` : null,
+    typeof size2 === "number" ? `${size2} bytes` : null
+  ].filter((part) => Boolean(part));
+  return {
+    type: "image",
+    id: storageFile.id,
+    fileId: storageFile.id,
+    url: getStorageFileUrl(storageFile),
+    mimeType,
+    name,
+    ...typeof size2 === "number" ? { size: size2 } : {},
+    ...width ? { width } : {},
+    ...height ? { height } : {},
+    text: `Pasted image${metaParts.length ? ` (${metaParts.join(", ")})` : ""}: ${name}`
+  };
+}
 function formatMessageContent(content) {
   if (typeof content === "string") {
     return content;
@@ -3703,8 +4660,8 @@ function ReferenceChip({
 }) {
   const metaLine = getReferenceMetaLine(reference);
   const isComposer = variant === "composer";
-  const Icon = reference.type === "quote" ? import_lucide_react10.Quote : import_lucide_react10.FileText;
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  const Icon = reference.type === "quote" ? import_lucide_react12.Quote : reference.type === "image" ? import_lucide_react12.ImageIcon : import_lucide_react12.FileText;
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     "div",
     {
       className: cn(
@@ -3713,7 +4670,7 @@ function ReferenceChip({
       ),
       title: getReferenceTitle(reference),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           Icon,
           {
             size: isComposer ? 14 : 12,
@@ -3723,29 +4680,29 @@ function ReferenceChip({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             "div",
             {
               className: cn(
-                "truncate",
+                "truncate whitespace-pre-wrap",
                 isComposer ? "text-sm" : "text-xs font-medium"
               ),
               children: getReferenceLabel(reference)
             }
           ),
-          metaLine && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          metaLine && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             "div",
             {
               className: cn(
-                "truncate",
+                "truncate whitespace-pre-wrap",
                 isComposer ? "text-xs text-muted-foreground" : "text-[10px] text-primary-foreground/75"
               ),
               children: metaLine
             }
           )
         ] }),
-        onRemove && removeLabel && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        onRemove && removeLabel && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "button",
           {
             type: "button",
@@ -3756,7 +4713,7 @@ function ReferenceChip({
             ),
             title: removeLabel,
             "aria-label": removeLabel,
-            children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react10.X, { size: 12 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react12.X, { size: 12 })
           }
         )
       ]
@@ -3780,20 +4737,20 @@ function Chat({
   const { setStream } = useStreamManager();
   const stream = useStreamContext();
   const { theme } = useTheme();
-  const [isHistoryLoading, setIsHistoryLoading] = React21.useState(false);
-  const [historyError, setHistoryError] = React21.useState(null);
-  const [assistantName, setAssistantName] = React21.useState(null);
-  const [assistantAvatar, setAssistantAvatar] = React21.useState(null);
+  const [isHistoryLoading, setIsHistoryLoading] = React23.useState(false);
+  const [historyError, setHistoryError] = React23.useState(null);
+  const [assistantName, setAssistantName] = React23.useState(null);
+  const [assistantAvatar, setAssistantAvatar] = React23.useState(null);
   const LOADING_DOTS_MIN_DURATION = 800;
   const STREAMING_STATUS_REFRESH_MS = 250;
-  const [showLoadingDots, setShowLoadingDots] = React21.useState(false);
-  const [streamingNow, setStreamingNow] = React21.useState(() => Date.now());
-  const loadingStartTimeRef = React21.useRef(null);
-  const lastStreamOutputAtRef = React21.useRef(null);
-  React21.useEffect(() => {
+  const [showLoadingDots, setShowLoadingDots] = React23.useState(false);
+  const [streamingNow, setStreamingNow] = React23.useState(() => Date.now());
+  const loadingStartTimeRef = React23.useRef(null);
+  const lastStreamOutputAtRef = React23.useRef(null);
+  React23.useEffect(() => {
     setStream(stream);
   }, [setStream, stream]);
-  React21.useEffect(() => {
+  React23.useEffect(() => {
     if (stream.isLoading) {
       if (!loadingStartTimeRef.current) {
         loadingStartTimeRef.current = Date.now();
@@ -3816,7 +4773,7 @@ function Chat({
       }
     }
   }, [stream.isLoading]);
-  React21.useEffect(() => {
+  React23.useEffect(() => {
     if (!stream.isLoading) {
       lastStreamOutputAtRef.current = null;
       setStreamingNow(Date.now());
@@ -3826,7 +4783,7 @@ function Chat({
     lastStreamOutputAtRef.current = now;
     setStreamingNow(now);
   }, [stream.messages, stream.isLoading]);
-  React21.useEffect(() => {
+  React23.useEffect(() => {
     if (!stream.isLoading) {
       return;
     }
@@ -3835,51 +4792,53 @@ function Chat({
     }, STREAMING_STATUS_REFRESH_MS);
     return () => window.clearInterval(timer);
   }, [stream.isLoading]);
-  const [draft, setDraft] = React21.useState("");
-  const [selectedTool, setSelectedTool] = React21.useState(
+  const [draft, setDraft] = React23.useState("");
+  const [selectedTool, setSelectedTool] = React23.useState(
     null
   );
-  const [attachments, setAttachments] = React21.useState([]);
-  const [references, setReferences] = React21.useState([]);
-  const [quoteSelection, setQuoteSelection] = React21.useState(null);
-  const [isAtBottom, setIsAtBottom] = React21.useState(true);
-  const [hasUpdatesBelow, setHasUpdatesBelow] = React21.useState(false);
+  const [attachments, setAttachments] = React23.useState([]);
+  const [references, setReferences] = React23.useState([]);
+  const [isUploadingReferenceImages, setIsUploadingReferenceImages] = React23.useState(false);
+  const [quoteSelection, setQuoteSelection] = React23.useState(null);
+  const [isAtBottom, setIsAtBottom] = React23.useState(true);
+  const [hasUpdatesBelow, setHasUpdatesBelow] = React23.useState(false);
   const {
     threads,
     deleteThread,
     refreshThreads,
     isLoading: isThreadsLoading
   } = useThreads();
-  const viewportRef = React21.useRef(null);
-  const fileInputRef = React21.useRef(null);
-  const composerInputRef = React21.useRef(null);
-  const shouldAutoScrollRef = React21.useRef(true);
-  const forceFollowRef = React21.useRef(false);
-  const previousMessageCountRef = React21.useRef(0);
-  const previousScrollTopRef = React21.useRef(0);
-  const autoScrollFrameRef = React21.useRef(null);
-  const isPointerDownRef = React21.useRef(false);
-  const lastTouchYRef = React21.useRef(null);
+  const viewportRef = React23.useRef(null);
+  const fileInputRef = React23.useRef(null);
+  const composerInputRef = React23.useRef(null);
+  const shouldAutoScrollRef = React23.useRef(true);
+  const forceFollowRef = React23.useRef(false);
+  const previousMessageCountRef = React23.useRef(0);
+  const previousScrollTopRef = React23.useRef(0);
+  const autoScrollFrameRef = React23.useRef(null);
+  const isPointerDownRef = React23.useRef(false);
+  const lastTouchYRef = React23.useRef(null);
   const resolvedTitle = title ?? t("chat.title");
   const resolvedPlaceholder = placeholder ?? t("chat.placeholder");
   const inputPlaceholder = selectedTool?.placeholderOverride ?? composer?.placeholder ?? resolvedPlaceholder;
-  const messages = React21.useMemo(
+  const messages = React23.useMemo(
     () => stream.messages ?? [],
     [stream.messages]
   );
   const trimmedDraft = draft.trim();
   const hasReferences = references.length > 0;
-  const pendingFollowUps = React21.useMemo(
+  const pendingFollowUps = React23.useMemo(
     () => [...stream.pendingFollowUps ?? []].sort(
       (a, b) => a.createdAt - b.createdAt
     ),
     [stream.pendingFollowUps]
   );
-  const clearQuoteSelection = React21.useCallback(() => {
+  const hasPendingFollowUps = pendingFollowUps.length > 0;
+  const clearQuoteSelection = React23.useCallback(() => {
     setQuoteSelection(null);
   }, []);
   useParentMessenger({
-    onSetComposerValue: React21.useCallback(
+    onSetComposerValue: React23.useCallback(
       (payload) => {
         if (!payload) {
           return;
@@ -3902,11 +4861,11 @@ function Chat({
       },
       [composer?.tools]
     ),
-    onFocusComposer: React21.useCallback(() => {
+    onFocusComposer: React23.useCallback(() => {
       composerInputRef.current?.focus();
     }, [])
   });
-  const syncQuoteSelection = React21.useCallback(() => {
+  const syncQuoteSelection = React23.useCallback(() => {
     if (typeof window === "undefined") {
       clearQuoteSelection();
       return;
@@ -3951,23 +4910,23 @@ function Chat({
       left
     });
   }, [clearQuoteSelection]);
-  const cancelPendingAutoScroll = React21.useCallback(() => {
+  const cancelPendingAutoScroll = React23.useCallback(() => {
     if (autoScrollFrameRef.current !== null) {
       cancelAnimationFrame(autoScrollFrameRef.current);
       autoScrollFrameRef.current = null;
     }
   }, []);
-  const disableAutoFollow = React21.useCallback(() => {
+  const disableAutoFollow = React23.useCallback(() => {
     forceFollowRef.current = false;
     shouldAutoScrollRef.current = false;
     cancelPendingAutoScroll();
   }, [cancelPendingAutoScroll]);
-  const enableAutoFollow = React21.useCallback(() => {
+  const enableAutoFollow = React23.useCallback(() => {
     forceFollowRef.current = true;
     shouldAutoScrollRef.current = true;
     setHasUpdatesBelow(false);
   }, []);
-  const scrollToBottom = React21.useCallback(
+  const scrollToBottom = React23.useCallback(
     (smooth = false, force = false) => {
       if (force) {
         enableAutoFollow();
@@ -3989,7 +4948,7 @@ function Chat({
     },
     [cancelPendingAutoScroll, enableAutoFollow]
   );
-  React21.useEffect(() => {
+  React23.useEffect(() => {
     const viewport = viewportRef.current;
     if (!viewport) return;
     previousScrollTopRef.current = viewport.scrollTop;
@@ -4070,14 +5029,14 @@ function Chat({
       window.removeEventListener("pointercancel", stopPointerTracking);
     };
   }, [cancelPendingAutoScroll, disableAutoFollow]);
-  React21.useEffect(() => {
+  React23.useEffect(() => {
     shouldAutoScrollRef.current = true;
     forceFollowRef.current = false;
     previousScrollTopRef.current = 0;
     setIsAtBottom(true);
     setHasUpdatesBelow(false);
   }, [stream.threadId]);
-  React21.useEffect(() => {
+  React23.useEffect(() => {
     const messageCountChanged = messages.length !== previousMessageCountRef.current;
     previousMessageCountRef.current = messages.length;
     if (!shouldAutoScrollRef.current) {
@@ -4096,7 +5055,7 @@ function Chat({
     clientSecret: effectiveClientSecret
   });
   const missingConfig = Boolean(missingConfigKind);
-  const missingConfigShortMessage = React21.useMemo(() => {
+  const missingConfigShortMessage = React23.useMemo(() => {
     switch (missingConfigKind) {
       case "apiUrl":
         return t("chat.missingApiUrlShort");
@@ -4108,7 +5067,7 @@ function Chat({
         return t("chat.missingConfigShort");
     }
   }, [missingConfigKind, t]);
-  const missingConfigDetailMessage = React21.useMemo(() => {
+  const missingConfigDetailMessage = React23.useMemo(() => {
     switch (missingConfigKind) {
       case "apiUrl":
         return t("chat.missingApiUrlDetail");
@@ -4122,8 +5081,8 @@ function Chat({
   }, [missingConfigKind, t]);
   const showMissingConfig = !isClientSecretInitializing && missingConfig;
   const hasUploadingFiles = attachments.some((a) => a.status === "uploading");
-  const isSendDisabled = !trimmedDraft && !hasReferences || missingConfig || isHistoryLoading || hasUploadingFiles;
-  const resizeComposerInput = React21.useCallback(() => {
+  const isSendDisabled = !trimmedDraft && !hasReferences || missingConfig || isHistoryLoading || hasUploadingFiles || isUploadingReferenceImages;
+  const resizeComposerInput = React23.useCallback(() => {
     const textarea = composerInputRef.current;
     if (!textarea) {
       return;
@@ -4136,16 +5095,16 @@ function Chat({
     textarea.style.height = `${nextHeight}px`;
     textarea.style.overflowY = textarea.scrollHeight > COMPOSER_INPUT_MAX_HEIGHT ? "auto" : "hidden";
   }, []);
-  React21.useEffect(() => {
+  React23.useEffect(() => {
     resizeComposerInput();
   }, [draft, resizeComposerInput]);
-  React21.useEffect(() => {
+  React23.useEffect(() => {
     document.addEventListener("selectionchange", syncQuoteSelection);
     return () => {
       document.removeEventListener("selectionchange", syncQuoteSelection);
     };
   }, [syncQuoteSelection]);
-  React21.useEffect(() => {
+  React23.useEffect(() => {
     const viewport = viewportRef.current;
     if (!viewport) {
       return;
@@ -4162,14 +5121,14 @@ function Chat({
       window.removeEventListener("resize", handleViewportScroll);
     };
   }, [clearQuoteSelection]);
-  React21.useEffect(() => {
+  React23.useEffect(() => {
     clearQuoteSelection();
   }, [messages.length, stream.threadId, clearQuoteSelection]);
-  React21.useEffect(() => {
+  React23.useEffect(() => {
     if (missingConfig) return;
     void refreshThreads();
   }, [missingConfig, refreshThreads]);
-  React21.useEffect(() => {
+  React23.useEffect(() => {
     if (missingConfig || !stream.client || !stream.assistantId) {
       setAssistantName(null);
       setAssistantAvatar(null);
@@ -4200,7 +5159,7 @@ function Chat({
     mimetype: a.storageFile?.mimetype ?? a.file.type,
     size: a.storageFile?.size ?? a.file.size
   }));
-  const submitDraft = React21.useCallback(
+  const submitDraft = React23.useCallback(
     (followUpOverride) => {
       if (isSendDisabled) return;
       const filesToSend = uploadedFiles.length > 0 ? [...uploadedFiles] : void 0;
@@ -4274,7 +5233,7 @@ function Chat({
     event.preventDefault();
     submitDraft();
   };
-  const handleEditPendingFollowUp = React21.useCallback(
+  const handleEditPendingFollowUp = React23.useCallback(
     (id) => {
       const item = pendingFollowUps.find(
         (entry) => entry.id === id && entry.mode === "queue"
@@ -4301,7 +5260,7 @@ function Chat({
     },
     [pendingFollowUps, stream]
   );
-  const handleQuoteSelection = React21.useCallback(() => {
+  const handleQuoteSelection = React23.useCallback(() => {
     if (!quoteSelection) {
       return;
     }
@@ -4317,21 +5276,14 @@ function Chat({
   const handleAttachmentClick = () => {
     fileInputRef.current?.click();
   };
+  const uploadContextFile = React23.useCallback(
+    (file) => stream.client.contexts.uploadFile(file),
+    [stream.client]
+  );
   const handleComposerKeyDown = (event) => {
     if (event.key !== "Enter") {
       return;
     }
-    if (event.shiftKey && (event.metaKey || event.ctrlKey)) {
-      if (event.nativeEvent.isComposing) {
-        return;
-      }
-      event.preventDefault();
-      if (isSendDisabled) {
-        return;
-      }
-      submitDraft(stream.followUpBehavior === "queue" ? "steer" : "queue");
-      return;
-    }
     if (event.shiftKey) {
       return;
     }
@@ -4342,12 +5294,108 @@ function Chat({
     if (isSendDisabled) {
       return;
     }
+    if (stream.isLoading) {
+      submitDraft(
+        getBusyComposerShortcutFollowUpMode(event.metaKey || event.ctrlKey)
+      );
+      return;
+    }
     submitDraft();
   };
-  const uploadFile = React21.useCallback(
+  const handleComposerPaste = React23.useCallback(
+    (event) => {
+      const clipboardData = event.clipboardData;
+      if (!clipboardData) {
+        return;
+      }
+      const imageFiles = Array.from(clipboardData.items).filter(
+        (item) => item.kind === "file" && item.type.startsWith("image/")
+      ).map((item) => item.getAsFile()).filter((item) => Boolean(item));
+      if (imageFiles.length > 0) {
+        event.preventDefault();
+        const maxCount = composer?.attachments?.maxCount ?? 10;
+        const maxSize = composer?.attachments?.maxSize ?? 100 * 1024 * 1024;
+        const currentImageReferenceCount = references.filter(
+          (reference) => reference.type === "image"
+        ).length;
+        const availableSlots = Math.max(
+          0,
+          maxCount - currentImageReferenceCount
+        );
+        const nextFiles = imageFiles.filter((file) => file.size <= maxSize).slice(0, availableSlots);
+        if (nextFiles.length === 0) {
+          return;
+        }
+        setIsUploadingReferenceImages(true);
+        void Promise.allSettled(
+          nextFiles.map(async (file) => {
+            const [dimensions, storageFile] = await Promise.all([
+              readImageDimensions(file),
+              uploadContextFile(file)
+            ]);
+            return buildPastedImageReference(file, storageFile, dimensions);
+          })
+        ).then((results) => {
+          const nextReferences = results.filter(
+            (result) => result.status === "fulfilled"
+          ).map((result) => result.value);
+          if (nextReferences.length > 0) {
+            setReferences(
+              (previous) => mergeReferences(previous, nextReferences)
+            );
+            composerInputRef.current?.focus();
+          }
+          results.filter(
+            (result) => result.status === "rejected"
+          ).forEach((result) => {
+            console.warn(
+              "[Chat] Failed to upload pasted image reference:",
+              result.reason
+            );
+          });
+        }).finally(() => {
+          setIsUploadingReferenceImages(false);
+        });
+        return;
+      }
+      const pastedText = clipboardData.getData("text/plain");
+      if (pastedText.trim().length <= LONG_TEXT_REFERENCE_THRESHOLD) {
+        return;
+      }
+      event.preventDefault();
+      setReferences(
+        (previous) => mergeReferences(previous, [
+          {
+            type: "quote",
+            source: "Pasted text",
+            text: pastedText
+          }
+        ])
+      );
+      composerInputRef.current?.focus();
+    },
+    [
+      composer?.attachments?.maxCount,
+      composer?.attachments?.maxSize,
+      references,
+      uploadContextFile
+    ]
+  );
+  const alternateFollowUpShortcutLabel = React23.useMemo(() => {
+    if (typeof navigator === "undefined") {
+      return "\u2318Enter";
+    }
+    const platform = navigator.platform || navigator.userAgent;
+    return /Mac|iPhone|iPad|iPod/i.test(platform) ? "\u2318Enter" : "Ctrl+Enter";
+  }, []);
+  const followUpShortcutLabels = React23.useMemo(
+    () => getComposerFollowUpShortcutLabels(alternateFollowUpShortcutLabel),
+    [alternateFollowUpShortcutLabel]
+  );
+  const uploadFile = React23.useCallback(
     async (localId, file) => {
       try {
-        const result = await stream.client.contexts.uploadFile(file);
+        const result = await uploadContextFile(file);
         setAttachments(
           (prev) => prev.map(
             (item) => item.localId === localId ? { ...item, status: "success", storageFile: result } : item
@@ -4365,9 +5413,9 @@ function Chat({
         );
       }
     },
-    [stream.client]
+    [uploadContextFile]
   );
-  const handleRetryUpload = React21.useCallback(
+  const handleRetryUpload = React23.useCallback(
     (localId) => {
       const attachment = attachments.find((a) => a.localId === localId);
       if (!attachment || attachment.status !== "error") return;
@@ -4452,7 +5500,7 @@ function Chat({
     );
     scrollToBottom(true, true);
   };
-  const loadConversationMessages = React21.useCallback(
+  const loadConversationMessages = React23.useCallback(
     async (recordId) => {
       if (missingConfig) {
         setHistoryError(missingConfigShortMessage);
@@ -4538,18 +5586,18 @@ function Chat({
     }
   };
   const acceptMimes = composer?.attachments?.accept ? Object.entries(composer.attachments.accept).map(([mime, exts]) => [mime, ...exts.map((e) => `.${e}`)].join(",")).join(",") : void 0;
-  const currentThread = React21.useMemo(
+  const currentThread = React23.useMemo(
     () => threads.find((item) => item.id === stream.threadId),
     [threads, stream.threadId]
   );
   const errorMessage = stream.error instanceof Error ? stream.error.message : void 0;
-  const threadErrorMessage = React21.useMemo(() => {
+  const threadErrorMessage = React23.useMemo(() => {
     if (currentThread?.status !== "error") return void 0;
     const message = currentThread.error?.trim();
     return message || t("thread.errorToast");
   }, [currentThread, t]);
   const assistantTitle = assistantName || resolvedTitle;
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     "div",
     {
       ref: viewportRef,
@@ -4558,10 +5606,10 @@ function Chat({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center justify-between border-b p-2 sticky top-0 z-10 bg-background", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center gap-3 overflow-hidden", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "relative shrink-0", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center justify-between border-b p-2 sticky top-0 z-10 bg-background", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-3 overflow-hidden", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "relative shrink-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                 ChatkitAvatar,
                 {
                   avatar: assistantAvatar,
@@ -4569,10 +5617,10 @@ function Chat({
                   label: assistantTitle
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full border-2 border-background bg-green-500" })
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full border-2 border-background bg-green-500" })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "truncate", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "truncate", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                 "h2",
                 {
                   className: "text-lg font-semibold truncate",
@@ -4580,11 +5628,11 @@ function Chat({
                   children: assistantTitle
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "text-xs text-muted-foreground", children: t("chat.statusOnline") })
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "text-xs text-muted-foreground", children: t("chat.statusOnline") })
             ] })
           ] }),
-          history?.enabled !== false && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center gap-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          history?.enabled !== false && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
               "button",
               {
                 type: "button",
@@ -4597,10 +5645,10 @@ function Chat({
                   "disabled:opacity-50 disabled:cursor-not-allowed"
                 ),
                 title: t("history.newThread"),
-                children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react10.Pencil, { size: 16 })
+                children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react12.Pencil, { size: 16 })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
               HistorySidebar,
               {
                 threads,
@@ -4614,18 +5662,18 @@ function Chat({
             )
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex-1 p-4", children: [
-          errorMessage && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "mb-4 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: errorMessage }),
-          historyError && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900", children: historyError }),
-          showMissingConfig && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900", children: missingConfigDetailMessage }),
-          isHistoryLoading && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "mb-4 rounded-lg border border-muted px-3 py-2 text-sm text-muted-foreground", children: t("chat.loadingThread") }),
-          messages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex-1 p-4", children: [
+          errorMessage && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "mb-4 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: errorMessage }),
+          historyError && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900", children: historyError }),
+          showMissingConfig && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900", children: missingConfigDetailMessage }),
+          isHistoryLoading && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "mb-4 rounded-lg border border-muted px-3 py-2 text-sm text-muted-foreground", children: t("chat.loadingThread") }),
+          messages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             StartScreen,
             {
               startScreen,
               onPromptClick: handlePromptClick
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "space-y-4", children: [
+          ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "space-y-4", children: [
             messages.map((message, index) => {
               const messageType = String(message.type);
               const isAssistantMessage = messageType === "assistant" || messageType === "ai";
@@ -4652,7 +5700,7 @@ function Chat({
               if (!isAssistantMessage && !hasPlainRenderableContent && !hasHumanAttachments && humanReferences.length === 0) {
                 return null;
               }
-              return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                 "div",
                 {
                   className: cn(
@@ -4660,8 +5708,8 @@ function Chat({
                     message.type === "human" ? "justify-end" : "justify-start -ml-1"
                     // AI messages: slightly closer to left
                   ),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col px-3 overflow-hidden", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col px-3 overflow-hidden", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                       "div",
                       {
                         ...canQuoteMessage ? {
@@ -4673,7 +5721,7 @@ function Chat({
                           message.type === "human" ? "bg-primary text-primary-foreground px-4 py-2.5" : message.type === "system" ? "bg-muted text-muted-foreground text-xs px-4 py-2.5" : "py-1 text-chat-foreground"
                           // AI messages: use chat-specific foreground color
                         ),
-                        children: isAssistantMessage ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                        children: isAssistantMessage ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                           AssistantMessage,
                           {
                             message: {
@@ -4683,8 +5731,8 @@ function Chat({
                             isStreaming: isStreamingMessage,
                             streamingStatus
                           }
-                        ) : /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
-                          message.type === "human" && humanReferences.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "mb-2 flex flex-wrap gap-1.5", children: humanReferences.map((reference) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                        ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+                          message.type === "human" && humanReferences.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "mb-2 flex flex-wrap gap-1.5", children: humanReferences.map((reference) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                             ReferenceChip,
                             {
                               reference,
@@ -4692,29 +5740,29 @@ function Chat({
                             },
                             getReferenceKey(reference)
                           )) }),
-                          message.type === "human" && humanAttachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex flex-wrap gap-1.5 mb-2", children: humanAttachments.map((file, fileIndex) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+                          message.type === "human" && humanAttachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex flex-wrap gap-1.5 mb-2", children: humanAttachments.map((file, fileIndex) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
                             "div",
                             {
                               className: "flex items-center gap-1.5 rounded-md bg-primary-foreground/20 px-2 py-1 text-xs",
                               children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react10.FileText, { size: 12 }),
-                                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "max-w-[100px] truncate", children: file.originalName })
+                                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react12.FileText, { size: 12 }),
+                                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "max-w-[100px] truncate", children: file.originalName })
                               ]
                             },
                             fileIndex
                           )) }),
-                          Array.isArray(message.content) ? message.content.map((part, partIndex) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                          Array.isArray(message.content) ? message.content.map((part, partIndex) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                             "p",
                             {
                               className: "wrap-break-word text-sm leading-relaxed",
                               children: formatMessageContent(part)
                             },
                             `${part.type}-${partIndex}`
-                          )) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "wrap-break-word text-sm leading-relaxed", children: formatMessageContent(message.content) })
+                          )) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "wrap-break-word text-sm leading-relaxed", children: formatMessageContent(message.content) })
                         ] })
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                       MessageActions,
                       {
                         content: messageContent,
@@ -4750,7 +5798,7 @@ function Chat({
                 stream.isLoading,
                 { now: streamingNow }
               );
-              return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex justify-start gap-3 -ml-2", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "max-w-full rounded-2xl py-2.5", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex justify-start gap-3 -ml-2", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "max-w-full rounded-2xl py-2.5", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                 AssistantStreamingIndicator,
                 {
                   status: fallbackStreamingStatus ?? "loading"
@@ -4759,7 +5807,7 @@ function Chat({
             })()
           ] })
         ] }),
-        !isAtBottom && messages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "sticky bottom-20 z-20 flex justify-center px-4 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        !isAtBottom && messages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "sticky bottom-20 z-20 flex justify-center px-4 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           Button,
           {
             type: "button",
@@ -4772,10 +5820,10 @@ function Chat({
             onClick: () => scrollToBottom(true, true),
             "aria-label": t("chat.scrollToBottom"),
             title: t("chat.scrollToBottom"),
-            children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react10.ArrowDown, { size: 16 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react12.ArrowDown, { size: 16 })
           }
         ) }),
-        quoteSelection && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        quoteSelection && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "div",
           {
             className: "pointer-events-none fixed z-50",
@@ -4784,7 +5832,7 @@ function Chat({
               left: `${quoteSelection.left}px`,
               transform: "translateX(-50%)"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
               Button,
               {
                 type: "button",
@@ -4796,16 +5844,16 @@ function Chat({
                 "aria-label": t("composer.quoteSelection"),
                 title: t("composer.quoteSelection"),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react10.Quote, { size: 14 }),
+                  /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react12.Quote, { size: 14 }),
                   t("composer.quoteSelection")
                 ]
               }
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "p-2 sticky bottom-0 z-10 bg-background", children: [
-          threadErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "mb-3 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive overflow-auto", children: threadErrorMessage }),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "p-2 sticky bottom-0 z-10 bg-background", children: [
+          threadErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "mb-3 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive overflow-auto", children: threadErrorMessage }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             "input",
             {
               ref: fileInputRef,
@@ -4816,7 +5864,7 @@ function Chat({
               className: "hidden"
             }
           ),
-          attachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "mb-3 flex flex-wrap gap-2", children: attachments.map((item) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+          attachments.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "mb-3 flex flex-wrap gap-2", children: attachments.map((item) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
             "div",
             {
               className: cn(
@@ -4824,16 +5872,16 @@ function Chat({
                 item.status === "error" ? "bg-destructive/10 border border-destructive/30" : "bg-muted"
               ),
               children: [
-                item.status === "uploading" && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-                  import_lucide_react10.Loader2,
+                item.status === "uploading" && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                  import_lucide_react12.Loader2,
                   {
                     size: 14,
                     className: "animate-spin text-muted-foreground"
                   }
                 ),
-                item.status === "success" && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react10.FileText, { size: 14, className: "text-muted-foreground" }),
-                item.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react10.FileText, { size: 14, className: "text-destructive" }),
-                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                item.status === "success" && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react12.FileText, { size: 14, className: "text-muted-foreground" }),
+                item.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react12.FileText, { size: 14, className: "text-destructive" }),
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                   "span",
                   {
                     className: cn(
@@ -4843,17 +5891,17 @@ function Chat({
                     children: item.file.name
                   }
                 ),
-                item.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                item.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                   "button",
                   {
                     type: "button",
                     onClick: () => handleRetryUpload(item.localId),
                     className: "ml-1 rounded-full p-0.5 text-destructive hover:bg-destructive/20",
                     title: t("chat.retryUpload"),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react10.RefreshCw, { size: 12 })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react12.RefreshCw, { size: 12 })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                   "button",
                   {
                     type: "button",
@@ -4862,14 +5910,14 @@ function Chat({
                       "ml-1 rounded-full p-0.5",
                       item.status === "error" ? "text-destructive hover:bg-destructive/20" : "hover:bg-muted-foreground/20"
                     ),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react10.X, { size: 12 })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react12.X, { size: 12 })
                   }
                 )
               ]
             },
             item.localId
           )) }),
-          references.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "mb-3 flex flex-wrap gap-2", children: references.map((reference) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          references.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "mb-3 flex flex-wrap gap-2", children: references.map((reference) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             ReferenceChip,
             {
               reference,
@@ -4883,19 +5931,27 @@ function Chat({
             },
             getReferenceKey(reference)
           )) }),
-          selectedTool && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "mb-2 flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary", children: selectedTool.shortLabel ?? selectedTool.label }),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          selectedTool && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "mb-2 flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary", children: selectedTool.shortLabel ?? selectedTool.label }),
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
               "button",
               {
                 type: "button",
                 onClick: () => setSelectedTool(null),
                 className: "rounded-full p-0.5 text-muted-foreground hover:bg-muted",
-                children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react10.X, { size: 12 })
+                children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react12.X, { size: 12 })
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            PendingTodos,
+            {
+              snapshot: stream.todos,
+              attachToComposer: !hasPendingFollowUps,
+              className: hasPendingFollowUps ? "mb-2" : void 0
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             PendingFollowUps,
             {
               items: pendingFollowUps,
@@ -4906,10 +5962,11 @@ function Chat({
               canSendNow: stream.canSendPendingFollowUpNow,
               onSendNow: (id) => stream.sendPendingFollowUpNow(id),
               onEdit: handleEditPendingFollowUp,
-              onRemove: stream.removePendingFollowUp
+              onRemove: stream.removePendingFollowUp,
+              attachToComposer: true
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("form", { className: "flex items-end", onSubmit: handleSubmit, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("form", { className: "flex items-end", onSubmit: handleSubmit, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
             "div",
             {
               className: cn(
@@ -4921,7 +5978,7 @@ function Chat({
                 getRoundedClass(theme.radius)
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                   ComposerMenu,
                   {
                     composer,
@@ -4931,12 +5988,13 @@ function Chat({
                     disabled: missingConfig || isHistoryLoading
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                   "textarea",
                   {
                     ref: composerInputRef,
                     value: draft,
                     onChange: (event) => setDraft(event.target.value),
+                    onPaste: handleComposerPaste,
                     onKeyDown: handleComposerKeyDown,
                     rows: 1,
                     placeholder: inputPlaceholder,
@@ -4948,7 +6006,7 @@ function Chat({
                     )
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
                   SendButton,
                   {
                     disabled: isSendDisabled,
@@ -4956,13 +6014,23 @@ function Chat({
                     showStop: stream.isLoading && !trimmedDraft,
                     onStop: () => stream.stop(),
                     stopLabel: t("chat.stop"),
-                    sendLabel: t("chat.send")
+                    sendLabel: t("chat.send"),
+                    shortcuts: stream.isLoading && trimmedDraft ? [
+                      {
+                        label: t("chat.followUps.steer"),
+                        keys: followUpShortcutLabels.steer
+                      },
+                      {
+                        label: t("chat.followUps.queue"),
+                        keys: followUpShortcutLabels.queue
+                      }
+                    ] : void 0
                   }
                 )
               ]
             }
           ) }),
-          disclaimer?.text && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          disclaimer?.text && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
             "p",
             {
               className: cn(
@@ -4972,9 +6040,9 @@ function Chat({
               children: disclaimer.text
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "mt-2 flex items-center justify-center gap-2 text-xs text-muted-foreground", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: t("chat.poweredBy") }),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ContextUsageIndicator, { className: "absolute right-4" })
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "mt-2 flex items-center justify-center gap-2 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { children: t("chat.poweredBy") }),
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ContextUsageIndicator, { className: "absolute right-4" })
           ] })
         ] })
       ]
@@ -4983,11 +6051,11 @@ function Chat({
 }
 
 // src/components/ui/input.tsx
-var React22 = __toESM(require("react"), 1);
-var import_jsx_runtime28 = require("react/jsx-runtime");
-var Input = React22.forwardRef(
+var React24 = __toESM(require("react"), 1);
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var Input = React24.forwardRef(
   ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
       "input",
       {
         ref,
@@ -5004,10 +6072,10 @@ var Input = React22.forwardRef(
 Input.displayName = "Input";
 
 // src/components/ui/separator.tsx
-var React23 = __toESM(require("react"), 1);
-var import_jsx_runtime29 = require("react/jsx-runtime");
-var Separator = React23.forwardRef(
-  ({ className, orientation = "horizontal", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+var React25 = __toESM(require("react"), 1);
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var Separator = React25.forwardRef(
+  ({ className, orientation = "horizontal", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     "div",
     {
       ref,