@xpert-ai/chatkit-ui 0.2.3 → 0.2.4

package/dist/index.cjs

@@ -988,7 +988,7 @@ var useStreamContext = () => {
 };
 
 // src/components/composer/ComposerMenu.tsx
-var React6 = __toESM(require("react"), 1);
+var React9 = __toESM(require("react"), 1);
 var import_lucide_react2 = require("lucide-react");
 
 // src/components/ui/button.tsx
@@ -1255,12 +1255,9 @@ function DropdownMenuCheckboxItem({
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "span",
           {
-            className: "pointer-events-none absolute right-2 flex items-center justify-center",
+            className: "pointer-events-none absolute right-2 flex h-5 w-5 items-center justify-center",
             "data-slot": "dropdown-menu-checkbox-item-indicator",
-            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_radix_ui.DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-              import_lucide_react.CheckIcon,
-              {}
-            ) })
+            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_radix_ui.DropdownMenu.ItemIndicator, { className: "flex h-5 w-5 items-center justify-center rounded-full shadow-sm ring-1 ring-primary/25", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react.CheckIcon, { className: "size-3.5 stroke-[3]" }) })
           }
         ),
         children
@@ -1369,9 +1366,19 @@ var en_US_default = {
       title: "Skills & Plugins",
       skills: "Skills",
       plugins: "Plugins",
+      subAgents: "Sub-agents",
       runOnly: "This run",
       removeRunCapability: "Remove capability",
-      emptySearch: "No matching skills or plugins"
+      emptySearch: "No matching skills, plugins, or sub-agents",
+      agent: "Agent",
+      xpertAgent: "Xpert",
+      agentDetails: "Agent details",
+      type: "Type",
+      identifier: "ID",
+      inputs: "Inputs",
+      tools: "Tools",
+      toolsets: "Toolsets",
+      knowledge: "Knowledge"
     },
     planModeActive: "Plan",
     disablePlanMode: "Turn off plan mode",
@@ -1557,9 +1564,19 @@ var zh_CN_default = {
       title: "\u6280\u80FD\u548C\u63D2\u4EF6",
       skills: "\u6280\u80FD",
       plugins: "\u63D2\u4EF6",
+      subAgents: "\u5B50\u667A\u80FD\u4F53",
       runOnly: "\u672C\u6B21\u8FD0\u884C",
       removeRunCapability: "\u79FB\u9664\u80FD\u529B",
-      emptySearch: "\u6CA1\u6709\u5339\u914D\u7684 skill \u6216 plugin"
+      emptySearch: "\u6CA1\u6709\u5339\u914D\u7684\u6280\u80FD\u3001\u63D2\u4EF6\u6216\u5B50\u667A\u80FD\u4F53",
+      agent: "\u667A\u80FD\u4F53",
+      xpertAgent: "Xpert",
+      agentDetails: "\u667A\u80FD\u4F53\u8BE6\u60C5",
+      type: "\u7C7B\u578B",
+      identifier: "ID",
+      inputs: "\u8F93\u5165",
+      tools: "\u5DE5\u5177",
+      toolsets: "\u5DE5\u5177\u96C6",
+      knowledge: "\u77E5\u8BC6\u5E93"
     },
     planModeActive: "\u8BA1\u5212",
     disablePlanMode: "\u5173\u95ED\u8BA1\u5212\u6A21\u5F0F",
@@ -2092,6 +2109,9 @@ function createEmptyRuntimeCapabilitiesSelection(capabilities) {
     },
     plugins: {
       nodeKeys: []
+    },
+    subAgents: {
+      nodeKeys: []
     }
   };
 }
@@ -2107,6 +2127,9 @@ function createDefaultRuntimeCapabilitiesSelection(capabilities) {
     },
     plugins: {
       nodeKeys: []
+    },
+    subAgents: {
+      nodeKeys: []
     }
   };
 }
@@ -2124,22 +2147,38 @@ function mergeRuntimeCapabilitiesSelections(capabilities, ...selections) {
       nodeKeys: uniqueStrings(
         selections.flatMap((selection) => selection?.plugins.nodeKeys ?? [])
       )
+    },
+    subAgents: {
+      nodeKeys: uniqueStrings(
+        selections.flatMap((selection) => selection?.subAgents?.nodeKeys ?? [])
+      )
     }
   };
 }
 function toggleRuntimeCapabilitySelection(selection, type, id, selected) {
-  const ids = type === "skill" ? selection.skills.ids : selection.plugins.nodeKeys;
+  const ids = type === "skill" ? selection.skills.ids : type === "plugin" ? selection.plugins.nodeKeys : selection.subAgents?.nodeKeys ?? [];
   const shouldSelect = selected ?? !ids.includes(id);
   const nextIds = shouldSelect ? uniqueStrings([...ids, id]) : ids.filter((item) => item !== id);
-  return type === "skill" ? {
-    ...selection,
-    skills: {
-      ...selection.skills,
-      ids: nextIds
-    }
-  } : {
+  if (type === "skill") {
+    return {
+      ...selection,
+      skills: {
+        ...selection.skills,
+        ids: nextIds
+      }
+    };
+  }
+  if (type === "plugin") {
+    return {
+      ...selection,
+      plugins: {
+        nodeKeys: nextIds
+      }
+    };
+  }
+  return {
     ...selection,
-    plugins: {
+    subAgents: {
       nodeKeys: nextIds
     }
   };
@@ -2162,26 +2201,231 @@ function getRuntimeCapabilityOptions(capabilities) {
       label: capability.label,
       description: capability.description ?? capability.provider,
       capability
+    })),
+    ...(capabilities.subAgents ?? []).map((capability) => ({
+      type: "subAgent",
+      id: capability.nodeKey,
+      label: capability.label,
+      description: capability.description ?? capability.name,
+      capability
     }))
   ];
 }
 function isRuntimeCapabilitySelected(selection, type, id) {
-  return type === "skill" ? selection.skills.ids.includes(id) : selection.plugins.nodeKeys.includes(id);
+  if (type === "skill") {
+    return selection.skills.ids.includes(id);
+  }
+  if (type === "plugin") {
+    return selection.plugins.nodeKeys.includes(id);
+  }
+  return selection.subAgents?.nodeKeys.includes(id) ?? false;
 }
 
-// src/components/composer/ComposerMenu.tsx
+// 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/ui/chatkit-avatar.tsx
+var React8 = require("react");
+
+// src/components/ui/avatar.tsx
+var React7 = __toESM(require("react"), 1);
+var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"), 1);
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Avatar = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  AvatarPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    ),
+    ...props
+  }
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+var AvatarImage = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  AvatarPrimitive.Image,
+  {
+    ref,
+    className: cn("aspect-square h-full w-full", className),
+    ...props
+  }
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+var AvatarFallback = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  AvatarPrimitive.Fallback,
+  {
+    ref,
+    className: cn(
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
+      className
+    ),
+    ...props
+  }
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+// src/components/ui/chatkit-avatar.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function asRecord(value) {
+  return value && typeof value === "object" ? value : null;
+}
+function getNonEmptyString(value) {
+  if (typeof value !== "string") return void 0;
+  const normalized = value.trim();
+  return normalized || void 0;
+}
+function unicodeFromUnified(unified) {
+  const normalized = getNonEmptyString(unified);
+  if (!normalized) return void 0;
+  try {
+    return normalized.split("-").map((hex) => String.fromCodePoint(Number.parseInt(hex, 16))).join("");
+  } catch {
+    return void 0;
+  }
+}
+function getEmojiCharacter(avatar) {
+  return unicodeFromUnified(avatar?.emoji?.unified);
+}
+function getAvatarFallback(label) {
+  return label.trim().charAt(0).toUpperCase() || "A";
+}
+function normalizeChatkitAvatar(rawAvatar) {
+  if (typeof rawAvatar === "string") {
+    const url = getNonEmptyString(rawAvatar);
+    return url ? { url } : null;
+  }
+  const avatarRecord = asRecord(rawAvatar);
+  if (!avatarRecord) return null;
+  const emojiRecord = asRecord(avatarRecord.emoji);
+  const avatar = {
+    background: getNonEmptyString(avatarRecord.background),
+    url: getNonEmptyString(avatarRecord.url),
+    useNotoColor: Boolean(avatarRecord.useNotoColor)
+  };
+  if (emojiRecord) {
+    avatar.emoji = {
+      colons: getNonEmptyString(emojiRecord.colons),
+      id: getNonEmptyString(emojiRecord.id),
+      unified: getNonEmptyString(emojiRecord.unified)
+    };
+  }
+  return avatar.url || avatar.background || avatar.emoji?.id || avatar.emoji?.unified ? avatar : null;
+}
+function extractAssistantAvatar(assistant) {
+  const assistantRecord = asRecord(assistant);
+  const metadata = asRecord(assistant.metadata);
+  const rawAvatar = assistantRecord?.avatar ?? metadata?.avatar;
+  const avatar = normalizeChatkitAvatar(rawAvatar);
+  if (avatar) return avatar;
+  const metadataAvatar = getNonEmptyString(metadata?.avatarUrl) ?? getNonEmptyString(metadata?.avatar_url);
+  return metadataAvatar ? { url: metadataAvatar } : null;
+}
+function ChatkitAvatar({
+  avatar,
+  className,
+  fallback,
+  fallbackClassName,
+  imageClassName,
+  label,
+  style,
+  ...props
+}) {
+  const { theme } = useTheme();
+  const emojiCharacter = getEmojiCharacter(avatar);
+  const fallbackText = fallback || getAvatarFallback(label);
+  const roundedClass = getRoundedClass(theme.radius);
+  const emojiStyle = avatar?.useNotoColor ? { fontFamily: '"Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif' } : void 0;
+  const fallbackStyle = {
+    ...avatar?.background ? { background: avatar.background } : {}
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Avatar, { className: cn(roundedClass, className), style, ...props, children: [
+    avatar?.url ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(AvatarImage, { className: imageClassName, src: avatar.url, alt: label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      AvatarFallback,
+      {
+        className: cn(roundedClass, "text-sm font-medium text-foreground", fallbackClassName),
+        style: fallbackStyle,
+        children: emojiCharacter ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-[1.1em] leading-none", style: emojiStyle, children: emojiCharacter }) : fallbackText
+      }
+    )
+  ] });
+}
+
+// src/components/composer/ComposerMenu.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function getIconComponent(icon) {
   const iconMap = {
-    plus: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.Plus, { size: 16 }),
-    document: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.FileText, { size: 16 }),
-    write: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.Pencil, { size: 16 }),
-    sparkle: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.Sparkles, { size: 16 }),
-    lightbulb: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.Lightbulb, { size: 16 }),
-    "settings-slider": /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.SlidersHorizontal, { size: 16 }),
-    search: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.Search, { size: 16 }),
-    globe: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.Globe, { size: 16 }),
-    images: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.Images, { size: 16 })
+    plus: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react2.Plus, { size: 16 }),
+    document: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react2.FileText, { size: 16 }),
+    write: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react2.Pencil, { size: 16 }),
+    sparkle: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react2.Sparkles, { size: 16 }),
+    lightbulb: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react2.Lightbulb, { size: 16 }),
+    "settings-slider": /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react2.SlidersHorizontal, { size: 16 }),
+    search: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react2.Search, { size: 16 }),
+    globe: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react2.Globe, { size: 16 }),
+    images: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react2.Images, { size: 16 })
   };
   return iconMap[icon] || iconMap["sparkle"];
 }
@@ -2198,21 +2442,23 @@ function ComposerMenu({
   disabled = false
 }) {
   const { t } = useChatkitTranslation();
-  const [open, setOpen] = React6.useState(false);
-  const [activePanel, setActivePanel] = React6.useState(
+  const [open, setOpen] = React9.useState(false);
+  const [activePanel, setActivePanel] = React9.useState(
     null
   );
-  const [collisionBoundary, setCollisionBoundary] = React6.useState();
-  const triggerRef = React6.useRef(null);
+  const [collisionBoundary, setCollisionBoundary] = React9.useState();
+  const triggerRef = React9.useRef(null);
   const { theme } = useTheme();
   const roundedClass = getRoundedClass(theme.radius);
   const attachmentsEnabled = composer?.attachments?.enabled ?? false;
   const tools = composer?.tools ?? [];
   const skills = runtimeCapabilities?.skills ?? [];
   const plugins = runtimeCapabilities?.plugins ?? [];
-  const hasRuntimeCapabilities = skills.length > 0 || plugins.length > 0;
+  const subAgents = runtimeCapabilities?.subAgents ?? [];
+  const hasRuntimeCapabilities = skills.length > 0 || plugins.length > 0 || subAgents.length > 0;
   const selectedSkillCount = selectedRuntimeCapabilities?.skills.ids.length ?? 0;
   const selectedPluginCount = selectedRuntimeCapabilities?.plugins.nodeKeys.length ?? 0;
+  const selectedSubAgentCount = selectedRuntimeCapabilities?.subAgents?.nodeKeys.length ?? 0;
   const handleAttachmentClick = () => {
     onAttachmentClick?.();
   };
@@ -2237,10 +2483,136 @@ function ComposerMenu({
     collisionBoundary,
     collisionPadding: 8
   };
+  const getCapabilityFallbackIcon = (type) => {
+    if (type === "skill") return import_lucide_react2.Brain;
+    if (type === "plugin") return import_lucide_react2.Plug;
+    return import_lucide_react2.Bot;
+  };
+  const getParameterLabels = (subAgent) => (subAgent.parameters ?? []).map((parameter) => {
+    if (!parameter || typeof parameter !== "object") return null;
+    const record = parameter;
+    return typeof record.title === "string" && record.title.trim() || typeof record.name === "string" && record.name.trim() || null;
+  }).filter((value) => Boolean(value));
+  const renderDetailPills = (label, values) => {
+    if (!values?.length) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "text-[11px] font-medium uppercase text-muted-foreground", children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-wrap gap-1", children: [
+        values.slice(0, 6).map((value) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "span",
+          {
+            className: "max-w-full truncate rounded-md bg-muted px-1.5 py-0.5 text-[11px] text-foreground",
+            children: value
+          },
+          value
+        )),
+        values.length > 6 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "rounded-md bg-muted px-1.5 py-0.5 text-[11px] text-muted-foreground", children: [
+          "+",
+          values.length - 6
+        ] })
+      ] })
+    ] });
+  };
+  const renderSubAgentInfoButton = (subAgent) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      "button",
+      {
+        type: "button",
+        "aria-label": t("composer.capabilities.agentDetails"),
+        className: "mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground",
+        "data-slot": "runtime-sub-agent-info-trigger",
+        onClick: (event) => event.stopPropagation(),
+        onPointerDown: (event) => event.stopPropagation(),
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react2.Info, { size: 14 })
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      TooltipContent,
+      {
+        side: "top",
+        align: "center",
+        sideOffset: 8,
+        hideArrow: true,
+        className: "bg-transparent p-0 text-popover-foreground shadow-none",
+        children: renderSubAgentDetailCard(subAgent)
+      }
+    )
+  ] });
+  const renderSubAgentDetailCard = (subAgent) => {
+    const parameterLabels = getParameterLabels(subAgent);
+    const agentKind = subAgent.type === "xpert" ? t("composer.capabilities.xpertAgent") : t("composer.capabilities.agent");
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      "div",
+      {
+        "data-slot": "runtime-sub-agent-detail-card",
+        className: "pointer-events-none w-80 space-y-3 rounded-lg border border-border bg-popover p-3 text-popover-foreground shadow-lg",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              ChatkitAvatar,
+              {
+                avatar: normalizeChatkitAvatar(subAgent.avatar),
+                label: subAgent.label,
+                className: "h-9 w-9 shrink-0",
+                fallbackClassName: "text-xs"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "truncate text-sm font-medium", children: subAgent.label }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "truncate text-xs text-muted-foreground", children: subAgent.name ?? agentKind })
+            ] })
+          ] }),
+          subAgent.description && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "line-clamp-4 text-xs leading-5 text-muted-foreground", children: subAgent.description }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "grid grid-cols-2 gap-2 text-xs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "rounded-md bg-muted px-2 py-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "block text-[11px] text-muted-foreground", children: t("composer.capabilities.type") }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "font-medium", children: agentKind })
+            ] }),
+            (subAgent.agentKey || subAgent.xpertId) && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "rounded-md bg-muted px-2 py-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "block text-[11px] text-muted-foreground", children: t("composer.capabilities.identifier") }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "block truncate font-mono text-[11px]", children: subAgent.agentKey ?? subAgent.xpertId })
+            ] })
+          ] }),
+          renderDetailPills(t("composer.capabilities.inputs"), parameterLabels),
+          renderDetailPills(
+            t("composer.capabilities.tools"),
+            subAgent.toolNames
+          ),
+          renderDetailPills(
+            t("composer.capabilities.toolsets"),
+            subAgent.toolsetNames
+          ),
+          renderDetailPills(
+            t("composer.capabilities.knowledge"),
+            subAgent.knowledgebaseNames
+          )
+        ]
+      }
+    );
+  };
   const renderCapabilityRow = (type, item) => {
     const selected = selectedRuntimeCapabilities ? isRuntimeCapabilitySelected(selectedRuntimeCapabilities, type, item.id) : false;
-    const Icon = type === "skill" ? import_lucide_react2.Brain : import_lucide_react2.Plug;
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    const Icon = getCapabilityFallbackIcon(type);
+    const icon = type === "subAgent" && item.subAgent ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      ChatkitAvatar,
+      {
+        avatar: normalizeChatkitAvatar(item.subAgent.avatar),
+        label: item.subAgent.label,
+        className: "h-6 w-6",
+        fallbackClassName: "text-[10px]",
+        imageClassName: "object-cover",
+        "data-slot": "runtime-sub-agent-avatar"
+      }
+    ) : item.icon ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      IconDefinitionRenderer,
+      {
+        icon: item.icon,
+        size: 24,
+        dataSlot: "runtime-capability-meta-icon",
+        fallback: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { size: 16 })
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { size: 16 });
+    const row = /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       DropdownMenuCheckboxItem,
       {
         checked: selected,
@@ -2252,29 +2624,47 @@ function ComposerMenu({
           selected && "bg-muted"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center text-muted-foreground", children: item.icon ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            IconDefinitionRenderer,
-            {
-              icon: item.icon,
-              size: 24,
-              dataSlot: "runtime-capability-meta-icon",
-              fallback: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { size: 16 })
-            }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { size: 16 }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "min-w-0 flex-1 text-left", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "block truncate", children: item.label }),
-            (item.description || item.fallbackDescription) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "block truncate text-xs text-muted-foreground", children: item.description ?? item.fallbackDescription })
-          ] })
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center text-muted-foreground", children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "min-w-0 flex-1 text-left", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "block truncate", children: item.label }),
+            (item.description || item.fallbackDescription) && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "block truncate text-xs text-muted-foreground", children: item.description ?? item.fallbackDescription })
+          ] }),
+          type === "subAgent" && item.subAgent ? renderSubAgentInfoButton(item.subAgent) : null
         ]
       },
       item.id
     );
+    return row;
   };
   const renderCapabilityPanel = (panel) => {
-    const isSkillsPanel = panel === "skills";
-    const title = isSkillsPanel ? t("composer.capabilities.skills") : t("composer.capabilities.plugins");
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    const title = panel === "skills" ? t("composer.capabilities.skills") : panel === "plugins" ? t("composer.capabilities.plugins") : t("composer.capabilities.subAgents");
+    const rows = panel === "skills" ? skills.map(
+      (skill) => renderCapabilityRow("skill", {
+        id: skill.id,
+        label: skill.label,
+        description: skill.description,
+        fallbackDescription: skill.repositoryName,
+        icon: skill.meta?.icon
+      })
+    ) : panel === "plugins" ? plugins.map(
+      (plugin) => renderCapabilityRow("plugin", {
+        id: plugin.nodeKey,
+        label: plugin.label,
+        description: plugin.description,
+        fallbackDescription: plugin.provider,
+        icon: plugin.meta?.icon
+      })
+    ) : subAgents.map(
+      (subAgent) => renderCapabilityRow("subAgent", {
+        id: subAgent.nodeKey,
+        label: subAgent.label,
+        description: subAgent.description,
+        fallbackDescription: subAgent.name,
+        subAgent
+      })
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
         DropdownMenuItem,
         {
           onSelect: (event) => {
@@ -2283,33 +2673,17 @@ function ComposerMenu({
           },
           className: cn("gap-3 px-3 py-2", roundedClass),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "flex h-6 w-6 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.ArrowLeft, { size: 16 }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "min-w-0 flex-1 text-left", children: title })
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "flex h-6 w-6 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react2.ArrowLeft, { size: 16 }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "min-w-0 flex-1 text-left", children: title })
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DropdownMenuSeparator, {}),
-      isSkillsPanel ? skills.map(
-        (skill) => renderCapabilityRow("skill", {
-          id: skill.id,
-          label: skill.label,
-          description: skill.description,
-          fallbackDescription: skill.repositoryName,
-          icon: skill.meta?.icon
-        })
-      ) : plugins.map(
-        (plugin) => renderCapabilityRow("plugin", {
-          id: plugin.nodeKey,
-          label: plugin.label,
-          description: plugin.description,
-          fallbackDescription: plugin.provider,
-          icon: plugin.meta?.icon
-        })
-      )
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DropdownMenuSeparator, {}),
+      rows
     ] });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(DropdownMenu, { open, onOpenChange: handleOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(DropdownMenu, { open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       Button,
       {
         ref: triggerRef,
@@ -2323,12 +2697,12 @@ function ComposerMenu({
           open && "bg-muted"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.Plus, { size: 18 }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "sr-only", children: t("composer.openMenu") })
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react2.Plus, { size: 18 }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "sr-only", children: t("composer.openMenu") })
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       DropdownMenuContent,
       {
         align: "start",
@@ -2339,22 +2713,22 @@ function ComposerMenu({
           activePanel ? "w-80 min-w-72" : "w-72",
           roundedClass
         ),
-        children: activePanel ? renderCapabilityPanel(activePanel) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-          attachmentsEnabled && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        children: activePanel ? renderCapabilityPanel(activePanel) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+          attachmentsEnabled && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
               DropdownMenuItem,
               {
                 onSelect: handleAttachmentClick,
                 className: cn("gap-3 px-3 py-2", roundedClass),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "flex h-6 w-6 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.Paperclip, { size: 16 }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: t("composer.addAttachment") })
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "flex h-6 w-6 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react2.Paperclip, { size: 16 }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: t("composer.addAttachment") })
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DropdownMenuSeparator, {})
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DropdownMenuSeparator, {})
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
             DropdownMenuItem,
             {
               role: "switch",
@@ -2369,9 +2743,9 @@ function ComposerMenu({
                 planModeEnabled && "bg-muted"
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "flex h-6 w-6 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.ListChecks, { size: 16 }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "min-w-0 flex-1 text-left", children: t("composer.planMode") }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "flex h-6 w-6 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react2.ListChecks, { size: 16 }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "min-w-0 flex-1 text-left", children: t("composer.planMode") }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                   "span",
                   {
                     className: cn(
@@ -2379,7 +2753,7 @@ function ComposerMenu({
                       planModeEnabled ? "bg-primary" : "bg-muted-foreground/20"
                     ),
                     "aria-hidden": "true",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                       "span",
                       {
                         className: cn(
@@ -2393,9 +2767,9 @@ function ComposerMenu({
               ]
             }
           ),
-          hasRuntimeCapabilities && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DropdownMenuSeparator, {}),
-            skills.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          hasRuntimeCapabilities && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DropdownMenuSeparator, {}),
+            skills.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
               DropdownMenuItem,
               {
                 onSelect: (event) => {
@@ -2404,14 +2778,14 @@ function ComposerMenu({
                 },
                 className: cn("gap-3 px-3 py-2", roundedClass),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "flex h-6 w-6 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.Brain, { size: 16 }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "min-w-0 flex-1 text-left", children: t("composer.capabilities.skills") }),
-                  selectedSkillCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "rounded-full bg-primary/10 px-1.5 py-0.5 text-xs font-medium text-primary", children: selectedSkillCount }),
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.ChevronRight, { size: 16, className: "text-muted-foreground" })
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "flex h-6 w-6 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react2.Brain, { size: 16 }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "min-w-0 flex-1 text-left", children: t("composer.capabilities.skills") }),
+                  selectedSkillCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "rounded-full bg-primary/10 px-1.5 py-0.5 text-xs font-medium text-primary", children: selectedSkillCount }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react2.ChevronRight, { size: 16, className: "text-muted-foreground" })
                 ]
               }
             ),
-            plugins.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+            plugins.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
               DropdownMenuItem,
               {
                 onSelect: (event) => {
@@ -2420,16 +2794,32 @@ function ComposerMenu({
                 },
                 className: cn("gap-3 px-3 py-2", roundedClass),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "flex h-6 w-6 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.Plug, { size: 16 }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "min-w-0 flex-1 text-left", children: t("composer.capabilities.plugins") }),
-                  selectedPluginCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "rounded-full bg-primary/10 px-1.5 py-0.5 text-xs font-medium text-primary", children: selectedPluginCount }),
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.ChevronRight, { size: 16, className: "text-muted-foreground" })
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "flex h-6 w-6 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react2.Plug, { size: 16 }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "min-w-0 flex-1 text-left", children: t("composer.capabilities.plugins") }),
+                  selectedPluginCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "rounded-full bg-primary/10 px-1.5 py-0.5 text-xs font-medium text-primary", children: selectedPluginCount }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react2.ChevronRight, { size: 16, className: "text-muted-foreground" })
+                ]
+              }
+            ),
+            subAgents.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+              DropdownMenuItem,
+              {
+                onSelect: (event) => {
+                  event.preventDefault();
+                  setActivePanel("subAgents");
+                },
+                className: cn("gap-3 px-3 py-2", roundedClass),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "flex h-6 w-6 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react2.Bot, { size: 16 }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "min-w-0 flex-1 text-left", children: t("composer.capabilities.subAgents") }),
+                  selectedSubAgentCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "rounded-full bg-primary/10 px-1.5 py-0.5 text-xs font-medium text-primary", children: selectedSubAgentCount }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react2.ChevronRight, { size: 16, className: "text-muted-foreground" })
                 ]
               }
             )
           ] }),
-          tools.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DropdownMenuSeparator, {}),
-          tools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          tools.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DropdownMenuSeparator, {}),
+          tools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
             DropdownMenuItem,
             {
               onSelect: () => handleToolSelect(tool),
@@ -2439,8 +2829,8 @@ function ComposerMenu({
                 selectedTool?.id === tool.id && "bg-muted"
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "flex h-6 w-6 items-center justify-center text-muted-foreground", children: getIconComponent(tool.icon) }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: tool.label })
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "flex h-6 w-6 items-center justify-center text-muted-foreground", children: getIconComponent(tool.icon) }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: tool.label })
               ]
             },
             tool.id
@@ -2448,7 +2838,7 @@ function ComposerMenu({
         ] })
       }
     ),
-    planModeEnabled && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    planModeEnabled && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       "button",
       {
         type: "button",
@@ -2460,8 +2850,8 @@ function ComposerMenu({
           roundedClass
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "relative inline-flex h-4 w-4 items-center justify-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "relative inline-flex h-4 w-4 items-center justify-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               import_lucide_react2.ListChecks,
               {
                 "data-slot": "plan-mode-indicator-icon",
@@ -2469,7 +2859,7 @@ function ComposerMenu({
                 className: "absolute transition-all duration-150 group-hover:scale-75 group-hover:opacity-0"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               import_lucide_react2.X,
               {
                 "data-slot": "plan-mode-remove-icon",
@@ -2478,7 +2868,7 @@ function ComposerMenu({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: t("composer.planModeActive") })
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: t("composer.planModeActive") })
         ]
       }
     )
@@ -2487,73 +2877,7 @@ function ComposerMenu({
 
 // src/components/composer/SendButton.tsx
 var import_lucide_react3 = require("lucide-react");
-
-// src/components/ui/tooltip.tsx
-var React7 = require("react");
-var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
-var import_jsx_runtime8 = require("react/jsx-runtime");
-function TooltipProvider({
-  delayDuration = 0,
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    TooltipPrimitive.Provider,
-    {
-      "data-slot": "tooltip-provider",
-      delayDuration,
-      ...props
-    }
-  );
-}
-function Tooltip({
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    TooltipPrimitive.Root,
-    {
-      "data-slot": "tooltip",
-      ...props
-    }
-  ) });
-}
-function TooltipTrigger({
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    TooltipPrimitive.Trigger,
-    {
-      "data-slot": "tooltip-trigger",
-      ...props
-    }
-  );
-}
-function TooltipContent({
-  className,
-  sideOffset = 0,
-  hideArrow = false,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.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_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function SendButton({
   disabled = false,
   isLoading = false,
@@ -2566,7 +2890,7 @@ function SendButton({
   const { theme } = useTheme();
   const roundedClass = getRoundedClass(theme.radius);
   if (showStop) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       "button",
       {
         type: "button",
@@ -2579,11 +2903,11 @@ function SendButton({
           "hover:scale-105 active:scale-95"
         ),
         "aria-label": stopLabel,
-        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.Square, { size: 14, fill: "currentColor", stroke: "currentColor", strokeWidth: 0 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react3.Square, { size: 14, fill: "currentColor", stroke: "currentColor", strokeWidth: 0 })
       }
     );
   }
-  const button = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  const button = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "button",
     {
       type: "submit",
@@ -2597,15 +2921,15 @@ function SendButton({
         "disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:scale-100"
       ),
       "aria-label": sendLabel,
-      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.ArrowUp, { size: 18, strokeWidth: 2.5 })
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react3.ArrowUp, { size: 18, strokeWidth: 2.5 })
     }
   );
   if (!shortcuts?.length || disabled) {
     return button;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(Tooltip, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(TooltipTrigger, { asChild: true, children: button }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TooltipTrigger, { asChild: true, children: button }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       TooltipContent,
       {
         side: "top",
@@ -2615,13 +2939,13 @@ function SendButton({
           "min-w-36 border border-border/70 bg-background px-3 py-2 text-foreground shadow-lg",
           roundedClass
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "space-y-1", children: shortcuts.map((shortcut) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "space-y-1", children: shortcuts.map((shortcut) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
           "div",
           {
             className: "flex items-center justify-between gap-4 text-sm",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "font-medium", children: shortcut.label }),
-              /* @__PURE__ */ (0, import_jsx_runtime9.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 })
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "font-medium", children: shortcut.label }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.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}`
@@ -2632,28 +2956,28 @@ function SendButton({
 }
 
 // src/components/history/HistorySidebar.tsx
-var React10 = __toESM(require("react"), 1);
+var React12 = __toESM(require("react"), 1);
 var import_lucide_react5 = require("lucide-react");
 
 // src/components/ui/scroll-area.tsx
-var React8 = __toESM(require("react"), 1);
+var React10 = __toESM(require("react"), 1);
 var ScrollAreaPrimitive = __toESM(require("@radix-ui/react-scroll-area"), 1);
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var ScrollArea = React8.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var ScrollArea = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
   ScrollAreaPrimitive.Root,
   {
     ref,
     className: cn("relative overflow-hidden", className),
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ScrollBar, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ScrollAreaPrimitive.Corner, {})
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ScrollAreaPrimitive.Viewport, { className: "h-full w-full rounded-[inherit]", children }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ScrollBar, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ScrollAreaPrimitive.Corner, {})
     ]
   }
 ));
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React8.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+var ScrollBar = React10.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
   ScrollAreaPrimitive.ScrollAreaScrollbar,
   {
     ref,
@@ -2665,30 +2989,30 @@ var ScrollBar = React8.forwardRef(({ className, orientation = "vertical", ...pro
       className
     ),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ScrollAreaPrimitive.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
   }
 ));
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
 // src/components/ui/sheet.tsx
-var React9 = require("react");
+var React11 = require("react");
 var import_lucide_react4 = require("lucide-react");
 var SheetPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function Sheet({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SheetPrimitive.Root, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SheetPrimitive.Root, { ...props });
 }
 function SheetTrigger({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SheetPrimitive.Trigger, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SheetPrimitive.Trigger, { ...props });
 }
 function SheetPortal({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SheetPrimitive.Portal, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SheetPrimitive.Portal, { ...props });
 }
 function SheetOverlay({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     SheetPrimitive.Overlay,
     {
       className: cn(
@@ -2712,9 +3036,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_runtime11.jsxs)(SheetPortal, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SheetOverlay, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(SheetPortal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SheetOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       SheetPrimitive.Content,
       {
         className: cn(
@@ -2725,9 +3049,9 @@ function SheetContent({
         ...props,
         children: [
           children,
-          /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime11.jsx)(import_lucide_react4.X, { size: 16 }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "sr-only", children: t("sheet.close") })
+          /* @__PURE__ */ (0, import_jsx_runtime13.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_runtime13.jsx)(import_lucide_react4.X, { size: 16 }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "sr-only", children: t("sheet.close") })
           ] })
         ]
       }
@@ -2738,7 +3062,7 @@ function SheetHeader({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "div",
     {
       className: cn(
@@ -2753,7 +3077,7 @@ function SheetTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     SheetPrimitive.Title,
     {
       className: cn("text-lg font-semibold text-foreground", className),
@@ -2763,7 +3087,7 @@ function SheetTitle({
 }
 
 // src/components/history/HistorySidebar.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function HistorySidebar({
   threads = [],
   currentThreadId,
@@ -2774,7 +3098,7 @@ function HistorySidebar({
   disabled = false
 }) {
   const { t } = useChatkitTranslation();
-  const [open, setOpen] = React10.useState(false);
+  const [open, setOpen] = React12.useState(false);
   const handleNewThread = () => {
     onNewThread?.();
     setOpen(false);
@@ -2783,9 +3107,9 @@ function HistorySidebar({
     onSelectThread?.(id);
     setOpen(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Sheet, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Tooltip, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "inline-flex h-8 w-8", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SheetTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Sheet, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Tooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "inline-flex h-8 w-8", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SheetTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
         Button,
         {
           variant: "ghost",
@@ -2794,28 +3118,28 @@ function HistorySidebar({
           className: "h-8 w-8 cursor-pointer",
           "aria-label": t("history.threadHistory"),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.History, { size: 16 }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "sr-only", children: t("history.threadHistory") })
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react5.History, { size: 16 }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "sr-only", children: t("history.threadHistory") })
           ]
         }
       ) }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TooltipContent, { side: "bottom", children: t("history.threadHistory") })
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TooltipContent, { side: "bottom", children: t("history.threadHistory") })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(SheetContent, { side: "right", className: "w-80 p-0", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SheetHeader, { className: "border-b p-4", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SheetTitle, { children: t("history.title") }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "p-4", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(SheetContent, { side: "right", className: "w-80 p-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SheetHeader, { className: "border-b p-4", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SheetTitle, { children: t("history.title") }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "p-4", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
         Button,
         {
           onClick: handleNewThread,
           className: "w-full justify-start gap-2",
           variant: "secondary",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.PlusCircle, { size: 16 }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react5.PlusCircle, { size: 16 }),
             t("history.newThread")
           ]
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ScrollArea, { className: "h-[calc(100vh-140px)]", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "px-4 pb-4", children: threads.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "py-8 text-center text-sm text-muted-foreground", children: t("history.empty") }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "space-y-1", children: threads.map((thread) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ScrollArea, { className: "h-[calc(100vh-140px)]", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "px-4 pb-4", children: threads.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "py-8 text-center text-sm text-muted-foreground", children: t("history.empty") }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "space-y-1", children: threads.map((thread) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
         "div",
         {
           className: cn(
@@ -2825,9 +3149,9 @@ function HistorySidebar({
           ),
           onClick: () => handleSelectThread(thread.id),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react5.MessageSquare, { size: 16 }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "flex-1 truncate", children: thread.title }),
-            showDelete && onDeleteThread && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react5.MessageSquare, { size: 16 }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "flex-1 truncate", children: thread.title }),
+            showDelete && onDeleteThread && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
               "button",
               {
                 type: "button",
@@ -2836,7 +3160,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_runtime12.jsx)(import_lucide_react5.Trash2, { size: 14 })
+                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react5.Trash2, { size: 14 })
               }
             )
           ]
@@ -2848,22 +3172,22 @@ function HistorySidebar({
 }
 
 // src/components/composer/pending-follow-ups.tsx
-var React12 = __toESM(require("react"), 1);
+var React14 = __toESM(require("react"), 1);
 var import_lucide_react6 = require("lucide-react");
 
 // src/components/ui/popover.tsx
-var React11 = require("react");
+var React13 = require("react");
 var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"), 1);
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function Popover({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
 }
 function PopoverTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
 }
 function PopoverContent({
   className,
@@ -2871,7 +3195,7 @@ function PopoverContent({
   sideOffset = 4,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     PopoverPrimitive.Content,
     {
       "data-slot": "popover-content",
@@ -2887,7 +3211,7 @@ function PopoverContent({
 }
 
 // src/components/composer/pending-follow-ups.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function getPendingFollowUpText(item, referencedContentFallback) {
   const text = item.request?.input?.input?.trim() ?? "";
   if (text) {
@@ -2932,9 +3256,9 @@ function PendingFollowUps({
   const { t } = useChatkitTranslation();
   const rounded = useRoundedClasses();
   const referencedContentFallback = t("chat.referencedContentOnly");
-  const [isSettingsOpen, setIsSettingsOpen] = React12.useState(false);
-  const [openMenuId, setOpenMenuId] = React12.useState(null);
-  React12.useEffect(() => {
+  const [isSettingsOpen, setIsSettingsOpen] = React14.useState(false);
+  const [openMenuId, setOpenMenuId] = React14.useState(null);
+  React14.useEffect(() => {
     if (items.length === 0 && isSettingsOpen) {
       setIsSettingsOpen(false);
     }
@@ -2945,7 +3269,7 @@ function PendingFollowUps({
   if (items.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "div",
     {
       className: cn(
@@ -2954,11 +3278,11 @@ function PendingFollowUps({
         attachToComposer ? rounded.top : rounded.panel,
         className
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "space-y-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "text-xs font-medium text-foreground", children: t("chat.followUps.pending") }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Tooltip, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "text-xs font-medium text-foreground", children: t("chat.followUps.pending") }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Tooltip, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
               "button",
               {
                 type: "button",
@@ -2972,15 +3296,15 @@ function PendingFollowUps({
                 "aria-expanded": isSettingsOpen,
                 "aria-controls": "follow-ups-settings-panel",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react6.SlidersHorizontal, { className: "h-3.5 w-3.5" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "sr-only", children: t("chat.followUps.settings") })
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react6.SlidersHorizontal, { className: "h-3.5 w-3.5" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "sr-only", children: t("chat.followUps.settings") })
                 ]
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TooltipContent, { side: "top", children: t("chat.followUps.settings") })
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TooltipContent, { side: "top", children: t("chat.followUps.settings") })
           ] })
         ] }),
-        isSettingsOpen && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        isSettingsOpen && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           "div",
           {
             id: "follow-ups-settings-panel",
@@ -2988,20 +3312,20 @@ function PendingFollowUps({
               "border border-border/70 bg-muted/20 px-3 py-2",
               rounded.panel
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "min-w-0", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "text-xs font-medium text-foreground", children: t("chat.followUps.label") }),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "text-[11px] text-muted-foreground", children: isLoading ? t("chat.followUps.activeHint") : t("chat.followUps.idleHint") })
+            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "text-xs font-medium text-foreground", children: t("chat.followUps.label") }),
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "text-[11px] text-muted-foreground", children: isLoading ? t("chat.followUps.activeHint") : t("chat.followUps.idleHint") })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                 "div",
                 {
                   className: cn(
                     "inline-flex shrink-0 border border-border bg-background p-1",
                     rounded.control
                   ),
-                  children: ["queue", "steer"].map((behavior) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(Tooltip, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  children: ["queue", "steer"].map((behavior) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Tooltip, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                       "button",
                       {
                         type: "button",
@@ -3017,7 +3341,7 @@ function PendingFollowUps({
                         children: behavior === "queue" ? t("chat.followUps.queue") : t("chat.followUps.steer")
                       }
                     ) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TooltipContent, { side: "top", children: behavior === "queue" ? t("chat.followUps.queueHint") : t("chat.followUps.steerHint") })
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TooltipContent, { side: "top", children: behavior === "queue" ? t("chat.followUps.queueHint") : t("chat.followUps.steerHint") })
                   ] }, behavior))
                 }
               )
@@ -3026,18 +3350,18 @@ function PendingFollowUps({
         ),
         items.map((item) => {
           const canSendItemNow = item.mode === "queue" && canSendNow(item.id);
-          return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             "div",
             {
               className: cn(
                 "border border-border/50 bg-muted/15 px-2 py-1",
                 rounded.panel
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-start gap-2.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react6.CornerDownLeft, { className: "mt-0.5 h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "min-w-0 flex-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-start gap-2", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-start gap-2.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react6.CornerDownLeft, { className: "mt-0.5 h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
+                /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-start gap-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                       "div",
                       {
                         className: "truncate text-[13px] leading-5 text-foreground",
@@ -3051,8 +3375,8 @@ function PendingFollowUps({
                         )
                       }
                     ) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex shrink-0 items-center gap-1", children: [
-                      item.mode === "queue" && isLoading && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex shrink-0 items-center gap-1", children: [
+                      item.mode === "queue" && isLoading && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                         "button",
                         {
                           type: "button",
@@ -3066,7 +3390,7 @@ function PendingFollowUps({
                           children: t("chat.followUps.steerAction")
                         }
                       ),
-                      canSendItemNow && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                      canSendItemNow && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                         "button",
                         {
                           type: "button",
@@ -3080,7 +3404,7 @@ function PendingFollowUps({
                           children: t("chat.followUps.sendNow")
                         }
                       ),
-                      item.mode === "queue" && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                      item.mode === "queue" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                         "button",
                         {
                           type: "button",
@@ -3091,16 +3415,16 @@ function PendingFollowUps({
                           ),
                           "aria-label": t("chat.followUps.remove"),
                           title: t("chat.followUps.remove"),
-                          children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react6.Trash2, { size: 13 })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react6.Trash2, { size: 13 })
                         }
                       ),
-                      item.mode === "queue" && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+                      item.mode === "queue" && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
                         Popover,
                         {
                           open: openMenuId === item.id,
                           onOpenChange: (open) => setOpenMenuId(open ? item.id : null),
                           children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                               "button",
                               {
                                 type: "button",
@@ -3110,10 +3434,10 @@ function PendingFollowUps({
                                 ),
                                 "aria-label": t("chat.followUps.more"),
                                 title: t("chat.followUps.more"),
-                                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react6.Ellipsis, { size: 13 })
+                                children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react6.Ellipsis, { size: 13 })
                               }
                             ) }),
-                            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                               PopoverContent,
                               {
                                 align: "end",
@@ -3122,8 +3446,8 @@ function PendingFollowUps({
                                   "w-52 border-border/70 bg-background p-1.5",
                                   rounded.panel
                                 ),
-                                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col gap-1", children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+                                children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex flex-col gap-1", children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
                                     "button",
                                     {
                                       type: "button",
@@ -3136,12 +3460,12 @@ function PendingFollowUps({
                                         rounded.control
                                       ),
                                       children: [
-                                        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react6.PencilLine, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
-                                        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: t("chat.followUps.edit") })
+                                        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react6.PencilLine, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
+                                        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: t("chat.followUps.edit") })
                                       ]
                                     }
                                   ),
-                                  /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+                                  /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
                                     "button",
                                     {
                                       type: "button",
@@ -3154,8 +3478,8 @@ function PendingFollowUps({
                                         rounded.control
                                       ),
                                       children: [
-                                        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react6.CornerDownLeft, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
-                                        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: t("chat.followUps.turnOffQueueing") })
+                                        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react6.CornerDownLeft, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
+                                        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: t("chat.followUps.turnOffQueueing") })
                                       ]
                                     }
                                   )
@@ -3167,9 +3491,9 @@ function PendingFollowUps({
                       )
                     ] })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-1.5 text-[10px] leading-4 text-muted-foreground", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react6.Info, { className: "h-3 w-3 shrink-0" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "truncate", children: item.mode === "queue" ? canSendItemNow ? t("chat.followUps.manualQueueHint") : t("chat.followUps.queueHint") : t("chat.followUps.steerHint") })
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center gap-1.5 text-[10px] leading-4 text-muted-foreground", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react6.Info, { className: "h-3 w-3 shrink-0" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "truncate", children: item.mode === "queue" ? canSendItemNow ? t("chat.followUps.manualQueueHint") : t("chat.followUps.queueHint") : t("chat.followUps.steerHint") })
                   ] })
                 ] })
               ] })
@@ -3183,9 +3507,9 @@ function PendingFollowUps({
 }
 
 // src/components/composer/pending-todos.tsx
-var React13 = __toESM(require("react"), 1);
+var React15 = __toESM(require("react"), 1);
 var import_lucide_react7 = require("lucide-react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function useRoundedClasses2() {
   const { theme } = useTheme();
   return {
@@ -3200,12 +3524,12 @@ function useRoundedClasses2() {
 }
 function TodoStatusIcon({ status }) {
   if (status === "completed") {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react7.CheckCircle2, { className: "mt-1 h-4 w-4 shrink-0 text-emerald-600" });
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react7.CheckCircle2, { className: "mt-1 h-4 w-4 shrink-0 text-emerald-600" });
   }
   if (status === "in_progress") {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react7.CircleDashed, { className: "mt-1 h-4 w-4 shrink-0 text-foreground/70" });
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react7.CircleDashed, { className: "mt-1 h-4 w-4 shrink-0 text-foreground/70" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react7.Circle, { className: "mt-1 h-4 w-4 shrink-0 text-muted-foreground" });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react7.Circle, { className: "mt-1 h-4 w-4 shrink-0 text-muted-foreground" });
 }
 function PendingTodos({
   snapshot,
@@ -3214,16 +3538,16 @@ function PendingTodos({
 }) {
   const { t } = useChatkitTranslation();
   const rounded = useRoundedClasses2();
-  const listId = React13.useId();
-  const [isCollapsed, setIsCollapsed] = React13.useState(false);
-  React13.useEffect(() => {
+  const listId = React15.useId();
+  const [isCollapsed, setIsCollapsed] = React15.useState(false);
+  React15.useEffect(() => {
     setIsCollapsed(false);
   }, [snapshot?.componentId]);
   if (!snapshot || snapshot.items.length === 0) {
     return null;
   }
   const completedCount = countCompletedTodos(snapshot.items);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     "div",
     {
       "aria-live": "polite",
@@ -3234,7 +3558,7 @@ function PendingTodos({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
           "button",
           {
             type: "button",
@@ -3243,14 +3567,14 @@ function PendingTodos({
             "aria-controls": listId,
             onClick: () => setIsCollapsed((prev) => !prev),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex min-w-0 items-center gap-2 text-sm font-medium text-foreground", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react7.ListTodo, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "truncate", children: t("chat.todos.summary", {
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex min-w-0 items-center gap-2 text-sm font-medium text-foreground", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lucide_react7.ListTodo, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "truncate", children: t("chat.todos.summary", {
                   total: snapshot.items.length,
                   completed: completedCount
                 }) })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex items-center shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex items-center shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                 import_lucide_react7.ChevronDown,
                 {
                   className: cn(
@@ -3262,13 +3586,13 @@ function PendingTodos({
             ]
           }
         ),
-        !isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("ol", { id: listId, className: "mt-3 space-y-2.5", children: snapshot.items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+        !isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("ol", { id: listId, className: "mt-3 space-y-2.5", children: snapshot.items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime17.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_runtime15.jsx)(TodoStatusIcon, { status: item.status }),
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TodoStatusIcon, { status: item.status }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
                 "span",
                 {
                   className: cn(
@@ -3281,7 +3605,7 @@ function PendingTodos({
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                 "span",
                 {
                   title: item.content,
@@ -3302,9 +3626,9 @@ function PendingTodos({
 }
 
 // src/components/composer/request-user-input-panel.tsx
-var React14 = __toESM(require("react"), 1);
+var React16 = __toESM(require("react"), 1);
 var import_lucide_react8 = require("lucide-react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var emptyQuestions = [];
 function useRoundedClasses3() {
   const { theme } = useTheme();
@@ -3430,21 +3754,21 @@ function RequestUserInputPanel({
 }) {
   const { t } = useChatkitTranslation();
   const rounded = useRoundedClasses3();
-  const [drafts, setDrafts] = React14.useState({});
-  const [currentQuestionIndex, setCurrentQuestionIndex] = React14.useState(0);
-  const otherInputRef = React14.useRef(null);
+  const [drafts, setDrafts] = React16.useState({});
+  const [currentQuestionIndex, setCurrentQuestionIndex] = React16.useState(0);
+  const otherInputRef = React16.useRef(null);
   const questions = request?.params.questions ?? emptyQuestions;
-  React14.useEffect(() => {
+  React16.useEffect(() => {
     setDrafts({});
     setCurrentQuestionIndex(0);
   }, [request?.id]);
-  React14.useEffect(() => {
+  React16.useEffect(() => {
     if (questions.length === 0) return;
     setCurrentQuestionIndex(
       (index) => Math.min(Math.max(index, 0), questions.length - 1)
     );
   }, [questions.length]);
-  const setQuestionDraft = React14.useCallback(
+  const setQuestionDraft = React16.useCallback(
     (questionId, draft) => {
       setDrafts((previous) => ({
         ...previous,
@@ -3453,10 +3777,10 @@ function RequestUserInputPanel({
     },
     []
   );
-  const focusOtherInput = React14.useCallback(() => {
+  const focusOtherInput = React16.useCallback(() => {
     window.setTimeout(() => otherInputRef.current?.focus(), 0);
   }, []);
-  const selectOption = React14.useCallback(
+  const selectOption = React16.useCallback(
     (question, optionIndex) => {
       const previousDraft = drafts[question.id];
       setQuestionDraft(question.id, {
@@ -3467,7 +3791,7 @@ function RequestUserInputPanel({
     },
     [drafts, setQuestionDraft]
   );
-  const selectOther = React14.useCallback(
+  const selectOther = React16.useCallback(
     (question, otherText2) => {
       const previousDraft = drafts[question.id];
       setQuestionDraft(question.id, {
@@ -3478,7 +3802,7 @@ function RequestUserInputPanel({
     },
     [drafts, focusOtherInput, setQuestionDraft]
   );
-  const goToQuestion = React14.useCallback(
+  const goToQuestion = React16.useCallback(
     (index) => {
       if (questions.length === 0) return;
       setCurrentQuestionIndex(
@@ -3487,7 +3811,7 @@ function RequestUserInputPanel({
     },
     [questions.length]
   );
-  const answers = React14.useMemo(
+  const answers = React16.useMemo(
     () => questions.map((question) => getAnswerForQuestion(question, drafts[question.id])).filter((answer) => Boolean(answer)),
     [drafts, questions]
   );
@@ -3496,11 +3820,11 @@ function RequestUserInputPanel({
   const currentDraft = currentQuestion ? drafts[currentQuestion.id] : void 0;
   const currentAnswer = currentQuestion ? getAnswerForQuestion(currentQuestion, currentDraft) : null;
   const isLastQuestion = currentQuestionIndex === questions.length - 1;
-  const buildAnswersFromDrafts = React14.useCallback(
+  const buildAnswersFromDrafts = React16.useCallback(
     (nextDrafts) => questions.map((question) => getAnswerForQuestion(question, nextDrafts[question.id])).filter((answer) => Boolean(answer)),
     [questions]
   );
-  const submitOrFocusFirstMissing = React14.useCallback(
+  const submitOrFocusFirstMissing = React16.useCallback(
     (nextDrafts) => {
       const nextAnswers = buildAnswersFromDrafts(nextDrafts);
       if (nextAnswers.length === questions.length) {
@@ -3516,7 +3840,7 @@ function RequestUserInputPanel({
     },
     [buildAnswersFromDrafts, goToQuestion, onSubmit, questions]
   );
-  const activateOption = React14.useCallback(
+  const activateOption = React16.useCallback(
     (question, optionIndex) => {
       const previousDraft = drafts[question.id];
       const nextDrafts = {
@@ -3542,7 +3866,7 @@ function RequestUserInputPanel({
       submitOrFocusFirstMissing
     ]
   );
-  const chooseChoiceByIndex = React14.useCallback(
+  const chooseChoiceByIndex = React16.useCallback(
     (choiceIndex) => {
       if (!currentQuestion) return;
       if (choiceIndex < 0) return;
@@ -3556,7 +3880,7 @@ function RequestUserInputPanel({
     },
     [currentQuestion, selectOption, selectOther]
   );
-  const moveCurrentChoice = React14.useCallback(
+  const moveCurrentChoice = React16.useCallback(
     (direction) => {
       if (!currentQuestion) return;
       const choiceCount = currentQuestion.options.length + 1;
@@ -3566,7 +3890,7 @@ function RequestUserInputPanel({
     },
     [chooseChoiceByIndex, currentDraft, currentQuestion]
   );
-  const handleContinue = React14.useCallback(() => {
+  const handleContinue = React16.useCallback(() => {
     if (!currentAnswer) return;
     if (!isLastQuestion) {
       goToQuestion(currentQuestionIndex + 1);
@@ -3593,7 +3917,7 @@ function RequestUserInputPanel({
     onSubmit,
     questions
   ]);
-  React14.useEffect(() => {
+  React16.useEffect(() => {
     if (!request) return;
     const handleKeyDown = (event) => {
       if (event.isComposing) return;
@@ -3668,7 +3992,7 @@ function RequestUserInputPanel({
     }));
   };
   const otherText = currentDraft?.otherText ?? "";
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "section",
     {
       "aria-label": t("composer.requestUserInput.title"),
@@ -3681,9 +4005,9 @@ function RequestUserInputPanel({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
               "div",
               {
                 className: cn(
@@ -3693,7 +4017,7 @@ function RequestUserInputPanel({
                 children: currentQuestion.header
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
               "h3",
               {
                 className: cn(
@@ -3704,7 +4028,7 @@ function RequestUserInputPanel({
               }
             )
           ] }),
-          questions.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+          questions.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
             "div",
             {
               className: cn(
@@ -3712,7 +4036,7 @@ function RequestUserInputPanel({
                 rounded.density.pager
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                   "button",
                   {
                     type: "button",
@@ -3723,14 +4047,14 @@ function RequestUserInputPanel({
                       rounded.density.pagerButton
                     ),
                     "aria-label": t("composer.requestUserInput.previousQuestion"),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react8.ChevronLeft, { className: rounded.density.pagerIcon })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.ChevronLeft, { className: rounded.density.pagerIcon })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "min-w-12 text-center", children: t("composer.requestUserInput.questionProgress", {
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "min-w-12 text-center", children: t("composer.requestUserInput.questionProgress", {
                   current: currentQuestionIndex + 1,
                   total: questions.length
                 }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                   "button",
                   {
                     type: "button",
@@ -3741,18 +4065,18 @@ function RequestUserInputPanel({
                       rounded.density.pagerButton
                     ),
                     "aria-label": t("composer.requestUserInput.nextQuestion"),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react8.ChevronRight, { className: rounded.density.pagerIcon })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.ChevronRight, { className: rounded.density.pagerIcon })
                   }
                 )
               ]
             }
           ) : null
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: rounded.density.choices, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: rounded.density.choices, children: [
           currentQuestion.options.map((option, optionIndex) => {
             const selected = currentDraft?.type === "option" && currentDraft.optionIndex === optionIndex;
             const parsedLabel = parseRecommendedLabel(option.label);
-            return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
               "div",
               {
                 role: "button",
@@ -3774,20 +4098,20 @@ function RequestUserInputPanel({
                   selected ? "bg-muted text-foreground" : "text-foreground/90 hover:bg-muted/55"
                 ),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "text-sm font-semibold text-muted-foreground", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "text-sm font-semibold text-muted-foreground", children: [
                     optionIndex + 1,
                     "."
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "min-w-0", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "inline min-w-0 text-sm font-semibold leading-5", children: parsedLabel.label }),
-                    parsedLabel.recommended ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "ml-1.5 inline-flex items-center gap-1 text-sm font-semibold text-primary", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react8.Check, { className: "h-3.5 w-3.5" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "min-w-0", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "inline min-w-0 text-sm font-semibold leading-5", children: parsedLabel.label }),
+                    parsedLabel.recommended ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "ml-1.5 inline-flex items-center gap-1 text-sm font-semibold text-primary", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Check, { className: "h-3.5 w-3.5" }),
                       "(",
                       t("composer.requestUserInput.recommended"),
                       ")"
                     ] }) : null,
-                    option.description ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Tooltip, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                    option.description ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(Tooltip, { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                         "button",
                         {
                           type: "button",
@@ -3799,10 +4123,10 @@ function RequestUserInputPanel({
                           "aria-label": t("composer.requestUserInput.optionInfo", {
                             label: parsedLabel.label
                           }),
-                          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react8.Info, { className: "h-3.5 w-3.5" })
+                          children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.Info, { className: "h-3.5 w-3.5" })
                         }
                       ) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                         TooltipContent,
                         {
                           side: "top",
@@ -3813,15 +4137,15 @@ function RequestUserInputPanel({
                       )
                     ] }) : null
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "flex items-center justify-end text-muted-foreground", children: selected ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "flex items-center justify-end text-muted-foreground", children: selected ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
                     "span",
                     {
                       "data-slot": "request-user-input-option-keyboard-hint",
                       "aria-hidden": "true",
                       className: "flex items-center gap-0.5",
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react8.ArrowUp, { className: "h-4 w-4 opacity-45" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react8.ArrowDown, { className: "h-4 w-4 opacity-45" })
+                        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.ArrowUp, { className: "h-4 w-4 opacity-45" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.ArrowDown, { className: "h-4 w-4 opacity-45" })
                       ]
                     }
                   ) : null })
@@ -3830,7 +4154,7 @@ function RequestUserInputPanel({
               `${currentQuestion.id}-${optionIndex}`
             );
           }),
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
             "label",
             {
               className: cn(
@@ -3840,11 +4164,11 @@ function RequestUserInputPanel({
                 currentDraft?.type === "other" ? "bg-muted text-foreground" : "hover:bg-muted/55"
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "text-sm font-semibold text-muted-foreground", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "text-sm font-semibold text-muted-foreground", children: [
                   currentQuestion.options.length + 1,
                   "."
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "grid min-w-0 grid-cols-[auto_minmax(0,1fr)] items-center gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "grid min-w-0 grid-cols-[auto_minmax(0,1fr)] items-center gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                   "input",
                   {
                     ref: otherInputRef,
@@ -3862,7 +4186,7 @@ function RequestUserInputPanel({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
           "div",
           {
             className: cn(
@@ -3870,7 +4194,7 @@ function RequestUserInputPanel({
               rounded.density.footer
             ),
             children: [
-              onDismiss ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+              onDismiss ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
                 "button",
                 {
                   type: "button",
@@ -3881,11 +4205,11 @@ function RequestUserInputPanel({
                   ),
                   children: [
                     t("composer.requestUserInput.dismiss"),
-                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("kbd", { className: "rounded-full bg-muted px-2 py-1 text-xs font-semibold text-muted-foreground", children: "ESC" })
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("kbd", { className: "rounded-full bg-muted px-2 py-1 text-xs font-semibold text-muted-foreground", children: "ESC" })
                   ]
                 }
               ) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
                 "button",
                 {
                   type: "button",
@@ -3899,14 +4223,14 @@ function RequestUserInputPanel({
                   ),
                   children: [
                     t("composer.requestUserInput.continue"),
-                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
                       "span",
                       {
                         className: cn(
                           "inline-flex items-center justify-center rounded-full bg-background/20",
                           rounded.density.continueIcon
                         ),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react8.CornerDownLeft, { className: "h-3.5 w-3.5" })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_lucide_react8.CornerDownLeft, { className: "h-3.5 w-3.5" })
                       }
                     )
                   ]
@@ -3921,30 +4245,30 @@ function RequestUserInputPanel({
 }
 
 // src/components/thread/messages/ai.tsx
-var React21 = __toESM(require("react"), 1);
+var React23 = __toESM(require("react"), 1);
 var import_lucide_react13 = require("lucide-react");
 
 // src/components/ui/badge.tsx
-var React15 = __toESM(require("react"), 1);
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var React17 = __toESM(require("react"), 1);
+var import_jsx_runtime19 = 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 = React15.forwardRef(
+var Badge = React17.forwardRef(
   ({ className, variant = "default", ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { ref, className: cn(base, variants[variant], className), ...props });
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { ref, className: cn(base, variants[variant], className), ...props });
   }
 );
 Badge.displayName = "Badge";
 
 // src/components/ui/card.tsx
-var React16 = __toESM(require("react"), 1);
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var Card = React16.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+var React18 = __toESM(require("react"), 1);
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var Card = React18.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "div",
     {
       ref,
@@ -3957,45 +4281,45 @@ var Card = React16.forwardRef(
   )
 );
 Card.displayName = "Card";
-var CardHeader = React16.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { ref, className: cn("flex flex-col gap-1.5 px-6 pt-6", className), ...props })
+var CardHeader = React18.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { ref, className: cn("flex flex-col gap-1.5 px-6 pt-6", className), ...props })
 );
 CardHeader.displayName = "CardHeader";
-var CardTitle = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("h3", { ref, className: cn("text-lg font-semibold leading-tight", className), ...props }));
+var CardTitle = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h3", { ref, className: cn("text-lg font-semibold leading-tight", className), ...props }));
 CardTitle.displayName = "CardTitle";
-var CardDescription = React16.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
+var CardDescription = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { ref, className: cn("text-sm text-muted-foreground", className), ...props }));
 CardDescription.displayName = "CardDescription";
-var CardContent = React16.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { ref, className: cn("px-6 pb-6", className), ...props })
+var CardContent = React18.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { ref, className: cn("px-6 pb-6", className), ...props })
 );
 CardContent.displayName = "CardContent";
-var CardFooter = React16.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { ref, className: cn("flex items-center px-6 pb-6", className), ...props })
+var CardFooter = React18.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { ref, className: cn("flex items-center px-6 pb-6", className), ...props })
 );
 CardFooter.displayName = "CardFooter";
-var CardAction = React16.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { ref, className: cn("ml-auto flex items-center", className), ...props })
+var CardAction = React18.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { ref, className: cn("ml-auto flex items-center", className), ...props })
 );
 CardAction.displayName = "CardAction";
 
 // src/components/ui/tabs.tsx
-var React17 = __toESM(require("react"), 1);
-var import_jsx_runtime19 = require("react/jsx-runtime");
-var TabsContext = React17.createContext(null);
+var React19 = __toESM(require("react"), 1);
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var TabsContext = React19.createContext(null);
 function Tabs({ className, defaultValue, value, onValueChange, ...props }) {
-  const [internalValue, setInternalValue] = React17.useState(defaultValue ?? "");
+  const [internalValue, setInternalValue] = React19.useState(defaultValue ?? "");
   const activeValue = value ?? internalValue;
-  const setValue = React17.useCallback(
+  const setValue = React19.useCallback(
     (nextValue) => {
       if (value === void 0) setInternalValue(nextValue);
       onValueChange?.(nextValue);
     },
     [onValueChange, value]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(TabsContext.Provider, { value: { value: activeValue, setValue }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cn("w-full", className), ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TabsContext.Provider, { value: { value: activeValue, setValue }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: cn("w-full", className), ...props }) });
 }
-var TabsList = React17.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+var TabsList = React19.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     "div",
     {
       ref,
@@ -4009,14 +4333,14 @@ var TabsList = React17.forwardRef(
   )
 );
 TabsList.displayName = "TabsList";
-var TabsTrigger = React17.forwardRef(
+var TabsTrigger = React19.forwardRef(
   ({ className, value, onClick, ...props }, ref) => {
-    const context = React17.useContext(TabsContext);
+    const context = React19.useContext(TabsContext);
     if (!context) {
       throw new Error("TabsTrigger must be used within Tabs");
     }
     const isActive = context.value === value;
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       "button",
       {
         ref,
@@ -4038,14 +4362,14 @@ var TabsTrigger = React17.forwardRef(
   }
 );
 TabsTrigger.displayName = "TabsTrigger";
-var TabsContent = React17.forwardRef(
+var TabsContent = React19.forwardRef(
   ({ className, value, ...props }, ref) => {
-    const context = React17.useContext(TabsContext);
+    const context = React19.useContext(TabsContext);
     if (!context) {
       throw new Error("TabsContent must be used within Tabs");
     }
     if (context.value !== value) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       "div",
       {
         ref,
@@ -4075,7 +4399,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_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime22 = 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);
@@ -4086,7 +4410,7 @@ var SyntaxHighlighter = ({
   language,
   className
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     import_react_syntax_highlighter.PrismAsyncLight,
     {
       language,
@@ -4107,14 +4431,14 @@ var SyntaxHighlighter = ({
 var Dialog = __toESM(require("@radix-ui/react-dialog"), 1);
 var import_mermaid = __toESM(require("mermaid"), 1);
 var import_lucide_react9 = require("lucide-react");
-var React18 = __toESM(require("react"), 1);
+var React20 = __toESM(require("react"), 1);
 
 // src/components/thread/tooltip-icon-button.tsx
 var import_react5 = require("react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var TooltipIconButton = (0, import_react5.forwardRef)(({ children, tooltip, side = "bottom", className, ...rest }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Tooltip, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
       Button,
       {
         variant: "ghost",
@@ -4124,17 +4448,17 @@ var TooltipIconButton = (0, import_react5.forwardRef)(({ children, tooltip, side
         ref,
         children: [
           children,
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "sr-only", children: tooltip })
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "sr-only", children: tooltip })
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(TooltipContent, { side, children: tooltip })
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TooltipContent, { side, children: tooltip })
   ] }) });
 });
 TooltipIconButton.displayName = "TooltipIconButton";
 
 // src/components/thread/mermaid-block.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime24 = 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;
@@ -4382,24 +4706,24 @@ function MermaidPreviewDialog({
   svgMarkup,
   title
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Dialog.Root, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Dialog.Portal, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.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_runtime22.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_runtime22.jsxs)("div", { className: "flex items-center justify-between gap-4 border-b border-border px-5 py-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Dialog.Title, { className: "text-base font-semibold text-foreground", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Dialog.Root, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Dialog.Portal, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime24.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_runtime24.jsxs)("div", { className: "flex items-center justify-between gap-4 border-b border-border px-5 py-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Dialog.Title, { className: "text-base font-semibold text-foreground", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime22.jsx)(import_lucide_react9.X, { className: "size-4" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "sr-only", children: closeLabel })
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react9.X, { className: "size-4" }),
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "sr-only", children: closeLabel })
             ]
           }
         ) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex-1 overflow-auto bg-card p-6", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex-1 overflow-auto bg-card p-6", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         "div",
         {
           "data-slot": "mermaid-preview",
@@ -4413,24 +4737,24 @@ function MermaidPreviewDialog({
 function MermaidBlock({ code }) {
   const { t } = useChatkitTranslation();
   const { theme, isDarkMode } = useTheme();
-  const containerRef = React18.useRef(null);
-  const renderHostRef = React18.useRef(null);
-  const renderSequenceRef = React18.useRef(0);
-  const copyResetTimeoutRef = React18.useRef(null);
-  const diagramId = React18.useId().replace(/:/g, "");
-  const [activeTab, setActiveTab] = React18.useState("diagram");
-  const [isCopied, setIsCopied] = React18.useState(false);
-  const [isPreviewOpen, setIsPreviewOpen] = React18.useState(false);
-  const [isRendering, setIsRendering] = React18.useState(true);
-  const [renderError, setRenderError] = React18.useState(null);
-  const [svgMarkup, setSvgMarkup] = React18.useState(null);
-  const normalizedCode = React18.useMemo(() => normalizeMermaidCode(code), [code]);
-  const clearCopyResetTimeout = React18.useCallback(() => {
+  const containerRef = React20.useRef(null);
+  const renderHostRef = React20.useRef(null);
+  const renderSequenceRef = React20.useRef(0);
+  const copyResetTimeoutRef = React20.useRef(null);
+  const diagramId = React20.useId().replace(/:/g, "");
+  const [activeTab, setActiveTab] = React20.useState("diagram");
+  const [isCopied, setIsCopied] = React20.useState(false);
+  const [isPreviewOpen, setIsPreviewOpen] = React20.useState(false);
+  const [isRendering, setIsRendering] = React20.useState(true);
+  const [renderError, setRenderError] = React20.useState(null);
+  const [svgMarkup, setSvgMarkup] = React20.useState(null);
+  const normalizedCode = React20.useMemo(() => normalizeMermaidCode(code), [code]);
+  const clearCopyResetTimeout = React20.useCallback(() => {
     if (copyResetTimeoutRef.current === null) return;
     window.clearTimeout(copyResetTimeoutRef.current);
     copyResetTimeoutRef.current = null;
   }, []);
-  React18.useEffect(() => {
+  React20.useEffect(() => {
     let isActive = true;
     async function runRender() {
       const container = containerRef.current;
@@ -4468,17 +4792,17 @@ function MermaidBlock({ code }) {
       }
     };
   }, [diagramId, isDarkMode, normalizedCode, theme]);
-  React18.useEffect(() => {
+  React20.useEffect(() => {
     clearCopyResetTimeout();
     setIsCopied(false);
   }, [activeTab, clearCopyResetTimeout, code]);
-  React18.useEffect(
+  React20.useEffect(
     () => () => {
       clearCopyResetTimeout();
     },
     [clearCopyResetTimeout]
   );
-  const handleDownload = React18.useCallback(() => {
+  const handleDownload = React20.useCallback(() => {
     if (!svgMarkup) return;
     const blob = new Blob([svgMarkup], {
       type: "image/svg+xml;charset=utf-8"
@@ -4492,7 +4816,7 @@ function MermaidBlock({ code }) {
     anchor.remove();
     window.URL.revokeObjectURL(url);
   }, [diagramId, svgMarkup]);
-  const handleCopyCode = React18.useCallback(() => {
+  const handleCopyCode = React20.useCallback(() => {
     if (!code || isCopied) return;
     navigator.clipboard.writeText(code).then(() => {
       setIsCopied(true);
@@ -4506,21 +4830,21 @@ function MermaidBlock({ code }) {
   }, [clearCopyResetTimeout, code, isCopied]);
   const hasRenderedDiagram = svgMarkup !== null && !renderError;
   const statusMessage = isRendering ? t("markdown.mermaid.rendering") : t("markdown.mermaid.failed");
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       Tabs,
       {
         className: "w-full",
         onValueChange: (value) => setActiveTab(value),
         value: activeTab,
-        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
           "div",
           {
             ref: containerRef,
             "data-slot": "mermaid-block",
             className: "relative overflow-hidden text-card-foreground",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                 "div",
                 {
                   ref: renderHostRef,
@@ -4529,62 +4853,62 @@ function MermaidBlock({ code }) {
                   "data-slot": "mermaid-render-host"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-3 px-4 py-3", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex min-w-0 items-center gap-3", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "inline-flex size-9 shrink-0 items-center justify-center rounded-full bg-muted text-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react9.Code2Icon, { className: "size-4" }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "truncate text-base font-semibold text-foreground", children: t("markdown.mermaid.title") })
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-wrap items-center justify-between gap-3 px-4 py-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex min-w-0 items-center gap-3", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "inline-flex size-9 shrink-0 items-center justify-center rounded-full bg-muted text-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react9.Code2Icon, { className: "size-4" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "truncate text-base font-semibold text-foreground", children: t("markdown.mermaid.title") })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex shrink-0 items-center gap-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center gap-1", children: [
-                    activeTab === "diagram" && hasRenderedDiagram ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex shrink-0 items-center gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center gap-1", children: [
+                    activeTab === "diagram" && hasRenderedDiagram ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                       TooltipIconButton,
                       {
                         onClick: handleDownload,
                         tooltip: t("markdown.mermaid.download"),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react9.DownloadIcon, { className: "size-4" })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react9.DownloadIcon, { className: "size-4" })
                       }
                     ) : null,
-                    activeTab === "diagram" && hasRenderedDiagram ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                    activeTab === "diagram" && hasRenderedDiagram ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                       TooltipIconButton,
                       {
                         onClick: () => setIsPreviewOpen(true),
                         tooltip: t("markdown.mermaid.fullScreen"),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react9.ExpandIcon, { className: "size-4" })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react9.ExpandIcon, { className: "size-4" })
                       }
                     ) : null,
-                    activeTab === "code" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                    activeTab === "code" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                       TooltipIconButton,
                       {
                         onClick: handleCopyCode,
                         tooltip: t("markdown.copy"),
-                        children: isCopied ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react9.CheckIcon, { className: "size-4" }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react9.CopyIcon, { className: "size-4" })
+                        children: isCopied ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react9.CheckIcon, { className: "size-4" }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react9.CopyIcon, { className: "size-4" })
                       }
                     ) : null
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(TabsList, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TabsTrigger, { value: "diagram", children: t("markdown.mermaid.diagram") }),
-                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TabsTrigger, { value: "code", children: t("markdown.mermaid.code") })
+                  /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(TabsList, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TabsTrigger, { value: "diagram", children: t("markdown.mermaid.diagram") }),
+                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TabsTrigger, { value: "code", children: t("markdown.mermaid.code") })
                   ] })
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "border-t border-border pt-4", children: [
-                renderError ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { role: "alert", className: "mb-4 text-sm font-medium text-destructive", children: t("markdown.mermaid.failed") }) : null,
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TabsContent, { value: "diagram", className: "mt-0 space-y-4", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "border-t border-border pt-4", children: [
+                renderError ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { role: "alert", className: "mb-4 text-sm font-medium text-destructive", children: t("markdown.mermaid.failed") }) : null,
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TabsContent, { value: "diagram", className: "mt-0 space-y-4", children: /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime22.jsx)(
+                    children: hasRenderedDiagram ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                       "div",
                       {
                         "data-slot": "mermaid-diagram",
                         dangerouslySetInnerHTML: { __html: svgMarkup }
                       }
-                    ) : /* @__PURE__ */ (0, import_jsx_runtime22.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_runtime22.jsx)(import_lucide_react9.Loader2, { className: "size-5 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react9.TriangleAlert, { className: "size-5 text-destructive" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime24.jsx)(import_lucide_react9.Loader2, { className: "size-5 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react9.TriangleAlert, { className: "size-5 text-destructive" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                         "p",
                         {
                           className: cn("text-sm font-medium", !isRendering && "text-destructive"),
@@ -4595,12 +4919,12 @@ function MermaidBlock({ code }) {
                     ] })
                   }
                 ) }),
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TabsContent, { value: "code", className: "mt-0", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TabsContent, { value: "code", className: "mt-0", children: /* @__PURE__ */ (0, import_jsx_runtime24.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_runtime22.jsx)("code", { className: "block whitespace-pre font-mono", children: code })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("code", { className: "block whitespace-pre font-mono", children: code })
                   }
                 ) })
               ] })
@@ -4609,7 +4933,7 @@ function MermaidBlock({ code }) {
         )
       }
     ),
-    svgMarkup ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    svgMarkup ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       MermaidPreviewDialog,
       {
         closeLabel: t("sheet.close"),
@@ -4624,7 +4948,7 @@ function MermaidBlock({ code }) {
 
 // src/components/thread/markdown-text.tsx
 var import_katex_min = require("katex/dist/katex.min.css");
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime25 = 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))";
@@ -4729,7 +5053,7 @@ var splitProposedPlanSegments = (markdown) => {
   return segments;
 };
 function MarkdownContent({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     import_react_markdown.default,
     {
       remarkPlugins: [import_remark_gfm.default, import_remark_math.default],
@@ -4752,7 +5076,7 @@ function PlanCard({ children }) {
   const onDownload = () => {
     downloadMarkdown(planMarkdown);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     "section",
     {
       "data-slot": "markdown-plan-card",
@@ -4760,28 +5084,28 @@ function PlanCard({ children }) {
         "relative my-5 max-w-4xl overflow-hidden rounded-2xl border border-border bg-muted/25 shadow-lg"
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
           "div",
           {
             "data-slot": "markdown-plan-card-header",
             className: "flex items-center justify-between gap-3 bg-background/80 px-4 py-3",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex min-w-0 items-center gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "inline-flex size-8 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react10.ListChecksIcon, { className: "size-4" }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h2", { className: "truncate text-base font-semibold text-foreground", children: t("markdown.plan.title") })
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex min-w-0 items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "inline-flex size-8 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react10.ListChecksIcon, { className: "size-4" }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h2", { className: "truncate text-base font-semibold text-foreground", children: t("markdown.plan.title") })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex shrink-0 items-center gap-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex shrink-0 items-center gap-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                   TooltipIconButton,
                   {
                     type: "button",
                     tooltip: t("markdown.plan.download"),
                     onClick: onDownload,
                     className: "text-muted-foreground hover:text-foreground",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react10.DownloadIcon, { className: "size-4" })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react10.DownloadIcon, { className: "size-4" })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
                   TooltipIconButton,
                   {
                     type: "button",
@@ -4789,12 +5113,12 @@ function PlanCard({ children }) {
                     onClick: onCopy,
                     className: "text-muted-foreground hover:text-foreground",
                     children: [
-                      !isCopied && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react10.CopyIcon, { className: "size-4" }),
-                      isCopied && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react10.CheckIcon, { className: "size-4" })
+                      !isCopied && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react10.CopyIcon, { className: "size-4" }),
+                      isCopied && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react10.CheckIcon, { className: "size-4" })
                     ]
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                   TooltipIconButton,
                   {
                     type: "button",
@@ -4803,7 +5127,7 @@ function PlanCard({ children }) {
                     "aria-controls": contentId,
                     onClick: () => setIsExpanded((previous) => !previous),
                     className: "text-muted-foreground hover:text-foreground",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                       import_lucide_react10.ChevronDownIcon,
                       {
                         className: cn(
@@ -4818,7 +5142,7 @@ function PlanCard({ children }) {
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "div",
           {
             id: contentId,
@@ -4828,10 +5152,10 @@ function PlanCard({ children }) {
               "relative w-full px-4 py-3 transition-[max-height] duration-300 ease-in-out",
               isExpanded ? "max-h-[80vh] overflow-auto" : "max-h-[200px] overflow-hidden"
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(MarkdownContent, { children: planMarkdown })
+            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(MarkdownContent, { children: planMarkdown })
           }
         ),
-        !isExpanded && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 flex h-32 items-end justify-center bg-gradient-to-b from-background/0 via-background/80 to-background/95 pb-6", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        !isExpanded && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 flex h-32 items-end justify-center bg-gradient-to-b from-background/0 via-background/80 to-background/95 pb-6", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "button",
           {
             type: "button",
@@ -4866,16 +5190,16 @@ var CodeHeader = ({ language, code }) => {
     if (!code || isCopied) return;
     copyToClipboard(code);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime23.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_runtime23.jsx)("span", { className: "lowercase [&>span]:text-xs", children: language }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(TooltipIconButton, { tooltip: t("markdown.copy"), onClick: onCopy, children: [
-      !isCopied && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react10.CopyIcon, {}),
-      isCopied && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_lucide_react10.CheckIcon, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime25.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_runtime25.jsx)("span", { className: "lowercase [&>span]:text-xs", children: language }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(TooltipIconButton, { tooltip: t("markdown.copy"), onClick: onCopy, children: [
+      !isCopied && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react10.CopyIcon, {}),
+      isCopied && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react10.CheckIcon, {})
     ] })
   ] });
 };
 var defaultComponents = {
-  h1: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  h1: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "h1",
     {
       className: cn(
@@ -4885,7 +5209,7 @@ var defaultComponents = {
       ...stripMarkdownNode(props)
     }
   ),
-  h2: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  h2: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "h2",
     {
       className: cn(
@@ -4895,7 +5219,7 @@ var defaultComponents = {
       ...stripMarkdownNode(props)
     }
   ),
-  h3: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  h3: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "h3",
     {
       className: cn(
@@ -4905,7 +5229,7 @@ var defaultComponents = {
       ...stripMarkdownNode(props)
     }
   ),
-  h4: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  h4: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "h4",
     {
       className: cn(
@@ -4915,7 +5239,7 @@ var defaultComponents = {
       ...stripMarkdownNode(props)
     }
   ),
-  h5: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  h5: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "h5",
     {
       className: cn(
@@ -4925,21 +5249,21 @@ var defaultComponents = {
       ...stripMarkdownNode(props)
     }
   ),
-  h6: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  h6: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "h6",
     {
       className: cn("my-4 font-semibold first:mt-0 last:mb-0", className),
       ...stripMarkdownNode(props)
     }
   ),
-  p: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  p: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "p",
     {
       className: cn("mt-5 mb-5 leading-7 first:mt-0 last:mb-0", className),
       ...stripMarkdownNode(props)
     }
   ),
-  a: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  a: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "a",
     {
       className: cn(
@@ -4951,7 +5275,7 @@ var defaultComponents = {
       ...stripMarkdownNode(props)
     }
   ),
-  blockquote: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  blockquote: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "blockquote",
     {
       className: cn(
@@ -4961,14 +5285,14 @@ var defaultComponents = {
       ...stripMarkdownNode(props)
     }
   ),
-  ul: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  ul: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "ul",
     {
       className: cn("my-5 list-outside list-disc pl-6 [&>li]:mt-2", className),
       ...stripMarkdownNode(props)
     }
   ),
-  ol: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  ol: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "ol",
     {
       className: cn(
@@ -4978,19 +5302,19 @@ var defaultComponents = {
       ...stripMarkdownNode(props)
     }
   ),
-  hr: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  hr: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "hr",
     {
       className: cn("my-5 border-b", className),
       ...stripMarkdownNode(props)
     }
   ),
-  table: ({ className, style, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  table: ({ className, style, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "div",
     {
       "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_runtime23.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
         "table",
         {
           className: cn(
@@ -5006,7 +5330,7 @@ var defaultComponents = {
       )
     }
   ),
-  th: ({ className, style, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  th: ({ className, style, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "th",
     {
       className: cn(
@@ -5022,7 +5346,7 @@ var defaultComponents = {
       ...stripMarkdownNode(props)
     }
   ),
-  td: ({ className, style, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  td: ({ className, style, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "td",
     {
       className: cn(
@@ -5038,7 +5362,7 @@ var defaultComponents = {
       ...stripMarkdownNode(props)
     }
   ),
-  tr: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  tr: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "tr",
     {
       className: cn(
@@ -5048,14 +5372,14 @@ var defaultComponents = {
       ...stripMarkdownNode(props)
     }
   ),
-  sup: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  sup: ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "sup",
     {
       className: cn("[&>a]:text-xs [&>a]:no-underline", className),
       ...stripMarkdownNode(props)
     }
   ),
-  pre: ({ className, children }) => 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_runtime23.jsx)(import_jsx_runtime23.Fragment, { children }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  pre: ({ className, children }) => 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_runtime25.jsx)(import_jsx_runtime25.Fragment, { children }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     "div",
     {
       className: cn(
@@ -5078,15 +5402,15 @@ var defaultComponents = {
       const language = match[1];
       const normalizedCode = code.replace(/\n$/, "");
       if (language === "mermaid") {
-        return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(MermaidBlock, { code: normalizedCode });
+        return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(MermaidBlock, { code: normalizedCode });
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CodeHeader, { language, code: normalizedCode }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SyntaxHighlighter, { language, className, children: normalizedCode })
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CodeHeader, { language, code: normalizedCode }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SyntaxHighlighter, { language, className, children: normalizedCode })
       ] });
     }
     if (isBlockCode) {
-      return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
         "code",
         {
           className: cn(
@@ -5098,7 +5422,7 @@ var defaultComponents = {
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       "code",
       {
         className: cn(
@@ -5117,14 +5441,14 @@ var defaultComponents = {
   }
 };
 var MarkdownTextImpl = ({ children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "markdown-content", children: splitProposedPlanSegments(children).map(
-    (segment, index) => segment.type === "plan" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PlanCard, { children: segment.content }, index) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(MarkdownContent, { children: segment.content }, index)
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "markdown-content", children: splitProposedPlanSegments(children).map(
+    (segment, index) => segment.type === "plan" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(PlanCard, { children: segment.content }, index) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(MarkdownContent, { children: segment.content }, index)
   ) });
 };
 var MarkdownText = (0, import_react6.memo)(MarkdownTextImpl);
 
 // src/components/thread/messages/tool-component-group.tsx
-var React19 = __toESM(require("react"), 1);
+var React21 = __toESM(require("react"), 1);
 var import_lucide_react11 = require("lucide-react");
 
 // src/i18n/localized-text.ts
@@ -5177,7 +5501,7 @@ function resolveLocalizedText(value, language) {
 }
 
 // src/components/thread/messages/tool-component-group.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var toolStatusConfig = {
   success: {
     iconClass: "border-green-500 text-green-700",
@@ -5269,11 +5593,11 @@ function formatStepDuration(durationMs) {
   return `${minutes}m ${seconds}s`;
 }
 function useToolStepDurationLabel(data) {
-  const [durationNow, setDurationNow] = React19.useState(() => Date.now());
+  const [durationNow, setDurationNow] = React21.useState(() => Date.now());
   const createdAt = parseStepDate(data.created_date);
   const endedAt = parseStepDate(data.end_date);
   const status = data.status;
-  React19.useEffect(() => {
+  React21.useEffect(() => {
     if (status !== "running" || createdAt === null || endedAt !== null) {
       return;
     }
@@ -5479,14 +5803,14 @@ function JsonTreeNode({
   const isArray = Array.isArray(value);
   const isObject = isJsonObjectValue(value);
   const isExpandable = isArray || isObject;
-  const [isExpanded, setIsExpanded] = React19.useState(depth < 2);
+  const [isExpanded, setIsExpanded] = React21.useState(depth < 2);
   if (!isExpandable) {
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex min-w-0 gap-2 leading-6", children: [
-      label ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "shrink-0 font-medium text-foreground/80", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex min-w-0 gap-2 leading-6", children: [
+      label ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "shrink-0 font-medium text-foreground/80", children: [
         label,
         ":"
       ] }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         "span",
         {
           className: cn(
@@ -5500,8 +5824,8 @@ function JsonTreeNode({
   }
   const entries = isArray ? value.map((item, index) => [String(index), item]) : Object.entries(value);
   const summary = isArray ? `Array(${value.length})` : `Object(${entries.length})`;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "min-w-0", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "min-w-0", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
       "button",
       {
         type: "button",
@@ -5509,7 +5833,7 @@ function JsonTreeNode({
         "aria-expanded": isExpanded,
         onClick: () => setIsExpanded((prev) => !prev),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             import_lucide_react11.ChevronRight,
             {
               "aria-hidden": "true",
@@ -5519,15 +5843,15 @@ function JsonTreeNode({
               )
             }
           ),
-          label ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "min-w-0 truncate font-medium text-foreground/80", children: [
+          label ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "min-w-0 truncate font-medium text-foreground/80", children: [
             label,
             ":"
           ] }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "shrink-0 text-muted-foreground", children: summary })
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "shrink-0 text-muted-foreground", children: summary })
         ]
       }
     ),
-    isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "ml-4 border-l border-border/70 pl-3", children: entries.map(([entryLabel, entryValue]) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "ml-4 border-l border-border/70 pl-3", children: entries.map(([entryLabel, entryValue]) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       JsonTreeNode,
       {
         label: entryLabel,
@@ -5539,13 +5863,13 @@ function JsonTreeNode({
   ] });
 }
 function JsonTreeView({ value }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "min-w-0 font-mono text-[11px]", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(JsonTreeNode, { value }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "min-w-0 font-mono text-[11px]", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(JsonTreeNode, { value }) });
 }
 function RawJsonBlock({ raw }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("pre", { className: "whitespace-pre-wrap wrap-break-word font-mono text-[11px]", children: raw });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("pre", { className: "whitespace-pre-wrap wrap-break-word font-mono text-[11px]", children: raw });
 }
 function PlainTextBlock({ value, destructive = false }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "pre",
     {
       className: cn(
@@ -5558,15 +5882,15 @@ function PlainTextBlock({ value, destructive = false }) {
 }
 function ToolCallCopyButton({ value }) {
   const { t } = useChatkitTranslation();
-  const [isCopied, setIsCopied] = React19.useState(false);
-  const resetTimeoutRef = React19.useRef(null);
-  const clearResetTimeout = React19.useCallback(() => {
+  const [isCopied, setIsCopied] = React21.useState(false);
+  const resetTimeoutRef = React21.useRef(null);
+  const clearResetTimeout = React21.useCallback(() => {
     if (resetTimeoutRef.current === null) return;
     window.clearTimeout(resetTimeoutRef.current);
     resetTimeoutRef.current = null;
   }, []);
-  React19.useEffect(() => clearResetTimeout, [clearResetTimeout]);
-  const handleCopy = React19.useCallback(() => {
+  React21.useEffect(() => clearResetTimeout, [clearResetTimeout]);
+  const handleCopy = React21.useCallback(() => {
     if (typeof navigator === "undefined" || !navigator.clipboard) return;
     void navigator.clipboard.writeText(value).then(() => {
       setIsCopied(true);
@@ -5578,7 +5902,7 @@ function ToolCallCopyButton({ value }) {
     }).catch(() => void 0);
   }, [clearResetTimeout, value]);
   const label = isCopied ? t("message.toolGroup.copied") : t("message.toolGroup.copy");
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "button",
     {
       type: "button",
@@ -5586,7 +5910,7 @@ function ToolCallCopyButton({ value }) {
       "aria-label": label,
       title: label,
       onClick: handleCopy,
-      children: isCopied ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.Check, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.Copy, { className: "h-3.5 w-3.5", "aria-hidden": "true" })
+      children: isCopied ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react11.Check, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react11.Copy, { className: "h-3.5 w-3.5", "aria-hidden": "true" })
     }
   );
 }
@@ -5597,28 +5921,28 @@ function ToolCallValueBlock({
   const { t } = useChatkitTranslation();
   const detected = detectJsonValue(value);
   if (detected.kind === "text") {
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "min-w-0 space-y-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ToolCallCopyButton, { value: detected.text }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(PlainTextBlock, { value: detected.text, destructive })
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "min-w-0 space-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex justify-end", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ToolCallCopyButton, { value: detected.text }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(PlainTextBlock, { value: detected.text, destructive })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Tabs, { defaultValue: "tree", className: "min-w-0", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "mb-2 flex min-w-0 items-center justify-between gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("span", { className: "min-w-0 truncate text-[11px] text-muted-foreground", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Tabs, { defaultValue: "tree", className: "min-w-0", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "mb-2 flex min-w-0 items-center justify-between gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: "min-w-0 truncate text-[11px] text-muted-foreground", children: [
         t("message.toolGroup.jsonTitle"),
         " \xB7 ",
         getJsonValueSummary(detected.value)
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex shrink-0 items-center gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ToolCallCopyButton, { value: detected.raw }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(TabsList, { className: "rounded-md p-0.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TabsTrigger, { className: "px-2 py-0.5 text-[11px]", value: "tree", children: t("message.toolGroup.jsonTree") }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TabsTrigger, { className: "px-2 py-0.5 text-[11px]", value: "raw", children: t("message.toolGroup.jsonRaw") })
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex shrink-0 items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ToolCallCopyButton, { value: detected.raw }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(TabsList, { className: "rounded-md p-0.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TabsTrigger, { className: "px-2 py-0.5 text-[11px]", value: "tree", children: t("message.toolGroup.jsonTree") }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TabsTrigger, { className: "px-2 py-0.5 text-[11px]", value: "raw", children: t("message.toolGroup.jsonRaw") })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TabsContent, { value: "tree", className: "mt-0", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(JsonTreeView, { value: detected.value }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TabsContent, { value: "raw", className: "mt-0", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(RawJsonBlock, { raw: detected.raw }) })
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TabsContent, { value: "tree", className: "mt-0", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(JsonTreeView, { value: detected.value }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TabsContent, { value: "raw", className: "mt-0", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(RawJsonBlock, { raw: detected.raw }) })
   ] });
 }
 function DefaultToolCallOutput({ data }) {
@@ -5626,15 +5950,15 @@ function DefaultToolCallOutput({ data }) {
   const output = data.output ?? null;
   const error = data.error ?? null;
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "text-[11px] font-medium text-destructive", children: t("message.toolGroup.errorTitle") }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ToolCallValueBlock, { value: error, destructive: true })
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "text-[11px] font-medium text-destructive", children: t("message.toolGroup.errorTitle") }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ToolCallValueBlock, { value: error, destructive: true })
     ] });
   }
   if (output === null) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "space-y-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "text-[11px] font-medium text-muted-foreground", children: t("message.toolGroup.outputTitle") }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ToolCallValueBlock, { value: output })
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "text-[11px] font-medium text-muted-foreground", children: t("message.toolGroup.outputTitle") }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ToolCallValueBlock, { value: output })
   ] });
 }
 function ToolCallDetails({ content }) {
@@ -5644,13 +5968,13 @@ function ToolCallDetails({ content }) {
   const hasInput = data.input !== void 0 && data.input !== null;
   const hasOutput = data.error !== void 0 || data.output !== void 0;
   if (!hasInput && !hasOutput) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "ml-6 mt-1 max-h-60 overflow-auto rounded-md bg-muted/30 px-3 py-2 text-xs text-muted-foreground", children: [
-    hasInput && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "text-[11px] font-medium text-muted-foreground", children: t("message.toolGroup.inputTitle") }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ToolCallValueBlock, { value: data.input })
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "ml-6 mt-1 max-h-60 overflow-auto rounded-md bg-muted/30 px-3 py-2 text-xs text-muted-foreground", children: [
+    hasInput && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "text-[11px] font-medium text-muted-foreground", children: t("message.toolGroup.inputTitle") }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ToolCallValueBlock, { value: data.input })
     ] }),
-    hasInput && hasOutput ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "h-2" }) : null,
-    hasOutput ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(OutputRenderer, { content, data }) : null
+    hasInput && hasOutput ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "h-2" }) : null,
+    hasOutput ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(OutputRenderer, { content, data }) : null
   ] });
 }
 function ToolCallRow({ content }) {
@@ -5661,17 +5985,17 @@ function ToolCallRow({ content }) {
   const ItemStatusIcon = itemConfig?.icon;
   const hasError = status === "fail" || Boolean(data.error);
   const label = getToolActivityLabel(content, i18n2.language);
-  const detailsId = React19.useId();
+  const detailsId = React21.useId();
   const hasDetails = data.input !== void 0 || data.error !== void 0 || data.output !== void 0;
   const durationLabel = useToolStepDurationLabel(data);
-  const [isExpanded, setIsExpanded] = React19.useState(false);
-  React19.useEffect(() => {
+  const [isExpanded, setIsExpanded] = React21.useState(false);
+  React21.useEffect(() => {
     if (status === "running" && data.output !== void 0) {
       setIsExpanded(true);
     }
   }, [data.output, status]);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("li", { className: "min-w-0", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("li", { className: "min-w-0", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
       "button",
       {
         type: "button",
@@ -5687,7 +6011,7 @@ function ToolCallRow({ content }) {
           if (hasDetails) setIsExpanded((prev) => !prev);
         },
         children: [
-          ItemStatusIcon ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          ItemStatusIcon ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             ItemStatusIcon,
             {
               className: cn(
@@ -5696,10 +6020,10 @@ function ToolCallRow({ content }) {
                 status === "running" && "animate-spin"
               )
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": "true" }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "min-w-0 flex-1 truncate", title: label, children: label }),
-          durationLabel ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "shrink-0 text-[11px] tabular-nums text-muted-foreground/80", children: durationLabel }) : null,
-          hasDetails ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "min-w-0 flex-1 truncate", title: label, children: label }),
+          durationLabel ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "shrink-0 text-[11px] tabular-nums text-muted-foreground/80", children: durationLabel }) : null,
+          hasDetails ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             import_lucide_react11.ChevronRight,
             {
               "aria-hidden": "true",
@@ -5712,7 +6036,7 @@ function ToolCallRow({ content }) {
         ]
       }
     ),
-    hasDetails && isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { id: detailsId, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ToolCallDetails, { content }) }) : null
+    hasDetails && isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { id: detailsId, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ToolCallDetails, { content }) }) : null
   ] });
 }
 function ToolComponentGroup({
@@ -5720,9 +6044,9 @@ function ToolComponentGroup({
   hasFollowingItem
 }) {
   const { t } = useChatkitTranslation();
-  const contentId = React19.useId();
+  const contentId = React21.useId();
   const groupStatus = getToolGroupDisplayStatus(items);
-  const [isExpanded, setIsExpanded] = React19.useState(!hasFollowingItem);
+  const [isExpanded, setIsExpanded] = React21.useState(!hasFollowingItem);
   const categoryCounts = getToolGroupCategoryCounts(items);
   const categorySummary = TOOL_GROUP_CATEGORY_ORDER.flatMap((category) => {
     const count = categoryCounts[category] ?? 0;
@@ -5737,11 +6061,11 @@ function ToolComponentGroup({
   const summary = `${t(`message.toolGroup.status.${groupStatus}`)} ${categorySummary}`;
   const config = toolStatusConfig[groupStatus];
   const StatusIcon = config.icon;
-  React19.useEffect(() => {
+  React21.useEffect(() => {
     setIsExpanded(!hasFollowingItem);
   }, [hasFollowingItem, items.length]);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "px-1 py-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "px-1 py-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
       "button",
       {
         type: "button",
@@ -5750,8 +6074,8 @@ function ToolComponentGroup({
         "aria-controls": contentId,
         onClick: () => setIsExpanded((prev) => !prev),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex min-w-0 items-center gap-2 text-sm font-medium text-muted-foreground", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex min-w-0 items-center gap-2 text-sm font-medium text-muted-foreground", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
               StatusIcon,
               {
                 className: cn(
@@ -5760,9 +6084,9 @@ function ToolComponentGroup({
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "truncate", children: summary })
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "truncate", children: summary })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
             import_lucide_react11.ChevronRight,
             {
               "aria-hidden": "true",
@@ -5775,15 +6099,15 @@ function ToolComponentGroup({
         ]
       }
     ),
-    isExpanded && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("ul", { id: contentId, className: "mt-2 max-h-[200px] space-y-1.5 overflow-y-auto pr-1", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ToolCallRow, { content: item }, item.id ?? `tool-item-${index}`)) })
+    isExpanded && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("ul", { id: contentId, className: "mt-2 max-h-[200px] space-y-1.5 overflow-y-auto pr-1", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ToolCallRow, { content: item }, item.id ?? `tool-item-${index}`)) })
   ] });
 }
 
 // src/components/thread/messages/request-user-input-result-card.tsx
-var React20 = require("react");
+var React22 = require("react");
 var import_chatkit_types4 = require("@xpert-ai/chatkit-types");
 var import_lucide_react12 = require("lucide-react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function isRecord2(value) {
   return !!value && typeof value === "object" && !Array.isArray(value);
 }
@@ -5895,7 +6219,7 @@ function RequestUserInputResultCard({
   className
 }) {
   const { t } = useChatkitTranslation();
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     "section",
     {
       "aria-label": t("message.requestUserInputResult.title"),
@@ -5904,23 +6228,23 @@ function RequestUserInputResultCard({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "mb-2 flex items-center gap-2 text-sm font-semibold text-foreground", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_lucide_react12.CheckCircle2, { className: "h-4 w-4 text-primary" }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: t("message.requestUserInputResult.title") })
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "mb-2 flex items-center gap-2 text-sm font-semibold text-foreground", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react12.CheckCircle2, { className: "h-4 w-4 text-primary" }),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: t("message.requestUserInputResult.title") })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "space-y-2", children: result.answers.map((answer, index) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "space-y-2", children: result.answers.map((answer, index) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
           "div",
           {
             className: "rounded-md bg-background/70 px-2.5 py-2",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "text-xs font-medium leading-5 text-muted-foreground", children: answer.question }),
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "mt-0.5 flex min-w-0 flex-wrap items-center gap-1.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "min-w-0 wrap-break-word text-sm font-semibold text-foreground", children: answer.label ?? answer.value }),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "rounded-full bg-muted px-1.5 py-0.5 text-[11px] font-medium text-muted-foreground", children: t(
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "text-xs font-medium leading-5 text-muted-foreground", children: answer.question }),
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "mt-0.5 flex min-w-0 flex-wrap items-center gap-1.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "min-w-0 wrap-break-word text-sm font-semibold text-foreground", children: answer.label ?? answer.value }),
+                /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "rounded-full bg-muted px-1.5 py-0.5 text-[11px] font-medium text-muted-foreground", children: t(
                   answer.type === "other" ? "message.requestUserInputResult.other" : "message.requestUserInputResult.option"
                 ) })
               ] }),
-              answer.description ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "mt-1 text-xs leading-5 text-muted-foreground", children: answer.description }) : null
+              answer.description ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "mt-1 text-xs leading-5 text-muted-foreground", children: answer.description }) : null
             ]
           },
           `${answer.id}-${index}`
@@ -5932,18 +6256,18 @@ function RequestUserInputResultCard({
 
 // src/components/thread/messages/widget.tsx
 var import_a2ui_react = require("@xpert-ai/a2ui-react");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime28 = 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_runtime26.jsx)("div", { className: "space-y-3", children: widgets.map((widget, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.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_runtime26.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       import_a2ui_react.SurfaceRenderer,
       {
         surfaceId,
@@ -5955,7 +6279,7 @@ function WidgetMessage({ messageId, data }) {
 }
 
 // src/components/thread/messages/ai.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function isTextContent2(content) {
   return content.type === "text";
 }
@@ -5988,11 +6312,11 @@ function formatDisplayValue2(value) {
 function ReasoningBlock({ reasoning }) {
   const blocks = reasoning.filter((item) => item.text?.trim());
   if (blocks.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "space-y-2", children: blocks.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "space-y-2", children: blocks.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "div",
     {
       className: "rounded-lg border bg-muted/40 p-3 text-xs text-muted-foreground",
-      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "whitespace-pre-wrap wrap-break-word leading-relaxed", children: item.text })
+      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("p", { className: "whitespace-pre-wrap wrap-break-word leading-relaxed", children: item.text })
     },
     item.id ?? `reasoning-${index}`
   )) });
@@ -6000,20 +6324,20 @@ 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_runtime27.jsxs)(Card, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CardHeader, { className: "space-y-1", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CardTitle, { className: "text-sm", children: "Image" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CardContent, { className: "text-xs text-muted-foreground", children: safeJson2(content) })
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Card, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CardHeader, { className: "space-y-1", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CardTitle, { className: "text-sm", children: "Image" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CardContent, { className: "text-xs text-muted-foreground", children: safeJson2(content) })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("figure", { className: "overflow-hidden rounded-lg border bg-background", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("img", { src: imageUrl, alt: "Assistant output", className: "h-auto w-full object-cover" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("figure", { className: "overflow-hidden rounded-lg border bg-background", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("img", { src: imageUrl, alt: "Assistant output", className: "h-auto w-full object-cover" }) });
 }
 function MemoryBlock({ content }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Card, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(CardHeader, { className: "flex flex-row items-center justify-between gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CardTitle, { className: "text-sm", children: "Memory" }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Badge, { variant: "secondary", children: "Memory" })
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Card, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(CardHeader, { className: "flex flex-row items-center justify-between gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CardTitle, { className: "text-sm", children: "Memory" }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Badge, { variant: "secondary", children: "Memory" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CardContent, { className: "text-xs text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("pre", { className: "whitespace-pre-wrap wrap-break-word", children: safeJson2(content.data ?? []) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CardContent, { className: "text-xs text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("pre", { className: "whitespace-pre-wrap wrap-break-word", children: safeJson2(content.data ?? []) }) })
   ] });
 }
 function parseStepDate2(value) {
@@ -6047,11 +6371,11 @@ function formatStepDuration2(durationMs) {
 }
 function ComponentBlock({ content }) {
   const { i18n: i18n2 } = useChatkitTranslation();
-  const [isExpanded, setIsExpanded] = React21.useState(false);
-  const contentRef = React21.useRef(null);
-  const shouldAutoScrollRef = React21.useRef(true);
-  const previousScrollTopRef = React21.useRef(0);
-  const [durationNow, setDurationNow] = React21.useState(() => Date.now());
+  const [isExpanded, setIsExpanded] = React23.useState(false);
+  const contentRef = React23.useRef(null);
+  const shouldAutoScrollRef = React23.useRef(true);
+  const previousScrollTopRef = React23.useRef(0);
+  const [durationNow, setDurationNow] = React23.useState(() => Date.now());
   const data = getToolStepData(content);
   const category = data.category ?? "Component";
   const title = getToolActivityLabel(content, i18n2.language);
@@ -6065,10 +6389,10 @@ function ComponentBlock({ content }) {
   const endedAt = parseStepDate2(data.end_date);
   const durationMs = createdAt === null ? null : Math.max(0, (endedAt ?? durationNow) - createdAt);
   const durationLabel = durationMs === null ? null : formatStepDuration2(durationMs);
-  React21.useEffect(() => {
+  React23.useEffect(() => {
     if (status === "running" && output !== null) setIsExpanded(true);
   }, [status, output]);
-  React21.useEffect(() => {
+  React23.useEffect(() => {
     if (status !== "running" || createdAt === null || endedAt !== null) {
       return;
     }
@@ -6080,7 +6404,7 @@ function ComponentBlock({ content }) {
       window.clearInterval(timer);
     };
   }, [createdAt, endedAt, status]);
-  React21.useEffect(() => {
+  React23.useEffect(() => {
     const element = contentRef.current;
     if (!element) return;
     previousScrollTopRef.current = element.scrollTop;
@@ -6100,7 +6424,7 @@ function ComponentBlock({ content }) {
       element.removeEventListener("scroll", updateAutoScrollState);
     };
   }, [isExpanded]);
-  React21.useEffect(() => {
+  React23.useEffect(() => {
     if (status !== "running") {
       shouldAutoScrollRef.current = true;
       return;
@@ -6113,24 +6437,24 @@ function ComponentBlock({ content }) {
   }, [isExpanded, output, status]);
   const config = status ? toolStatusConfig[status] : null;
   const StatusIcon = config?.icon;
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Card, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.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_runtime27.jsxs)("div", { className: "flex items-center space-x-1 flex-1 min-w-0", children: [
-        status && StatusIcon && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(StatusIcon, { className: cn("h-4 w-4", config?.iconClass, status === "running" && "animate-spin") }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CardTitle, { className: "text-sm truncate", children: title })
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Card, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.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_runtime29.jsxs)("div", { className: "flex items-center space-x-1 flex-1 min-w-0", children: [
+        status && StatusIcon && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(StatusIcon, { className: cn("h-4 w-4", config?.iconClass, status === "running" && "animate-spin") }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CardTitle, { className: "text-sm truncate", children: title })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-wrap items-center gap-2 shrink-0", children: [
-        durationLabel && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "inline-flex items-center gap-1 text-[11px] text-muted-foreground tabular-nums", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react13.Clock3, { className: "h-3 w-3" }),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: durationLabel })
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-wrap items-center gap-2 shrink-0", children: [
+        durationLabel && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "inline-flex items-center gap-1 text-[11px] text-muted-foreground tabular-nums", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react13.Clock3, { className: "h-3 w-3" }),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { children: durationLabel })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Badge, { variant: "secondary", className: "rounded-lg px-1.5", children: category }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Badge, { variant: "secondary", className: "rounded-lg px-1.5", children: category }),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "button",
           {
             className: "text-muted-foreground hover:text-foreground transition-colors",
             "aria-label": isExpanded ? "Collapse" : "Expand",
-            children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
               import_lucide_react13.ChevronDown,
               {
                 className: cn("h-4 w-4 transition-transform", isExpanded && "rotate-180")
@@ -6140,34 +6464,34 @@ function ComponentBlock({ content }) {
         )
       ] })
     ] }),
-    isExpanded && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(CardContent, { ref: contentRef, className: "text-xs text-muted-foreground max-h-60 overflow-auto", children: [
-      data.input && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("pre", { className: "whitespace-pre-wrap wrap-break-word", children: formatDisplayValue2(data.input) }),
-      error ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("pre", { className: "whitespace-pre-wrap wrap-break-word text-destructive", children: formatDisplayValue2(error) }) : hasOutput && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("pre", { className: "whitespace-pre-wrap wrap-break-word", children: formatDisplayValue2(fallback) })
+    isExpanded && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(CardContent, { ref: contentRef, className: "text-xs text-muted-foreground max-h-60 overflow-auto", children: [
+      data.input && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("pre", { className: "whitespace-pre-wrap wrap-break-word", children: formatDisplayValue2(data.input) }),
+      error ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("pre", { className: "whitespace-pre-wrap wrap-break-word text-destructive", children: formatDisplayValue2(error) }) : hasOutput && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("pre", { className: "whitespace-pre-wrap wrap-break-word", children: formatDisplayValue2(fallback) })
     ] })
   ] });
 }
 function UnknownBlock({ content }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Card, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(CardHeader, { className: "flex flex-row items-center justify-between gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CardTitle, { className: "text-sm", children: "Assistant Content" }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Badge, { variant: "outline", children: content.type ?? "unknown" })
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Card, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(CardHeader, { className: "flex flex-row items-center justify-between gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CardTitle, { className: "text-sm", children: "Assistant Content" }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Badge, { variant: "outline", children: content.type ?? "unknown" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CardContent, { className: "text-xs text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("pre", { className: "whitespace-pre-wrap break-words", children: safeJson2(content) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CardContent, { className: "text-xs text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("pre", { className: "whitespace-pre-wrap break-words", children: safeJson2(content) }) })
   ] });
 }
 function renderContentItem(content, index, message, lookupMessages) {
   const messageId = message.id;
   if (typeof content === "string") {
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MarkdownText, { children: content }) }, `text-${index}`);
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MarkdownText, { children: content }) }, `text-${index}`);
   }
   if (isTextContent2(content)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MarkdownText, { children: content.text }) }, content.id ?? `text-${index}`);
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MarkdownText, { children: content.text }) }, content.id ?? `text-${index}`);
   }
   if (isReasoningContent2(content)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ReasoningBlock, { reasoning: [content] }) }, content.id ?? `reasoning-${index}`);
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ReasoningBlock, { reasoning: [content] }) }, content.id ?? `reasoning-${index}`);
   }
   if (isImageContent(content)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ImageBlock, { content }) }, content.id ?? `image-${index}`);
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ImageBlock, { content }) }, content.id ?? `image-${index}`);
   }
   if (isComponentContent2(content)) {
     const requestUserInputResult = getRequestUserInputResultCardData(
@@ -6175,26 +6499,26 @@ function renderContentItem(content, index, message, lookupMessages) {
       lookupMessages
     );
     if (requestUserInputResult) {
-      return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(RequestUserInputResultCard, { result: requestUserInputResult }) }, content.id ?? `request-user-input-result-${index}`);
+      return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(RequestUserInputResultCard, { result: requestUserInputResult }) }, content.id ?? `request-user-input-result-${index}`);
     }
     if (isWidgetComponent2(content)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(WidgetMessage, { messageId, data: content.data }) }, content.id ?? `widget-${index}`);
+      return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(WidgetMessage, { messageId, data: content.data }) }, content.id ?? `widget-${index}`);
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ComponentBlock, { content }) }, content.id ?? `component-${index}`);
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ComponentBlock, { content }) }, content.id ?? `component-${index}`);
   }
   if (isMemoryContent(content)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MemoryBlock, { content }) }, content.id ?? `memory-${index}`);
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MemoryBlock, { content }) }, content.id ?? `memory-${index}`);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(UnknownBlock, { content }) }, content.id ?? `unknown-${index}`);
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(UnknownBlock, { content }) }, content.id ?? `unknown-${index}`);
 }
 function renderContentUnit(unit, message, lookupMessages, hasFollowingItem) {
   if (unit.type === "item") {
     return renderContentItem(unit.item, unit.index, message, lookupMessages);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "div",
     {
-      children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ToolComponentGroup, { items: unit.items, hasFollowingItem })
+      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ToolComponentGroup, { items: unit.items, hasFollowingItem })
     },
     `tool-group-${unit.startIndex}-${unit.items[0]?.id ?? "tool"}-${unit.items.length}`
   );
@@ -6203,13 +6527,13 @@ function renderContent(message, lookupMessages) {
   const content = message.content;
   if (typeof content === "string") {
     if (!content.trim()) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MarkdownText, { children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MarkdownText, { children: content });
   }
   if (!Array.isArray(content) || content.length === 0) return null;
   const renderUnits = buildToolComponentRenderUnits(content, {
     shouldGroupComponent: (item) => getRequestUserInputResultCardData(item, lookupMessages) === null
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "space-y-3", children: renderUnits.map(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "space-y-3", children: renderUnits.map(
     (unit, index) => renderContentUnit(
       unit,
       message,
@@ -6228,19 +6552,19 @@ function AssistantStreamingIndicator({
     thinking: t("message.thinking"),
     answering: t("message.answering")
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: cn("flex items-center gap-2 text-xs text-muted-foreground", className), children: [
-    status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react13.Loader2, { className: "h-3.5 w-3.5 animate-spin" }),
-    status === "thinking" && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-end gap-1", "aria-hidden": "true", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-current animate-bounce [animation-delay:-0.3s]" }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-current animate-bounce [animation-delay:-0.15s]" }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-current animate-bounce" })
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cn("flex items-center gap-2 text-xs text-muted-foreground", className), children: [
+    status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react13.Loader2, { className: "h-3.5 w-3.5 animate-spin" }),
+    status === "thinking" && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-end gap-1", "aria-hidden": "true", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-current animate-bounce [animation-delay:-0.3s]" }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-current animate-bounce [animation-delay:-0.15s]" }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-current animate-bounce" })
     ] }),
-    status === "answering" && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-end gap-1", "aria-hidden": "true", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "h-2 w-0.5 rounded-full bg-current animate-pulse [animation-delay:-0.25s]" }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "h-3 w-0.5 rounded-full bg-current animate-pulse [animation-delay:-0.1s]" }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "h-2.5 w-0.5 rounded-full bg-current animate-pulse" })
+    status === "answering" && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-end gap-1", "aria-hidden": "true", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "h-2 w-0.5 rounded-full bg-current animate-pulse [animation-delay:-0.25s]" }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "h-3 w-0.5 rounded-full bg-current animate-pulse [animation-delay:-0.1s]" }),
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "h-2.5 w-0.5 rounded-full bg-current animate-pulse" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { children: labelMap[status] })
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { children: labelMap[status] })
   ] });
 }
 function AssistantMessage({
@@ -6256,42 +6580,42 @@ function AssistantMessage({
   const resolvedStreamingStatus = streamingStatus ?? getAssistantStreamingStatus(message, isStreaming);
   const lookupMessages = messages?.length ? messages : [message];
   const answerNode = renderContent(message, lookupMessages);
-  const reasoningNode = hasReasoning ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ReasoningBlock, { reasoning: message.reasoning ?? [] }) : null;
+  const reasoningNode = hasReasoning ? /* @__PURE__ */ (0, import_jsx_runtime29.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_runtime27.jsx)("div", { className: cn("space-y-3", streamingClass, className), children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(AssistantStreamingIndicator, { status: resolvedStreamingStatus }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cn("space-y-3", streamingClass, className), children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AssistantStreamingIndicator, { status: resolvedStreamingStatus }) });
   }
   if (hasContent && hasReasoning) {
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: cn("space-y-3", streamingClass, className), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cn("space-y-3", streamingClass, className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
         Tabs,
         {
           defaultValue: message.status === "reasoning" ? "reasoning" : "answer",
           className: "w-full",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(TabsList, { className: "", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TabsTrigger, { value: "answer", children: t("message.answer") }),
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TabsTrigger, { value: "reasoning", children: t("message.reasoning") })
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(TabsList, { className: "", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TabsTrigger, { value: "answer", children: t("message.answer") }),
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TabsTrigger, { value: "reasoning", children: t("message.reasoning") })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TabsContent, { value: "answer", className: "space-y-3", children: answerNode }),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(TabsContent, { value: "reasoning", className: "space-y-3", children: reasoningNode })
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TabsContent, { value: "answer", className: "space-y-3", children: answerNode }),
+            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TabsContent, { value: "reasoning", className: "space-y-3", children: reasoningNode })
           ]
         }
       ),
-      resolvedStreamingStatus ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(AssistantStreamingIndicator, { status: resolvedStreamingStatus }) : null
+      resolvedStreamingStatus ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AssistantStreamingIndicator, { status: resolvedStreamingStatus }) : null
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: cn("space-y-3", streamingClass, className), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cn("space-y-3", streamingClass, className), children: [
     hasReasoning ? reasoningNode : answerNode,
-    resolvedStreamingStatus ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(AssistantStreamingIndicator, { status: resolvedStreamingStatus }) : null
+    resolvedStreamingStatus ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AssistantStreamingIndicator, { status: resolvedStreamingStatus }) : null
   ] });
 }
 
 // src/components/thread/MessageActions.tsx
-var React22 = __toESM(require("react"), 1);
+var React24 = __toESM(require("react"), 1);
 var import_lucide_react14 = require("lucide-react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function MessageActions({
   content,
   isAssistant = false,
@@ -6300,7 +6624,7 @@ function MessageActions({
   className
 }) {
   const { t } = useChatkitTranslation();
-  const [copied, setCopied] = React22.useState(false);
+  const [copied, setCopied] = React24.useState(false);
   const handleCopy = async () => {
     try {
       await navigator.clipboard.writeText(content);
@@ -6313,7 +6637,7 @@ function MessageActions({
   if (isStreaming) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
     "div",
     {
       className: cn(
@@ -6321,7 +6645,7 @@ function MessageActions({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           "button",
           {
             type: "button",
@@ -6331,17 +6655,17 @@ function MessageActions({
               copied && "text-green-500"
             ),
             title: copied ? t("messageActions.copied") : t("messageActions.copy"),
-            children: copied ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react14.Check, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_lucide_react14.Copy, { size: 14 })
+            children: copied ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react14.Check, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react14.Copy, { size: 14 })
           }
         ),
-        isAssistant && onRetry && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        isAssistant && onRetry && /* @__PURE__ */ (0, import_jsx_runtime30.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_runtime28.jsx)(import_lucide_react14.RefreshCw, { size: 14 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react14.RefreshCw, { size: 14 })
           }
         )
       ]
@@ -6350,20 +6674,20 @@ function MessageActions({
 }
 
 // src/components/thread/StartScreen.tsx
-var React23 = require("react");
+var React25 = require("react");
 var import_lucide_react15 = require("lucide-react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function getIconComponent2(icon) {
   const iconMap = {
-    "circle-question": /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react15.HelpCircle, { size: 20 }),
-    "lightbulb": /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react15.Lightbulb, { size: 20 }),
-    "sparkle": /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react15.Sparkles, { size: 20 }),
-    "write": /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react15.Pencil, { size: 20 }),
-    "search": /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react15.Search, { size: 20 }),
-    "globe": /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react15.Globe, { size: 20 }),
-    "book-open": /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react15.BookOpen, { size: 20 }),
-    "compass": /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react15.Compass, { size: 20 }),
-    "bolt": /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react15.Zap, { size: 20 })
+    "circle-question": /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react15.HelpCircle, { size: 20 }),
+    "lightbulb": /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react15.Lightbulb, { size: 20 }),
+    "sparkle": /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react15.Sparkles, { size: 20 }),
+    "write": /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react15.Pencil, { size: 20 }),
+    "search": /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react15.Search, { size: 20 }),
+    "globe": /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react15.Globe, { size: 20 }),
+    "book-open": /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react15.BookOpen, { size: 20 }),
+    "compass": /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react15.Compass, { size: 20 }),
+    "bolt": /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react15.Zap, { size: 20 })
   };
   return icon ? iconMap[icon] || iconMap["sparkle"] : iconMap["sparkle"];
 }
@@ -6371,9 +6695,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_runtime29.jsxs)("div", { className: cn("flex flex-col items-center justify-center py-12 px-4", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "mb-8 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("h2", { className: "text-2xl font-semibold text-foreground mb-2", children: greeting }) }),
-    prompts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: prompts.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: cn("flex flex-col items-center justify-center py-12 px-4", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "mb-8 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("h2", { className: "text-2xl font-semibold text-foreground mb-2", children: greeting }) }),
+    prompts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: prompts.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
       "button",
       {
         type: "button",
@@ -6384,8 +6708,8 @@ function StartScreen({ startScreen, onPromptClick, className }) {
           "focus:outline-none focus:ring-2 focus:ring-primary/20"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.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_runtime29.jsx)("span", { className: "text-sm font-medium text-foreground", children: item.label })
+          /* @__PURE__ */ (0, import_jsx_runtime31.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_runtime31.jsx)("span", { className: "text-sm font-medium text-foreground", children: item.label })
         ]
       },
       `prompt-${index}`
@@ -6393,134 +6717,6 @@ function StartScreen({ startScreen, onPromptClick, className }) {
   ] });
 }
 
-// src/components/ui/chatkit-avatar.tsx
-var React25 = require("react");
-
-// src/components/ui/avatar.tsx
-var React24 = __toESM(require("react"), 1);
-var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"), 1);
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var Avatar = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-  AvatarPrimitive.Root,
-  {
-    ref,
-    className: cn(
-      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
-      className
-    ),
-    ...props
-  }
-));
-Avatar.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-  AvatarPrimitive.Image,
-  {
-    ref,
-    className: cn("aspect-square h-full w-full", className),
-    ...props
-  }
-));
-AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-  AvatarPrimitive.Fallback,
-  {
-    ref,
-    className: cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-muted",
-      className
-    ),
-    ...props
-  }
-));
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
-
-// src/components/ui/chatkit-avatar.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
-function asRecord(value) {
-  return value && typeof value === "object" ? value : null;
-}
-function getNonEmptyString(value) {
-  if (typeof value !== "string") return void 0;
-  const normalized = value.trim();
-  return normalized || void 0;
-}
-function unicodeFromUnified(unified) {
-  const normalized = getNonEmptyString(unified);
-  if (!normalized) return void 0;
-  try {
-    return normalized.split("-").map((hex) => String.fromCodePoint(Number.parseInt(hex, 16))).join("");
-  } catch {
-    return void 0;
-  }
-}
-function getEmojiCharacter(avatar) {
-  return unicodeFromUnified(avatar?.emoji?.unified);
-}
-function getAvatarFallback(label) {
-  return label.trim().charAt(0).toUpperCase() || "A";
-}
-function normalizeChatkitAvatar(rawAvatar) {
-  if (typeof rawAvatar === "string") {
-    const url = getNonEmptyString(rawAvatar);
-    return url ? { url } : null;
-  }
-  const avatarRecord = asRecord(rawAvatar);
-  if (!avatarRecord) return null;
-  const emojiRecord = asRecord(avatarRecord.emoji);
-  const avatar = {
-    background: getNonEmptyString(avatarRecord.background),
-    url: getNonEmptyString(avatarRecord.url),
-    useNotoColor: Boolean(avatarRecord.useNotoColor)
-  };
-  if (emojiRecord) {
-    avatar.emoji = {
-      colons: getNonEmptyString(emojiRecord.colons),
-      id: getNonEmptyString(emojiRecord.id),
-      unified: getNonEmptyString(emojiRecord.unified)
-    };
-  }
-  return avatar.url || avatar.background || avatar.emoji?.id || avatar.emoji?.unified ? avatar : null;
-}
-function extractAssistantAvatar(assistant) {
-  const assistantRecord = asRecord(assistant);
-  const metadata = asRecord(assistant.metadata);
-  const rawAvatar = assistantRecord?.avatar ?? metadata?.avatar;
-  const avatar = normalizeChatkitAvatar(rawAvatar);
-  if (avatar) return avatar;
-  const metadataAvatar = getNonEmptyString(metadata?.avatarUrl) ?? getNonEmptyString(metadata?.avatar_url);
-  return metadataAvatar ? { url: metadataAvatar } : null;
-}
-function ChatkitAvatar({
-  avatar,
-  className,
-  fallback,
-  fallbackClassName,
-  imageClassName,
-  label,
-  style,
-  ...props
-}) {
-  const { theme } = useTheme();
-  const emojiCharacter = getEmojiCharacter(avatar);
-  const fallbackText = fallback || getAvatarFallback(label);
-  const roundedClass = getRoundedClass(theme.radius);
-  const emojiStyle = avatar?.useNotoColor ? { fontFamily: '"Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif' } : void 0;
-  const fallbackStyle = {
-    ...avatar?.background ? { background: avatar.background } : {}
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Avatar, { className: cn(roundedClass, className), style, ...props, children: [
-    avatar?.url ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(AvatarImage, { className: imageClassName, src: avatar.url, alt: label }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-      AvatarFallback,
-      {
-        className: cn(roundedClass, "text-sm font-medium text-foreground", fallbackClassName),
-        style: fallbackStyle,
-        children: emojiCharacter ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-[1.1em] leading-none", style: emojiStyle, children: emojiCharacter }) : fallbackText
-      }
-    )
-  ] });
-}
-
 // src/hooks/useThreads.ts
 var React26 = __toESM(require("react"), 1);
 var DEFAULT_LIMIT = 50;
@@ -6892,9 +7088,174 @@ function ContextUsageIndicator({
   ] });
 }
 
+// src/lib/conversation-runtime-capabilities.ts
+var emptyMissingRuntimeCapabilityReferences = {
+  skillIds: [],
+  pluginNodeKeys: [],
+  subAgentNodeKeys: []
+};
+function getConversationOptions(conversation) {
+  return conversation?.options ?? null;
+}
+function wait(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+function splitByAvailability(values, availableValues) {
+  const available = new Set(availableValues);
+  const found = [];
+  const missing = [];
+  for (const value of values) {
+    if (available.has(value)) {
+      found.push(value);
+    } else {
+      missing.push(value);
+    }
+  }
+  return { found, missing };
+}
+function hasMissingRuntimeCapabilityReferences(missing) {
+  return missing.skillIds.length > 0 || missing.pluginNodeKeys.length > 0 || missing.subAgentNodeKeys.length > 0;
+}
+function getRuntimeCapabilitiesSelectionAvailability(selection, capabilities) {
+  const skillIds = splitByAvailability(
+    selection.skills.ids,
+    capabilities.skills.map((skill) => skill.id)
+  );
+  const pluginNodeKeys = splitByAvailability(
+    selection.plugins.nodeKeys,
+    capabilities.plugins.map((plugin) => plugin.nodeKey)
+  );
+  const subAgentNodeKeys = splitByAvailability(
+    selection.subAgents?.nodeKeys ?? [],
+    capabilities.subAgents?.map((subAgent) => subAgent.nodeKey) ?? []
+  );
+  return {
+    selection: {
+      mode: "allowlist",
+      skills: {
+        ...selection.skills.workspaceId ? { workspaceId: selection.skills.workspaceId } : {},
+        ids: skillIds.found
+      },
+      plugins: {
+        nodeKeys: pluginNodeKeys.found
+      },
+      subAgents: {
+        nodeKeys: subAgentNodeKeys.found
+      }
+    },
+    missing: {
+      skillIds: skillIds.missing,
+      pluginNodeKeys: pluginNodeKeys.missing,
+      subAgentNodeKeys: subAgentNodeKeys.missing
+    }
+  };
+}
+async function findConversationByThreadId(client, threadId) {
+  const normalizedThreadId = threadId.trim();
+  if (!normalizedThreadId) {
+    return null;
+  }
+  const result = await client.conversations.search({
+    where: { threadId: normalizedThreadId },
+    limit: 1
+  });
+  return result.items?.[0] ?? null;
+}
+async function findConversationByThreadIdWithRetry(client, threadId) {
+  for (let attempt = 0; attempt < 5; attempt += 1) {
+    const conversation = await findConversationByThreadId(client, threadId);
+    if (conversation?.id) {
+      return conversation;
+    }
+    if (attempt < 4) {
+      await wait(250);
+    }
+  }
+  return null;
+}
+async function loadConversationRuntimeCapabilities({
+  client,
+  threadId,
+  capabilities
+}) {
+  const conversation = await findConversationByThreadId(client, threadId);
+  const persistedSelection = getConversationOptions(conversation)?.runtimeCapabilities ?? null;
+  if (!persistedSelection) {
+    return {
+      conversation,
+      selection: null,
+      missing: emptyMissingRuntimeCapabilityReferences
+    };
+  }
+  const availability = getRuntimeCapabilitiesSelectionAvailability(
+    persistedSelection,
+    capabilities
+  );
+  return {
+    conversation,
+    ...availability
+  };
+}
+async function persistConversationRuntimeCapabilities({
+  client,
+  threadId,
+  capabilities,
+  selection
+}) {
+  const availability = getRuntimeCapabilitiesSelectionAvailability(
+    selection,
+    capabilities
+  );
+  const conversation = await findConversationByThreadIdWithRetry(
+    client,
+    threadId
+  );
+  if (!conversation?.id) {
+    return {
+      conversation,
+      ...availability,
+      updated: false
+    };
+  }
+  await client.conversations.update(conversation.id, {
+    options: {
+      ...conversation.options ?? {},
+      runtimeCapabilities: availability.selection
+    }
+  });
+  return {
+    conversation,
+    ...availability,
+    updated: true
+  };
+}
+
 // src/components/chat.tsx
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var import_meta2 = {};
+function RuntimeCapabilityIcon({
+  option,
+  variant
+}) {
+  const iconSize = variant === "chip" ? 12 : 16;
+  if (option.type === "skill") {
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react16.Brain, { size: iconSize });
+  }
+  if (option.type === "plugin") {
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react16.Plug, { size: iconSize });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    ChatkitAvatar,
+    {
+      avatar: normalizeChatkitAvatar(option.capability.avatar),
+      label: option.label,
+      className: variant === "chip" ? "h-4 w-4" : "h-6 w-6",
+      fallbackClassName: variant === "chip" ? "text-[9px]" : "text-[10px]",
+      imageClassName: "object-cover",
+      "data-slot": "runtime-sub-agent-avatar"
+    }
+  );
+}
 var defaultApiUrl2 = import_meta2.env.VITE_XPERTAI_API_URL;
 var COMPOSER_INPUT_MAX_HEIGHT = 128;
 var LONG_TEXT_REFERENCE_THRESHOLD = 5e3;
@@ -6931,6 +7292,15 @@ function getHttpStatus(error) {
   const status = error.status;
   return typeof status === "number" ? status : null;
 }
+function warnMissingRuntimeCapabilityReferences(action, missing) {
+  if (!hasMissingRuntimeCapabilityReferences(missing)) {
+    return;
+  }
+  console.warn(
+    `[Chat] Runtime capabilities ${action} include unavailable references:`,
+    missing
+  );
+}
 async function readImageDimensions(file) {
   if (typeof window === "undefined" || typeof URL === "undefined") {
     return {};
@@ -7186,6 +7556,7 @@ function Chat({
   const autoScrollFrameRef = React28.useRef(null);
   const isPointerDownRef = React28.useRef(false);
   const lastTouchYRef = React28.useRef(null);
+  const runtimeCapabilityPreferenceLoadRef = React28.useRef(0);
   const resolvedTitle = title ?? t("chat.title");
   const resolvedPlaceholder = placeholder ?? t("chat.placeholder");
   const inputPlaceholder = selectedTool?.placeholderOverride ?? composer?.placeholder ?? resolvedPlaceholder;
@@ -7262,6 +7633,31 @@ function Chat({
     runtimeCapabilityOptions,
     runtimeCapabilityPalette
   ]);
+  const persistSessionRuntimeCapabilities = React28.useCallback(
+    async (threadId, selection) => {
+      if (!runtimeCapabilities || !selection) {
+        return;
+      }
+      try {
+        const result = await persistConversationRuntimeCapabilities({
+          client: stream.client,
+          threadId,
+          capabilities: runtimeCapabilities,
+          selection
+        });
+        warnMissingRuntimeCapabilityReferences(
+          "persisted selection",
+          result.missing
+        );
+      } catch (error) {
+        console.warn(
+          "[Chat] Failed to persist runtime capabilities selection:",
+          error
+        );
+      }
+    },
+    [runtimeCapabilities, stream.client]
+  );
   const clearQuoteSelection = React28.useCallback(() => {
     setQuoteSelection(null);
   }, []);
@@ -7632,14 +8028,55 @@ function Chat({
     return () => controller.abort();
   }, [missingConfig, stream.client, stream.assistantId]);
   React28.useEffect(() => {
-    setSessionRuntimeCapabilities(
-      createDefaultRuntimeCapabilitiesSelection(runtimeCapabilities)
-    );
     setRunRuntimeCapabilities(
       createEmptyRuntimeCapabilitiesSelection(runtimeCapabilities)
     );
     setRuntimeCapabilityPalette(null);
-  }, [runtimeCapabilities, stream.threadId]);
+    if (!runtimeCapabilitiesReady || !runtimeCapabilities) {
+      setSessionRuntimeCapabilities(
+        createEmptyRuntimeCapabilitiesSelection(runtimeCapabilities)
+      );
+      return;
+    }
+    const defaultSelection = createDefaultRuntimeCapabilitiesSelection(runtimeCapabilities);
+    const threadId = stream.threadId?.trim();
+    if (!threadId) {
+      setSessionRuntimeCapabilities(defaultSelection);
+      return;
+    }
+    let cancelled = false;
+    const requestId = runtimeCapabilityPreferenceLoadRef.current + 1;
+    runtimeCapabilityPreferenceLoadRef.current = requestId;
+    setSessionRuntimeCapabilities(defaultSelection);
+    void loadConversationRuntimeCapabilities({
+      client: stream.client,
+      threadId,
+      capabilities: runtimeCapabilities
+    }).then(({ selection, missing }) => {
+      if (cancelled || runtimeCapabilityPreferenceLoadRef.current !== requestId) {
+        return;
+      }
+      warnMissingRuntimeCapabilityReferences("loaded selection", missing);
+      setSessionRuntimeCapabilities(selection ?? defaultSelection);
+    }).catch((error) => {
+      if (cancelled || runtimeCapabilityPreferenceLoadRef.current !== requestId) {
+        return;
+      }
+      console.warn(
+        "[Chat] Failed to load persisted runtime capabilities selection:",
+        error
+      );
+      setSessionRuntimeCapabilities(defaultSelection);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    runtimeCapabilities,
+    runtimeCapabilitiesReady,
+    stream.client,
+    stream.threadId
+  ]);
   React28.useEffect(() => {
     if (!runtimeCapabilityPalette) {
       return;
@@ -7669,30 +8106,46 @@ function Chat({
   }));
   const handleSessionRuntimeCapabilityToggle = React28.useCallback(
     (type, id, selected) => {
-      setSessionRuntimeCapabilities(
-        (previous) => toggleRuntimeCapabilitySelection(previous, type, id, selected)
+      setSessionRuntimeCapabilities((previous) => {
+        const nextSelection = toggleRuntimeCapabilitySelection(
+          previous,
+          type,
+          id,
+          selected
+        );
+        const threadId = stream.threadId?.trim();
+        if (threadId) {
+          void persistSessionRuntimeCapabilities(threadId, nextSelection);
+        }
+        return nextSelection;
+      });
+    },
+    [persistSessionRuntimeCapabilities, stream.threadId]
+  );
+  const updateRuntimeCapabilityPalette = React28.useCallback(
+    (value, selectionStart) => {
+      const input = composerInputRef.current;
+      const nextPalette = resolveRuntimeCapabilityPalette(
+        value,
+        typeof selectionStart === "number" ? selectionStart : input?.selectionStart
       );
+      setRuntimeCapabilityPalette(nextPalette);
     },
     []
   );
-  const updateRuntimeCapabilityPalette = React28.useCallback((value) => {
-    const input = composerInputRef.current;
-    const nextPalette = resolveRuntimeCapabilityPalette(
-      value,
-      input?.selectionStart
-    );
-    setRuntimeCapabilityPalette(nextPalette);
-  }, []);
   const handleComposerChange = React28.useCallback(
     (event) => {
       const nextValue = event.target.value;
       setDraft(nextValue);
-      updateRuntimeCapabilityPalette(nextValue);
+      updateRuntimeCapabilityPalette(nextValue, event.target.selectionStart);
     },
     [updateRuntimeCapabilityPalette]
   );
   const handleComposerSelect = React28.useCallback(() => {
-    updateRuntimeCapabilityPalette(draft);
+    updateRuntimeCapabilityPalette(
+      draft,
+      composerInputRef.current?.selectionStart
+    );
   }, [draft, updateRuntimeCapabilityPalette]);
   const selectRunRuntimeCapability = React28.useCallback(
     (option) => {
@@ -7776,6 +8229,8 @@ function Chat({
         defaults: options?.request,
         humanInput: inputPayload
       });
+      const sessionRuntimeCapabilitiesForPersistence = effectiveSessionRuntimeCapabilities;
+      const shouldPersistSessionRuntimeCapabilities = !!sessionRuntimeCapabilitiesForPersistence && !stream.threadId && !nextFollowUpMode;
       stream.submit(
         {
           input: inputPayload,
@@ -7785,6 +8240,12 @@ function Chat({
           ...nextFollowUpMode ? { followUpMode: nextFollowUpMode } : {},
           ...requestOptions.context ? { context: requestOptions.context } : {},
           ...requestOptions.config ? { config: requestOptions.config } : {},
+          ...shouldPersistSessionRuntimeCapabilities ? {
+            onThreadResolved: (threadId) => persistSessionRuntimeCapabilities(
+              threadId,
+              sessionRuntimeCapabilitiesForPersistence
+            )
+          } : {},
           ...!nextFollowUpMode ? {
             optimisticValues: (prev) => {
               const prevMessages = prev?.messages ?? [];
@@ -7806,8 +8267,10 @@ function Chat({
     },
     [
       effectiveRuntimeCapabilitiesForSubmit,
+      effectiveSessionRuntimeCapabilities,
       isSendDisabled,
       options?.request,
+      persistSessionRuntimeCapabilities,
       references,
       runtimeCapabilities,
       scrollToBottom,
@@ -8107,6 +8570,8 @@ function Chat({
       defaults: options?.request,
       humanInput: inputPayload
     });
+    const sessionRuntimeCapabilitiesForPersistence = effectiveSessionRuntimeCapabilities;
+    const shouldPersistSessionRuntimeCapabilities = !!sessionRuntimeCapabilitiesForPersistence && !stream.threadId && !nextFollowUpMode;
     stream.submit(
       {
         input: inputPayload,
@@ -8116,6 +8581,12 @@ function Chat({
         ...nextFollowUpMode ? { followUpMode: nextFollowUpMode } : {},
         ...requestOptions.context ? { context: requestOptions.context } : {},
         ...requestOptions.config ? { config: requestOptions.config } : {},
+        ...shouldPersistSessionRuntimeCapabilities ? {
+          onThreadResolved: (threadId) => persistSessionRuntimeCapabilities(
+            threadId,
+            sessionRuntimeCapabilitiesForPersistence
+          )
+        } : {},
         ...!nextFollowUpMode ? {
           optimisticValues: (prev) => {
             const prevMessages = prev?.messages ?? [];
@@ -8574,7 +9045,7 @@ function Chat({
               {
                 className: "inline-flex max-w-full items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary",
                 children: [
-                  option.type === "skill" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react16.Brain, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react16.Plug, { size: 12 }),
+                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(RuntimeCapabilityIcon, { option, variant: "chip" }),
                   /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "max-w-40 truncate", children: option.label }),
                   /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                     "button",
@@ -8644,7 +9115,7 @@ function Chat({
                     index === runtimeCapabilityPalette.activeIndex && "bg-muted"
                   ),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center text-muted-foreground", children: option.type === "skill" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react16.Brain, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react16.Plug, { size: 16 }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(RuntimeCapabilityIcon, { option, variant: "list" }) }),
                     /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "min-w-0 flex-1", children: [
                       /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "block truncate", children: option.label }),
                       option.description && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "block truncate text-xs text-muted-foreground", children: option.description })