@xpert-ai/chatkit-ui 0.3.3 → 0.3.5

package/dist/index.js

@@ -1,10 +1,10 @@
 // src/components/chat.tsx
-import * as React43 from "react";
+import * as React44 from "react";
 import {
   ArrowDown as ArrowDown2,
   FileText as FileText3,
   ImageIcon,
-  Loader2 as Loader25,
+  Loader2 as Loader26,
   Pencil as Pencil4,
   Quote,
   RefreshCw as RefreshCw2,
@@ -30,6 +30,12 @@ var THEME_PANEL_RADIUS_PRESET_CLASS = {
   soft: "rounded-lg",
   sharp: "rounded-none"
 };
+var THEME_COMPOSER_INPUT_RADIUS_PRESET_CLASS = {
+  pill: "rounded-3xl",
+  round: "rounded-xl",
+  soft: "rounded-lg",
+  sharp: "rounded-none"
+};
 var THEME_MENU_ITEM_RADIUS_PRESET_CLASS = {
   pill: "rounded-xl",
   round: "rounded-lg",
@@ -42,6 +48,13 @@ function getRoundedClass(themeRadius, fallback = "rounded-full") {
 function getPanelRoundedClass(themeRadius, fallback = "soft") {
   return THEME_PANEL_RADIUS_PRESET_CLASS[themeRadius ?? fallback];
 }
+function getComposerInputRoundedClass(themeRadius, options = {}) {
+  const radius = themeRadius ?? options.fallback ?? "round";
+  if (radius === "pill" && options.isEmpty && !options.isStacked) {
+    return "rounded-full";
+  }
+  return THEME_COMPOSER_INPUT_RADIUS_PRESET_CLASS[radius];
+}
 function getMenuItemRoundedClass(themeRadius, fallback = "soft") {
   return THEME_MENU_ITEM_RADIUS_PRESET_CLASS[themeRadius ?? fallback];
 }
@@ -132,7 +145,7 @@ import {
 } from "@xpert-ai/xpert-sdk";
 import "@langchain/core/messages/tool";
 import {
-  ChatMessageEventTypeEnum,
+  ChatMessageEventTypeEnum as ChatMessageEventTypeEnum2,
   ChatMessageTypeEnum,
   REQUEST_USER_INPUT_RESULT_PURPOSE_IMPLEMENTATION_CONFIRMATION,
   REQUEST_USER_INPUT_RESULT_PURPOSE_PLAN_CLARIFICATION,
@@ -142,6 +155,26 @@ import {
   isClientToolRequest as isClientToolRequest2
 } from "@xpert-ai/chatkit-types";
 
+// src/lib/agent-runs.ts
+import {
+  ChatMessageEventTypeEnum
+} from "@xpert-ai/chatkit-types";
+function isAgentEventContent(content) {
+  return content.type === "agent_event";
+}
+function readContentExecutionId(content) {
+  if (!content || typeof content === "string") return void 0;
+  return typeof content.executionId === "string" && content.executionId.trim() ? content.executionId.trim() : void 0;
+}
+function readContentParentExecutionId(content) {
+  if (!content || typeof content === "string") return void 0;
+  return typeof content.parentExecutionId === "string" && content.parentExecutionId.trim() ? content.parentExecutionId.trim() : void 0;
+}
+function readContentAgentKey(content) {
+  if (!content || typeof content === "string") return void 0;
+  return typeof content.agentKey === "string" && content.agentKey.trim() ? content.agentKey.trim() : void 0;
+}
+
 // src/lib/api-config.ts
 function hasConfiguredValue(value) {
   return typeof value === "string" && value.trim().length > 0;
@@ -266,6 +299,11 @@ function useStreamManager() {
   };
 }
 
+// src/lib/message-metadata.ts
+import {
+  isClientToolRequest
+} from "@xpert-ai/chatkit-types";
+
 // src/lib/references.ts
 function isObjectLike(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
@@ -562,6 +600,33 @@ function buildHumanMessageInputPayload(source) {
   };
 }
 
+// src/lib/message-metadata.ts
+function isObjectRecord(value) {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+function isStringArray(value) {
+  return Array.isArray(value) && value.every((item) => typeof item === "string");
+}
+function isSkillSelection(value) {
+  if (!isObjectRecord(value)) {
+    return false;
+  }
+  return isStringArray(value.ids) && (value.workspaceId === void 0 || typeof value.workspaceId === "string");
+}
+function isNodeKeySelection(value) {
+  return isObjectRecord(value) && isStringArray(value.nodeKeys);
+}
+function isRuntimeCapabilitiesSelectionSet(value) {
+  return isObjectRecord(value) && isSkillSelection(value.skills) && isNodeKeySelection(value.plugins) && (value.subAgents === void 0 || isNodeKeySelection(value.subAgents));
+}
+function isRuntimeCapabilitiesSelection(value) {
+  if (!isObjectRecord(value)) {
+    return false;
+  }
+  const selection = value;
+  return selection.mode === "allowlist" && isRuntimeCapabilitiesSelectionSet(selection) && (selection.recommended === void 0 || isRuntimeCapabilitiesSelectionSet(selection.recommended));
+}
+
 // src/providers/ParentMessenger.tsx
 import { jsx } from "react/jsx-runtime";
 var handledSendUserMessageNonces = /* @__PURE__ */ new Set();
@@ -681,12 +746,14 @@ function ParentMessengerProvider({
           }
           return;
         }
-        const requestHumanInput = params.planMode === true || params.state?.[STATE_VARIABLE_HUMAN2]?.planMode === true || params.runtimeCapabilities || params.state?.[STATE_VARIABLE_HUMAN2]?.runtimeCapabilities ? {
+        const runtimeCapabilitiesCandidate = params.runtimeCapabilities ?? params.state?.[STATE_VARIABLE_HUMAN2]?.runtimeCapabilities;
+        const runtimeCapabilities = isRuntimeCapabilitiesSelection(
+          runtimeCapabilitiesCandidate
+        ) ? runtimeCapabilitiesCandidate : void 0;
+        const requestHumanInput = params.planMode === true || params.state?.[STATE_VARIABLE_HUMAN2]?.planMode === true || runtimeCapabilities ? {
           ...humanInput,
           ...params.planMode === true || params.state?.[STATE_VARIABLE_HUMAN2]?.planMode === true ? { planMode: true } : {},
-          ...params.runtimeCapabilities ? { runtimeCapabilities: params.runtimeCapabilities } : params.state?.[STATE_VARIABLE_HUMAN2]?.runtimeCapabilities ? {
-            runtimeCapabilities: params.state[STATE_VARIABLE_HUMAN2].runtimeCapabilities
-          } : {}
+          ...runtimeCapabilities ? { runtimeCapabilities } : {}
         } : humanInput;
         const newMessage = {
           id: createMessageId(),
@@ -694,7 +761,8 @@ function ParentMessengerProvider({
           content: prompt,
           submittedInput: humanInput.input,
           ...humanInput.referenceComposition ? { referenceComposition: humanInput.referenceComposition } : {},
-          ...references.length > 0 ? { references } : {}
+          ...references.length > 0 ? { references } : {},
+          ...runtimeCapabilities ? { runtimeCapabilities } : {}
         };
         const stream = streamRef2.current;
         const activeFollowUpMode = stream?.isLoading ? params.followUpMode && params.followUpMode !== "default" ? params.followUpMode : stream.followUpBehavior ?? "queue" : void 0;
@@ -984,32 +1052,6 @@ function resolveUsedContextSize(options) {
   return normalizeContextUsageNumber(options.fallbackUsedTokens) ?? 0;
 }
 
-// src/lib/message-metadata.ts
-import {
-  isClientToolRequest
-} from "@xpert-ai/chatkit-types";
-function isObjectRecord(value) {
-  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
-}
-function isStringArray(value) {
-  return Array.isArray(value) && value.every((item) => typeof item === "string");
-}
-function isSkillSelection(value) {
-  if (!isObjectRecord(value)) {
-    return false;
-  }
-  return isStringArray(value.ids) && (value.workspaceId === void 0 || typeof value.workspaceId === "string");
-}
-function isNodeKeySelection(value) {
-  return isObjectRecord(value) && isStringArray(value.nodeKeys);
-}
-function isRuntimeCapabilitiesSelection(value) {
-  if (!isObjectRecord(value)) {
-    return false;
-  }
-  return value.mode === "allowlist" && isSkillSelection(value.skills) && isNodeKeySelection(value.plugins) && (value.subAgents === void 0 || isNodeKeySelection(value.subAgents));
-}
-
 // src/lib/follow-ups.ts
 function getComposerFollowUpShortcutLabels(queueShortcutLabel) {
   return {
@@ -1469,6 +1511,38 @@ var en_US_default = {
       option: "Option",
       other: "Other"
     },
+    agentRun: {
+      defaultTitle: "Sub-agent",
+      inputLabel: "Input",
+      errorLabel: "Error",
+      status: {
+        running: "Running",
+        success: "Done",
+        error: "Error",
+        replied: "Replied",
+        pending: "Pending",
+        interrupted: "Interrupted",
+        timeout: "Timed out"
+      },
+      counts: {
+        messages: {
+          one: "{{count}} message",
+          other: "{{count}} messages"
+        },
+        tools: {
+          one: "{{count}} tool",
+          other: "{{count}} tools"
+        },
+        events: {
+          one: "{{count}} event",
+          other: "{{count}} events"
+        },
+        children: {
+          one: "{{count}} child agent",
+          other: "{{count}} child agents"
+        }
+      }
+    },
     toolGroup: {
       status: {
         running: "Processing",
@@ -1481,6 +1555,7 @@ var en_US_default = {
       jsonTitle: "JSON",
       jsonTree: "Tree",
       jsonRaw: "Raw",
+      sourcesTitle: "Sources",
       copy: "Copy",
       copied: "Copied",
       separator: ", ",
@@ -1761,6 +1836,38 @@ var zh_CN_default = {
       option: "\u9009\u9879",
       other: "\u5176\u4ED6"
     },
+    agentRun: {
+      defaultTitle: "\u5B50\u667A\u80FD\u4F53",
+      inputLabel: "\u8F93\u5165",
+      errorLabel: "\u9519\u8BEF",
+      status: {
+        running: "\u8FD0\u884C\u4E2D",
+        success: "\u5DF2\u5B8C\u6210",
+        error: "\u9519\u8BEF",
+        replied: "\u5DF2\u56DE\u590D",
+        pending: "\u7B49\u5F85\u4E2D",
+        interrupted: "\u5DF2\u4E2D\u65AD",
+        timeout: "\u5DF2\u8D85\u65F6"
+      },
+      counts: {
+        messages: {
+          one: "{{count}} \u6761\u6D88\u606F",
+          other: "{{count}} \u6761\u6D88\u606F"
+        },
+        tools: {
+          one: "{{count}} \u4E2A\u5DE5\u5177",
+          other: "{{count}} \u4E2A\u5DE5\u5177"
+        },
+        events: {
+          one: "{{count}} \u4E2A\u4E8B\u4EF6",
+          other: "{{count}} \u4E2A\u4E8B\u4EF6"
+        },
+        children: {
+          one: "{{count}} \u4E2A\u5B50\u667A\u80FD\u4F53",
+          other: "{{count}} \u4E2A\u5B50\u667A\u80FD\u4F53"
+        }
+      }
+    },
     toolGroup: {
       status: {
         running: "\u6B63\u5728\u5904\u7406",
@@ -1773,6 +1880,7 @@ var zh_CN_default = {
       jsonTitle: "JSON",
       jsonTree: "\u6811\u5F62",
       jsonRaw: "\u539F\u59CB",
+      sourcesTitle: "\u4FE1\u606F\u6E90",
       copy: "\u590D\u5236",
       copied: "\u5DF2\u590D\u5236",
       separator: "\uFF0C",
@@ -2211,6 +2319,39 @@ function uniqueStrings(values) {
     new Set(values.map((value) => value.trim()).filter(Boolean))
   );
 }
+function getRuntimeCapabilitiesSelectionSet(selection) {
+  return {
+    skills: {
+      ...selection?.skills.workspaceId ? { workspaceId: selection.skills.workspaceId } : {},
+      ids: uniqueStrings(selection?.skills.ids ?? [])
+    },
+    plugins: {
+      nodeKeys: uniqueStrings(selection?.plugins.nodeKeys ?? [])
+    },
+    subAgents: {
+      nodeKeys: uniqueStrings(selection?.subAgents?.nodeKeys ?? [])
+    }
+  };
+}
+function mergeRuntimeCapabilitiesSelectionSets(capabilities, ...sets) {
+  const workspaceId = sets.find((set) => set?.skills.workspaceId)?.skills.workspaceId ?? capabilities.skills[0]?.workspaceId;
+  return {
+    skills: {
+      ...workspaceId ? { workspaceId } : {},
+      ids: uniqueStrings(sets.flatMap((set) => set?.skills.ids ?? []))
+    },
+    plugins: {
+      nodeKeys: uniqueStrings(
+        sets.flatMap((set) => set?.plugins.nodeKeys ?? [])
+      )
+    },
+    subAgents: {
+      nodeKeys: uniqueStrings(
+        sets.flatMap((set) => set?.subAgents?.nodeKeys ?? [])
+      )
+    }
+  };
+}
 function createEmptyRuntimeCapabilitiesSelection(capabilities) {
   const workspaceId = capabilities?.skills[0]?.workspaceId;
   return {
@@ -2246,25 +2387,56 @@ function createDefaultRuntimeCapabilitiesSelection(capabilities) {
   };
 }
 function mergeRuntimeCapabilitiesSelections(capabilities, ...selections) {
-  const workspaceId = selections.find((selection) => selection?.skills.workspaceId)?.skills.workspaceId ?? capabilities.skills[0]?.workspaceId;
+  const merged = mergeRuntimeCapabilitiesSelectionSets(
+    capabilities,
+    ...selections.map(
+      (selection) => selection ? getRuntimeCapabilitiesSelectionSet(selection) : null
+    )
+  );
+  const recommended = mergeRuntimeCapabilitiesSelectionSets(
+    capabilities,
+    ...selections.map((selection) => selection?.recommended)
+  );
   return {
     mode: "allowlist",
-    skills: {
-      ...workspaceId ? { workspaceId } : {},
-      ids: uniqueStrings(
-        selections.flatMap((selection) => selection?.skills.ids ?? [])
-      )
-    },
-    plugins: {
-      nodeKeys: uniqueStrings(
-        selections.flatMap((selection) => selection?.plugins.nodeKeys ?? [])
-      )
-    },
-    subAgents: {
-      nodeKeys: uniqueStrings(
-        selections.flatMap((selection) => selection?.subAgents?.nodeKeys ?? [])
-      )
-    }
+    ...merged,
+    ...hasRuntimeCapabilitySelectionSet(recommended) ? { recommended } : {}
+  };
+}
+function createRuntimeCapabilitiesForSubmit({
+  capabilities,
+  available,
+  recommended
+}) {
+  const recommendedSet = mergeRuntimeCapabilitiesSelectionSets(
+    capabilities,
+    recommended,
+    recommended?.recommended
+  );
+  const merged = mergeRuntimeCapabilitiesSelectionSets(
+    capabilities,
+    available,
+    recommendedSet
+  );
+  return {
+    mode: "allowlist",
+    ...merged,
+    ...hasRuntimeCapabilitySelectionSet(recommendedSet) ? { recommended: recommendedSet } : {}
+  };
+}
+function getRecommendedRuntimeCapabilitiesSelection(selection) {
+  if (!selection?.recommended) {
+    return null;
+  }
+  return {
+    mode: "allowlist",
+    ...getRuntimeCapabilitiesSelectionSet(selection.recommended)
+  };
+}
+function getAvailableRuntimeCapabilitiesSelection(selection) {
+  return {
+    mode: "allowlist",
+    ...getRuntimeCapabilitiesSelectionSet(selection)
   };
 }
 function toggleRuntimeCapabilitySelection(selection, type, id, selected) {
@@ -2323,6 +2495,12 @@ function getRuntimeCapabilityOptions(capabilities) {
     }))
   ];
 }
+function hasRuntimeCapabilitySelectionSet(selection) {
+  if (!selection) {
+    return false;
+  }
+  return selection.skills.ids.length > 0 || selection.plugins.nodeKeys.length > 0 || (selection.subAgents?.nodeKeys.length ?? 0) > 0;
+}
 function isRuntimeCapabilitySelected(selection, type, id) {
   if (type === "skill") {
     return selection.skills.ids.includes(id);
@@ -3343,7 +3521,17 @@ function SlashPalette({
                 }
               ),
               /* @__PURE__ */ jsxs6("span", { className: "flex min-w-0 flex-1 items-baseline gap-2", children: [
-                /* @__PURE__ */ jsx13("span", { className: "shrink-0 truncate font-medium", children: option.label }),
+                /* @__PURE__ */ jsxs6("span", { className: "flex min-w-0 shrink-0 items-baseline gap-1.5", children: [
+                  /* @__PURE__ */ jsx13("span", { className: "truncate font-medium", children: option.label }),
+                  option.kind === "command" && option.capabilityType && typeof option.childCount === "number" ? /* @__PURE__ */ jsx13(
+                    "span",
+                    {
+                      "data-slot": "slash-palette-child-count",
+                      className: "inline-flex h-4 min-w-4 shrink-0 items-center justify-center rounded-full bg-muted px-1 text-[10px] font-medium leading-none text-muted-foreground",
+                      children: option.childCount
+                    }
+                  ) : null
+                ] }),
                 option.description && /* @__PURE__ */ jsx13("span", { className: "min-w-0 flex-1 truncate text-muted-foreground", children: option.description })
               ] }),
               option.kind === "command" && option.capabilityType ? /* @__PURE__ */ jsx13("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center text-muted-foreground", children: option.expanded ? /* @__PURE__ */ jsx13(ChevronDown, { size: 14 }) : /* @__PURE__ */ jsx13(ChevronRight2, { size: 14 }) }) : null
@@ -6015,19 +6203,22 @@ function resolveRuntimeCapabilityPalette(value, selectionStart) {
     return null;
   }
   const beforeCaret = value.slice(0, selectionStart);
-  const match = /(^|\s)\/([^\s/]*)$/.exec(beforeCaret);
+  const match = /(^|\s)([/$])([^\s/]*)$/.exec(beforeCaret);
   if (!match) {
     return null;
   }
-  const query = match[2] ?? "";
+  const trigger = match[2];
+  const query = match[3] ?? "";
   const start = beforeCaret.length - query.length - 1;
   const beforeTrigger = beforeCaret.slice(0, start);
   return {
+    trigger,
     query,
     start,
     end: selectionStart,
     activeIndex: 0,
-    atMessageStart: beforeTrigger.trim().length === 0
+    atMessageStart: beforeTrigger.trim().length === 0,
+    ...trigger === "$" ? { capabilityTypes: ["skill"] } : {}
   };
 }
 function matchesQuery(values, query) {
@@ -6064,7 +6255,11 @@ function matchesCapability(option, query, capabilityTypes) {
   if (capabilityTypes?.length && !capabilityTypes.includes(option.type)) {
     return false;
   }
-  return matchesQuery([option.label, option.description, option.type], query);
+  const skillAliases = option.type === "skill" ? [`$${option.id}`, `$${option.label}`] : [];
+  return matchesQuery(
+    [option.id, option.label, option.description, option.type, ...skillAliases],
+    query
+  );
 }
 function getCommandPaletteOption(command) {
   const capabilityType = CAPABILITY_GROUP_COMMANDS[command.name];
@@ -6083,7 +6278,7 @@ function createSlashPaletteOptions({
   runtimeCapabilitiesReady,
   runtimeCapabilityOptions,
   runtimeCapabilities,
-  effectiveRuntimeCapabilitiesForSubmit
+  recommendedRuntimeCapabilities
 }) {
   if (!palette) {
     return [];
@@ -6093,7 +6288,7 @@ function createSlashPaletteOptions({
   const expandedCapabilityTypes = new Set(
     palette.expandedCapabilityTypes ?? []
   );
-  const selection = effectiveRuntimeCapabilitiesForSubmit ?? createEmptyRuntimeCapabilitiesSelection(runtimeCapabilities);
+  const selection = recommendedRuntimeCapabilities ?? createEmptyRuntimeCapabilitiesSelection(runtimeCapabilities);
   const getCapabilityOptions = (capabilityTypes, capabilityQuery = query) => runtimeCapabilitiesReady ? runtimeCapabilityOptions.filter(
     (option) => matchesCapability(option, capabilityQuery, capabilityTypes) && !isRuntimeCapabilitySelected(selection, option.type, option.id)
   ) : [];
@@ -6329,7 +6524,7 @@ function useSlashCommands({
   runtimeCapabilities,
   runtimeCapabilitiesReady,
   runtimeCapabilityOptions,
-  effectiveRuntimeCapabilitiesForSubmit,
+  recommendedRuntimeCapabilities,
   draft,
   palette,
   setPalette,
@@ -6374,12 +6569,12 @@ function useSlashCommands({
       runtimeCapabilitiesReady,
       runtimeCapabilityOptions,
       runtimeCapabilities,
-      effectiveRuntimeCapabilitiesForSubmit
+      recommendedRuntimeCapabilities
     }),
     [
-      effectiveRuntimeCapabilitiesForSubmit,
       localizedResolvedCommands,
       palette,
+      recommendedRuntimeCapabilities,
       runtimeCapabilities,
       runtimeCapabilitiesReady,
       runtimeCapabilityOptions
@@ -6611,13 +6806,284 @@ function useSlashCommands({
 }
 
 // src/components/thread/messages/ai.tsx
-import * as React30 from "react";
+import * as React31 from "react";
 import {
   ChevronDown as ChevronDown4,
-  Clock3,
-  Loader2 as Loader24
+  Clock3 as Clock32,
+  Loader2 as Loader25
 } from "lucide-react";
 
+// src/lib/agent-run-render-tree.ts
+function isTextContent(content) {
+  return content.type === "text";
+}
+function isReasoningContent(content) {
+  return content.type === "reasoning";
+}
+function isComponentContent(content) {
+  return content.type === "component";
+}
+function parseDateValue(value) {
+  if (value instanceof Date) {
+    const timestamp2 = value.getTime();
+    return Number.isNaN(timestamp2) ? null : timestamp2;
+  }
+  if (typeof value !== "string") {
+    return null;
+  }
+  const timestamp = Date.parse(value);
+  return Number.isNaN(timestamp) ? null : timestamp;
+}
+function readContentTitle(content) {
+  if (typeof content === "string") return void 0;
+  if (typeof content.xpertName === "string" && content.xpertName.trim()) {
+    return content.xpertName.trim();
+  }
+  return void 0;
+}
+function readContentStringField(content, field) {
+  if (typeof content === "string") return void 0;
+  const value = content[field];
+  return typeof value === "string" && value.trim() ? value.trim() : void 0;
+}
+function normalizeRunStatus(status) {
+  return typeof status === "string" && status.trim() ? status.trim().toLowerCase() : "pending";
+}
+function isRunningRunStatus(status) {
+  return normalizeRunStatus(status) === "running";
+}
+function isFailedRunStatus(status) {
+  const normalized = normalizeRunStatus(status);
+  return normalized === "error" || normalized === "fail" || normalized === "failed";
+}
+function hasVisibleAgentRunDetails(info) {
+  return info.error !== void 0;
+}
+function getAgentRunTitle(info, fallback) {
+  return info.title?.trim() || info.xpertName?.trim() || info.agentKey?.trim() || fallback || null;
+}
+function getAgentRunDuration(info) {
+  if (typeof info.elapsedTime === "number" && Number.isFinite(info.elapsedTime)) {
+    return info.elapsedTime;
+  }
+  const startedAt = parseDateValue(info.startedAt) ?? parseDateValue(info.createdAt);
+  const endedAt = parseDateValue(info.endedAt) ?? parseDateValue(info.updatedAt);
+  if (startedAt === null || endedAt === null) return null;
+  return Math.max(0, endedAt - startedAt);
+}
+function getAgentRunCounts(node) {
+  let text = 0;
+  let tools = 0;
+  let events = 0;
+  for (const entry of node.entries) {
+    const item = entry.item;
+    if (typeof item === "string") {
+      if (item.trim()) text += 1;
+      continue;
+    }
+    if (isTextContent(item) || isReasoningContent(item)) {
+      if (item.text?.trim()) text += 1;
+      continue;
+    }
+    if (isComponentContent(item)) {
+      tools += 1;
+      continue;
+    }
+    if (isAgentEventContent(item)) {
+      events += 1;
+    }
+  }
+  return {
+    text,
+    tools,
+    events,
+    children: node.children.length
+  };
+}
+function createAgentRunNode(nodes, id, info, order) {
+  const existing = nodes.get(id);
+  if (existing) {
+    existing.info = {
+      ...existing.info,
+      ...info,
+      id,
+      parentId: info.parentId ?? existing.info.parentId,
+      parentExecutionId: info.parentExecutionId ?? existing.info.parentExecutionId,
+      agentKey: info.agentKey ?? existing.info.agentKey,
+      xpertName: info.xpertName ?? existing.info.xpertName,
+      title: info.title ?? existing.info.title,
+      status: info.status ?? existing.info.status,
+      elapsedTime: info.elapsedTime ?? existing.info.elapsedTime,
+      error: info.error ?? existing.info.error,
+      inputs: info.inputs ?? existing.info.inputs
+    };
+    existing.firstOrder = Math.min(existing.firstOrder, order);
+    return existing;
+  }
+  const node = {
+    id,
+    info: { ...info, id },
+    entries: [],
+    children: [],
+    firstOrder: order
+  };
+  nodes.set(id, node);
+  return node;
+}
+function findFallbackRunByAgentKey(runs, agentKey, rootExecutionId) {
+  if (!agentKey) return null;
+  const candidates = runs.filter(
+    (run) => run.agentKey === agentKey && run.id !== rootExecutionId
+  );
+  if (candidates.length === 0) return null;
+  for (let index = candidates.length - 1; index >= 0; index -= 1) {
+    if (isRunningRunStatus(candidates[index].status)) {
+      return candidates[index];
+    }
+  }
+  return candidates[candidates.length - 1];
+}
+function getEntryRunTarget(entry, runs, rootExecutionId) {
+  const item = entry.item;
+  const executionId = readContentExecutionId(item);
+  const parentExecutionId = readContentParentExecutionId(item);
+  const agentKey = readContentAgentKey(item);
+  if (executionId) {
+    return {
+      executionId,
+      parentExecutionId,
+      agentKey
+    };
+  }
+  const fallbackRun = findFallbackRunByAgentKey(
+    runs,
+    agentKey,
+    rootExecutionId
+  );
+  if (!fallbackRun) return null;
+  return {
+    executionId: fallbackRun.id,
+    parentExecutionId: fallbackRun.parentId ?? fallbackRun.parentExecutionId,
+    agentKey
+  };
+}
+function createInfoFromEntry(id, entry, parentExecutionId) {
+  return {
+    id,
+    ...parentExecutionId ? { parentId: parentExecutionId, parentExecutionId } : {},
+    ...readContentAgentKey(entry.item) ? { agentKey: readContentAgentKey(entry.item) } : {},
+    ...readContentTitle(entry.item) ? { xpertName: readContentTitle(entry.item) } : {},
+    ...readContentStringField(entry.item, "runId") ? { runId: readContentStringField(entry.item, "runId") } : {}
+  };
+}
+function normalizeAssistantEntries(message) {
+  const entries = [];
+  if (typeof message.content === "string") {
+    if (message.content.trim()) {
+      entries.push({
+        item: message.content,
+        index: 0,
+        source: "content",
+        order: 0
+      });
+    }
+  } else if (Array.isArray(message.content)) {
+    message.content.forEach((item, index) => {
+      entries.push({
+        item,
+        index,
+        source: "content",
+        order: index
+      });
+    });
+  }
+  const contentCount = entries.length;
+  (message.reasoning ?? []).forEach((item, index) => {
+    entries.push({
+      item,
+      index,
+      source: "reasoning",
+      order: contentCount + index
+    });
+  });
+  return entries;
+}
+function refreshAgentNodeOrder(node) {
+  let order = node.firstOrder;
+  for (const child of node.children) {
+    order = Math.min(order, refreshAgentNodeOrder(child));
+  }
+  node.firstOrder = order;
+  node.children.sort((a, b) => a.firstOrder - b.firstOrder);
+  return order;
+}
+function buildAssistantRenderTree(message) {
+  const rootExecutionId = message.executionId;
+  const runs = message.agentRuns ?? [];
+  const entries = normalizeAssistantEntries(message);
+  const nodes = /* @__PURE__ */ new Map();
+  const rootEntries = [];
+  const rootReasoning = [];
+  const baseOrder = entries.length + 1;
+  runs.forEach((run, index) => {
+    createAgentRunNode(nodes, run.id, run, baseOrder + index / 1e3);
+  });
+  for (const entry of entries) {
+    const target = getEntryRunTarget(entry, runs, rootExecutionId);
+    const shouldGroup = Boolean(target?.executionId) && (target?.executionId !== rootExecutionId || Boolean(target?.parentExecutionId));
+    if (!target || !shouldGroup) {
+      if (entry.source === "reasoning" && typeof entry.item !== "string") {
+        rootReasoning.push(entry.item);
+      } else {
+        rootEntries.push(entry);
+      }
+      continue;
+    }
+    const node = createAgentRunNode(
+      nodes,
+      target.executionId,
+      createInfoFromEntry(target.executionId, entry, target.parentExecutionId),
+      entry.order
+    );
+    node.entries.push(entry);
+    node.firstOrder = Math.min(node.firstOrder, entry.order);
+  }
+  const roots = [];
+  for (const node of nodes.values()) {
+    if (node.id === rootExecutionId && !node.info.parentId) {
+      continue;
+    }
+    const parentId = node.info.parentId ?? node.info.parentExecutionId;
+    if (parentId && parentId !== rootExecutionId && parentId !== node.id) {
+      const parent = nodes.get(parentId);
+      if (parent) {
+        parent.children.push(node);
+        continue;
+      }
+    }
+    roots.push(node);
+  }
+  roots.forEach(refreshAgentNodeOrder);
+  roots.sort((a, b) => a.firstOrder - b.firstOrder);
+  const units = [
+    ...rootEntries.map((entry) => ({
+      type: "entry",
+      entry,
+      order: entry.order
+    })),
+    ...roots.map((node) => ({
+      type: "agent",
+      node,
+      order: node.firstOrder
+    }))
+  ].sort((a, b) => a.order - b.order);
+  return {
+    units,
+    rootReasoning,
+    hasAgentRuns: roots.length > 0
+  };
+}
+
 // src/components/ui/badge.tsx
 import * as React24 from "react";
 import { jsx as jsx24 } from "react/jsx-runtime";
@@ -7832,26 +8298,436 @@ var MarkdownTextImpl = ({ children }) => {
 };
 var MarkdownText = memo(MarkdownTextImpl);
 
-// src/components/thread/messages/tool-component-group.tsx
+// src/components/thread/messages/agent-run-group.tsx
 import * as React28 from "react";
 import {
-  BookOpen,
-  Brain as Brain3,
-  Building2,
-  Check as Check3,
+  Bot as Bot3,
+  Braces,
   CheckCircle2 as CheckCircle22,
   ChevronRight as ChevronRight6,
+  Clock3,
+  GitBranch,
+  Info as Info4,
+  Loader2 as Loader23,
+  MessageSquareText,
+  Wrench,
+  XCircle
+} from "lucide-react";
+import { jsx as jsx31, jsxs as jsxs19 } from "react/jsx-runtime";
+function safeJson2(value) {
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+}
+function formatDisplayValue2(value) {
+  return typeof value === "string" ? value : safeJson2(value);
+}
+function formatStepDuration(durationMs) {
+  if (durationMs < 1e3) {
+    return `${durationMs}ms`;
+  }
+  if (durationMs < 1e4) {
+    return `${(durationMs / 1e3).toFixed(1)}s`;
+  }
+  if (durationMs < 6e4) {
+    return `${Math.round(durationMs / 1e3)}s`;
+  }
+  const hours = Math.floor(durationMs / 36e5);
+  const minutes = Math.floor(durationMs % 36e5 / 6e4);
+  const seconds = Math.floor(durationMs % 6e4 / 1e3);
+  if (hours > 0) {
+    return `${hours}h ${minutes}m ${seconds}s`;
+  }
+  return `${minutes}m ${seconds}s`;
+}
+function getAgentRunStatusConfig(status, hasReply = false) {
+  const normalized = normalizeRunStatus(status);
+  if (normalized === "running") {
+    return {
+      icon: Loader23,
+      iconClass: "text-blue-700",
+      labelKey: "running",
+      spin: true
+    };
+  }
+  if (normalized === "success" || normalized === "succeeded") {
+    return {
+      icon: CheckCircle22,
+      iconClass: "text-green-700",
+      labelKey: "success",
+      spin: false
+    };
+  }
+  if (isFailedRunStatus(normalized)) {
+    return {
+      icon: XCircle,
+      iconClass: "text-red-700",
+      labelKey: "error",
+      spin: false
+    };
+  }
+  if (normalized === "pending" && hasReply) {
+    return {
+      icon: CheckCircle22,
+      iconClass: "text-green-700",
+      labelKey: "replied",
+      spin: false
+    };
+  }
+  return {
+    icon: Clock3,
+    iconClass: "text-muted-foreground",
+    labelKey: normalized,
+    spin: false
+  };
+}
+function AgentRunHeaderMetric({
+  icon: Icon,
+  label,
+  value,
+  children
+}) {
+  return /* @__PURE__ */ jsxs19(Tooltip, { children: [
+    /* @__PURE__ */ jsx31(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs19(
+      "span",
+      {
+        "aria-label": label,
+        className: "inline-flex shrink-0 items-center gap-1 rounded-sm text-[11px] text-muted-foreground/60 transition-colors group-hover/agent:text-muted-foreground",
+        children: [
+          /* @__PURE__ */ jsx31(Icon, { className: "h-3.5 w-3.5" }),
+          value !== void 0 ? /* @__PURE__ */ jsx31("span", { children: value }) : null
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx31(TooltipContent, { side: "top", sideOffset: 6, className: "max-w-80 text-left", children })
+  ] });
+}
+function getAgentNodeUnits(node) {
+  return [
+    ...node.entries.map((entry) => ({
+      type: "entry",
+      entry,
+      order: entry.order
+    })),
+    ...node.children.map((child) => ({
+      type: "agent",
+      node: child,
+      order: child.firstOrder
+    }))
+  ].sort((a, b) => a.order - b.order);
+}
+function AgentEventRow({ content }) {
+  const label = content.title?.trim() || content.message?.trim() || content.event?.trim() || "Event";
+  const detail = content.title?.trim() && content.message?.trim() ? content.message.trim() : null;
+  const isError = content.error !== void 0 || isFailedRunStatus(content.status);
+  return /* @__PURE__ */ jsxs19(
+    "div",
+    {
+      className: cn(
+        "flex items-start gap-2 rounded-md px-2 py-1.5 text-xs leading-5",
+        isError ? "bg-destructive/10 text-destructive" : "bg-muted/40 text-muted-foreground"
+      ),
+      children: [
+        /* @__PURE__ */ jsx31(Info4, { className: "mt-0.5 h-3.5 w-3.5 shrink-0" }),
+        /* @__PURE__ */ jsxs19("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx31("div", { className: "truncate font-medium", children: label }),
+          detail ? /* @__PURE__ */ jsx31("div", { className: "wrap-break-word", children: detail }) : null,
+          content.error !== void 0 ? /* @__PURE__ */ jsx31("pre", { className: "mt-1 whitespace-pre-wrap wrap-break-word", children: formatDisplayValue2(content.error) }) : null
+        ] })
+      ]
+    }
+  );
+}
+function AgentRunGroup({
+  node,
+  hasFollowingItem,
+  depth,
+  renderUnits
+}) {
+  const { t } = useChatkitTranslation();
+  const counts = getAgentRunCounts(node);
+  const statusConfig = getAgentRunStatusConfig(
+    node.info.status,
+    counts.text > 0
+  );
+  const StatusIcon = statusConfig.icon;
+  const isRunning = isRunningRunStatus(node.info.status);
+  const [isExpanded, setIsExpanded] = React28.useState(
+    () => isRunning || !hasFollowingItem
+  );
+  const title = getAgentRunTitle(node.info, t("message.agentRun.defaultTitle"));
+  const duration = getAgentRunDuration(node.info);
+  const statusLabel = t(`message.agentRun.status.${statusConfig.labelKey}`, {
+    defaultValue: node.info.status ?? statusConfig.labelKey
+  });
+  const detailsId = React28.useId();
+  React28.useEffect(() => {
+    if (isRunning) {
+      setIsExpanded(true);
+      return;
+    }
+    setIsExpanded(!hasFollowingItem);
+  }, [hasFollowingItem, isRunning]);
+  const countItems = [
+    counts.text > 0 ? {
+      icon: MessageSquareText,
+      count: counts.text,
+      label: t(
+        `message.agentRun.counts.messages.${counts.text === 1 ? "one" : "other"}`,
+        { count: counts.text }
+      )
+    } : null,
+    counts.tools > 0 ? {
+      icon: Wrench,
+      count: counts.tools,
+      label: t(
+        `message.agentRun.counts.tools.${counts.tools === 1 ? "one" : "other"}`,
+        { count: counts.tools }
+      )
+    } : null,
+    counts.events > 0 ? {
+      icon: Info4,
+      count: counts.events,
+      label: t(
+        `message.agentRun.counts.events.${counts.events === 1 ? "one" : "other"}`,
+        { count: counts.events }
+      )
+    } : null,
+    counts.children > 0 ? {
+      icon: GitBranch,
+      count: counts.children,
+      label: t(
+        `message.agentRun.counts.children.${counts.children === 1 ? "one" : "other"}`,
+        { count: counts.children }
+      )
+    } : null
+  ].filter(
+    (item) => Boolean(item)
+  );
+  return /* @__PURE__ */ jsxs19("div", { className: cn("border-l border-border/70 pl-2", depth > 0 ? "ml-1" : "-mx-2.5"), children: [
+    /* @__PURE__ */ jsxs19(
+      "button",
+      {
+        type: "button",
+        className: "group/agent group-agent flex w-full items-start justify-between gap-2 rounded-md px-0 py-1.5 text-left",
+        "aria-expanded": isExpanded,
+        "aria-controls": detailsId,
+        onClick: () => setIsExpanded((prev) => !prev),
+        children: [
+          /* @__PURE__ */ jsx31("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxs19("div", { className: "flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-1", children: [
+            /* @__PURE__ */ jsx31(Bot3, { className: "h-4 w-4 shrink-0 text-muted-foreground/55 transition-colors group-hover/agent:text-muted-foreground" }),
+            /* @__PURE__ */ jsx31("span", { className: "min-w-0 max-w-[16rem] truncate text-sm font-medium text-foreground/65 transition-colors group-hover/agent:text-foreground", children: title }),
+            /* @__PURE__ */ jsxs19("span", { className: "inline-flex shrink-0 items-center gap-1 text-[11px] text-muted-foreground/65 transition-colors group-hover/agent:text-muted-foreground", children: [
+              /* @__PURE__ */ jsx31(
+                StatusIcon,
+                {
+                  className: cn(
+                    "h-3.5 w-3.5",
+                    statusConfig.iconClass,
+                    statusConfig.spin && "animate-spin"
+                  )
+                }
+              ),
+              statusLabel
+            ] }),
+            duration !== null ? /* @__PURE__ */ jsxs19("span", { className: "inline-flex shrink-0 items-center gap-1 text-[11px] text-muted-foreground/60 tabular-nums transition-colors group-hover/agent:text-muted-foreground", children: [
+              /* @__PURE__ */ jsx31(Clock3, { className: "h-3 w-3" }),
+              formatStepDuration(duration)
+            ] }) : null,
+            node.info.inputs !== void 0 ? /* @__PURE__ */ jsx31(
+              AgentRunHeaderMetric,
+              {
+                icon: Braces,
+                label: t("message.agentRun.inputLabel"),
+                children: /* @__PURE__ */ jsxs19("div", { className: "space-y-1", children: [
+                  /* @__PURE__ */ jsx31("div", { className: "font-medium", children: t("message.agentRun.inputLabel") }),
+                  /* @__PURE__ */ jsx31("pre", { className: "max-h-64 overflow-auto whitespace-pre-wrap wrap-break-word text-xs", children: formatDisplayValue2(node.info.inputs) })
+                ] })
+              }
+            ) : null,
+            countItems.map((item) => {
+              const CountIcon = item.icon;
+              return /* @__PURE__ */ jsx31(
+                AgentRunHeaderMetric,
+                {
+                  icon: CountIcon,
+                  label: item.label,
+                  value: item.count,
+                  children: /* @__PURE__ */ jsx31("span", { children: item.label })
+                },
+                item.label
+              );
+            })
+          ] }) }),
+          /* @__PURE__ */ jsx31(
+            ChevronRight6,
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "mt-0.5 h-4 w-4 shrink-0 text-muted-foreground/55 opacity-0 transition-[color,transform] group-hover/agent:text-muted-foreground group-hover/agent:opacity-100",
+                isExpanded && "rotate-90"
+              )
+            }
+          )
+        ]
+      }
+    ),
+    isExpanded ? /* @__PURE__ */ jsxs19("div", { id: detailsId, className: "mt-2 space-y-3", children: [
+      hasVisibleAgentRunDetails(node.info) ? /* @__PURE__ */ jsx31("div", { className: "space-y-2 rounded-md bg-muted/30 px-2 py-2 text-xs text-muted-foreground", children: node.info.error !== void 0 ? /* @__PURE__ */ jsxs19("div", { children: [
+        /* @__PURE__ */ jsx31("div", { className: "mb-1 font-medium text-destructive", children: t("message.agentRun.errorLabel") }),
+        /* @__PURE__ */ jsx31("pre", { className: "whitespace-pre-wrap wrap-break-word text-destructive", children: formatDisplayValue2(node.info.error) })
+      ] }) : null }) : null,
+      renderUnits(getAgentNodeUnits(node), depth + 1)
+    ] }) : null
+  ] });
+}
+
+// src/components/thread/messages/web-search-component-renderer.tsx
+import { jsx as jsx32, jsxs as jsxs20 } from "react/jsx-runtime";
+var webSearchComponentRenderer = {
+  id: "computer-web-search-sources",
+  presentation: "grouped-step",
+  match: isComputerWebSearchComponent,
+  hasDetails: hasWebSearchSources,
+  renderDetails: WebSearchToolCallOutput
+};
+function normalizeToolToken(value) {
+  if (typeof value !== "string") return null;
+  const normalized = value.trim().toLowerCase().replace(/[\s-]+/g, "_");
+  return normalized || null;
+}
+function readOptionalString(value) {
+  if (typeof value !== "string") return void 0;
+  const trimmed = value.trim();
+  return trimmed || void 0;
+}
+function normalizeWebSearchSource(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) {
+    return null;
+  }
+  const candidate = value;
+  const title = readOptionalString(candidate.title);
+  const url = readOptionalString(candidate.url);
+  if (!title || !url) return null;
+  const content = readOptionalString(candidate.content);
+  const description = readOptionalString(candidate.description);
+  const publishedDate = readOptionalString(
+    candidate.publishedDate ?? candidate.published_date ?? candidate.publishedAt
+  );
+  const author = readOptionalString(candidate.author);
+  return {
+    title,
+    url,
+    ...content ? { content } : {},
+    ...description ? { description } : {},
+    ...publishedDate ? { publishedDate } : {},
+    ...author ? { author } : {}
+  };
+}
+function getWebSearchSources(data) {
+  if (!Array.isArray(data.data)) return [];
+  return data.data.flatMap((item) => {
+    const source = normalizeWebSearchSource(item);
+    return source ? [source] : [];
+  });
+}
+function hasWebSearchSources(_content, data) {
+  return getWebSearchSources(data).length > 0;
+}
+function isComputerWebSearchComponent(_content, data) {
+  const isComputer = data.category === "Computer";
+  const isWebSearch = normalizeToolToken(data.type) === "web_search";
+  if (!isComputer || !isWebSearch) return false;
+  return normalizeToolToken(data.tool) === "web_search" || getWebSearchSources(data).length > 0;
+}
+function getSourceHost(url) {
+  try {
+    return new URL(url).hostname.replace(/^www\./, "") || null;
+  } catch {
+    return null;
+  }
+}
+function WebSearchToolCallOutput({
+  data
+}) {
+  const { t } = useChatkitTranslation();
+  const sources = getWebSearchSources(data);
+  if (sources.length === 0 || data.error !== void 0) return null;
+  return /* @__PURE__ */ jsxs20("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx32("div", { className: "text-[11px] font-medium text-muted-foreground", children: t("message.toolGroup.sourcesTitle") }),
+    /* @__PURE__ */ jsx32("div", { className: "space-y-2", children: sources.map((source, index) => {
+      const sourceHost = getSourceHost(source.url);
+      const snippet = source.content ?? source.description;
+      const metaParts = [
+        sourceHost,
+        source.publishedDate,
+        source.author
+      ].filter((item) => Boolean(item));
+      return /* @__PURE__ */ jsxs20(
+        "div",
+        {
+          className: "min-w-0 rounded-md border border-border/60 bg-background/80 px-3 py-2",
+          children: [
+            metaParts.length > 0 ? /* @__PURE__ */ jsx32("div", { className: "mb-1 truncate text-[11px] text-muted-foreground", children: metaParts.join(" / ") }) : null,
+            /* @__PURE__ */ jsx32(
+              "a",
+              {
+                href: source.url,
+                target: "_blank",
+                rel: "noreferrer",
+                className: "block min-w-0 line-clamp-2 text-sm font-medium leading-5 text-foreground hover:underline",
+                children: source.title
+              }
+            ),
+            snippet ? /* @__PURE__ */ jsx32("p", { className: "mt-1 line-clamp-3 text-xs leading-5 text-muted-foreground", children: snippet }) : null
+          ]
+        },
+        `${source.url}-${index}`
+      );
+    }) })
+  ] });
+}
+
+// src/components/thread/messages/component-message-renderers.tsx
+var COMPONENT_MESSAGE_RENDERERS = [
+  webSearchComponentRenderer
+];
+function getComponentMessageRenderer(content, data) {
+  return COMPONENT_MESSAGE_RENDERERS.find(
+    (renderer) => renderer.match(content, data)
+  ) ?? null;
+}
+function getComponentMessagePresentation(content, data) {
+  return getComponentMessageRenderer(content, data)?.presentation ?? null;
+}
+function hasComponentMessageRendererDetails(renderer, content, data) {
+  if (!renderer?.renderDetails) return false;
+  return renderer.hasDetails?.(content, data) ?? true;
+}
+
+// src/components/thread/messages/tool-component-group.tsx
+import * as React29 from "react";
+import {
+  BookOpen,
+  Brain as Brain3,
+  Building2,
+  Check as Check3,
+  CheckCircle2 as CheckCircle23,
+  ChevronRight as ChevronRight7,
   CircleHelp,
   Copy,
   FileText as FileText2,
   Files,
-  Loader2 as Loader23,
+  Loader2 as Loader24,
   ListTodo as ListTodo2,
   Network,
   Repeat2,
+  Search as Search2,
   SquareTerminal,
-  Wrench,
-  XCircle
+  Wrench as Wrench2,
+  XCircle as XCircle2
 } from "lucide-react";
 
 // src/i18n/localized-text.ts
@@ -7904,19 +8780,19 @@ function resolveLocalizedText(value, language) {
 }
 
 // src/components/thread/messages/tool-component-group.tsx
-import { jsx as jsx31, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs21 } from "react/jsx-runtime";
 var toolStatusConfig = {
   success: {
     iconClass: "border-green-500 text-green-700",
-    icon: CheckCircle22
+    icon: CheckCircle23
   },
   fail: {
     iconClass: "border-red-500 text-red-700",
-    icon: XCircle
+    icon: XCircle2
   },
   running: {
     iconClass: "border-blue-500 text-blue-700",
-    icon: Loader23
+    icon: Loader24
   }
 };
 var TOOL_GROUP_CATEGORY_ORDER = [
@@ -7952,6 +8828,7 @@ var TOOL_GROUP_TOKEN_CATEGORY = {
   tool: "tools",
   tools: "tools"
 };
+var TOOL_CALL_ROW_TEXT_CLASS = "text-xs leading-5 in-data-[density=compact]:text-[11px] in-data-[density=compact]:leading-4 in-data-[density=spacious]:text-[13px] in-data-[density=spacious]:leading-5";
 var TOOL_CALL_OUTPUT_RENDERERS = {};
 function normalizeStepCategory(category) {
   if (typeof category !== "string" || category.trim() === "") {
@@ -7990,7 +8867,7 @@ function getEffectiveToolStepStatus(data, isThreadRunning) {
   }
   return data.status;
 }
-function formatStepDuration(durationMs) {
+function formatStepDuration2(durationMs) {
   if (durationMs < 1e3) {
     return `${durationMs}ms`;
   }
@@ -8009,10 +8886,10 @@ function formatStepDuration(durationMs) {
   return `${minutes}m ${seconds}s`;
 }
 function useFrozenTimestamp(shouldFreeze) {
-  const [frozenAt, setFrozenAt] = React28.useState(
+  const [frozenAt, setFrozenAt] = React29.useState(
     () => shouldFreeze ? Date.now() : null
   );
-  React28.useEffect(() => {
+  React29.useEffect(() => {
     if (shouldFreeze) {
       setFrozenAt((current) => current ?? Date.now());
       return;
@@ -8022,12 +8899,12 @@ function useFrozenTimestamp(shouldFreeze) {
   return frozenAt;
 }
 function useToolStepDurationLabel(data, options) {
-  const [durationNow, setDurationNow] = React28.useState(() => Date.now());
+  const [durationNow, setDurationNow] = React29.useState(() => Date.now());
   const createdAt = parseStepDate(data.created_date);
   const explicitEndedAt = parseStepDate(data.end_date);
   const status = options?.status ?? data.status;
   const endedAt = explicitEndedAt ?? (status !== "running" ? options?.fallbackEndedAt ?? null : null);
-  React28.useEffect(() => {
+  React29.useEffect(() => {
     if (status !== "running" || createdAt === null || endedAt !== null) {
       return;
     }
@@ -8041,43 +8918,47 @@ function useToolStepDurationLabel(data, options) {
   }, [createdAt, endedAt, status]);
   if (createdAt === null) return null;
   const durationMs = Math.max(0, (endedAt ?? durationNow) - createdAt);
-  return formatStepDuration(durationMs);
+  return formatStepDuration2(durationMs);
 }
-function isComponentContent(content) {
+function isComponentContent2(content) {
   return content.type === "component";
 }
-function isTextContent(content) {
+function isTextContent2(content) {
   return content.type === "text";
 }
-function isReasoningContent(content) {
+function isReasoningContent2(content) {
   return content.type === "reasoning";
 }
 function isWidgetComponent(content) {
   const data = content.data;
   return data?.type === "Widget" && Array.isArray(data.widgets);
 }
-function isGroupableToolComponent(content) {
+function isGroupableStepComponent(content) {
   if (!content || typeof content === "string") return false;
-  return isComponentContent(content) && !isWidgetComponent(content) && getToolStepData(content).category === "Tool";
+  if (!isComponentContent2(content) || isWidgetComponent(content)) return false;
+  const data = getToolStepData(content);
+  const renderer = getComponentMessageRenderer(content, data);
+  if (renderer) return renderer.presentation === "grouped-step";
+  return data.category === "Tool";
 }
 function isSkippableToolGroupSeparator(content) {
   if (typeof content === "string") return !content.trim();
   if (!content) return true;
-  if (isTextContent(content)) {
+  if (isTextContent2(content)) {
     return !content.text?.trim();
   }
-  if (isReasoningContent(content)) {
+  if (isReasoningContent2(content)) {
     return !content.text?.trim();
   }
   return false;
 }
-function normalizeToolToken(value) {
+function normalizeToolToken2(value) {
   if (typeof value !== "string") return null;
   const normalized = value.trim().toLowerCase().replace(/[\s-]+/g, "_");
   return normalized || null;
 }
 function classifyToolToken(value) {
-  const normalized = normalizeToolToken(
+  const normalized = normalizeToolToken2(
     typeof value === "string" ? value : resolveLocalizedText(value, "en-US")
   );
   if (!normalized) return null;
@@ -8106,15 +8987,6 @@ function getToolGroupCategoryCounts(items) {
     return counts;
   }, {});
 }
-function getEffectiveToolGroupDisplayStatus(items, isThreadRunning) {
-  if (items.some((item) => {
-    const data = getToolStepData(item);
-    return getEffectiveToolStepStatus(data, isThreadRunning) === "fail" || Boolean(data.error);
-  })) {
-    return "fail";
-  }
-  return "success";
-}
 function getToolActivityLabel(content, language, statusOverride) {
   const data = getToolStepData(content);
   const status = statusOverride ?? data.status;
@@ -8125,8 +8997,8 @@ function getToolActivityLabel(content, language, statusOverride) {
   if (status === "running") {
     return message ?? title ?? tool ?? type ?? "Tool";
   }
-  const titleToken = normalizeToolToken(title);
-  const genericTitle = titleToken !== null && [tool, type].map((candidate) => normalizeToolToken(candidate)).some((candidate) => candidate === titleToken);
+  const titleToken = normalizeToolToken2(title);
+  const genericTitle = titleToken !== null && [tool, type].map((candidate) => normalizeToolToken2(candidate)).some((candidate) => candidate === titleToken);
   if (message && (!title || genericTitle)) {
     return message;
   }
@@ -8145,7 +9017,7 @@ function buildToolComponentRenderUnits(content, options) {
   const units = [];
   const pendingTools = [];
   content.forEach((item, index) => {
-    if (isGroupableToolComponent(item) && options?.shouldGroupComponent?.(item) !== false) {
+    if (isGroupableStepComponent(item) && options?.shouldGroupComponent?.(item) !== false) {
       pendingTools.push({ item, index });
       return;
     }
@@ -8210,13 +9082,13 @@ function createToolsetAvatarUrl(toolsetId, apiUrl) {
   }
 }
 function shouldUseToolsetAvatar(toolset) {
-  const normalized = normalizeToolToken(toolset);
+  const normalized = normalizeToolToken2(toolset);
   return normalized === "mcp" || normalized === "openapi";
 }
 function useToolsetAvatar(toolsetId, enabled, apiUrl) {
   const avatarUrl = enabled ? createToolsetAvatarUrl(toolsetId, apiUrl) : null;
-  const [avatar, setAvatar] = React28.useState(null);
-  React28.useEffect(() => {
+  const [avatar, setAvatar] = React29.useState(null);
+  React29.useEffect(() => {
     if (!avatarUrl) {
       setAvatar(null);
       return;
@@ -8248,7 +9120,7 @@ function ToolAvatarIcon({
   className
 }) {
   if (avatar.url) {
-    return /* @__PURE__ */ jsx31(
+    return /* @__PURE__ */ jsx33(
       "img",
       {
         alt: "",
@@ -8261,7 +9133,7 @@ function ToolAvatarIcon({
   }
   const emoji = unicodeFromUnified2(avatar.emoji?.unified);
   if (emoji) {
-    return /* @__PURE__ */ jsx31(
+    return /* @__PURE__ */ jsx33(
       "span",
       {
         "aria-hidden": "true",
@@ -8276,7 +9148,7 @@ function ToolAvatarIcon({
       }
     );
   }
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx33(
     CircleHelp,
     {
       className,
@@ -8286,7 +9158,7 @@ function ToolAvatarIcon({
   );
 }
 function getKnownToolsetIcon(toolset) {
-  const normalized = normalizeToolToken(toolset);
+  const normalized = normalizeToolToken2(toolset);
   if (!normalized) return null;
   switch (normalized) {
     case "project":
@@ -8301,7 +9173,7 @@ function getKnownToolsetIcon(toolset) {
     case "memories":
       return Brain3;
     case "workflow_agent_tool":
-      return Wrench;
+      return Wrench2;
     case "workflow_task":
       return Network;
     default:
@@ -8309,7 +9181,7 @@ function getKnownToolsetIcon(toolset) {
   }
 }
 function getStepTypeIcon(type) {
-  const normalized = normalizeToolToken(type);
+  const normalized = normalizeToolToken2(type);
   if (!normalized) return null;
   switch (normalized) {
     case "file":
@@ -8318,6 +9190,8 @@ function getStepTypeIcon(type) {
       return Files;
     case "program":
       return SquareTerminal;
+    case "web_search":
+      return Search2;
     case "knowledges":
       return BookOpen;
     default:
@@ -8337,12 +9211,12 @@ function ToolStepIcon({
     apiUrl
   );
   const iconUrl = createToolsetIconUrl(data.toolset, organizationId, apiUrl);
-  const [failedIconUrl, setFailedIconUrl] = React28.useState(null);
-  React28.useEffect(() => {
+  const [failedIconUrl, setFailedIconUrl] = React29.useState(null);
+  React29.useEffect(() => {
     setFailedIconUrl(null);
   }, [iconUrl]);
   if (avatar) {
-    return /* @__PURE__ */ jsx31(
+    return /* @__PURE__ */ jsx33(
       ToolAvatarIcon,
       {
         avatar,
@@ -8352,7 +9226,7 @@ function ToolStepIcon({
     );
   }
   if (iconUrl && failedIconUrl !== iconUrl) {
-    return /* @__PURE__ */ jsx31(
+    return /* @__PURE__ */ jsx33(
       "img",
       {
         alt: "",
@@ -8366,7 +9240,7 @@ function ToolStepIcon({
   }
   const TypeIcon = getStepTypeIcon(data.type);
   if (TypeIcon) {
-    return /* @__PURE__ */ jsx31(
+    return /* @__PURE__ */ jsx33(
       TypeIcon,
       {
         className,
@@ -8377,7 +9251,7 @@ function ToolStepIcon({
   }
   const ToolsetIcon = getKnownToolsetIcon(data.toolset);
   if (ToolsetIcon) {
-    return /* @__PURE__ */ jsx31(
+    return /* @__PURE__ */ jsx33(
       ToolsetIcon,
       {
         className,
@@ -8387,7 +9261,7 @@ function ToolStepIcon({
     );
   }
   if (usesToolsetAvatar) {
-    return /* @__PURE__ */ jsx31(
+    return /* @__PURE__ */ jsx33(
       CircleHelp,
       {
         className,
@@ -8396,7 +9270,7 @@ function ToolStepIcon({
       }
     );
   }
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx33(
     CircleHelp,
     {
       className,
@@ -8407,15 +9281,15 @@ function ToolStepIcon({
 }
 function ToolCallCopyButton({ value }) {
   const { t } = useChatkitTranslation();
-  const [isCopied, setIsCopied] = React28.useState(false);
-  const resetTimeoutRef = React28.useRef(null);
-  const clearResetTimeout = React28.useCallback(() => {
+  const [isCopied, setIsCopied] = React29.useState(false);
+  const resetTimeoutRef = React29.useRef(null);
+  const clearResetTimeout = React29.useCallback(() => {
     if (resetTimeoutRef.current === null) return;
     window.clearTimeout(resetTimeoutRef.current);
     resetTimeoutRef.current = null;
   }, []);
-  React28.useEffect(() => clearResetTimeout, [clearResetTimeout]);
-  const handleCopy = React28.useCallback(() => {
+  React29.useEffect(() => clearResetTimeout, [clearResetTimeout]);
+  const handleCopy = React29.useCallback(() => {
     if (typeof navigator === "undefined" || !navigator.clipboard) return;
     void navigator.clipboard.writeText(value).then(() => {
       setIsCopied(true);
@@ -8427,7 +9301,7 @@ function ToolCallCopyButton({ value }) {
     }).catch(() => void 0);
   }, [clearResetTimeout, value]);
   const label = isCopied ? t("message.toolGroup.copied") : t("message.toolGroup.copy");
-  return /* @__PURE__ */ jsx31(
+  return /* @__PURE__ */ jsx33(
     "button",
     {
       type: "button",
@@ -8435,7 +9309,7 @@ function ToolCallCopyButton({ value }) {
       "aria-label": label,
       title: label,
       onClick: handleCopy,
-      children: isCopied ? /* @__PURE__ */ jsx31(Check3, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) : /* @__PURE__ */ jsx31(Copy, { className: "h-3.5 w-3.5", "aria-hidden": "true" })
+      children: isCopied ? /* @__PURE__ */ jsx33(Check3, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) : /* @__PURE__ */ jsx33(Copy, { className: "h-3.5 w-3.5", "aria-hidden": "true" })
     }
   );
 }
@@ -8446,28 +9320,28 @@ function ToolCallValueBlock({
   const { t } = useChatkitTranslation();
   const detected = detectJsonValue(value);
   if (detected.kind === "text") {
-    return /* @__PURE__ */ jsxs19("div", { className: "min-w-0 space-y-1", children: [
-      /* @__PURE__ */ jsx31("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx31(ToolCallCopyButton, { value: detected.text }) }),
-      /* @__PURE__ */ jsx31(PlainTextBlock, { value: detected.text, destructive })
+    return /* @__PURE__ */ jsxs21("div", { className: "min-w-0 space-y-1", children: [
+      /* @__PURE__ */ jsx33("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx33(ToolCallCopyButton, { value: detected.text }) }),
+      /* @__PURE__ */ jsx33(PlainTextBlock, { value: detected.text, destructive })
     ] });
   }
-  return /* @__PURE__ */ jsxs19(Tabs, { defaultValue: "tree", className: "min-w-0", children: [
-    /* @__PURE__ */ jsxs19("div", { className: "mb-2 flex min-w-0 items-center justify-between gap-2", children: [
-      /* @__PURE__ */ jsxs19("span", { className: "min-w-0 truncate text-[11px] text-muted-foreground", children: [
+  return /* @__PURE__ */ jsxs21(Tabs, { defaultValue: "tree", className: "min-w-0", children: [
+    /* @__PURE__ */ jsxs21("div", { className: "mb-2 flex min-w-0 items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsxs21("span", { className: "min-w-0 truncate text-[11px] text-muted-foreground", children: [
         t("message.toolGroup.jsonTitle"),
         " \xB7 ",
         getJsonValueSummary(detected.value)
       ] }),
-      /* @__PURE__ */ jsxs19("div", { className: "flex shrink-0 items-center gap-1", children: [
-        /* @__PURE__ */ jsx31(ToolCallCopyButton, { value: detected.raw }),
-        /* @__PURE__ */ jsxs19(TabsList, { className: "rounded-md p-0.5", children: [
-          /* @__PURE__ */ jsx31(TabsTrigger, { className: "px-2 py-0.5 text-[11px]", value: "tree", children: t("message.toolGroup.jsonTree") }),
-          /* @__PURE__ */ jsx31(TabsTrigger, { className: "px-2 py-0.5 text-[11px]", value: "raw", children: t("message.toolGroup.jsonRaw") })
+      /* @__PURE__ */ jsxs21("div", { className: "flex shrink-0 items-center gap-1", children: [
+        /* @__PURE__ */ jsx33(ToolCallCopyButton, { value: detected.raw }),
+        /* @__PURE__ */ jsxs21(TabsList, { className: "rounded-md p-0.5", children: [
+          /* @__PURE__ */ jsx33(TabsTrigger, { className: "px-2 py-0.5 text-[11px]", value: "tree", children: t("message.toolGroup.jsonTree") }),
+          /* @__PURE__ */ jsx33(TabsTrigger, { className: "px-2 py-0.5 text-[11px]", value: "raw", children: t("message.toolGroup.jsonRaw") })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx31(TabsContent, { value: "tree", className: "mt-0", children: /* @__PURE__ */ jsx31(JsonTreeView, { value: detected.value }) }),
-    /* @__PURE__ */ jsx31(TabsContent, { value: "raw", className: "mt-0", children: /* @__PURE__ */ jsx31(RawJsonBlock, { raw: detected.raw }) })
+    /* @__PURE__ */ jsx33(TabsContent, { value: "tree", className: "mt-0", children: /* @__PURE__ */ jsx33(JsonTreeView, { value: detected.value }) }),
+    /* @__PURE__ */ jsx33(TabsContent, { value: "raw", className: "mt-0", children: /* @__PURE__ */ jsx33(RawJsonBlock, { raw: detected.raw }) })
   ] });
 }
 function DefaultToolCallOutput({ data }) {
@@ -8475,31 +9349,37 @@ function DefaultToolCallOutput({ data }) {
   const output = data.output ?? null;
   const error = data.error ?? null;
   if (error) {
-    return /* @__PURE__ */ jsxs19("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsx31("div", { className: "text-[11px] font-medium text-destructive", children: t("message.toolGroup.errorTitle") }),
-      /* @__PURE__ */ jsx31(ToolCallValueBlock, { value: error, destructive: true })
+    return /* @__PURE__ */ jsxs21("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx33("div", { className: "text-[11px] font-medium text-destructive", children: t("message.toolGroup.errorTitle") }),
+      /* @__PURE__ */ jsx33(ToolCallValueBlock, { value: error, destructive: true })
     ] });
   }
   if (output === null) return null;
-  return /* @__PURE__ */ jsxs19("div", { className: "space-y-1", children: [
-    /* @__PURE__ */ jsx31("div", { className: "text-[11px] font-medium text-muted-foreground", children: t("message.toolGroup.outputTitle") }),
-    /* @__PURE__ */ jsx31(ToolCallValueBlock, { value: output })
+  return /* @__PURE__ */ jsxs21("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsx33("div", { className: "text-[11px] font-medium text-muted-foreground", children: t("message.toolGroup.outputTitle") }),
+    /* @__PURE__ */ jsx33(ToolCallValueBlock, { value: output })
   ] });
 }
 function ToolCallDetails({ content }) {
   const { t } = useChatkitTranslation();
   const data = getToolStepData(content);
+  const renderer = getComponentMessageRenderer(content, data);
+  const hasCustomDetails = data.error === void 0 && hasComponentMessageRendererDetails(renderer, content, data);
+  const CustomDetailsRenderer = hasCustomDetails ? renderer?.renderDetails : void 0;
+  if (CustomDetailsRenderer) {
+    return /* @__PURE__ */ jsx33("div", { className: "ml-6 mt-1 max-h-60 overflow-auto rounded-md bg-muted/30 text-xs text-muted-foreground", children: /* @__PURE__ */ jsx33(CustomDetailsRenderer, { content, data }) });
+  }
   const OutputRenderer = getToolCallOutputRenderer(data);
   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__ */ jsxs19("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__ */ jsxs19("div", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsx31("div", { className: "text-[11px] font-medium text-muted-foreground", children: t("message.toolGroup.inputTitle") }),
-      /* @__PURE__ */ jsx31(ToolCallValueBlock, { value: data.input })
+  return /* @__PURE__ */ jsxs21("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__ */ jsxs21("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ jsx33("div", { className: "text-[11px] font-medium text-muted-foreground", children: t("message.toolGroup.inputTitle") }),
+      /* @__PURE__ */ jsx33(ToolCallValueBlock, { value: data.input })
     ] }),
-    hasInput && hasOutput ? /* @__PURE__ */ jsx31("div", { className: "h-2" }) : null,
-    hasOutput ? /* @__PURE__ */ jsx31(OutputRenderer, { content, data }) : null
+    hasInput && hasOutput ? /* @__PURE__ */ jsx33("div", { className: "h-2" }) : null,
+    hasOutput ? /* @__PURE__ */ jsx33(OutputRenderer, { content, data }) : null
   ] });
 }
 function areToolCallRowPropsEqual(previous, next) {
@@ -8514,12 +9394,12 @@ function ToolCallRowContent({
   const { i18n: i18n2 } = useChatkitTranslation();
   const data = getToolStepData(content);
   const status = getEffectiveToolStepStatus(data, isThreadRunning);
-  const itemConfig = status ? toolStatusConfig[status] : null;
-  const ItemStatusIcon = itemConfig?.icon;
   const hasError = status === "fail" || Boolean(data.error);
   const label = getToolActivityLabel(content, i18n2.language, status);
-  const detailsId = React28.useId();
-  const hasDetails = data.input !== void 0 || data.error !== void 0 || data.output !== void 0;
+  const detailsId = React29.useId();
+  const renderer = getComponentMessageRenderer(content, data);
+  const hasCustomDetails = data.error === void 0 && hasComponentMessageRendererDetails(renderer, content, data);
+  const hasDetails = data.input !== void 0 || data.error !== void 0 || data.output !== void 0 || hasCustomDetails;
   const fallbackEndedAt = useFrozenTimestamp(
     data.status === "running" && status === "fail"
   );
@@ -8527,19 +9407,20 @@ function ToolCallRowContent({
     status,
     fallbackEndedAt
   });
-  const [isExpanded, setIsExpanded] = React28.useState(false);
-  React28.useEffect(() => {
+  const [isExpanded, setIsExpanded] = React29.useState(false);
+  React29.useEffect(() => {
     if (status === "running" && data.output !== void 0) {
       setIsExpanded(true);
     }
   }, [data.output, status]);
-  return /* @__PURE__ */ jsxs19("li", { className: "min-w-0", children: [
-    /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs21("li", { className: "min-w-0", children: [
+    /* @__PURE__ */ jsxs21(
       "button",
       {
         type: "button",
         className: cn(
-          "group/tool-call flex w-full min-w-0 items-center gap-2 text-left text-sm leading-6 text-muted-foreground",
+          "group/tool-call flex w-full min-w-0 items-center gap-2 text-left text-muted-foreground",
+          TOOL_CALL_ROW_TEXT_CLASS,
           hasDetails && "cursor-pointer hover:text-foreground",
           hasError && "text-destructive hover:text-destructive"
         ),
@@ -8550,16 +9431,7 @@ function ToolCallRowContent({
           if (hasDetails) setIsExpanded((prev) => !prev);
         },
         children: [
-          status === "running" && ItemStatusIcon ? /* @__PURE__ */ jsx31(
-            ItemStatusIcon,
-            {
-              className: cn(
-                "h-3.5 w-3.5 shrink-0",
-                itemConfig?.iconClass,
-                "animate-spin"
-              )
-            }
-          ) : status ? /* @__PURE__ */ jsx31(
+          status ? /* @__PURE__ */ jsx33(
             ToolStepIcon,
             {
               data,
@@ -8570,11 +9442,21 @@ function ToolCallRowContent({
                 hasError ? "text-destructive" : "text-muted-foreground"
               )
             }
-          ) : /* @__PURE__ */ jsx31("span", { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx31("span", { className: "min-w-0 truncate", title: label, children: label }),
-          durationLabel ? /* @__PURE__ */ jsx31("span", { className: "shrink-0 text-[11px] tabular-nums text-muted-foreground/80", children: durationLabel }) : null,
-          hasDetails ? /* @__PURE__ */ jsx31(
-            ChevronRight6,
+          ) : /* @__PURE__ */ jsx33("span", { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx33(
+            "span",
+            {
+              className: cn(
+                "min-w-0 truncate",
+                status === "running" && "ck-tool-call-running-text"
+              ),
+              title: label,
+              children: label
+            }
+          ),
+          durationLabel ? /* @__PURE__ */ jsx33("span", { className: "shrink-0 text-[11px] tabular-nums text-muted-foreground/80", children: durationLabel }) : null,
+          hasDetails ? /* @__PURE__ */ jsx33(
+            ChevronRight7,
             {
               "aria-hidden": "true",
               className: cn(
@@ -8586,10 +9468,10 @@ function ToolCallRowContent({
         ]
       }
     ),
-    hasDetails && isExpanded ? /* @__PURE__ */ jsx31("div", { id: detailsId, children: /* @__PURE__ */ jsx31(ToolCallDetails, { content }) }) : null
+    hasDetails && isExpanded ? /* @__PURE__ */ jsx33("div", { id: detailsId, children: /* @__PURE__ */ jsx33(ToolCallDetails, { content }) }) : null
   ] });
 }
-var ToolCallRow = React28.memo(ToolCallRowContent, areToolCallRowPropsEqual);
+var ToolCallRow = React29.memo(ToolCallRowContent, areToolCallRowPropsEqual);
 ToolCallRow.displayName = "ToolCallRow";
 function ToolComponentGroup({
   items,
@@ -8599,9 +9481,8 @@ function ToolComponentGroup({
   apiUrl
 }) {
   const { t } = useChatkitTranslation();
-  const contentId = React28.useId();
-  const groupStatus = getEffectiveToolGroupDisplayStatus(items, isThreadRunning);
-  const [isExpanded, setIsExpanded] = React28.useState(!hasFollowingItem);
+  const contentId = React29.useId();
+  const [isExpanded, setIsExpanded] = React29.useState(!hasFollowingItem);
   const categoryCounts = getToolGroupCategoryCounts(items);
   const categorySummary = TOOL_GROUP_CATEGORY_ORDER.flatMap((category) => {
     const count = categoryCounts[category] ?? 0;
@@ -8613,14 +9494,14 @@ function ToolComponentGroup({
       )
     ];
   }).join(t("message.toolGroup.separator"));
-  const summary = `${t(`message.toolGroup.status.${groupStatus}`)} ${categorySummary}`;
-  const config = toolStatusConfig[groupStatus];
+  const summary = `${t("message.toolGroup.status.success")} ${categorySummary}`;
+  const config = toolStatusConfig.success;
   const StatusIcon = config.icon;
-  React28.useEffect(() => {
+  React29.useEffect(() => {
     setIsExpanded(!hasFollowingItem);
   }, [hasFollowingItem, items.length]);
-  return /* @__PURE__ */ jsxs19("div", { className: "px-1 py-1", children: [
-    /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs21("div", { className: "px-1 py-1", children: [
+    /* @__PURE__ */ jsxs21(
       "button",
       {
         type: "button",
@@ -8629,8 +9510,8 @@ function ToolComponentGroup({
         "aria-controls": contentId,
         onClick: () => setIsExpanded((prev) => !prev),
         children: [
-          /* @__PURE__ */ jsxs19("div", { className: "flex min-w-0 items-center gap-2 text-sm font-medium text-muted-foreground", children: [
-            /* @__PURE__ */ jsx31(
+          /* @__PURE__ */ jsxs21("div", { className: "flex min-w-0 items-center gap-2 text-sm font-medium text-muted-foreground", children: [
+            /* @__PURE__ */ jsx33(
               StatusIcon,
               {
                 className: cn(
@@ -8639,10 +9520,10 @@ function ToolComponentGroup({
                 )
               }
             ),
-            /* @__PURE__ */ jsx31("span", { className: "truncate", children: summary })
+            /* @__PURE__ */ jsx33("span", { className: "truncate", children: summary })
           ] }),
-          /* @__PURE__ */ jsx31(
-            ChevronRight6,
+          /* @__PURE__ */ jsx33(
+            ChevronRight7,
             {
               "aria-hidden": "true",
               className: cn(
@@ -8654,7 +9535,7 @@ function ToolComponentGroup({
         ]
       }
     ),
-    isExpanded && /* @__PURE__ */ jsx31("ul", { id: contentId, className: "mt-2 space-y-1.5 overflow-y-auto pr-1", children: items.map((item, index) => /* @__PURE__ */ jsx31(
+    isExpanded && /* @__PURE__ */ jsx33("ul", { id: contentId, className: "mt-2 space-y-1.5 overflow-y-auto pr-1", children: items.map((item, index) => /* @__PURE__ */ jsx33(
       ToolCallRow,
       {
         content: item,
@@ -8673,8 +9554,8 @@ import {
   REQUEST_USER_INPUT_RESULT_TYPE as REQUEST_USER_INPUT_RESULT_TYPE2,
   REQUEST_USER_INPUT_TOOL_NAME as REQUEST_USER_INPUT_TOOL_NAME2
 } from "@xpert-ai/chatkit-types";
-import { CheckCircle2 as CheckCircle23 } from "lucide-react";
-import { jsx as jsx32, jsxs as jsxs20 } from "react/jsx-runtime";
+import { CheckCircle2 as CheckCircle24 } from "lucide-react";
+import { jsx as jsx34, jsxs as jsxs22 } from "react/jsx-runtime";
 function isRecord2(value) {
   return !!value && typeof value === "object" && !Array.isArray(value);
 }
@@ -8786,7 +9667,7 @@ function RequestUserInputResultCard({
   className
 }) {
   const { t } = useChatkitTranslation();
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs22(
     "section",
     {
       "aria-label": t("message.requestUserInputResult.title"),
@@ -8795,23 +9676,23 @@ function RequestUserInputResultCard({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs20("div", { className: "mb-2 flex items-center gap-2 text-sm font-semibold text-foreground", children: [
-          /* @__PURE__ */ jsx32(CheckCircle23, { className: "h-4 w-4 text-primary" }),
-          /* @__PURE__ */ jsx32("span", { children: t("message.requestUserInputResult.title") })
+        /* @__PURE__ */ jsxs22("div", { className: "mb-2 flex items-center gap-2 text-sm font-semibold text-foreground", children: [
+          /* @__PURE__ */ jsx34(CheckCircle24, { className: "h-4 w-4 text-primary" }),
+          /* @__PURE__ */ jsx34("span", { children: t("message.requestUserInputResult.title") })
         ] }),
-        /* @__PURE__ */ jsx32("div", { className: "space-y-2", children: result.answers.map((answer, index) => /* @__PURE__ */ jsxs20(
+        /* @__PURE__ */ jsx34("div", { className: "space-y-2", children: result.answers.map((answer, index) => /* @__PURE__ */ jsxs22(
           "div",
           {
             className: "rounded-md bg-background/70 px-2.5 py-2",
             children: [
-              /* @__PURE__ */ jsx32("div", { className: "text-xs font-medium leading-5 text-muted-foreground", children: answer.question }),
-              /* @__PURE__ */ jsxs20("div", { className: "mt-0.5 flex min-w-0 flex-wrap items-center gap-1.5", children: [
-                /* @__PURE__ */ jsx32("span", { className: "min-w-0 wrap-break-word text-sm font-semibold text-foreground", children: answer.label ?? answer.value }),
-                /* @__PURE__ */ jsx32("span", { className: "rounded-full bg-muted px-1.5 py-0.5 text-[11px] font-medium text-muted-foreground", children: t(
+              /* @__PURE__ */ jsx34("div", { className: "text-xs font-medium leading-5 text-muted-foreground", children: answer.question }),
+              /* @__PURE__ */ jsxs22("div", { className: "mt-0.5 flex min-w-0 flex-wrap items-center gap-1.5", children: [
+                /* @__PURE__ */ jsx34("span", { className: "min-w-0 wrap-break-word text-sm font-semibold text-foreground", children: answer.label ?? answer.value }),
+                /* @__PURE__ */ jsx34("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__ */ jsx32("div", { className: "mt-1 text-xs leading-5 text-muted-foreground", children: answer.description }) : null
+              answer.description ? /* @__PURE__ */ jsx34("div", { className: "mt-1 text-xs leading-5 text-muted-foreground", children: answer.description }) : null
             ]
           },
           `${answer.id}-${index}`
@@ -8823,18 +9704,18 @@ function RequestUserInputResultCard({
 
 // src/components/thread/messages/widget.tsx
 import { SurfaceRenderer } from "@xpert-ai/a2ui-react";
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "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__ */ jsx33("div", { className: "space-y-3", children: widgets.map((widget, index) => {
+  return /* @__PURE__ */ jsx35("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__ */ jsx33(
+    return /* @__PURE__ */ jsx35(
       SurfaceRenderer,
       {
         surfaceId,
@@ -8846,17 +9727,18 @@ function WidgetMessage({ messageId, data }) {
 }
 
 // src/components/thread/messages/ai.tsx
-import { jsx as jsx34, jsxs as jsxs21 } from "react/jsx-runtime";
-function isTextContent2(content) {
+import { jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
+var assistantMessageStackClassName = "space-y-3 in-data-[density=compact]:space-y-2 in-data-[density=spacious]:space-y-4";
+function isTextContent3(content) {
   return content.type === "text";
 }
-function isReasoningContent2(content) {
+function isReasoningContent3(content) {
   return content.type === "reasoning";
 }
 function isImageContent(content) {
   return content.type === "image_url";
 }
-function isComponentContent2(content) {
+function isComponentContent3(content) {
   return content.type === "component";
 }
 function isWidgetComponent2(content) {
@@ -8866,24 +9748,24 @@ function isWidgetComponent2(content) {
 function isMemoryContent(content) {
   return content.type === "memory";
 }
-function safeJson2(value) {
+function safeJson3(value) {
   try {
     return JSON.stringify(value, null, 2);
   } catch {
     return String(value);
   }
 }
-function formatDisplayValue2(value) {
-  return typeof value === "string" ? value : safeJson2(value);
+function formatDisplayValue3(value) {
+  return typeof value === "string" ? value : safeJson3(value);
 }
 function ReasoningBlock({ reasoning }) {
   const blocks = reasoning.filter((item) => item.text?.trim());
   if (blocks.length === 0) return null;
-  return /* @__PURE__ */ jsx34("div", { className: "space-y-2", children: blocks.map((item, index) => /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx36("div", { className: "space-y-2", children: blocks.map((item, index) => /* @__PURE__ */ jsx36(
     "div",
     {
       className: "rounded-lg border bg-muted/40 p-3 text-xs text-muted-foreground",
-      children: /* @__PURE__ */ jsx34("p", { className: "whitespace-pre-wrap wrap-break-word leading-relaxed", children: item.text })
+      children: /* @__PURE__ */ jsx36("p", { className: "whitespace-pre-wrap wrap-break-word leading-relaxed", children: item.text })
     },
     item.id ?? `reasoning-${index}`
   )) });
@@ -8891,20 +9773,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__ */ jsxs21(Card, { children: [
-      /* @__PURE__ */ jsx34(CardHeader, { className: "space-y-1", children: /* @__PURE__ */ jsx34(CardTitle, { className: "text-sm", children: "Image" }) }),
-      /* @__PURE__ */ jsx34(CardContent, { className: "text-xs text-muted-foreground", children: safeJson2(content) })
+    return /* @__PURE__ */ jsxs23(Card, { children: [
+      /* @__PURE__ */ jsx36(CardHeader, { className: "space-y-1", children: /* @__PURE__ */ jsx36(CardTitle, { className: "text-sm", children: "Image" }) }),
+      /* @__PURE__ */ jsx36(CardContent, { className: "text-xs text-muted-foreground", children: safeJson3(content) })
     ] });
   }
-  return /* @__PURE__ */ jsx34("figure", { className: "overflow-hidden rounded-lg border bg-background", children: /* @__PURE__ */ jsx34("img", { src: imageUrl, alt: "Assistant output", className: "h-auto w-full object-cover" }) });
+  return /* @__PURE__ */ jsx36("figure", { className: "overflow-hidden rounded-lg border bg-background", children: /* @__PURE__ */ jsx36("img", { src: imageUrl, alt: "Assistant output", className: "h-auto w-full object-cover" }) });
 }
 function MemoryBlock({ content }) {
-  return /* @__PURE__ */ jsxs21(Card, { children: [
-    /* @__PURE__ */ jsxs21(CardHeader, { className: "flex flex-row items-center justify-between gap-2", children: [
-      /* @__PURE__ */ jsx34(CardTitle, { className: "text-sm", children: "Memory" }),
-      /* @__PURE__ */ jsx34(Badge, { variant: "secondary", children: "Memory" })
+  return /* @__PURE__ */ jsxs23(Card, { children: [
+    /* @__PURE__ */ jsxs23(CardHeader, { className: "flex flex-row items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsx36(CardTitle, { className: "text-sm", children: "Memory" }),
+      /* @__PURE__ */ jsx36(Badge, { variant: "secondary", children: "Memory" })
     ] }),
-    /* @__PURE__ */ jsx34(CardContent, { className: "text-xs text-muted-foreground", children: /* @__PURE__ */ jsx34("pre", { className: "whitespace-pre-wrap wrap-break-word", children: safeJson2(content.data ?? []) }) })
+    /* @__PURE__ */ jsx36(CardContent, { className: "text-xs text-muted-foreground", children: /* @__PURE__ */ jsx36("pre", { className: "whitespace-pre-wrap wrap-break-word", children: safeJson3(content.data ?? []) }) })
   ] });
 }
 function parseStepDate2(value) {
@@ -8918,7 +9800,7 @@ function parseStepDate2(value) {
   const timestamp = Date.parse(value);
   return Number.isNaN(timestamp) ? null : timestamp;
 }
-function formatStepDuration2(durationMs) {
+function formatStepDuration3(durationMs) {
   if (durationMs < 1e3) {
     return `${durationMs}ms`;
   }
@@ -8938,11 +9820,11 @@ function formatStepDuration2(durationMs) {
 }
 function ComponentBlock({ content }) {
   const { i18n: i18n2 } = useChatkitTranslation();
-  const [isExpanded, setIsExpanded] = React30.useState(false);
-  const contentRef = React30.useRef(null);
-  const shouldAutoScrollRef = React30.useRef(true);
-  const previousScrollTopRef = React30.useRef(0);
-  const [durationNow, setDurationNow] = React30.useState(() => Date.now());
+  const [isExpanded, setIsExpanded] = React31.useState(false);
+  const contentRef = React31.useRef(null);
+  const shouldAutoScrollRef = React31.useRef(true);
+  const previousScrollTopRef = React31.useRef(0);
+  const [durationNow, setDurationNow] = React31.useState(() => Date.now());
   const data = getToolStepData(content);
   const category = data.category ?? "Component";
   const title = getToolActivityLabel(content, i18n2.language);
@@ -8955,11 +9837,11 @@ function ComponentBlock({ content }) {
   const createdAt = parseStepDate2(data.created_date);
   const endedAt = parseStepDate2(data.end_date);
   const durationMs = createdAt === null ? null : Math.max(0, (endedAt ?? durationNow) - createdAt);
-  const durationLabel = durationMs === null ? null : formatStepDuration2(durationMs);
-  React30.useEffect(() => {
+  const durationLabel = durationMs === null ? null : formatStepDuration3(durationMs);
+  React31.useEffect(() => {
     if (status === "running" && output !== null) setIsExpanded(true);
   }, [status, output]);
-  React30.useEffect(() => {
+  React31.useEffect(() => {
     if (status !== "running" || createdAt === null || endedAt !== null) {
       return;
     }
@@ -8971,7 +9853,7 @@ function ComponentBlock({ content }) {
       window.clearInterval(timer);
     };
   }, [createdAt, endedAt, status]);
-  React30.useEffect(() => {
+  React31.useEffect(() => {
     const element = contentRef.current;
     if (!element) return;
     previousScrollTopRef.current = element.scrollTop;
@@ -8991,7 +9873,7 @@ function ComponentBlock({ content }) {
       element.removeEventListener("scroll", updateAutoScrollState);
     };
   }, [isExpanded]);
-  React30.useEffect(() => {
+  React31.useEffect(() => {
     if (status !== "running") {
       shouldAutoScrollRef.current = true;
       return;
@@ -9004,24 +9886,24 @@ function ComponentBlock({ content }) {
   }, [isExpanded, output, status]);
   const config = status ? toolStatusConfig[status] : null;
   const StatusIcon = config?.icon;
-  return /* @__PURE__ */ jsxs21(Card, { children: [
-    /* @__PURE__ */ jsxs21(CardHeader, { className: "flex flex-row items-center justify-between gap-2 px-2 py-1 cursor-pointer", onClick: () => setIsExpanded(!isExpanded), children: [
-      /* @__PURE__ */ jsxs21("div", { className: "flex items-center space-x-1 flex-1 min-w-0", children: [
-        status && StatusIcon && /* @__PURE__ */ jsx34(StatusIcon, { className: cn("h-4 w-4", config?.iconClass, status === "running" && "animate-spin") }),
-        /* @__PURE__ */ jsx34(CardTitle, { className: "text-sm truncate", children: title })
+  return /* @__PURE__ */ jsxs23(Card, { children: [
+    /* @__PURE__ */ jsxs23(CardHeader, { className: "flex flex-row items-center justify-between gap-2 px-2 py-1 cursor-pointer", onClick: () => setIsExpanded(!isExpanded), children: [
+      /* @__PURE__ */ jsxs23("div", { className: "flex items-center space-x-1 flex-1 min-w-0", children: [
+        status && StatusIcon && /* @__PURE__ */ jsx36(StatusIcon, { className: cn("h-4 w-4", config?.iconClass, status === "running" && "animate-spin") }),
+        /* @__PURE__ */ jsx36(CardTitle, { className: "text-sm truncate", children: title })
       ] }),
-      /* @__PURE__ */ jsxs21("div", { className: "flex flex-wrap items-center gap-2 shrink-0", children: [
-        durationLabel && /* @__PURE__ */ jsxs21("div", { className: "inline-flex items-center gap-1 text-[11px] text-muted-foreground tabular-nums", children: [
-          /* @__PURE__ */ jsx34(Clock3, { className: "h-3 w-3" }),
-          /* @__PURE__ */ jsx34("span", { children: durationLabel })
+      /* @__PURE__ */ jsxs23("div", { className: "flex flex-wrap items-center gap-2 shrink-0", children: [
+        durationLabel && /* @__PURE__ */ jsxs23("div", { className: "inline-flex items-center gap-1 text-[11px] text-muted-foreground tabular-nums", children: [
+          /* @__PURE__ */ jsx36(Clock32, { className: "h-3 w-3" }),
+          /* @__PURE__ */ jsx36("span", { children: durationLabel })
         ] }),
-        /* @__PURE__ */ jsx34(Badge, { variant: "secondary", className: "rounded-lg px-1.5", children: category }),
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx36(Badge, { variant: "secondary", className: "rounded-lg px-1.5", children: category }),
+        /* @__PURE__ */ jsx36(
           "button",
           {
             className: "text-muted-foreground hover:text-foreground transition-colors",
             "aria-label": isExpanded ? "Collapse" : "Expand",
-            children: /* @__PURE__ */ jsx34(
+            children: /* @__PURE__ */ jsx36(
               ChevronDown4,
               {
                 className: cn("h-4 w-4 transition-transform", isExpanded && "rotate-180")
@@ -9031,61 +9913,82 @@ function ComponentBlock({ content }) {
         )
       ] })
     ] }),
-    isExpanded && /* @__PURE__ */ jsxs21(CardContent, { ref: contentRef, className: "text-xs text-muted-foreground max-h-60 overflow-auto", children: [
-      data.input && /* @__PURE__ */ jsx34("pre", { className: "whitespace-pre-wrap wrap-break-word", children: formatDisplayValue2(data.input) }),
-      error ? /* @__PURE__ */ jsx34("pre", { className: "whitespace-pre-wrap wrap-break-word text-destructive", children: formatDisplayValue2(error) }) : hasOutput && /* @__PURE__ */ jsx34("pre", { className: "whitespace-pre-wrap wrap-break-word", children: formatDisplayValue2(fallback) })
+    isExpanded && /* @__PURE__ */ jsxs23(CardContent, { ref: contentRef, className: "text-xs text-muted-foreground max-h-60 overflow-auto", children: [
+      data.input && /* @__PURE__ */ jsx36("pre", { className: "whitespace-pre-wrap wrap-break-word", children: formatDisplayValue3(data.input) }),
+      error ? /* @__PURE__ */ jsx36("pre", { className: "whitespace-pre-wrap wrap-break-word text-destructive", children: formatDisplayValue3(error) }) : hasOutput && /* @__PURE__ */ jsx36("pre", { className: "whitespace-pre-wrap wrap-break-word", children: formatDisplayValue3(fallback) })
     ] })
   ] });
 }
 function UnknownBlock({ content }) {
-  return /* @__PURE__ */ jsxs21(Card, { children: [
-    /* @__PURE__ */ jsxs21(CardHeader, { className: "flex flex-row items-center justify-between gap-2", children: [
-      /* @__PURE__ */ jsx34(CardTitle, { className: "text-sm", children: "Assistant Content" }),
-      /* @__PURE__ */ jsx34(Badge, { variant: "outline", children: content.type ?? "unknown" })
+  return /* @__PURE__ */ jsxs23(Card, { children: [
+    /* @__PURE__ */ jsxs23(CardHeader, { className: "flex flex-row items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsx36(CardTitle, { className: "text-sm", children: "Assistant Content" }),
+      /* @__PURE__ */ jsx36(Badge, { variant: "outline", children: content.type ?? "unknown" })
     ] }),
-    /* @__PURE__ */ jsx34(CardContent, { className: "text-xs text-muted-foreground", children: /* @__PURE__ */ jsx34("pre", { className: "whitespace-pre-wrap break-words", children: safeJson2(content) }) })
+    /* @__PURE__ */ jsx36(CardContent, { className: "text-xs text-muted-foreground", children: /* @__PURE__ */ jsx36("pre", { className: "whitespace-pre-wrap break-words", children: safeJson3(content) }) })
   ] });
 }
-function renderContentItem(content, index, message, lookupMessages) {
+function renderContentItem(content, index, message, lookupMessages, options) {
   const messageId = message.id;
+  const textClassName = options?.isAgentOutput ? "text-sm [&_.markdown-content_p]:!leading-6" : void 0;
   if (typeof content === "string") {
-    return /* @__PURE__ */ jsx34("div", { children: /* @__PURE__ */ jsx34(MarkdownText, { children: content }) }, `text-${index}`);
+    return /* @__PURE__ */ jsx36("div", { className: textClassName, children: /* @__PURE__ */ jsx36(MarkdownText, { children: content }) }, `text-${index}`);
   }
-  if (isTextContent2(content)) {
-    return /* @__PURE__ */ jsx34("div", { children: /* @__PURE__ */ jsx34(MarkdownText, { children: content.text }) }, content.id ?? `text-${index}`);
+  if (isTextContent3(content)) {
+    return /* @__PURE__ */ jsx36("div", { className: textClassName, children: /* @__PURE__ */ jsx36(MarkdownText, { children: content.text }) }, content.id ?? `text-${index}`);
   }
-  if (isReasoningContent2(content)) {
-    return /* @__PURE__ */ jsx34("div", { children: /* @__PURE__ */ jsx34(ReasoningBlock, { reasoning: [content] }) }, content.id ?? `reasoning-${index}`);
+  if (isReasoningContent3(content)) {
+    return /* @__PURE__ */ jsx36("div", { children: /* @__PURE__ */ jsx36(ReasoningBlock, { reasoning: [content] }) }, content.id ?? `reasoning-${index}`);
   }
   if (isImageContent(content)) {
-    return /* @__PURE__ */ jsx34("div", { children: /* @__PURE__ */ jsx34(ImageBlock, { content }) }, content.id ?? `image-${index}`);
+    return /* @__PURE__ */ jsx36("div", { children: /* @__PURE__ */ jsx36(ImageBlock, { content }) }, content.id ?? `image-${index}`);
   }
-  if (isComponentContent2(content)) {
+  if (isComponentContent3(content)) {
     const requestUserInputResult = getRequestUserInputResultCardData(
       content,
       lookupMessages
     );
     if (requestUserInputResult) {
-      return /* @__PURE__ */ jsx34("div", { children: /* @__PURE__ */ jsx34(RequestUserInputResultCard, { result: requestUserInputResult }) }, content.id ?? `request-user-input-result-${index}`);
+      return /* @__PURE__ */ jsx36("div", { children: /* @__PURE__ */ jsx36(RequestUserInputResultCard, { result: requestUserInputResult }) }, content.id ?? `request-user-input-result-${index}`);
     }
     if (isWidgetComponent2(content)) {
-      return /* @__PURE__ */ jsx34("div", { children: /* @__PURE__ */ jsx34(WidgetMessage, { messageId, data: content.data }) }, content.id ?? `widget-${index}`);
+      return /* @__PURE__ */ jsx36("div", { children: /* @__PURE__ */ jsx36(WidgetMessage, { messageId, data: content.data }) }, content.id ?? `widget-${index}`);
+    }
+    if (getComponentMessagePresentation(content, getToolStepData(content)) === "grouped-step") {
+      return /* @__PURE__ */ jsx36("div", { children: /* @__PURE__ */ jsx36(
+        ToolComponentGroup,
+        {
+          items: [content],
+          hasFollowingItem: false,
+          isThreadRunning: options?.isThreadRunning,
+          organizationId: options?.organizationId,
+          apiUrl: options?.apiUrl
+        }
+      ) }, content.id ?? `component-group-${index}`);
     }
-    return /* @__PURE__ */ jsx34("div", { children: /* @__PURE__ */ jsx34(ComponentBlock, { content }) }, content.id ?? `component-${index}`);
+    return /* @__PURE__ */ jsx36("div", { children: /* @__PURE__ */ jsx36(ComponentBlock, { content }) }, content.id ?? `component-${index}`);
   }
   if (isMemoryContent(content)) {
-    return /* @__PURE__ */ jsx34("div", { children: /* @__PURE__ */ jsx34(MemoryBlock, { content }) }, content.id ?? `memory-${index}`);
+    return /* @__PURE__ */ jsx36("div", { children: /* @__PURE__ */ jsx36(MemoryBlock, { content }) }, content.id ?? `memory-${index}`);
+  }
+  if (isAgentEventContent(content)) {
+    return /* @__PURE__ */ jsx36("div", { children: /* @__PURE__ */ jsx36(AgentEventRow, { content }) }, content.id ?? `agent-event-${index}`);
   }
-  return /* @__PURE__ */ jsx34("div", { children: /* @__PURE__ */ jsx34(UnknownBlock, { content }) }, content.id ?? `unknown-${index}`);
+  return /* @__PURE__ */ jsx36("div", { children: /* @__PURE__ */ jsx36(UnknownBlock, { content }) }, content.id ?? `unknown-${index}`);
 }
 function renderContentUnit(unit, message, lookupMessages, hasFollowingItem, options) {
   if (unit.type === "item") {
-    return renderContentItem(unit.item, unit.index, message, lookupMessages);
+    return renderContentItem(unit.item, unit.index, message, lookupMessages, {
+      isThreadRunning: options?.isThreadRunning,
+      organizationId: options?.organizationId,
+      apiUrl: options?.apiUrl,
+      isAgentOutput: options?.isAgentOutput
+    });
   }
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx36(
     "div",
     {
-      children: /* @__PURE__ */ jsx34(
+      children: /* @__PURE__ */ jsx36(
         ToolComponentGroup,
         {
           items: unit.items,
@@ -9099,17 +10002,91 @@ function renderContentUnit(unit, message, lookupMessages, hasFollowingItem, opti
     `tool-group-${unit.startIndex}-${unit.items[0]?.id ?? "tool"}-${unit.items.length}`
   );
 }
+function renderEntryBatch(entries, message, lookupMessages, hasFollowingItem, options) {
+  if (entries.length === 0) return null;
+  const renderUnits = buildToolComponentRenderUnits(
+    entries.map((entry) => entry.item),
+    {
+      shouldGroupComponent: (item) => getRequestUserInputResultCardData(item, lookupMessages) === null
+    }
+  );
+  return renderUnits.map(
+    (unit, index) => renderContentUnit(
+      unit,
+      message,
+      lookupMessages,
+      index < renderUnits.length - 1 || hasFollowingItem,
+      options
+    )
+  );
+}
+function renderAssistantRenderUnits(units, message, lookupMessages, options, depth = 0) {
+  const rendered = [];
+  let entryBatch = [];
+  const flushEntries = (hasFollowingItem) => {
+    if (entryBatch.length === 0) return;
+    const batch = entryBatch;
+    entryBatch = [];
+    rendered.push(
+      /* @__PURE__ */ jsx36(React31.Fragment, { children: renderEntryBatch(batch, message, lookupMessages, hasFollowingItem, {
+        ...options,
+        isAgentOutput: depth > 0
+      }) }, `entries-${batch[0]?.order ?? rendered.length}`)
+    );
+  };
+  units.forEach((unit, index) => {
+    const hasFollowingItem = index < units.length - 1;
+    if (unit.type === "entry") {
+      entryBatch.push(unit.entry);
+      if (!hasFollowingItem) {
+        flushEntries(false);
+      }
+      return;
+    }
+    flushEntries(true);
+    rendered.push(
+      /* @__PURE__ */ jsx36(
+        AgentRunGroup,
+        {
+          node: unit.node,
+          hasFollowingItem,
+          depth,
+          renderUnits: (childUnits, nextDepth) => renderAssistantRenderUnits(
+            childUnits,
+            message,
+            lookupMessages,
+            options,
+            nextDepth
+          )
+        },
+        unit.node.id
+      )
+    );
+  });
+  return rendered;
+}
 function renderContent(message, lookupMessages, options) {
+  const renderTree = buildAssistantRenderTree(
+    message
+  );
+  if (renderTree.hasAgentRuns) {
+    return /* @__PURE__ */ jsx36("div", { className: assistantMessageStackClassName, children: renderAssistantRenderUnits(
+      renderTree.units,
+      message,
+      lookupMessages,
+      options
+    ) });
+  }
   const content = message.content;
   if (typeof content === "string") {
     if (!content.trim()) return null;
-    return /* @__PURE__ */ jsx34(MarkdownText, { children: content });
+    return /* @__PURE__ */ jsx36(MarkdownText, { children: content });
   }
   if (!Array.isArray(content) || content.length === 0) return null;
   const renderUnits = buildToolComponentRenderUnits(content, {
     shouldGroupComponent: (item) => getRequestUserInputResultCardData(item, lookupMessages) === null
   });
-  return /* @__PURE__ */ jsx34("div", { className: "space-y-3", children: renderUnits.map(
+  return /* @__PURE__ */ jsx36("div", { className: "space-y-3", children: renderUnits.map(
     (unit, index) => renderContentUnit(
       unit,
       message,
@@ -9129,20 +10106,29 @@ function AssistantStreamingIndicator({
     thinking: t("message.thinking"),
     answering: t("message.answering")
   };
-  return /* @__PURE__ */ jsxs21("div", { className: cn("flex items-center gap-2 text-xs text-muted-foreground", className), children: [
-    status === "loading" && /* @__PURE__ */ jsx34(Loader24, { className: "h-3.5 w-3.5 animate-spin" }),
-    status === "thinking" && /* @__PURE__ */ jsxs21("div", { className: "flex items-end gap-1", "aria-hidden": "true", children: [
-      /* @__PURE__ */ jsx34("span", { className: "h-1.5 w-1.5 rounded-full bg-current animate-bounce [animation-delay:-0.3s]" }),
-      /* @__PURE__ */ jsx34("span", { className: "h-1.5 w-1.5 rounded-full bg-current animate-bounce [animation-delay:-0.15s]" }),
-      /* @__PURE__ */ jsx34("span", { className: "h-1.5 w-1.5 rounded-full bg-current animate-bounce" })
-    ] }),
-    status === "answering" && /* @__PURE__ */ jsxs21("div", { className: "flex items-end gap-1", "aria-hidden": "true", children: [
-      /* @__PURE__ */ jsx34("span", { className: "h-2 w-0.5 rounded-full bg-current animate-pulse [animation-delay:-0.25s]" }),
-      /* @__PURE__ */ jsx34("span", { className: "h-3 w-0.5 rounded-full bg-current animate-pulse [animation-delay:-0.1s]" }),
-      /* @__PURE__ */ jsx34("span", { className: "h-2.5 w-0.5 rounded-full bg-current animate-pulse" })
-    ] }),
-    /* @__PURE__ */ jsx34("span", { children: labelMap[status] })
-  ] });
+  return /* @__PURE__ */ jsxs23(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-2 text-xs text-muted-foreground",
+        className
+      ),
+      children: [
+        status === "loading" && /* @__PURE__ */ jsx36(Loader25, { className: "h-3.5 w-3.5 animate-spin" }),
+        status === "thinking" && /* @__PURE__ */ jsxs23("div", { className: "flex items-end gap-1", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx36("span", { className: "h-1.5 w-1.5 rounded-full bg-current animate-bounce [animation-delay:-0.3s]" }),
+          /* @__PURE__ */ jsx36("span", { className: "h-1.5 w-1.5 rounded-full bg-current animate-bounce [animation-delay:-0.15s]" }),
+          /* @__PURE__ */ jsx36("span", { className: "h-1.5 w-1.5 rounded-full bg-current animate-bounce" })
+        ] }),
+        status === "answering" && /* @__PURE__ */ jsxs23("div", { className: "flex items-end gap-1", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx36("span", { className: "h-2 w-0.5 rounded-full bg-current animate-pulse [animation-delay:-0.25s]" }),
+          /* @__PURE__ */ jsx36("span", { className: "h-3 w-0.5 rounded-full bg-current animate-pulse [animation-delay:-0.1s]" }),
+          /* @__PURE__ */ jsx36("span", { className: "h-2.5 w-0.5 rounded-full bg-current animate-pulse" })
+        ] }),
+        /* @__PURE__ */ jsx36("span", { children: labelMap[status] })
+      ]
+    }
+  );
 }
 function AssistantMessage({
   message,
@@ -9155,8 +10141,12 @@ function AssistantMessage({
   apiUrl
 }) {
   const { t } = useChatkitTranslation();
-  const hasContent = hasRenderableMessageContent(message.content);
-  const hasReasoning = hasRenderableReasoning(message.reasoning);
+  const renderTree = buildAssistantRenderTree(
+    message
+  );
+  const rootReasoning = renderTree.hasAgentRuns ? renderTree.rootReasoning : message.reasoning;
+  const hasContent = hasRenderableMessageContent(message.content) || renderTree.hasAgentRuns;
+  const hasReasoning = hasRenderableReasoning(rootReasoning);
   const resolvedStreamingStatus = streamingStatus ?? getAssistantStreamingStatus(message, isStreaming);
   const lookupMessages = messages?.length ? messages : [message];
   const answerNode = renderContent(message, lookupMessages, {
@@ -9164,42 +10154,42 @@ function AssistantMessage({
     organizationId,
     apiUrl
   });
-  const reasoningNode = hasReasoning ? /* @__PURE__ */ jsx34(ReasoningBlock, { reasoning: message.reasoning ?? [] }) : null;
-  if (!hasRenderableAssistantMessage(message) && !resolvedStreamingStatus) return null;
+  const reasoningNode = hasReasoning ? /* @__PURE__ */ jsx36(ReasoningBlock, { reasoning: rootReasoning ?? [] }) : null;
+  if (!hasContent && !hasReasoning && !resolvedStreamingStatus) return null;
   const streamingClass = isStreaming ? "streaming-active" : "";
-  if (!hasRenderableAssistantMessage(message) && resolvedStreamingStatus) {
-    return /* @__PURE__ */ jsx34("div", { className: cn("space-y-3", streamingClass, className), children: /* @__PURE__ */ jsx34(AssistantStreamingIndicator, { status: resolvedStreamingStatus }) });
+  if (!hasContent && !hasReasoning && resolvedStreamingStatus) {
+    return /* @__PURE__ */ jsx36("div", { className: cn("space-y-3", streamingClass, className), children: /* @__PURE__ */ jsx36(AssistantStreamingIndicator, { status: resolvedStreamingStatus }) });
   }
   if (hasContent && hasReasoning) {
-    return /* @__PURE__ */ jsxs21("div", { className: cn("space-y-3", streamingClass, className), children: [
-      /* @__PURE__ */ jsxs21(
+    return /* @__PURE__ */ jsxs23("div", { className: cn("space-y-3", streamingClass, className), children: [
+      /* @__PURE__ */ jsxs23(
         Tabs,
         {
           defaultValue: message.status === "reasoning" ? "reasoning" : "answer",
           className: "w-full",
           children: [
-            /* @__PURE__ */ jsxs21(TabsList, { className: "", children: [
-              /* @__PURE__ */ jsx34(TabsTrigger, { value: "answer", children: t("message.answer") }),
-              /* @__PURE__ */ jsx34(TabsTrigger, { value: "reasoning", children: t("message.reasoning") })
+            /* @__PURE__ */ jsxs23(TabsList, { className: "", children: [
+              /* @__PURE__ */ jsx36(TabsTrigger, { value: "answer", children: t("message.answer") }),
+              /* @__PURE__ */ jsx36(TabsTrigger, { value: "reasoning", children: t("message.reasoning") })
             ] }),
-            /* @__PURE__ */ jsx34(TabsContent, { value: "answer", className: "space-y-3", children: answerNode }),
-            /* @__PURE__ */ jsx34(TabsContent, { value: "reasoning", className: "space-y-3", children: reasoningNode })
+            /* @__PURE__ */ jsx36(TabsContent, { value: "answer", className: "space-y-3", children: answerNode }),
+            /* @__PURE__ */ jsx36(TabsContent, { value: "reasoning", className: "space-y-3", children: reasoningNode })
           ]
         }
       ),
-      resolvedStreamingStatus ? /* @__PURE__ */ jsx34(AssistantStreamingIndicator, { status: resolvedStreamingStatus }) : null
+      resolvedStreamingStatus ? /* @__PURE__ */ jsx36(AssistantStreamingIndicator, { status: resolvedStreamingStatus }) : null
     ] });
   }
-  return /* @__PURE__ */ jsxs21("div", { className: cn("space-y-3", streamingClass, className), children: [
+  return /* @__PURE__ */ jsxs23("div", { className: cn("space-y-3", streamingClass, className), children: [
     hasReasoning ? reasoningNode : answerNode,
-    resolvedStreamingStatus ? /* @__PURE__ */ jsx34(AssistantStreamingIndicator, { status: resolvedStreamingStatus }) : null
+    resolvedStreamingStatus ? /* @__PURE__ */ jsx36(AssistantStreamingIndicator, { status: resolvedStreamingStatus }) : null
   ] });
 }
 
 // src/components/thread/MessageActions.tsx
-import * as React31 from "react";
+import * as React32 from "react";
 import { Check as Check4, Copy as Copy2, RefreshCw } from "lucide-react";
-import { jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs24 } from "react/jsx-runtime";
 function MessageActions({
   content,
   isAssistant = false,
@@ -9208,7 +10198,7 @@ function MessageActions({
   className
 }) {
   const { t } = useChatkitTranslation();
-  const [copied, setCopied] = React31.useState(false);
+  const [copied, setCopied] = React32.useState(false);
   const handleCopy = async () => {
     try {
       await navigator.clipboard.writeText(content);
@@ -9221,7 +10211,7 @@ function MessageActions({
   if (isStreaming) {
     return null;
   }
-  return /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsxs24(
     "div",
     {
       className: cn(
@@ -9229,7 +10219,7 @@ function MessageActions({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx37(
           "button",
           {
             type: "button",
@@ -9239,17 +10229,17 @@ function MessageActions({
               copied && "text-green-500"
             ),
             title: copied ? t("messageActions.copied") : t("messageActions.copy"),
-            children: copied ? /* @__PURE__ */ jsx35(Check4, { size: 14 }) : /* @__PURE__ */ jsx35(Copy2, { size: 14 })
+            children: copied ? /* @__PURE__ */ jsx37(Check4, { size: 14 }) : /* @__PURE__ */ jsx37(Copy2, { size: 14 })
           }
         ),
-        isAssistant && onRetry && /* @__PURE__ */ jsx35(
+        isAssistant && onRetry && /* @__PURE__ */ jsx37(
           "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__ */ jsx35(RefreshCw, { size: 14 })
+            children: /* @__PURE__ */ jsx37(RefreshCw, { size: 14 })
           }
         )
       ]
@@ -9266,22 +10256,22 @@ import {
   HelpCircle,
   Lightbulb as Lightbulb2,
   Pencil as Pencil3,
-  Search as Search2,
+  Search as Search3,
   Sparkles as Sparkles3,
   Zap
 } from "lucide-react";
-import { jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs25 } from "react/jsx-runtime";
 function getIconComponent2(icon) {
   const iconMap = {
-    "circle-question": /* @__PURE__ */ jsx36(HelpCircle, { size: 20 }),
-    "lightbulb": /* @__PURE__ */ jsx36(Lightbulb2, { size: 20 }),
-    "sparkle": /* @__PURE__ */ jsx36(Sparkles3, { size: 20 }),
-    "write": /* @__PURE__ */ jsx36(Pencil3, { size: 20 }),
-    "search": /* @__PURE__ */ jsx36(Search2, { size: 20 }),
-    "globe": /* @__PURE__ */ jsx36(Globe2, { size: 20 }),
-    "book-open": /* @__PURE__ */ jsx36(BookOpen2, { size: 20 }),
-    "compass": /* @__PURE__ */ jsx36(Compass, { size: 20 }),
-    "bolt": /* @__PURE__ */ jsx36(Zap, { size: 20 })
+    "circle-question": /* @__PURE__ */ jsx38(HelpCircle, { size: 20 }),
+    "lightbulb": /* @__PURE__ */ jsx38(Lightbulb2, { size: 20 }),
+    "sparkle": /* @__PURE__ */ jsx38(Sparkles3, { size: 20 }),
+    "write": /* @__PURE__ */ jsx38(Pencil3, { size: 20 }),
+    "search": /* @__PURE__ */ jsx38(Search3, { size: 20 }),
+    "globe": /* @__PURE__ */ jsx38(Globe2, { size: 20 }),
+    "book-open": /* @__PURE__ */ jsx38(BookOpen2, { size: 20 }),
+    "compass": /* @__PURE__ */ jsx38(Compass, { size: 20 }),
+    "bolt": /* @__PURE__ */ jsx38(Zap, { size: 20 })
   };
   return icon ? iconMap[icon] || iconMap["sparkle"] : iconMap["sparkle"];
 }
@@ -9289,9 +10279,9 @@ function StartScreen({ startScreen, onPromptClick, className }) {
   const { t } = useChatkitTranslation();
   const greeting = startScreen?.greeting ?? t("startScreen.greeting");
   const prompts = startScreen?.prompts ?? [];
-  return /* @__PURE__ */ jsxs23("div", { className: cn("flex flex-col items-center justify-center py-12 px-4", className), children: [
-    /* @__PURE__ */ jsx36("div", { className: "mb-8 text-center", children: /* @__PURE__ */ jsx36("h2", { className: "text-2xl font-semibold text-foreground mb-2", children: greeting }) }),
-    prompts.length > 0 && /* @__PURE__ */ jsx36("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ jsx36("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: prompts.map((item, index) => /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs25("div", { className: cn("flex flex-col items-center justify-center py-12 px-4", className), children: [
+    /* @__PURE__ */ jsx38("div", { className: "mb-8 text-center", children: /* @__PURE__ */ jsx38("h2", { className: "text-2xl font-semibold text-foreground mb-2", children: greeting }) }),
+    prompts.length > 0 && /* @__PURE__ */ jsx38("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ jsx38("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: prompts.map((item, index) => /* @__PURE__ */ jsxs25(
       "button",
       {
         type: "button",
@@ -9302,8 +10292,8 @@ function StartScreen({ startScreen, onPromptClick, className }) {
           "focus:outline-none focus:ring-2 focus:ring-primary/20"
         ),
         children: [
-          /* @__PURE__ */ jsx36("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__ */ jsx36("span", { className: "text-sm font-medium text-foreground", children: item.label })
+          /* @__PURE__ */ jsx38("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__ */ jsx38("span", { className: "text-sm font-medium text-foreground", children: item.label })
         ]
       },
       `prompt-${index}`
@@ -9312,7 +10302,7 @@ function StartScreen({ startScreen, onPromptClick, className }) {
 }
 
 // src/hooks/useThreads.ts
-import * as React33 from "react";
+import * as React34 from "react";
 var DEFAULT_LIMIT = 50;
 var getThreadTitle = (threadRecord) => {
   const title = threadRecord.title?.trim();
@@ -9365,16 +10355,16 @@ function useThreads(limit = DEFAULT_LIMIT) {
     isLoading: isStreamLoading,
     error: streamError
   } = useStreamContext();
-  const [threadRecords, setThreadRecords] = React33.useState([]);
-  const [isLoading, setIsLoading] = React33.useState(false);
-  const [error, setError] = React33.useState(null);
-  const upsertThreadRecord = React33.useCallback((threadRecord) => {
+  const [threadRecords, setThreadRecords] = React34.useState([]);
+  const [isLoading, setIsLoading] = React34.useState(false);
+  const [error, setError] = React34.useState(null);
+  const upsertThreadRecord = React34.useCallback((threadRecord) => {
     setThreadRecords((prev) => {
       const next = prev.filter((item) => item.id !== threadRecord.id);
       return sortThreadRecords([threadRecord, ...next]);
     });
   }, []);
-  const refreshThreads = React33.useCallback(async () => {
+  const refreshThreads = React34.useCallback(async () => {
     setIsLoading(true);
     setError(null);
     try {
@@ -9390,7 +10380,7 @@ function useThreads(limit = DEFAULT_LIMIT) {
       setIsLoading(false);
     }
   }, [client, limit, assistantId]);
-  const createThread = React33.useCallback(
+  const createThread = React34.useCallback(
     async (input) => {
       setError(null);
       const payload = {};
@@ -9404,7 +10394,7 @@ function useThreads(limit = DEFAULT_LIMIT) {
     },
     [client, upsertThreadRecord]
   );
-  const updateThread = React33.useCallback(
+  const updateThread = React34.useCallback(
     async (recordId, payload) => {
       setError(null);
       const updated = await client.conversations.update(recordId, payload);
@@ -9413,7 +10403,7 @@ function useThreads(limit = DEFAULT_LIMIT) {
     },
     [client, upsertThreadRecord]
   );
-  const deleteThread = React33.useCallback(
+  const deleteThread = React34.useCallback(
     async (recordId) => {
       setError(null);
       await client.conversations.delete(recordId);
@@ -9421,11 +10411,11 @@ function useThreads(limit = DEFAULT_LIMIT) {
     },
     [client]
   );
-  React33.useEffect(() => {
+  React34.useEffect(() => {
     if (!isReady) return;
     void refreshThreads();
   }, [refreshThreads, isReady]);
-  React33.useEffect(() => {
+  React34.useEffect(() => {
     if (!threadId || !isStreamLoading) return;
     const now = (/* @__PURE__ */ new Date()).toISOString();
     const busyStatus = "busy";
@@ -9446,7 +10436,7 @@ function useThreads(limit = DEFAULT_LIMIT) {
       return changed ? sortThreadRecords(next) : prev;
     });
   }, [threadId, isStreamLoading]);
-  React33.useEffect(() => {
+  React34.useEffect(() => {
     const message = getErrorMessage(streamError)?.trim();
     if (!threadId || !message) return;
     const now = (/* @__PURE__ */ new Date()).toISOString();
@@ -9468,7 +10458,7 @@ function useThreads(limit = DEFAULT_LIMIT) {
       return changed ? sortThreadRecords(next) : prev;
     });
   }, [threadId, streamError]);
-  React33.useEffect(() => {
+  React34.useEffect(() => {
     if (!isReady || !threadId || isStreamLoading) return;
     let cancelled = false;
     void client.conversations.search({ where: { threadId }, limit: 1 }).then((result) => {
@@ -9482,7 +10472,7 @@ function useThreads(limit = DEFAULT_LIMIT) {
       cancelled = true;
     };
   }, [client, threadId, upsertThreadRecord, isReady, isStreamLoading]);
-  const threads = React33.useMemo(
+  const threads = React34.useMemo(
     () => threadRecords.map((threadRecord) => toThreadItem(threadRecord)),
     [threadRecords]
   );
@@ -9499,10 +10489,10 @@ function useThreads(limit = DEFAULT_LIMIT) {
 }
 
 // src/components/thread/context-usage-indicator.tsx
-import * as React34 from "react";
+import * as React35 from "react";
 
 // src/components/ui/progress-circle.tsx
-import { jsx as jsx37, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs26 } from "react/jsx-runtime";
 function clamp2(input, a, b) {
   return Math.max(Math.min(input, Math.max(a, b)), Math.min(a, b));
 }
@@ -9525,7 +10515,7 @@ var ProgressCircle = ({ value, className, ...restSvgProps }) => {
   return (
     // biome-ignore lint/a11y/useFocusableInteractive: false positive (progress + progressbar are not focusable interactives)
     // biome-ignore lint/nursery/useAriaPropsSupportedByRole: biome rule at odds with mdn docs (presumed nursary bug with rule)
-    /* @__PURE__ */ jsxs24(
+    /* @__PURE__ */ jsxs26(
       "svg",
       {
         role: "progressbar",
@@ -9536,8 +10526,8 @@ var ProgressCircle = ({ value, className, ...restSvgProps }) => {
         "aria-valuemax": 100,
         ...restSvgProps,
         children: [
-          /* @__PURE__ */ jsx37("circle", { ...commonParams, className: "stroke-current/25" }),
-          /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsx39("circle", { ...commonParams, className: "stroke-current/25" }),
+          /* @__PURE__ */ jsx39(
             "circle",
             {
               ...commonParams,
@@ -9556,7 +10546,7 @@ var ProgressCircle = ({ value, className, ...restSvgProps }) => {
 };
 
 // src/components/thread/context-usage-indicator.tsx
-import { jsx as jsx38, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs27 } from "react/jsx-runtime";
 var kNumberFormatter = new Intl.NumberFormat("en-US", {
   minimumFractionDigits: 0,
   maximumFractionDigits: 1
@@ -9589,20 +10579,20 @@ function ContextUsageIndicator({
 }) {
   const { t } = useChatkitTranslation();
   const stream = useStreamContext();
-  const [maxContextSize, setMaxContextSize] = React34.useState(null);
-  const [usedContextSize, setUsedContextSize] = React34.useState(null);
-  const [assistantAgentKey, setAssistantAgentKey] = React34.useState(null);
-  const latestRealtimeUsageRef = React34.useRef({
+  const [maxContextSize, setMaxContextSize] = React35.useState(null);
+  const [usedContextSize, setUsedContextSize] = React35.useState(null);
+  const [assistantAgentKey, setAssistantAgentKey] = React35.useState(null);
+  const latestRealtimeUsageRef = React35.useRef({
     threadId: null,
     agentKey: null,
     usedTokens: null
   });
-  const realtimeUsage = React34.useMemo(
+  const realtimeUsage = React35.useMemo(
     () => getThreadContextUsage(stream.contextUsageByAgentKey, assistantAgentKey),
     [assistantAgentKey, stream.contextUsageByAgentKey]
   );
   const realtimeUsedContextSize = getThreadContextUsageTotalTokens(realtimeUsage);
-  React34.useEffect(() => {
+  React35.useEffect(() => {
     if (!stream.client || !stream.assistantId) {
       setMaxContextSize(null);
       setAssistantAgentKey(null);
@@ -9622,18 +10612,18 @@ function ContextUsageIndicator({
       cancelled = true;
     };
   }, [stream.client, stream.assistantId]);
-  React34.useEffect(() => {
+  React35.useEffect(() => {
     latestRealtimeUsageRef.current = {
       threadId: stream.threadId ?? null,
       agentKey: assistantAgentKey,
       usedTokens: realtimeUsedContextSize
     };
   }, [assistantAgentKey, realtimeUsedContextSize, stream.threadId]);
-  React34.useEffect(() => {
+  React35.useEffect(() => {
     if (realtimeUsedContextSize == null) return;
     setUsedContextSize(realtimeUsedContextSize);
   }, [realtimeUsedContextSize]);
-  React34.useEffect(() => {
+  React35.useEffect(() => {
     if (!stream.client) {
       setUsedContextSize(null);
       return;
@@ -9698,8 +10688,8 @@ function ContextUsageIndicator({
   });
   const usageLabelWithSuffix = usageLabel.endsWith(":") ? usageLabel : `${usageLabel}:`;
   const progressClassName = percent >= 90 ? "text-destructive" : percent >= 75 ? "text-amber-500" : "text-primary dark:text-zinc-300";
-  return /* @__PURE__ */ jsxs25(Tooltip, { children: [
-    /* @__PURE__ */ jsx38(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsxs27(Tooltip, { children: [
+    /* @__PURE__ */ jsx40(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx40(
       "button",
       {
         type: "button",
@@ -9708,31 +10698,31 @@ function ContextUsageIndicator({
           className
         ),
         "aria-label": `${usageLabelWithSuffix} ${usageFullLabel}. ${usageTokensLabel}`,
-        children: /* @__PURE__ */ jsx38(ProgressCircle, { value: percent, className: cn("size-3.5", progressClassName) })
+        children: /* @__PURE__ */ jsx40(ProgressCircle, { value: percent, className: cn("size-3.5", progressClassName) })
       }
     ) }),
-    /* @__PURE__ */ jsxs25(TooltipContent, { side: "top", sideOffset: 6, className: "space-y-0.5 px-3 py-2 text-center", children: [
-      /* @__PURE__ */ jsx38("div", { className: "text-primary-foreground/70", children: usageLabelWithSuffix }),
-      /* @__PURE__ */ jsx38("div", { className: "font-medium text-primary-foreground/80", children: usageFullLabel }),
-      /* @__PURE__ */ jsx38("div", { className: "text-sm font-semibold", children: usageTokensLabel })
+    /* @__PURE__ */ jsxs27(TooltipContent, { side: "top", sideOffset: 6, className: "space-y-0.5 px-3 py-2 text-center", children: [
+      /* @__PURE__ */ jsx40("div", { className: "text-primary-foreground/70", children: usageLabelWithSuffix }),
+      /* @__PURE__ */ jsx40("div", { className: "font-medium text-primary-foreground/80", children: usageFullLabel }),
+      /* @__PURE__ */ jsx40("div", { className: "text-sm font-semibold", children: usageTokensLabel })
     ] })
   ] });
 }
 
 // src/components/pet/PetBridge.tsx
-import * as React35 from "react";
+import * as React36 from "react";
 import { normalizePetOptions } from "@xpert-ai/chatkit-types";
 function PetBridge({ pet, state }) {
   const parentMessenger = useParentMessenger();
   const sendEvent = parentMessenger?.sendEvent;
-  const options = React35.useMemo(() => normalizePetOptions(pet), [pet]);
-  React35.useEffect(() => {
+  const options = React36.useMemo(() => normalizePetOptions(pet), [pet]);
+  React36.useEffect(() => {
     if (!sendEvent) {
       return;
     }
     sendEvent("pet_options_change", { pet: pet ?? null });
   }, [sendEvent, pet]);
-  React35.useEffect(() => {
+  React36.useEffect(() => {
     if (!sendEvent || !options) {
       return;
     }
@@ -9742,15 +10732,15 @@ function PetBridge({ pet, state }) {
 }
 
 // src/components/settings/SettingsSheet.tsx
-import * as React42 from "react";
+import * as React43 from "react";
 import { PawPrint, Settings } from "lucide-react";
 
 // src/components/ui/input.tsx
-import * as React36 from "react";
-import { jsx as jsx39 } from "react/jsx-runtime";
-var Input = React36.forwardRef(
+import * as React37 from "react";
+import { jsx as jsx41 } from "react/jsx-runtime";
+var Input = React37.forwardRef(
   ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ jsx39(
+    return /* @__PURE__ */ jsx41(
       "input",
       {
         ref,
@@ -9770,17 +10760,17 @@ Input.displayName = "Input";
 import "react";
 import { Select as SelectPrimitive } from "radix-ui";
 import { ChevronDownIcon as ChevronDownIcon2, CheckIcon as CheckIcon4, ChevronUpIcon } from "lucide-react";
-import { jsx as jsx40, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs28 } from "react/jsx-runtime";
 function Select({
   ...props
 }) {
-  return /* @__PURE__ */ jsx40(SelectPrimitive.Root, { "data-slot": "select", ...props });
+  return /* @__PURE__ */ jsx42(SelectPrimitive.Root, { "data-slot": "select", ...props });
 }
 function SelectGroup({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx42(
     SelectPrimitive.Group,
     {
       "data-slot": "select-group",
@@ -9792,7 +10782,7 @@ function SelectGroup({
 function SelectValue({
   ...props
 }) {
-  return /* @__PURE__ */ jsx40(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+  return /* @__PURE__ */ jsx42(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
 }
 function SelectTrigger({
   className,
@@ -9800,7 +10790,7 @@ function SelectTrigger({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs28(
     SelectPrimitive.Trigger,
     {
       "data-slot": "select-trigger",
@@ -9812,7 +10802,7 @@ function SelectTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx40(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx40(ChevronDownIcon2, { className: "pointer-events-none size-4 text-muted-foreground" }) })
+        /* @__PURE__ */ jsx42(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx42(ChevronDownIcon2, { className: "pointer-events-none size-4 text-muted-foreground" }) })
       ]
     }
   );
@@ -9824,7 +10814,7 @@ function SelectContent({
   align = "center",
   ...props
 }) {
-  return /* @__PURE__ */ jsx40(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsx42(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs28(
     SelectPrimitive.Content,
     {
       "data-slot": "select-content",
@@ -9834,8 +10824,8 @@ function SelectContent({
       align,
       ...props,
       children: [
-        /* @__PURE__ */ jsx40(SelectScrollUpButton, {}),
-        /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsx42(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx42(
           SelectPrimitive.Viewport,
           {
             "data-position": position,
@@ -9846,7 +10836,7 @@ function SelectContent({
             children
           }
         ),
-        /* @__PURE__ */ jsx40(SelectScrollDownButton, {})
+        /* @__PURE__ */ jsx42(SelectScrollDownButton, {})
       ]
     }
   ) });
@@ -9856,7 +10846,7 @@ function SelectItem({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs26(
+  return /* @__PURE__ */ jsxs28(
     SelectPrimitive.Item,
     {
       "data-slot": "select-item",
@@ -9866,8 +10856,8 @@ function SelectItem({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx40("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ jsx40(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx40(CheckIcon4, { className: "pointer-events-none" }) }) }),
-        /* @__PURE__ */ jsx40(SelectPrimitive.ItemText, { children })
+        /* @__PURE__ */ jsx42("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ jsx42(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx42(CheckIcon4, { className: "pointer-events-none" }) }) }),
+        /* @__PURE__ */ jsx42(SelectPrimitive.ItemText, { children })
       ]
     }
   );
@@ -9876,7 +10866,7 @@ function SelectScrollUpButton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx42(
     SelectPrimitive.ScrollUpButton,
     {
       "data-slot": "select-scroll-up-button",
@@ -9885,7 +10875,7 @@ function SelectScrollUpButton({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx40(
+      children: /* @__PURE__ */ jsx42(
         ChevronUpIcon,
         {}
       )
@@ -9896,7 +10886,7 @@ function SelectScrollDownButton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx42(
     SelectPrimitive.ScrollDownButton,
     {
       "data-slot": "select-scroll-down-button",
@@ -9905,7 +10895,7 @@ function SelectScrollDownButton({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx40(
+      children: /* @__PURE__ */ jsx42(
         ChevronDownIcon2,
         {}
       )
@@ -9914,9 +10904,9 @@ function SelectScrollDownButton({
 }
 
 // src/components/ui/slider.tsx
-import * as React38 from "react";
+import * as React39 from "react";
 import { Slider as SliderPrimitive } from "radix-ui";
-import { jsx as jsx41, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs29 } from "react/jsx-runtime";
 function Slider({
   className,
   defaultValue,
@@ -9925,11 +10915,11 @@ function Slider({
   max = 100,
   ...props
 }) {
-  const _values = React38.useMemo(
+  const _values = React39.useMemo(
     () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
     [value, defaultValue, min, max]
   );
-  return /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs29(
     SliderPrimitive.Root,
     {
       "data-slot": "slider",
@@ -9943,12 +10933,12 @@ function Slider({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx41(
+        /* @__PURE__ */ jsx43(
           SliderPrimitive.Track,
           {
             "data-slot": "slider-track",
             className: "relative grow overflow-hidden rounded-full bg-muted data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1",
-            children: /* @__PURE__ */ jsx41(
+            children: /* @__PURE__ */ jsx43(
               SliderPrimitive.Range,
               {
                 "data-slot": "slider-range",
@@ -9957,7 +10947,7 @@ function Slider({
             )
           }
         ),
-        Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ jsx41(
+        Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ jsx43(
           SliderPrimitive.Thumb,
           {
             "data-slot": "slider-thumb",
@@ -9971,7 +10961,7 @@ function Slider({
 }
 
 // src/components/ui/toggle-group.tsx
-import * as React40 from "react";
+import * as React41 from "react";
 import "class-variance-authority";
 import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
 
@@ -9979,7 +10969,7 @@ import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
 import "react";
 import { cva as cva2 } from "class-variance-authority";
 import { Toggle as TogglePrimitive } from "radix-ui";
-import { jsx as jsx42 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 var toggleVariants = cva2(
   "group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
@@ -10002,8 +10992,8 @@ var toggleVariants = cva2(
 );
 
 // src/components/ui/toggle-group.tsx
-import { jsx as jsx43 } from "react/jsx-runtime";
-var ToggleGroupContext = React40.createContext({
+import { jsx as jsx45 } from "react/jsx-runtime";
+var ToggleGroupContext = React41.createContext({
   size: "default",
   variant: "default",
   spacing: 0,
@@ -10018,7 +11008,7 @@ function ToggleGroup({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx45(
     ToggleGroupPrimitive.Root,
     {
       "data-slot": "toggle-group",
@@ -10032,7 +11022,7 @@ function ToggleGroup({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx43(
+      children: /* @__PURE__ */ jsx45(
         ToggleGroupContext.Provider,
         {
           value: { variant, size: size2, spacing, orientation },
@@ -10049,8 +11039,8 @@ function ToggleGroupItem({
   size: size2 = "default",
   ...props
 }) {
-  const context = React40.useContext(ToggleGroupContext);
-  return /* @__PURE__ */ jsx43(
+  const context = React41.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsx45(
     ToggleGroupPrimitive.Item,
     {
       "data-slot": "toggle-group-item",
@@ -10290,7 +11280,7 @@ import {
 } from "@xpert-ai/chatkit-types";
 
 // src/components/pet/PetPreview.tsx
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
 function escapeCssUrl(value) {
   return value.replace(/["\\]/g, "\\$&");
 }
@@ -10298,7 +11288,7 @@ function PetPreview({ src, label, className }) {
   const scale = 0.13;
   const width = petSpriteAtlas.cellWidth;
   const height = petSpriteAtlas.cellHeight;
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx46(
     "span",
     {
       className: cn(
@@ -10307,7 +11297,7 @@ function PetPreview({ src, label, className }) {
       ),
       "aria-hidden": "true",
       title: label,
-      children: /* @__PURE__ */ jsx44(
+      children: /* @__PURE__ */ jsx46(
         "span",
         {
           className: "absolute left-1/2 top-1/2 block",
@@ -10329,7 +11319,7 @@ function PetPreview({ src, label, className }) {
 }
 
 // src/components/settings/SettingsSheet.tsx
-import { jsx as jsx45, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs30 } from "react/jsx-runtime";
 var CHARACTER_TYPES2 = [
   "builtin",
   "atlas"
@@ -10345,13 +11335,13 @@ function SettingsSheet({
   onSave
 }) {
   const { t } = useChatkitTranslation();
-  const [draft, setDraft] = React42.useState(settings);
-  React42.useEffect(() => {
+  const [draft, setDraft] = React43.useState(settings);
+  React43.useEffect(() => {
     if (open) {
       setDraft(petRequired ? { ...settings, enabled: true } : settings);
     }
   }, [open, petRequired, settings]);
-  const updateDraft = React42.useCallback(
+  const updateDraft = React43.useCallback(
     (patch) => {
       setDraft((previous) => ({ ...previous, ...patch }));
     },
@@ -10369,23 +11359,23 @@ function SettingsSheet({
       defaultValue: selectedBuiltinPet.label
     }
   );
-  return /* @__PURE__ */ jsx45(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsxs28(SheetContent, { side: "right", className: "w-[min(92vw,26rem)] overflow-y-auto", children: [
-    /* @__PURE__ */ jsx45(SheetHeader, { children: /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx45("span", { className: "flex h-8 w-8 items-center justify-center rounded-md bg-primary/10 text-primary", children: /* @__PURE__ */ jsx45(Settings, { size: 16 }) }),
-      /* @__PURE__ */ jsx45(SheetTitle, { children: t("settings.title") })
+  return /* @__PURE__ */ jsx47(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsxs30(SheetContent, { side: "right", className: "w-[min(92vw,26rem)] overflow-y-auto", children: [
+    /* @__PURE__ */ jsx47(SheetHeader, { children: /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx47("span", { className: "flex h-8 w-8 items-center justify-center rounded-md bg-primary/10 text-primary", children: /* @__PURE__ */ jsx47(Settings, { size: 16 }) }),
+      /* @__PURE__ */ jsx47(SheetTitle, { children: t("settings.title") })
     ] }) }),
-    /* @__PURE__ */ jsxs28("form", { className: "mt-6 space-y-5", onSubmit: handleSubmit, children: [
-      /* @__PURE__ */ jsxs28("section", { className: "space-y-5", children: [
-        /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx45("span", { className: "flex h-7 w-7 items-center justify-center rounded-md bg-muted text-muted-foreground", children: /* @__PURE__ */ jsx45(PawPrint, { size: 15 }) }),
-          /* @__PURE__ */ jsx45("h3", { className: "text-sm font-semibold", children: t("pet.settings.title") })
+    /* @__PURE__ */ jsxs30("form", { className: "mt-6 space-y-5", onSubmit: handleSubmit, children: [
+      /* @__PURE__ */ jsxs30("section", { className: "space-y-5", children: [
+        /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx47("span", { className: "flex h-7 w-7 items-center justify-center rounded-md bg-muted text-muted-foreground", children: /* @__PURE__ */ jsx47(PawPrint, { size: 15 }) }),
+          /* @__PURE__ */ jsx47("h3", { className: "text-sm font-semibold", children: t("pet.settings.title") })
         ] }),
-        /* @__PURE__ */ jsxs28("label", { className: "flex items-center justify-between gap-4 rounded-md border border-border px-3 py-2", children: [
-          /* @__PURE__ */ jsxs28("span", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsx45("span", { className: "block text-sm font-medium", children: t("pet.settings.enabled") }),
-            petRequired && /* @__PURE__ */ jsx45("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: t("pet.settings.requiredHint") })
+        /* @__PURE__ */ jsxs30("label", { className: "flex items-center justify-between gap-4 rounded-md border border-border px-3 py-2", children: [
+          /* @__PURE__ */ jsxs30("span", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx47("span", { className: "block text-sm font-medium", children: t("pet.settings.enabled") }),
+            petRequired && /* @__PURE__ */ jsx47("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: t("pet.settings.requiredHint") })
           ] }),
-          /* @__PURE__ */ jsx45(
+          /* @__PURE__ */ jsx47(
             "button",
             {
               type: "button",
@@ -10398,7 +11388,7 @@ function SettingsSheet({
                 draft.enabled ? "bg-primary" : "bg-muted-foreground/20",
                 petRequired ? "cursor-not-allowed opacity-70" : ""
               ].join(" "),
-              children: /* @__PURE__ */ jsx45(
+              children: /* @__PURE__ */ jsx47(
                 "span",
                 {
                   className: [
@@ -10411,9 +11401,9 @@ function SettingsSheet({
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsxs28("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx45("span", { id: "chatkit-pet-type-label", className: "text-sm font-medium", children: t("pet.settings.characterType") }),
-        /* @__PURE__ */ jsx45(
+      /* @__PURE__ */ jsxs30("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx47("span", { id: "chatkit-pet-type-label", className: "text-sm font-medium", children: t("pet.settings.characterType") }),
+        /* @__PURE__ */ jsx47(
           ToggleGroup,
           {
             id: "chatkit-pet-type",
@@ -10428,7 +11418,7 @@ function SettingsSheet({
             variant: "outline",
             spacing: 2,
             className: "!w-full",
-            children: CHARACTER_TYPES2.map((type) => /* @__PURE__ */ jsx45(
+            children: CHARACTER_TYPES2.map((type) => /* @__PURE__ */ jsx47(
               ToggleGroupItem,
               {
                 value: type,
@@ -10440,8 +11430,8 @@ function SettingsSheet({
           }
         )
       ] }),
-      draft.characterType === "builtin" && /* @__PURE__ */ jsxs28("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx45(
+      draft.characterType === "builtin" && /* @__PURE__ */ jsxs30("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx47(
           "label",
           {
             htmlFor: "chatkit-pet-builtin",
@@ -10449,7 +11439,7 @@ function SettingsSheet({
             children: t("pet.settings.builtin")
           }
         ),
-        /* @__PURE__ */ jsxs28(
+        /* @__PURE__ */ jsxs30(
           Select,
           {
             value: selectedBuiltinPet.id,
@@ -10460,26 +11450,26 @@ function SettingsSheet({
               }
             },
             children: [
-              /* @__PURE__ */ jsx45(
+              /* @__PURE__ */ jsx47(
                 SelectTrigger,
                 {
                   id: "chatkit-pet-builtin",
                   className: "min-h-12 w-full px-3 py-2",
-                  children: /* @__PURE__ */ jsx45(SelectValue, { placeholder: selectedBuiltinPetLabel })
+                  children: /* @__PURE__ */ jsx47(SelectValue, { placeholder: selectedBuiltinPetLabel })
                 }
               ),
-              /* @__PURE__ */ jsx45(SelectContent, { className: "w-[var(--radix-select-trigger-width)]", children: /* @__PURE__ */ jsx45(SelectGroup, { children: INCLUDED_PET_OPTIONS.map((pet) => {
+              /* @__PURE__ */ jsx47(SelectContent, { className: "w-[var(--radix-select-trigger-width)]", children: /* @__PURE__ */ jsx47(SelectGroup, { children: INCLUDED_PET_OPTIONS.map((pet) => {
                 const label = t(`pet.settings.builtins.${pet.id}`, {
                   defaultValue: pet.label
                 });
-                return /* @__PURE__ */ jsx45(
+                return /* @__PURE__ */ jsx47(
                   SelectItem,
                   {
                     value: pet.id,
                     className: "min-h-10 py-1.5 pl-2 pr-8",
-                    children: /* @__PURE__ */ jsxs28("span", { className: "flex min-w-0 items-center gap-2", children: [
-                      /* @__PURE__ */ jsx45(PetPreview, { src: pet.previewSrc, label }),
-                      /* @__PURE__ */ jsx45("span", { className: "min-w-0 truncate", children: label })
+                    children: /* @__PURE__ */ jsxs30("span", { className: "flex min-w-0 items-center gap-2", children: [
+                      /* @__PURE__ */ jsx47(PetPreview, { src: pet.previewSrc, label }),
+                      /* @__PURE__ */ jsx47("span", { className: "min-w-0 truncate", children: label })
                     ] })
                   },
                   pet.id
@@ -10489,8 +11479,8 @@ function SettingsSheet({
           }
         )
       ] }),
-      draft.characterType === "atlas" && /* @__PURE__ */ jsxs28("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx45(
+      draft.characterType === "atlas" && /* @__PURE__ */ jsxs30("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx47(
           "label",
           {
             className: "text-sm font-medium",
@@ -10498,7 +11488,7 @@ function SettingsSheet({
             children: t("pet.settings.atlasUrl")
           }
         ),
-        /* @__PURE__ */ jsx45(
+        /* @__PURE__ */ jsx47(
           Input,
           {
             id: "chatkit-pet-atlas",
@@ -10508,15 +11498,15 @@ function SettingsSheet({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs28("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsxs28("div", { className: "flex items-center justify-between gap-4", children: [
-          /* @__PURE__ */ jsx45("label", { className: "text-sm font-medium", htmlFor: "chatkit-pet-scale", children: t("pet.settings.scale") }),
-          /* @__PURE__ */ jsxs28("span", { className: "text-xs tabular-nums text-muted-foreground", children: [
+      /* @__PURE__ */ jsxs30("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs30("div", { className: "flex items-center justify-between gap-4", children: [
+          /* @__PURE__ */ jsx47("label", { className: "text-sm font-medium", htmlFor: "chatkit-pet-scale", children: t("pet.settings.scale") }),
+          /* @__PURE__ */ jsxs30("span", { className: "text-xs tabular-nums text-muted-foreground", children: [
             draft.scale.toFixed(2),
             "x"
           ] })
         ] }),
-        /* @__PURE__ */ jsx45(
+        /* @__PURE__ */ jsx47(
           Slider,
           {
             id: "chatkit-pet-scale",
@@ -10530,8 +11520,8 @@ function SettingsSheet({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs28("label", { className: "flex items-center gap-2 text-sm", children: [
-        /* @__PURE__ */ jsx45(
+      /* @__PURE__ */ jsxs30("label", { className: "flex items-center gap-2 text-sm", children: [
+        /* @__PURE__ */ jsx47(
           "input",
           {
             type: "checkbox",
@@ -10542,8 +11532,8 @@ function SettingsSheet({
         ),
         t("pet.settings.draggable")
       ] }),
-      /* @__PURE__ */ jsxs28("label", { className: "flex items-center gap-2 text-sm", children: [
-        /* @__PURE__ */ jsx45(
+      /* @__PURE__ */ jsxs30("label", { className: "flex items-center gap-2 text-sm", children: [
+        /* @__PURE__ */ jsx47(
           "input",
           {
             type: "checkbox",
@@ -10554,8 +11544,8 @@ function SettingsSheet({
         ),
         t("pet.settings.persistPosition")
       ] }),
-      /* @__PURE__ */ jsxs28("div", { className: "flex justify-end gap-2 pt-2", children: [
-        /* @__PURE__ */ jsx45(
+      /* @__PURE__ */ jsxs30("div", { className: "flex justify-end gap-2 pt-2", children: [
+        /* @__PURE__ */ jsx47(
           Button,
           {
             type: "button",
@@ -10564,7 +11554,7 @@ function SettingsSheet({
             children: t("pet.settings.cancel")
           }
         ),
-        /* @__PURE__ */ jsx45(Button, { type: "submit", children: t("pet.settings.save") })
+        /* @__PURE__ */ jsx47(Button, { type: "submit", children: t("pet.settings.save") })
       ] })
     ] })
   ] }) });
@@ -10595,10 +11585,12 @@ function splitByAvailability(values, availableValues) {
   }
   return { found, missing };
 }
-function hasMissingRuntimeCapabilityReferences(missing) {
-  return missing.skillIds.length > 0 || missing.pluginNodeKeys.length > 0 || missing.subAgentNodeKeys.length > 0;
+function uniqueStrings2(values) {
+  return Array.from(
+    new Set(values.map((value) => value.trim()).filter(Boolean))
+  );
 }
-function getRuntimeCapabilitiesSelectionAvailability(selection, capabilities) {
+function getAvailableSelectionSet(selection, capabilities) {
   const skillIds = splitByAvailability(
     selection.skills.ids,
     capabilities.skills.map((skill) => skill.id)
@@ -10632,6 +11624,42 @@ function getRuntimeCapabilitiesSelectionAvailability(selection, capabilities) {
     }
   };
 }
+function hasMissingRuntimeCapabilityReferences(missing) {
+  return missing.skillIds.length > 0 || missing.pluginNodeKeys.length > 0 || missing.subAgentNodeKeys.length > 0;
+}
+function getRuntimeCapabilitiesSelectionAvailability(selection, capabilities) {
+  const available = getAvailableSelectionSet(selection, capabilities);
+  const recommended = selection.recommended ? getAvailableSelectionSet(selection.recommended, capabilities) : null;
+  return {
+    selection: {
+      mode: "allowlist",
+      skills: available.selection.skills,
+      plugins: available.selection.plugins,
+      subAgents: available.selection.subAgents,
+      ...recommended && hasRuntimeCapabilitySelectionSet(recommended.selection) ? {
+        recommended: {
+          skills: recommended.selection.skills,
+          plugins: recommended.selection.plugins,
+          subAgents: recommended.selection.subAgents
+        }
+      } : {}
+    },
+    missing: {
+      skillIds: uniqueStrings2([
+        ...available.missing.skillIds,
+        ...recommended?.missing.skillIds ?? []
+      ]),
+      pluginNodeKeys: uniqueStrings2([
+        ...available.missing.pluginNodeKeys,
+        ...recommended?.missing.pluginNodeKeys ?? []
+      ]),
+      subAgentNodeKeys: uniqueStrings2([
+        ...available.missing.subAgentNodeKeys,
+        ...recommended?.missing.subAgentNodeKeys ?? []
+      ])
+    }
+  };
+}
 async function findConversationByThreadId(client, threadId) {
   const normalizedThreadId = threadId.trim();
   if (!normalizedThreadId) {
@@ -10702,7 +11730,9 @@ async function persistConversationRuntimeCapabilities({
   await client.conversations.update(conversation.id, {
     options: {
       ...conversation.options ?? {},
-      runtimeCapabilities: availability.selection
+      runtimeCapabilities: getAvailableRuntimeCapabilitiesSelection(
+        availability.selection
+      )
     }
   });
   return {
@@ -11030,7 +12060,7 @@ function findDomPointForComposerOffset(root, offset) {
 }
 
 // src/components/chat.tsx
-import { Fragment as Fragment6, jsx as jsx46, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx48, jsxs as jsxs31 } from "react/jsx-runtime";
 var defaultApiUrl2 = import.meta.env.VITE_XPERTAI_API_URL;
 var COMPOSER_INPUT_MAX_HEIGHT = 128;
 var LONG_TEXT_REFERENCE_THRESHOLD = 5e3;
@@ -11163,7 +12193,7 @@ function ReferenceChip({
   const metaLine = getReferenceMetaLine(reference);
   const isComposer = variant === "composer";
   const Icon = reference.type === "quote" ? Quote : reference.type === "image" ? ImageIcon : FileText3;
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs31(
     "div",
     {
       className: cn(
@@ -11172,7 +12202,7 @@ function ReferenceChip({
       ),
       title: getReferenceTitle(reference),
       children: [
-        /* @__PURE__ */ jsx46(
+        /* @__PURE__ */ jsx48(
           Icon,
           {
             size: isComposer ? 14 : 12,
@@ -11182,8 +12212,8 @@ function ReferenceChip({
             )
           }
         ),
-        /* @__PURE__ */ jsxs29("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx46(
+        /* @__PURE__ */ jsxs31("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx48(
             "div",
             {
               className: cn(
@@ -11193,7 +12223,7 @@ function ReferenceChip({
               children: getReferenceLabel(reference)
             }
           ),
-          metaLine && /* @__PURE__ */ jsx46(
+          metaLine && /* @__PURE__ */ jsx48(
             "div",
             {
               className: cn(
@@ -11204,7 +12234,7 @@ function ReferenceChip({
             }
           )
         ] }),
-        onRemove && removeLabel && /* @__PURE__ */ jsx46(
+        onRemove && removeLabel && /* @__PURE__ */ jsx48(
           "button",
           {
             type: "button",
@@ -11215,7 +12245,7 @@ function ReferenceChip({
             ),
             title: removeLabel,
             "aria-label": removeLabel,
-            children: /* @__PURE__ */ jsx46(X5, { size: 12 })
+            children: /* @__PURE__ */ jsx48(X5, { size: 12 })
           }
         )
       ]
@@ -11239,20 +12269,20 @@ function Chat({
   const { setStream } = useStreamManager();
   const stream = useStreamContext();
   const { theme } = useTheme();
-  const [isHistoryLoading, setIsHistoryLoading] = React43.useState(false);
-  const [historyError, setHistoryError] = React43.useState(null);
-  const [assistantName, setAssistantName] = React43.useState(null);
-  const [assistantAvatar, setAssistantAvatar] = React43.useState(null);
+  const [isHistoryLoading, setIsHistoryLoading] = React44.useState(false);
+  const [historyError, setHistoryError] = React44.useState(null);
+  const [assistantName, setAssistantName] = React44.useState(null);
+  const [assistantAvatar, setAssistantAvatar] = React44.useState(null);
   const LOADING_DOTS_MIN_DURATION = 800;
   const STREAMING_STATUS_REFRESH_MS = 250;
-  const [showLoadingDots, setShowLoadingDots] = React43.useState(false);
-  const [streamingNow, setStreamingNow] = React43.useState(() => Date.now());
-  const loadingStartTimeRef = React43.useRef(null);
-  const lastStreamOutputAtRef = React43.useRef(null);
-  React43.useEffect(() => {
+  const [showLoadingDots, setShowLoadingDots] = React44.useState(false);
+  const [streamingNow, setStreamingNow] = React44.useState(() => Date.now());
+  const loadingStartTimeRef = React44.useRef(null);
+  const lastStreamOutputAtRef = React44.useRef(null);
+  React44.useEffect(() => {
     setStream(stream);
   }, [setStream, stream]);
-  React43.useEffect(() => {
+  React44.useEffect(() => {
     if (stream.isLoading) {
       if (!loadingStartTimeRef.current) {
         loadingStartTimeRef.current = Date.now();
@@ -11275,7 +12305,7 @@ function Chat({
       }
     }
   }, [stream.isLoading]);
-  React43.useEffect(() => {
+  React44.useEffect(() => {
     if (!stream.isLoading) {
       lastStreamOutputAtRef.current = null;
       setStreamingNow(Date.now());
@@ -11285,7 +12315,7 @@ function Chat({
     lastStreamOutputAtRef.current = now;
     setStreamingNow(now);
   }, [stream.messages, stream.isLoading]);
-  React43.useEffect(() => {
+  React44.useEffect(() => {
     if (!stream.isLoading) {
       return;
     }
@@ -11294,74 +12324,74 @@ function Chat({
     }, STREAMING_STATUS_REFRESH_MS);
     return () => window.clearInterval(timer);
   }, [stream.isLoading]);
-  const [composerParts, setComposerParts] = React43.useState([]);
-  const [renderedComposerParts, setRenderedComposerParts] = React43.useState([]);
-  const [composerDomVersion, setComposerDomVersion] = React43.useState(0);
-  const [selectedTool, setSelectedTool] = React43.useState(
+  const [composerParts, setComposerParts] = React44.useState([]);
+  const [renderedComposerParts, setRenderedComposerParts] = React44.useState([]);
+  const [composerDomVersion, setComposerDomVersion] = React44.useState(0);
+  const [selectedTool, setSelectedTool] = React44.useState(
     null
   );
-  const [planModeEnabled, setPlanModeEnabled] = React43.useState(false);
-  const [petSettingsOpen, setPetSettingsOpen] = React43.useState(false);
-  const [petLocalSettings, setPetLocalSettings] = React43.useState(() => readPetLocalSettings());
-  const [runtimeCapabilities, setRuntimeCapabilities] = React43.useState(null);
-  const [runtimeCapabilitiesReady, setRuntimeCapabilitiesReady] = React43.useState(false);
-  const [sessionRuntimeCapabilities, setSessionRuntimeCapabilities] = React43.useState(
+  const [planModeEnabled, setPlanModeEnabled] = React44.useState(false);
+  const [petSettingsOpen, setPetSettingsOpen] = React44.useState(false);
+  const [petLocalSettings, setPetLocalSettings] = React44.useState(() => readPetLocalSettings());
+  const [runtimeCapabilities, setRuntimeCapabilities] = React44.useState(null);
+  const [runtimeCapabilitiesReady, setRuntimeCapabilitiesReady] = React44.useState(false);
+  const [sessionRuntimeCapabilities, setSessionRuntimeCapabilities] = React44.useState(
     () => createEmptyRuntimeCapabilitiesSelection()
   );
-  const [runRuntimeCapabilities, setRunRuntimeCapabilities] = React43.useState(
+  const [runRuntimeCapabilities, setRunRuntimeCapabilities] = React44.useState(
     () => createEmptyRuntimeCapabilitiesSelection()
   );
-  const [runtimeCapabilityPalette, setRuntimeCapabilityPalette] = React43.useState(null);
-  const [attachments, setAttachments] = React43.useState([]);
-  const [references, setReferences] = React43.useState([]);
-  const [isUploadingReferenceImages, setIsUploadingReferenceImages] = React43.useState(false);
-  const [quoteSelection, setQuoteSelection] = React43.useState(null);
-  const [isAtBottom, setIsAtBottom] = React43.useState(true);
-  const [hasUpdatesBelow, setHasUpdatesBelow] = React43.useState(false);
+  const [runtimeCapabilityPalette, setRuntimeCapabilityPalette] = React44.useState(null);
+  const [attachments, setAttachments] = React44.useState([]);
+  const [references, setReferences] = React44.useState([]);
+  const [isUploadingReferenceImages, setIsUploadingReferenceImages] = React44.useState(false);
+  const [quoteSelection, setQuoteSelection] = React44.useState(null);
+  const [isAtBottom, setIsAtBottom] = React44.useState(true);
+  const [hasUpdatesBelow, setHasUpdatesBelow] = React44.useState(false);
   const {
     threads,
     deleteThread,
     refreshThreads,
     isLoading: isThreadsLoading
   } = useThreads();
-  const viewportRef = React43.useRef(null);
-  const fileInputRef = React43.useRef(null);
-  const composerInputRef = React43.useRef(null);
-  const slashPaletteRef = React43.useRef(null);
-  const slashPaletteOptionRefs = React43.useRef(
+  const viewportRef = React44.useRef(null);
+  const fileInputRef = React44.useRef(null);
+  const composerInputRef = React44.useRef(null);
+  const slashPaletteRef = React44.useRef(null);
+  const slashPaletteOptionRefs = React44.useRef(
     []
   );
-  const composerPartsRef = React43.useRef([]);
-  const pendingComposerCaretOffsetRef = React43.useRef(null);
-  const shouldAutoScrollRef = React43.useRef(true);
-  const forceFollowRef = React43.useRef(false);
-  const previousMessageCountRef = React43.useRef(0);
-  const previousScrollTopRef = React43.useRef(0);
-  const autoScrollFrameRef = React43.useRef(null);
-  const isPointerDownRef = React43.useRef(false);
-  const lastTouchYRef = React43.useRef(null);
-  const runtimeCapabilityPreferenceLoadRef = React43.useRef(0);
+  const composerPartsRef = React44.useRef([]);
+  const pendingComposerCaretOffsetRef = React44.useRef(null);
+  const shouldAutoScrollRef = React44.useRef(true);
+  const forceFollowRef = React44.useRef(false);
+  const previousMessageCountRef = React44.useRef(0);
+  const previousScrollTopRef = React44.useRef(0);
+  const autoScrollFrameRef = React44.useRef(null);
+  const isPointerDownRef = React44.useRef(false);
+  const lastTouchYRef = React44.useRef(null);
+  const runtimeCapabilityPreferenceLoadRef = React44.useRef(0);
   const resolvedTitle = title ?? t("chat.title");
   const resolvedPlaceholder = placeholder ?? t("chat.placeholder");
   const petRequired = options?.displayMode === "pet";
-  const basePetSettings = React43.useMemo(
+  const basePetSettings = React44.useMemo(
     () => derivePetLocalSettings(options?.pet),
     [options?.pet]
   );
-  const displayedPetSettings = React43.useMemo(
+  const displayedPetSettings = React44.useMemo(
     () => ({
       ...petLocalSettings ?? basePetSettings,
       ...petRequired ? { enabled: true } : {}
     }),
     [basePetSettings, petLocalSettings, petRequired]
   );
-  const effectivePet = React43.useMemo(() => {
+  const effectivePet = React44.useMemo(() => {
     if (petRequired || petLocalSettings) {
       return buildPetOptionsFromLocalSettings(displayedPetSettings);
     }
     return options?.pet ?? null;
   }, [displayedPetSettings, options?.pet, petLocalSettings, petRequired]);
-  const savePetLocalSettings = React43.useCallback(
+  const savePetLocalSettings = React44.useCallback(
     (settings) => {
       const nextSettings = petRequired ? { ...settings, enabled: true } : settings;
       setPetLocalSettings(nextSettings);
@@ -11369,7 +12399,7 @@ function Chat({
     },
     [petRequired]
   );
-  const handlePetCommand = React43.useCallback(
+  const handlePetCommand = React44.useCallback(
     (mode) => {
       if (mode === "settings") {
         setPetSettingsOpen(true);
@@ -11391,18 +12421,23 @@ function Chat({
     [displayedPetSettings, effectivePet, petRequired, savePetLocalSettings]
   );
   const inputPlaceholder = selectedTool?.placeholderOverride ?? composer?.placeholder ?? resolvedPlaceholder;
-  const messages = React43.useMemo(
+  const messages = React44.useMemo(
     () => stream.messages ?? [],
     [stream.messages]
   );
-  const draft = React43.useMemo(
+  const draft = React44.useMemo(
     () => getComposerPlainText(composerParts),
     [composerParts]
   );
   const trimmedDraft = draft.trim();
   const hasReferences = references.length > 0;
   const isComposerStacked = planModeEnabled || Boolean(selectedTool);
-  const pendingFollowUps = React43.useMemo(
+  const isComposerInputEmpty = getComposerEditingLength(composerParts) === 0;
+  const composerInputRoundedClass = getComposerInputRoundedClass(theme.radius, {
+    isEmpty: isComposerInputEmpty,
+    isStacked: isComposerStacked
+  });
+  const pendingFollowUps = React44.useMemo(
     () => [...stream.pendingFollowUps ?? []].sort(
       (a, b) => a.createdAt - b.createdAt
     ),
@@ -11413,31 +12448,18 @@ function Chat({
   const hasPendingHITLRequest = Boolean(stream.pendingHITLRequest);
   const hasPendingInteractiveRequest = hasPendingRequestUserInput || hasPendingHITLRequest;
   const hasPendingTodos = Boolean(stream.todos?.items.length);
-  const runtimeCapabilityOptions = React43.useMemo(
+  const runtimeCapabilityOptions = React44.useMemo(
     () => getRuntimeCapabilityOptions(runtimeCapabilities),
     [runtimeCapabilities]
   );
-  const effectiveSessionRuntimeCapabilities = React43.useMemo(
+  const effectiveSessionRuntimeCapabilities = React44.useMemo(
     () => runtimeCapabilitiesReady && runtimeCapabilities ? mergeRuntimeCapabilitiesSelections(
       runtimeCapabilities,
       sessionRuntimeCapabilities
     ) : null,
     [runtimeCapabilities, runtimeCapabilitiesReady, sessionRuntimeCapabilities]
   );
-  const effectiveRuntimeCapabilitiesForSubmit = React43.useMemo(
-    () => runtimeCapabilitiesReady && runtimeCapabilities ? mergeRuntimeCapabilitiesSelections(
-      runtimeCapabilities,
-      sessionRuntimeCapabilities,
-      runRuntimeCapabilities
-    ) : null,
-    [
-      runtimeCapabilities,
-      runtimeCapabilitiesReady,
-      runRuntimeCapabilities,
-      sessionRuntimeCapabilities
-    ]
-  );
-  const runRuntimeCapabilityOptions = React43.useMemo(
+  const runRuntimeCapabilityOptions = React44.useMemo(
     () => runtimeCapabilityOptions.filter(
       (option) => isRuntimeCapabilitySelected(
         runRuntimeCapabilities,
@@ -11447,11 +12469,11 @@ function Chat({
     ),
     [runRuntimeCapabilities, runtimeCapabilityOptions]
   );
-  const composerRuntimeCapabilitySelectionKeys = React43.useMemo(
+  const composerRuntimeCapabilitySelectionKeys = React44.useMemo(
     () => getComposerCapabilitySelectionKeys(composerParts),
     [composerParts]
   );
-  const detachedRunRuntimeCapabilityOptions = React43.useMemo(
+  const detachedRunRuntimeCapabilityOptions = React44.useMemo(
     () => runRuntimeCapabilityOptions.filter(
       (option) => !composerRuntimeCapabilitySelectionKeys.has(
         getRuntimeCapabilityOptionKey(option)
@@ -11459,7 +12481,7 @@ function Chat({
     ),
     [composerRuntimeCapabilitySelectionKeys, runRuntimeCapabilityOptions]
   );
-  const persistSessionRuntimeCapabilities = React43.useCallback(
+  const persistSessionRuntimeCapabilities = React44.useCallback(
     async (threadId, selection) => {
       if (!runtimeCapabilities || !selection) {
         return;
@@ -11484,10 +12506,10 @@ function Chat({
     },
     [runtimeCapabilities, stream.client]
   );
-  const clearQuoteSelection = React43.useCallback(() => {
+  const clearQuoteSelection = React44.useCallback(() => {
     setQuoteSelection(null);
   }, []);
-  const commitComposerParts = React43.useCallback(
+  const commitComposerParts = React44.useCallback(
     (nextParts, options2) => {
       const normalized = normalizeComposerParts(nextParts);
       const previous = composerPartsRef.current;
@@ -11523,7 +12545,7 @@ function Chat({
     },
     []
   );
-  const setComposerText = React43.useCallback(
+  const setComposerText = React44.useCallback(
     (text, caretOffset = text.length) => {
       commitComposerParts(createComposerTextParts(text), {
         caretOffset,
@@ -11533,7 +12555,7 @@ function Chat({
     },
     [commitComposerParts]
   );
-  const focusComposerAt = React43.useCallback((position) => {
+  const focusComposerAt = React44.useCallback((position) => {
     const nextPosition = position ?? getComposerEditingLength(composerPartsRef.current);
     pendingComposerCaretOffsetRef.current = nextPosition;
     requestAnimationFrame(() => {
@@ -11545,7 +12567,7 @@ function Chat({
     });
   }, []);
   const parentMessenger = useParentMessenger({
-    onSetComposerValue: React43.useCallback(
+    onSetComposerValue: React44.useCallback(
       (payload) => {
         if (!payload) {
           return;
@@ -11568,10 +12590,10 @@ function Chat({
       },
       [composer?.tools, setComposerText]
     ),
-    onFocusComposer: React43.useCallback(() => {
+    onFocusComposer: React44.useCallback(() => {
       composerInputRef.current?.focus();
     }, []),
-    onSetPetEnabled: React43.useCallback(
+    onSetPetEnabled: React44.useCallback(
       (enabled) => {
         if (petRequired) {
           return;
@@ -11584,7 +12606,7 @@ function Chat({
       [displayedPetSettings, petRequired, savePetLocalSettings]
     )
   });
-  const syncQuoteSelection = React43.useCallback(() => {
+  const syncQuoteSelection = React44.useCallback(() => {
     if (typeof window === "undefined") {
       clearQuoteSelection();
       return;
@@ -11629,23 +12651,23 @@ function Chat({
       left
     });
   }, [clearQuoteSelection]);
-  const cancelPendingAutoScroll = React43.useCallback(() => {
+  const cancelPendingAutoScroll = React44.useCallback(() => {
     if (autoScrollFrameRef.current !== null) {
       cancelAnimationFrame(autoScrollFrameRef.current);
       autoScrollFrameRef.current = null;
     }
   }, []);
-  const disableAutoFollow = React43.useCallback(() => {
+  const disableAutoFollow = React44.useCallback(() => {
     forceFollowRef.current = false;
     shouldAutoScrollRef.current = false;
     cancelPendingAutoScroll();
   }, [cancelPendingAutoScroll]);
-  const enableAutoFollow = React43.useCallback(() => {
+  const enableAutoFollow = React44.useCallback(() => {
     forceFollowRef.current = true;
     shouldAutoScrollRef.current = true;
     setHasUpdatesBelow(false);
   }, []);
-  const scrollToBottom = React43.useCallback(
+  const scrollToBottom = React44.useCallback(
     (smooth = false, force = false) => {
       if (force) {
         enableAutoFollow();
@@ -11672,7 +12694,7 @@ function Chat({
     },
     [cancelPendingAutoScroll, enableAutoFollow]
   );
-  React43.useEffect(() => {
+  React44.useEffect(() => {
     const viewport = viewportRef.current;
     if (!viewport) return;
     previousScrollTopRef.current = viewport.scrollTop;
@@ -11753,14 +12775,14 @@ function Chat({
       window.removeEventListener("pointercancel", stopPointerTracking);
     };
   }, [cancelPendingAutoScroll, disableAutoFollow]);
-  React43.useEffect(() => {
+  React44.useEffect(() => {
     shouldAutoScrollRef.current = true;
     forceFollowRef.current = false;
     previousScrollTopRef.current = 0;
     setIsAtBottom(true);
     setHasUpdatesBelow(false);
   }, [stream.threadId]);
-  React43.useEffect(() => {
+  React44.useEffect(() => {
     const messageCountChanged = messages.length !== previousMessageCountRef.current;
     previousMessageCountRef.current = messages.length;
     if (!shouldAutoScrollRef.current) {
@@ -11779,7 +12801,7 @@ function Chat({
     clientSecret: effectiveClientSecret
   });
   const missingConfig = Boolean(missingConfigKind);
-  const missingConfigShortMessage = React43.useMemo(() => {
+  const missingConfigShortMessage = React44.useMemo(() => {
     switch (missingConfigKind) {
       case "apiUrl":
         return t("chat.missingApiUrlShort");
@@ -11791,7 +12813,7 @@ function Chat({
         return t("chat.missingConfigShort");
     }
   }, [missingConfigKind, t]);
-  const missingConfigDetailMessage = React43.useMemo(() => {
+  const missingConfigDetailMessage = React44.useMemo(() => {
     switch (missingConfigKind) {
       case "apiUrl":
         return t("chat.missingApiUrlDetail");
@@ -11806,7 +12828,7 @@ function Chat({
   const showMissingConfig = !isClientSecretInitializing && missingConfig;
   const hasUploadingFiles = attachments.some((a) => a.status === "uploading");
   const isSendDisabled = !trimmedDraft && !hasReferences || hasPendingInteractiveRequest || missingConfig || isHistoryLoading || hasUploadingFiles || isUploadingReferenceImages;
-  const resizeComposerInput = React43.useCallback(() => {
+  const resizeComposerInput = React44.useCallback(() => {
     const input = composerInputRef.current;
     if (!input) {
       return;
@@ -11814,7 +12836,7 @@ function Chat({
     input.style.maxHeight = `${COMPOSER_INPUT_MAX_HEIGHT}px`;
     input.style.overflowY = input.scrollHeight > COMPOSER_INPUT_MAX_HEIGHT ? "auto" : "hidden";
   }, []);
-  React43.useLayoutEffect(() => {
+  React44.useLayoutEffect(() => {
     composerPartsRef.current = composerParts;
     resizeComposerInput();
     const caretOffset = pendingComposerCaretOffsetRef.current;
@@ -11826,13 +12848,13 @@ function Chat({
       }
     }
   }, [composerDomVersion, composerParts, resizeComposerInput]);
-  React43.useEffect(() => {
+  React44.useEffect(() => {
     document.addEventListener("selectionchange", syncQuoteSelection);
     return () => {
       document.removeEventListener("selectionchange", syncQuoteSelection);
     };
   }, [syncQuoteSelection]);
-  React43.useEffect(() => {
+  React44.useEffect(() => {
     const viewport = viewportRef.current;
     if (!viewport) {
       return;
@@ -11849,14 +12871,14 @@ function Chat({
       window.removeEventListener("resize", handleViewportScroll);
     };
   }, [clearQuoteSelection]);
-  React43.useEffect(() => {
+  React44.useEffect(() => {
     clearQuoteSelection();
   }, [messages.length, stream.threadId, clearQuoteSelection]);
-  React43.useEffect(() => {
+  React44.useEffect(() => {
     if (missingConfig) return;
     void refreshThreads();
   }, [missingConfig, refreshThreads]);
-  React43.useEffect(() => {
+  React44.useEffect(() => {
     if (missingConfig || !stream.client || !stream.assistantId) {
       setAssistantName(null);
       setAssistantAvatar(null);
@@ -11879,7 +12901,7 @@ function Chat({
       cancelled = true;
     };
   }, [missingConfig, stream.client, stream.assistantId]);
-  React43.useEffect(() => {
+  React44.useEffect(() => {
     if (missingConfig || !stream.client || !stream.assistantId) {
       setRuntimeCapabilities(null);
       setRuntimeCapabilitiesReady(false);
@@ -11926,7 +12948,7 @@ function Chat({
     });
     return () => controller.abort();
   }, [missingConfig, stream.client, stream.assistantId]);
-  React43.useEffect(() => {
+  React44.useEffect(() => {
     setRunRuntimeCapabilities(
       createEmptyRuntimeCapabilitiesSelection(runtimeCapabilities)
     );
@@ -11983,7 +13005,7 @@ function Chat({
     mimetype: a.storageFile?.mimetype ?? a.file.type,
     size: a.storageFile?.size ?? a.file.size
   }));
-  const handleSessionRuntimeCapabilityToggle = React43.useCallback(
+  const handleSessionRuntimeCapabilityToggle = React44.useCallback(
     (type, id, selected) => {
       setSessionRuntimeCapabilities((previous) => {
         const nextSelection = toggleRuntimeCapabilitySelection(
@@ -12001,7 +13023,7 @@ function Chat({
     },
     [persistSessionRuntimeCapabilities, stream.threadId]
   );
-  const updateRuntimeCapabilityPalette = React43.useCallback(
+  const updateRuntimeCapabilityPalette = React44.useCallback(
     (parts, selectionStart) => {
       const input = composerInputRef.current;
       const editingText = getComposerEditingText(parts);
@@ -12013,7 +13035,7 @@ function Chat({
     },
     []
   );
-  const syncComposerInputFromElement = React43.useCallback(
+  const syncComposerInputFromElement = React44.useCallback(
     (input) => {
       const previousCapabilities = getComposerCapabilityPartMap(
         composerPartsRef.current
@@ -12031,25 +13053,25 @@ function Chat({
     },
     [commitComposerParts, updateRuntimeCapabilityPalette]
   );
-  const handleComposerInput = React43.useCallback(
+  const handleComposerInput = React44.useCallback(
     (event) => {
       syncComposerInputFromElement(event.currentTarget);
     },
     [syncComposerInputFromElement]
   );
-  const handleComposerCompositionEnd = React43.useCallback(
+  const handleComposerCompositionEnd = React44.useCallback(
     (event) => {
       syncComposerInputFromElement(event.currentTarget);
     },
     [syncComposerInputFromElement]
   );
-  const handleComposerSelect = React43.useCallback(() => {
+  const handleComposerSelect = React44.useCallback(() => {
     updateRuntimeCapabilityPalette(
       composerPartsRef.current,
       composerInputRef.current ? getComposerSelectionOffset(composerInputRef.current) : void 0
     );
   }, [updateRuntimeCapabilityPalette]);
-  const removeRunRuntimeCapability = React43.useCallback(
+  const removeRunRuntimeCapability = React44.useCallback(
     (option) => {
       setRunRuntimeCapabilities(
         (previous) => toggleRuntimeCapabilitySelection(
@@ -12069,7 +13091,7 @@ function Chat({
     },
     [commitComposerParts]
   );
-  const submitDraft = React43.useCallback(
+  const submitDraft = React44.useCallback(
     (optionsOrFollowUp) => {
       if (isSendDisabled) return;
       const submitOptions = typeof optionsOrFollowUp === "string" ? { followUpOverride: optionsOrFollowUp } : optionsOrFollowUp ?? {};
@@ -12085,13 +13107,20 @@ function Chat({
       if (!humanInput) {
         return;
       }
-      const runtimeCapabilitiesForSubmit = submitOptions.runtimeCapabilities && runtimeCapabilities && runtimeCapabilitiesReady ? mergeRuntimeCapabilitiesSelections(
+      const recommendedRuntimeCapabilitiesForSubmit = submitOptions.runtimeCapabilities && runtimeCapabilities && runtimeCapabilitiesReady ? mergeRuntimeCapabilitiesSelections(
         runtimeCapabilities,
-        effectiveRuntimeCapabilitiesForSubmit,
+        runRuntimeCapabilities,
         submitOptions.runtimeCapabilities
-      ) : effectiveRuntimeCapabilitiesForSubmit;
+      ) : runRuntimeCapabilities;
+      const runtimeCapabilitiesForSubmit = runtimeCapabilities && runtimeCapabilitiesReady ? createRuntimeCapabilitiesForSubmit({
+        capabilities: runtimeCapabilities,
+        available: effectiveSessionRuntimeCapabilities,
+        recommended: recommendedRuntimeCapabilitiesForSubmit
+      }) : null;
       const runtimeCapabilityOptionsForMessage = getSelectedRuntimeCapabilityOptions(
-        runtimeCapabilitiesForSubmit,
+        getRecommendedRuntimeCapabilitiesSelection(
+          runtimeCapabilitiesForSubmit
+        ),
         runtimeCapabilityOptions
       );
       const displayContent = submitOptions.displayText || contentToSubmit || (referencesToSend ? t("chat.referencedContentOnly") : "");
@@ -12167,7 +13196,6 @@ function Chat({
       setRuntimeCapabilityPalette(null);
     },
     [
-      effectiveRuntimeCapabilitiesForSubmit,
       effectiveSessionRuntimeCapabilities,
       isSendDisabled,
       options?.request,
@@ -12176,6 +13204,7 @@ function Chat({
       runtimeCapabilities,
       runtimeCapabilitiesReady,
       runtimeCapabilityOptions,
+      runRuntimeCapabilities,
       scrollToBottom,
       selectedTool,
       commitComposerParts,
@@ -12186,7 +13215,7 @@ function Chat({
       t
     ]
   );
-  const addRunRuntimeCapabilities = React43.useCallback(
+  const addRunRuntimeCapabilities = React44.useCallback(
     (selection) => {
       setRunRuntimeCapabilities(
         (previous) => runtimeCapabilities ? mergeRuntimeCapabilitiesSelections(
@@ -12198,7 +13227,7 @@ function Chat({
     },
     [runtimeCapabilities]
   );
-  const insertComposerCapabilityToken = React43.useCallback(
+  const insertComposerCapabilityToken = React44.useCallback(
     (capability, range) => {
       const token = createComposerCapabilityPart(capability, createMessageId());
       const currentParts = composerPartsRef.current;
@@ -12239,7 +13268,7 @@ function Chat({
     runtimeCapabilities,
     runtimeCapabilitiesReady,
     runtimeCapabilityOptions,
-    effectiveRuntimeCapabilitiesForSubmit,
+    recommendedRuntimeCapabilities: runRuntimeCapabilities,
     draft,
     palette: runtimeCapabilityPalette,
     setPalette: setRuntimeCapabilityPalette,
@@ -12269,7 +13298,7 @@ function Chat({
     plugin: t("composer.slashCommands.empty.loadingCapabilities"),
     subAgent: t("composer.slashCommands.empty.loadingCapabilities")
   };
-  React43.useEffect(() => {
+  React44.useEffect(() => {
     if (!runtimeCapabilityPalette) {
       return;
     }
@@ -12288,7 +13317,7 @@ function Chat({
       );
     }
   }, [slashPaletteOptions.length, runtimeCapabilityPalette]);
-  React43.useLayoutEffect(() => {
+  React44.useLayoutEffect(() => {
     if (!runtimeCapabilityPalette) {
       return;
     }
@@ -12312,7 +13341,7 @@ function Chat({
     }
     submitDraft();
   };
-  const handleEditPendingFollowUp = React43.useCallback(
+  const handleEditPendingFollowUp = React44.useCallback(
     (id) => {
       const item = pendingFollowUps.find(
         (entry) => entry.id === id && entry.mode === "queue"
@@ -12339,7 +13368,7 @@ function Chat({
     },
     [pendingFollowUps, setComposerText, stream]
   );
-  const handleQuoteSelection = React43.useCallback(() => {
+  const handleQuoteSelection = React44.useCallback(() => {
     if (!quoteSelection) {
       return;
     }
@@ -12355,7 +13384,7 @@ function Chat({
   const handleAttachmentClick = () => {
     fileInputRef.current?.click();
   };
-  const uploadContextFile = React43.useCallback(
+  const uploadContextFile = React44.useCallback(
     (file) => stream.client.contexts.uploadFile(file),
     [stream.client]
   );
@@ -12459,7 +13488,7 @@ function Chat({
     }
     submitDraft();
   };
-  const handleComposerPaste = React43.useCallback(
+  const handleComposerPaste = React44.useCallback(
     (event) => {
       const clipboardData = event.clipboardData;
       if (!clipboardData) {
@@ -12558,18 +13587,18 @@ function Chat({
       uploadContextFile
     ]
   );
-  const alternateFollowUpShortcutLabel = React43.useMemo(() => {
+  const alternateFollowUpShortcutLabel = React44.useMemo(() => {
     if (typeof navigator === "undefined") {
       return "\u2318Enter";
     }
     const platform = navigator.platform || navigator.userAgent;
     return /Mac|iPhone|iPad|iPod/i.test(platform) ? "\u2318Enter" : "Ctrl+Enter";
   }, []);
-  const followUpShortcutLabels = React43.useMemo(
+  const followUpShortcutLabels = React44.useMemo(
     () => getComposerFollowUpShortcutLabels(alternateFollowUpShortcutLabel),
     [alternateFollowUpShortcutLabel]
   );
-  const uploadFile = React43.useCallback(
+  const uploadFile = React44.useCallback(
     async (localId, file) => {
       try {
         const result = await uploadContextFile(file);
@@ -12592,7 +13621,7 @@ function Chat({
     },
     [uploadContextFile]
   );
-  const handleRetryUpload = React43.useCallback(
+  const handleRetryUpload = React44.useCallback(
     (localId) => {
       const attachment = attachments.find((a) => a.localId === localId);
       if (!attachment || attachment.status !== "error") return;
@@ -12691,7 +13720,7 @@ function Chat({
     );
     scrollToBottom(true, true);
   };
-  const loadConversationMessages = React43.useCallback(
+  const loadConversationMessages = React44.useCallback(
     async (recordId) => {
       if (missingConfig) {
         setHistoryError(missingConfigShortMessage);
@@ -12786,12 +13815,12 @@ function Chat({
     }
   };
   const acceptMimes = composer?.attachments?.accept ? Object.entries(composer.attachments.accept).map(([mime, exts]) => [mime, ...exts.map((e) => `.${e}`)].join(",")).join(",") : void 0;
-  const currentThread = React43.useMemo(
+  const currentThread = React44.useMemo(
     () => threads.find((item) => item.id === stream.threadId),
     [threads, stream.threadId]
   );
   const streamErrorMessage = stream.error instanceof Error ? stream.error.message : void 0;
-  const threadErrorMessage = React43.useMemo(() => {
+  const threadErrorMessage = React44.useMemo(() => {
     if (streamErrorMessage?.trim()) return streamErrorMessage.trim();
     if (currentThread?.status !== "error") return void 0;
     const message = currentThread.error?.trim();
@@ -12822,7 +13851,7 @@ function Chat({
     fallbackTitle: t("history.threadFallback")
   });
   const assistantTitle = assistantName || resolvedTitle;
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs31(
     "div",
     {
       ref: viewportRef,
@@ -12832,10 +13861,10 @@ function Chat({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs29("div", { className: "flex items-center justify-between border-b p-2 sticky top-0 z-10 bg-background", children: [
-          /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-3 overflow-hidden", children: [
-            /* @__PURE__ */ jsxs29("div", { className: "relative shrink-0", children: [
-              /* @__PURE__ */ jsx46(
+        /* @__PURE__ */ jsxs31("div", { className: "flex items-center justify-between border-b p-2 sticky top-0 z-10 bg-background", children: [
+          /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-3 overflow-hidden", children: [
+            /* @__PURE__ */ jsxs31("div", { className: "relative shrink-0", children: [
+              /* @__PURE__ */ jsx48(
                 ChatkitAvatar,
                 {
                   avatar: assistantAvatar,
@@ -12843,10 +13872,10 @@ function Chat({
                   label: assistantTitle
                 }
               ),
-              /* @__PURE__ */ jsx46("span", { className: "absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full border-2 border-background bg-green-500" })
+              /* @__PURE__ */ jsx48("span", { className: "absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full border-2 border-background bg-green-500" })
             ] }),
-            /* @__PURE__ */ jsxs29("div", { className: "truncate", children: [
-              /* @__PURE__ */ jsx46(
+            /* @__PURE__ */ jsxs31("div", { className: "truncate", children: [
+              /* @__PURE__ */ jsx48(
                 "h2",
                 {
                   className: "text-lg font-semibold truncate",
@@ -12854,12 +13883,12 @@ function Chat({
                   children: assistantTitle
                 }
               ),
-              /* @__PURE__ */ jsx46("p", { className: "text-xs text-muted-foreground", children: t("chat.statusOnline") })
+              /* @__PURE__ */ jsx48("p", { className: "text-xs text-muted-foreground", children: t("chat.statusOnline") })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-1", children: [
-            /* @__PURE__ */ jsxs29(Tooltip, { children: [
-              /* @__PURE__ */ jsx46(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx46("span", { className: "inline-flex h-8 w-8", children: /* @__PURE__ */ jsx46(
+          /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsxs31(Tooltip, { children: [
+              /* @__PURE__ */ jsx48(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx48("span", { className: "inline-flex h-8 w-8", children: /* @__PURE__ */ jsx48(
                 "button",
                 {
                   type: "button",
@@ -12870,14 +13899,14 @@ function Chat({
                     "transition-colors duration-150"
                   ),
                   "aria-label": t("settings.open"),
-                  children: /* @__PURE__ */ jsx46(Settings2, { size: 16 })
+                  children: /* @__PURE__ */ jsx48(Settings2, { size: 16 })
                 }
               ) }) }),
-              /* @__PURE__ */ jsx46(TooltipContent, { side: "bottom", children: t("settings.open") })
+              /* @__PURE__ */ jsx48(TooltipContent, { side: "bottom", children: t("settings.open") })
             ] }),
-            history?.enabled !== false && /* @__PURE__ */ jsxs29(Fragment6, { children: [
-              /* @__PURE__ */ jsxs29(Tooltip, { children: [
-                /* @__PURE__ */ jsx46(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx46("span", { className: "inline-flex h-8 w-8", children: /* @__PURE__ */ jsx46(
+            history?.enabled !== false && /* @__PURE__ */ jsxs31(Fragment7, { children: [
+              /* @__PURE__ */ jsxs31(Tooltip, { children: [
+                /* @__PURE__ */ jsx48(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx48("span", { className: "inline-flex h-8 w-8", children: /* @__PURE__ */ jsx48(
                   "button",
                   {
                     type: "button",
@@ -12890,12 +13919,12 @@ function Chat({
                       "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed"
                     ),
                     "aria-label": t("history.newThread"),
-                    children: /* @__PURE__ */ jsx46(Pencil4, { size: 16 })
+                    children: /* @__PURE__ */ jsx48(Pencil4, { size: 16 })
                   }
                 ) }) }),
-                /* @__PURE__ */ jsx46(TooltipContent, { side: "bottom", children: t("history.newThread") })
+                /* @__PURE__ */ jsx48(TooltipContent, { side: "bottom", children: t("history.newThread") })
               ] }),
-              /* @__PURE__ */ jsx46(
+              /* @__PURE__ */ jsx48(
                 HistorySidebar,
                 {
                   threads,
@@ -12910,18 +13939,18 @@ function Chat({
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs29("div", { className: "flex-1 p-4", children: [
-          errorMessage && /* @__PURE__ */ jsx46("div", { className: "mb-4 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: errorMessage }),
-          historyError && /* @__PURE__ */ jsx46("div", { className: "mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900", children: historyError }),
-          showMissingConfig && /* @__PURE__ */ jsx46("div", { className: "mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900", children: missingConfigDetailMessage }),
-          isHistoryLoading && /* @__PURE__ */ jsx46("div", { className: "mb-4 rounded-lg border border-muted px-3 py-2 text-sm text-muted-foreground", children: t("chat.loadingThread") }),
-          messages.length === 0 ? /* @__PURE__ */ jsx46(
+        /* @__PURE__ */ jsxs31("div", { className: "flex-1 p-4", children: [
+          errorMessage && /* @__PURE__ */ jsx48("div", { className: "mb-4 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive", children: errorMessage }),
+          historyError && /* @__PURE__ */ jsx48("div", { className: "mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900", children: historyError }),
+          showMissingConfig && /* @__PURE__ */ jsx48("div", { className: "mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900", children: missingConfigDetailMessage }),
+          isHistoryLoading && /* @__PURE__ */ jsx48("div", { className: "mb-4 rounded-lg border border-muted px-3 py-2 text-sm text-muted-foreground", children: t("chat.loadingThread") }),
+          messages.length === 0 ? /* @__PURE__ */ jsx48(
             StartScreen,
             {
               startScreen,
               onPromptClick: handlePromptClick
             }
-          ) : /* @__PURE__ */ jsxs29("div", { className: "space-y-4", children: [
+          ) : /* @__PURE__ */ jsxs31("div", { className: "space-y-4", children: [
             messages.map((message, index) => {
               const messageType = String(message.type);
               const isAssistantMessage = messageType === "assistant" || messageType === "ai";
@@ -12943,7 +13972,9 @@ function Chat({
               const humanReferences = humanMessage.references ?? [];
               const humanAttachments = humanMessage.attachments ?? [];
               const humanRuntimeCapabilityOptions = message.type === "human" ? humanMessage.runtimeCapabilityOptions ?? getSelectedRuntimeCapabilityOptions(
-                humanMessage.runtimeCapabilities,
+                getRecommendedRuntimeCapabilitiesSelection(
+                  humanMessage.runtimeCapabilities
+                ),
                 runtimeCapabilityOptions
               ) : [];
               const hasHumanAttachments = message.type === "human" && humanAttachments.length > 0;
@@ -12952,7 +13983,7 @@ function Chat({
               if (!isAssistantMessage && !hasPlainRenderableContent && !hasHumanAttachments && humanRuntimeCapabilityOptions.length === 0 && humanReferences.length === 0) {
                 return null;
               }
-              return /* @__PURE__ */ jsx46(
+              return /* @__PURE__ */ jsx48(
                 "div",
                 {
                   className: cn(
@@ -12960,8 +13991,8 @@ function Chat({
                     message.type === "human" ? "justify-end" : "justify-start -ml-1"
                     // AI messages: slightly closer to left
                   ),
-                  children: /* @__PURE__ */ jsxs29("div", { className: "flex flex-col px-3 overflow-hidden", children: [
-                    /* @__PURE__ */ jsx46(
+                  children: /* @__PURE__ */ jsxs31("div", { className: "flex flex-col px-3 overflow-hidden", children: [
+                    /* @__PURE__ */ jsx48(
                       "div",
                       {
                         ...canQuoteMessage ? {
@@ -12973,7 +14004,7 @@ function Chat({
                           message.type === "human" ? "bg-primary text-primary-foreground px-4 py-2.5" : message.type === "system" ? "bg-muted text-muted-foreground text-xs px-4 py-2.5" : "py-1 text-chat-foreground"
                           // AI messages: use chat-specific foreground color
                         ),
-                        children: isAssistantMessage ? /* @__PURE__ */ jsx46(
+                        children: isAssistantMessage ? /* @__PURE__ */ jsx48(
                           AssistantMessage,
                           {
                             message: {
@@ -12992,25 +14023,25 @@ function Chat({
                             organizationId: stream.organizationId,
                             apiUrl: stream.apiUrl
                           }
-                        ) : /* @__PURE__ */ jsxs29(Fragment6, { children: [
-                          message.type === "human" && humanRuntimeCapabilityOptions.length > 0 && /* @__PURE__ */ jsx46("div", { className: "mb-2 flex flex-wrap gap-1.5", children: humanRuntimeCapabilityOptions.map((option) => /* @__PURE__ */ jsxs29(
+                        ) : /* @__PURE__ */ jsxs31(Fragment7, { children: [
+                          message.type === "human" && humanRuntimeCapabilityOptions.length > 0 && /* @__PURE__ */ jsx48("div", { className: "mb-2 flex flex-wrap gap-1.5", children: humanRuntimeCapabilityOptions.map((option) => /* @__PURE__ */ jsxs31(
                             "span",
                             {
                               className: "inline-flex max-w-full items-center gap-1 rounded-md bg-primary-foreground/20 px-2 py-1 text-xs font-medium text-primary-foreground",
                               children: [
-                                /* @__PURE__ */ jsx46(
+                                /* @__PURE__ */ jsx48(
                                   RuntimeCapabilityIcon,
                                   {
                                     option,
                                     variant: "chip"
                                   }
                                 ),
-                                /* @__PURE__ */ jsx46("span", { className: "max-w-[9rem] truncate", children: option.label })
+                                /* @__PURE__ */ jsx48("span", { className: "max-w-[9rem] truncate", children: option.label })
                               ]
                             },
                             `${option.type}:${option.id}`
                           )) }),
-                          message.type === "human" && humanReferences.length > 0 && /* @__PURE__ */ jsx46("div", { className: "mb-2 flex flex-wrap gap-1.5", children: humanReferences.map((reference) => /* @__PURE__ */ jsx46(
+                          message.type === "human" && humanReferences.length > 0 && /* @__PURE__ */ jsx48("div", { className: "mb-2 flex flex-wrap gap-1.5", children: humanReferences.map((reference) => /* @__PURE__ */ jsx48(
                             ReferenceChip,
                             {
                               reference,
@@ -13018,29 +14049,29 @@ function Chat({
                             },
                             getReferenceKey(reference)
                           )) }),
-                          message.type === "human" && humanAttachments.length > 0 && /* @__PURE__ */ jsx46("div", { className: "flex flex-wrap gap-1.5 mb-2", children: humanAttachments.map((file, fileIndex) => /* @__PURE__ */ jsxs29(
+                          message.type === "human" && humanAttachments.length > 0 && /* @__PURE__ */ jsx48("div", { className: "flex flex-wrap gap-1.5 mb-2", children: humanAttachments.map((file, fileIndex) => /* @__PURE__ */ jsxs31(
                             "div",
                             {
                               className: "flex items-center gap-1.5 rounded-md bg-primary-foreground/20 px-2 py-1 text-xs",
                               children: [
-                                /* @__PURE__ */ jsx46(FileText3, { size: 12 }),
-                                /* @__PURE__ */ jsx46("span", { className: "max-w-[100px] truncate", children: file.originalName })
+                                /* @__PURE__ */ jsx48(FileText3, { size: 12 }),
+                                /* @__PURE__ */ jsx48("span", { className: "max-w-[100px] truncate", children: file.originalName })
                               ]
                             },
                             fileIndex
                           )) }),
-                          Array.isArray(message.content) ? message.content.map((part, partIndex) => /* @__PURE__ */ jsx46(
+                          Array.isArray(message.content) ? message.content.map((part, partIndex) => /* @__PURE__ */ jsx48(
                             "p",
                             {
                               className: "wrap-break-word text-sm leading-relaxed",
                               children: formatMessageContent(part)
                             },
                             `${part.type}-${partIndex}`
-                          )) : /* @__PURE__ */ jsx46("span", { className: "wrap-break-word text-sm leading-relaxed", children: formatMessageContent(message.content) })
+                          )) : /* @__PURE__ */ jsx48("span", { className: "wrap-break-word text-sm leading-relaxed", children: formatMessageContent(message.content) })
                         ] })
                       }
                     ),
-                    /* @__PURE__ */ jsx46(
+                    /* @__PURE__ */ jsx48(
                       MessageActions,
                       {
                         content: messageContent,
@@ -13076,7 +14107,7 @@ function Chat({
                 stream.isLoading,
                 { now: streamingNow }
               );
-              return /* @__PURE__ */ jsx46("div", { className: "flex justify-start gap-3 -ml-2", children: /* @__PURE__ */ jsx46("div", { className: "max-w-full rounded-2xl py-2.5", children: /* @__PURE__ */ jsx46(
+              return /* @__PURE__ */ jsx48("div", { className: "flex justify-start gap-3 -ml-2", children: /* @__PURE__ */ jsx48("div", { className: "max-w-full rounded-2xl py-2.5", children: /* @__PURE__ */ jsx48(
                 AssistantStreamingIndicator,
                 {
                   status: fallbackStreamingStatus ?? "loading"
@@ -13085,7 +14116,7 @@ function Chat({
             })()
           ] })
         ] }),
-        !isAtBottom && messages.length > 0 && /* @__PURE__ */ jsx46("div", { className: "sticky bottom-20 z-20 flex justify-center px-4 pointer-events-none", children: /* @__PURE__ */ jsx46(
+        !isAtBottom && messages.length > 0 && /* @__PURE__ */ jsx48("div", { className: "sticky bottom-20 z-20 flex justify-center px-4 pointer-events-none", children: /* @__PURE__ */ jsx48(
           Button,
           {
             type: "button",
@@ -13098,10 +14129,10 @@ function Chat({
             onClick: () => scrollToBottom(true, true),
             "aria-label": t("chat.scrollToBottom"),
             title: t("chat.scrollToBottom"),
-            children: /* @__PURE__ */ jsx46(ArrowDown2, { size: 16 })
+            children: /* @__PURE__ */ jsx48(ArrowDown2, { size: 16 })
           }
         ) }),
-        quoteSelection && /* @__PURE__ */ jsx46(
+        quoteSelection && /* @__PURE__ */ jsx48(
           "div",
           {
             className: "pointer-events-none fixed z-50",
@@ -13110,7 +14141,7 @@ function Chat({
               left: `${quoteSelection.left}px`,
               transform: "translateX(-50%)"
             },
-            children: /* @__PURE__ */ jsxs29(
+            children: /* @__PURE__ */ jsxs31(
               Button,
               {
                 type: "button",
@@ -13122,16 +14153,16 @@ function Chat({
                 "aria-label": t("composer.quoteSelection"),
                 title: t("composer.quoteSelection"),
                 children: [
-                  /* @__PURE__ */ jsx46(Quote, { size: 14 }),
+                  /* @__PURE__ */ jsx48(Quote, { size: 14 }),
                   t("composer.quoteSelection")
                 ]
               }
             )
           }
         ),
-        /* @__PURE__ */ jsxs29("div", { className: "p-2 sticky bottom-0 z-10 bg-background", children: [
-          threadErrorMessage && /* @__PURE__ */ jsx46("div", { className: "mb-3 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive overflow-auto", children: threadErrorMessage }),
-          /* @__PURE__ */ jsx46(
+        /* @__PURE__ */ jsxs31("div", { className: "p-2 sticky bottom-0 z-10 bg-background", children: [
+          threadErrorMessage && /* @__PURE__ */ jsx48("div", { className: "mb-3 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive overflow-auto", children: threadErrorMessage }),
+          /* @__PURE__ */ jsx48(
             "input",
             {
               ref: fileInputRef,
@@ -13142,7 +14173,7 @@ function Chat({
               className: "hidden"
             }
           ),
-          attachments.length > 0 && /* @__PURE__ */ jsx46("div", { className: "mb-3 flex flex-wrap gap-2", children: attachments.map((item) => /* @__PURE__ */ jsxs29(
+          attachments.length > 0 && /* @__PURE__ */ jsx48("div", { className: "mb-3 flex flex-wrap gap-2", children: attachments.map((item) => /* @__PURE__ */ jsxs31(
             "div",
             {
               className: cn(
@@ -13150,16 +14181,16 @@ function Chat({
                 item.status === "error" ? "bg-destructive/10 border border-destructive/30" : "bg-muted"
               ),
               children: [
-                item.status === "uploading" && /* @__PURE__ */ jsx46(
-                  Loader25,
+                item.status === "uploading" && /* @__PURE__ */ jsx48(
+                  Loader26,
                   {
                     size: 14,
                     className: "animate-spin text-muted-foreground"
                   }
                 ),
-                item.status === "success" && /* @__PURE__ */ jsx46(FileText3, { size: 14, className: "text-muted-foreground" }),
-                item.status === "error" && /* @__PURE__ */ jsx46(FileText3, { size: 14, className: "text-destructive" }),
-                /* @__PURE__ */ jsx46(
+                item.status === "success" && /* @__PURE__ */ jsx48(FileText3, { size: 14, className: "text-muted-foreground" }),
+                item.status === "error" && /* @__PURE__ */ jsx48(FileText3, { size: 14, className: "text-destructive" }),
+                /* @__PURE__ */ jsx48(
                   "span",
                   {
                     className: cn(
@@ -13169,17 +14200,17 @@ function Chat({
                     children: item.file.name
                   }
                 ),
-                item.status === "error" && /* @__PURE__ */ jsx46(
+                item.status === "error" && /* @__PURE__ */ jsx48(
                   "button",
                   {
                     type: "button",
                     onClick: () => handleRetryUpload(item.localId),
                     className: "ml-1 rounded-full p-0.5 text-destructive hover:bg-destructive/20",
                     title: t("chat.retryUpload"),
-                    children: /* @__PURE__ */ jsx46(RefreshCw2, { size: 12 })
+                    children: /* @__PURE__ */ jsx48(RefreshCw2, { size: 12 })
                   }
                 ),
-                /* @__PURE__ */ jsx46(
+                /* @__PURE__ */ jsx48(
                   "button",
                   {
                     type: "button",
@@ -13188,14 +14219,14 @@ function Chat({
                       "ml-1 rounded-full p-0.5",
                       item.status === "error" ? "text-destructive hover:bg-destructive/20" : "hover:bg-muted-foreground/20"
                     ),
-                    children: /* @__PURE__ */ jsx46(X5, { size: 12 })
+                    children: /* @__PURE__ */ jsx48(X5, { size: 12 })
                   }
                 )
               ]
             },
             item.localId
           )) }),
-          references.length > 0 && /* @__PURE__ */ jsx46("div", { className: "mb-3 flex flex-wrap gap-2", children: references.map((reference) => /* @__PURE__ */ jsx46(
+          references.length > 0 && /* @__PURE__ */ jsx48("div", { className: "mb-3 flex flex-wrap gap-2", children: references.map((reference) => /* @__PURE__ */ jsx48(
             ReferenceChip,
             {
               reference,
@@ -13209,16 +14240,16 @@ function Chat({
             },
             getReferenceKey(reference)
           )) }),
-          detachedRunRuntimeCapabilityOptions.length > 0 && /* @__PURE__ */ jsxs29("div", { className: "mb-2 flex flex-wrap items-center gap-2", children: [
-            /* @__PURE__ */ jsx46("span", { className: "text-xs text-muted-foreground", children: t("composer.capabilities.runOnly") }),
-            detachedRunRuntimeCapabilityOptions.map((option) => /* @__PURE__ */ jsxs29(
+          detachedRunRuntimeCapabilityOptions.length > 0 && /* @__PURE__ */ jsxs31("div", { className: "mb-2 flex flex-wrap items-center gap-2", children: [
+            /* @__PURE__ */ jsx48("span", { className: "text-xs text-muted-foreground", children: t("composer.capabilities.runOnly") }),
+            detachedRunRuntimeCapabilityOptions.map((option) => /* @__PURE__ */ jsxs31(
               "span",
               {
                 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: [
-                  /* @__PURE__ */ jsx46(RuntimeCapabilityIcon, { option, variant: "chip" }),
-                  /* @__PURE__ */ jsx46("span", { className: "max-w-40 truncate", children: option.label }),
-                  /* @__PURE__ */ jsx46(
+                  /* @__PURE__ */ jsx48(RuntimeCapabilityIcon, { option, variant: "chip" }),
+                  /* @__PURE__ */ jsx48("span", { className: "max-w-40 truncate", children: option.label }),
+                  /* @__PURE__ */ jsx48(
                     "button",
                     {
                       type: "button",
@@ -13226,7 +14257,7 @@ function Chat({
                       className: "rounded-full p-0.5 hover:bg-primary/15",
                       title: t("composer.capabilities.removeRunCapability"),
                       "aria-label": t("composer.capabilities.removeRunCapability"),
-                      children: /* @__PURE__ */ jsx46(X5, { size: 11 })
+                      children: /* @__PURE__ */ jsx48(X5, { size: 11 })
                     }
                   )
                 ]
@@ -13234,7 +14265,7 @@ function Chat({
               `${option.type}:${option.id}`
             ))
           ] }),
-          /* @__PURE__ */ jsx46(
+          /* @__PURE__ */ jsx48(
             PendingRuntimeServices,
             {
               state: stream.runtimeActivities.sandboxServices,
@@ -13243,7 +14274,7 @@ function Chat({
               className: hasPendingTodos || hasPendingFollowUps ? "mb-2" : void 0
             }
           ),
-          /* @__PURE__ */ jsx46(
+          /* @__PURE__ */ jsx48(
             PendingTodos,
             {
               snapshot: stream.todos,
@@ -13251,7 +14282,7 @@ function Chat({
               className: hasPendingFollowUps ? "mb-2" : void 0
             }
           ),
-          /* @__PURE__ */ jsx46(
+          /* @__PURE__ */ jsx48(
             PendingFollowUps,
             {
               items: pendingFollowUps,
@@ -13266,7 +14297,7 @@ function Chat({
               attachToComposer: true
             }
           ),
-          /* @__PURE__ */ jsx46(
+          /* @__PURE__ */ jsx48(
             RequestUserInputPanel,
             {
               request: stream.pendingRequestUserInput,
@@ -13275,7 +14306,7 @@ function Chat({
               attachToComposer: true
             }
           ),
-          /* @__PURE__ */ jsx46(
+          /* @__PURE__ */ jsx48(
             HITLApprovalPanel,
             {
               request: stream.pendingHITLRequest,
@@ -13284,7 +14315,7 @@ function Chat({
               attachToComposer: true
             }
           ),
-          runtimeCapabilityPalette && /* @__PURE__ */ jsx46(
+          runtimeCapabilityPalette && /* @__PURE__ */ jsx48(
             SlashPalette,
             {
               palette: runtimeCapabilityPalette,
@@ -13298,21 +14329,21 @@ function Chat({
               onSelect: selectSlashPaletteOption
             }
           ),
-          /* @__PURE__ */ jsx46("form", { className: "flex items-end", onSubmit: handleSubmit, children: /* @__PURE__ */ jsxs29(
+          /* @__PURE__ */ jsx48("form", { className: "flex items-end", onSubmit: handleSubmit, children: /* @__PURE__ */ jsxs31(
             "div",
             {
               "data-slot": "composer-input-shell",
               "data-layout": isComposerStacked ? "stacked" : "inline",
               className: cn(
-                "relative flex flex-1 overflow-hidden rounded-xl",
+                "relative flex flex-1 overflow-hidden",
                 "bg-background border border-border shadow-sm",
                 isComposerStacked ? "min-h-[5.5rem] px-1.5 pt-1.5 pb-12" : "min-h-12 px-1.5 py-1",
                 "focus-within:border-muted-foreground/30 focus-within:shadow-md",
-                "transition-[min-height,padding,box-shadow,border-color] duration-300 ease-[cubic-bezier(0.2,0.8,0.2,1)]",
-                getRoundedClass(theme.radius)
+                "transition-[min-height,padding,border-radius,box-shadow,border-color] duration-300 ease-[cubic-bezier(0.2,0.8,0.2,1)]",
+                composerInputRoundedClass
               ),
               children: [
-                /* @__PURE__ */ jsx46(
+                /* @__PURE__ */ jsx48(
                   "div",
                   {
                     ref: composerInputRef,
@@ -13334,7 +14365,7 @@ function Chat({
                       (missingConfig || isHistoryLoading || hasPendingInteractiveRequest) && "cursor-not-allowed opacity-50"
                     ),
                     children: renderedComposerParts.map(
-                      (part, index) => part.type === "text" ? /* @__PURE__ */ jsx46(React43.Fragment, { children: part.text }, `text-${index}`) : /* @__PURE__ */ jsxs29(
+                      (part, index) => part.type === "text" ? /* @__PURE__ */ jsx48(React44.Fragment, { children: part.text }, `text-${index}`) : /* @__PURE__ */ jsxs31(
                         "span",
                         {
                           "data-composer-capability-key": part.key,
@@ -13343,14 +14374,14 @@ function Chat({
                           contentEditable: false,
                           className: "mx-0.5 inline-flex max-w-[14rem] select-none items-center gap-1 text-sm font-semibold text-primary align-baseline",
                           children: [
-                            /* @__PURE__ */ jsx46(
+                            /* @__PURE__ */ jsx48(
                               RuntimeCapabilityIcon,
                               {
                                 option: part.capability,
                                 variant: "chip"
                               }
                             ),
-                            /* @__PURE__ */ jsx46("span", { className: "truncate", children: part.capability.label })
+                            /* @__PURE__ */ jsx48("span", { className: "truncate", children: part.capability.label })
                           ]
                         },
                         part.key
@@ -13359,14 +14390,14 @@ function Chat({
                   },
                   composerDomVersion
                 ),
-                /* @__PURE__ */ jsxs29(
+                /* @__PURE__ */ jsxs31(
                   "div",
                   {
                     "data-slot": "composer-action-bar",
                     className: "pointer-events-none absolute inset-x-1.5 bottom-1 flex min-h-10 items-center justify-between gap-2",
                     children: [
-                      /* @__PURE__ */ jsxs29("div", { className: "pointer-events-none flex min-w-0 flex-1 items-center gap-1.5", children: [
-                        /* @__PURE__ */ jsx46("div", { className: "pointer-events-auto flex shrink-0 items-center gap-1.5", children: /* @__PURE__ */ jsx46(
+                      /* @__PURE__ */ jsxs31("div", { className: "pointer-events-none flex min-w-0 flex-1 items-center gap-1.5", children: [
+                        /* @__PURE__ */ jsx48("div", { className: "pointer-events-auto flex shrink-0 items-center gap-1.5", children: /* @__PURE__ */ jsx48(
                           ComposerMenu,
                           {
                             composer,
@@ -13381,20 +14412,20 @@ function Chat({
                             disabled: missingConfig || isHistoryLoading || hasPendingInteractiveRequest
                           }
                         ) }),
-                        selectedTool && /* @__PURE__ */ jsxs29("span", { className: "pointer-events-auto inline-flex h-8 min-w-0 max-w-[14rem] shrink items-center gap-1.5 rounded-full bg-primary/10 px-2 text-xs font-medium text-primary transition-all duration-200", children: [
-                          /* @__PURE__ */ jsx46("span", { className: "truncate", children: selectedTool.shortLabel ?? selectedTool.label }),
-                          /* @__PURE__ */ jsx46(
+                        selectedTool && /* @__PURE__ */ jsxs31("span", { className: "pointer-events-auto inline-flex h-8 min-w-0 max-w-[14rem] shrink items-center gap-1.5 rounded-full bg-primary/10 px-2 text-xs font-medium text-primary transition-all duration-200", children: [
+                          /* @__PURE__ */ jsx48("span", { className: "truncate", children: selectedTool.shortLabel ?? selectedTool.label }),
+                          /* @__PURE__ */ jsx48(
                             "button",
                             {
                               type: "button",
                               onClick: () => setSelectedTool(null),
                               className: "shrink-0 rounded-full p-0.5 text-primary/70 hover:bg-primary/10 hover:text-primary",
-                              children: /* @__PURE__ */ jsx46(X5, { size: 12 })
+                              children: /* @__PURE__ */ jsx48(X5, { size: 12 })
                             }
                           )
                         ] })
                       ] }),
-                      /* @__PURE__ */ jsx46("div", { className: "pointer-events-auto shrink-0", children: /* @__PURE__ */ jsx46(
+                      /* @__PURE__ */ jsx48("div", { className: "pointer-events-auto shrink-0", children: /* @__PURE__ */ jsx48(
                         SendButton,
                         {
                           disabled: isSendDisabled,
@@ -13421,7 +14452,7 @@ function Chat({
               ]
             }
           ) }),
-          disclaimer?.text && /* @__PURE__ */ jsx46(
+          disclaimer?.text && /* @__PURE__ */ jsx48(
             "p",
             {
               className: cn(
@@ -13431,12 +14462,12 @@ function Chat({
               children: disclaimer.text
             }
           ),
-          /* @__PURE__ */ jsxs29("div", { className: "mt-2 flex items-center justify-center gap-2 text-xs text-muted-foreground", children: [
-            /* @__PURE__ */ jsx46("span", { children: t("chat.poweredBy") }),
-            /* @__PURE__ */ jsx46(ContextUsageIndicator, { className: "absolute right-4" })
+          /* @__PURE__ */ jsxs31("div", { className: "mt-2 flex items-center justify-center gap-2 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsx48("span", { children: t("chat.poweredBy") }),
+            /* @__PURE__ */ jsx48(ContextUsageIndicator, { className: "absolute right-4" })
           ] })
         ] }),
-        /* @__PURE__ */ jsx46(
+        /* @__PURE__ */ jsx48(
           SettingsSheet,
           {
             open: petSettingsOpen,
@@ -13446,17 +14477,17 @@ function Chat({
             onSave: savePetLocalSettings
           }
         ),
-        /* @__PURE__ */ jsx46(PetBridge, { pet: effectivePet, state: petAutoState })
+        /* @__PURE__ */ jsx48(PetBridge, { pet: effectivePet, state: petAutoState })
       ]
     }
   );
 }
 
 // src/components/ui/separator.tsx
-import * as React44 from "react";
-import { jsx as jsx47 } from "react/jsx-runtime";
-var Separator = React44.forwardRef(
-  ({ className, orientation = "horizontal", ...props }, ref) => /* @__PURE__ */ jsx47(
+import * as React45 from "react";
+import { jsx as jsx49 } from "react/jsx-runtime";
+var Separator = React45.forwardRef(
+  ({ className, orientation = "horizontal", ...props }, ref) => /* @__PURE__ */ jsx49(
     "div",
     {
       ref,