npm - @xpert-ai/chatkit-ui - Versions diffs - 0.3.21 → 0.4.0 - Mend

@xpert-ai/chatkit-ui 0.3.21 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (337) hide show

package/dist/index.js CHANGED Viewed

@@ -1,11 +1,11 @@
 // src/components/chat.tsx
-import * as React48 from "react";
+import * as React49 from "react";
 import {
   ArrowDown as ArrowDown2,
   ChevronDown as ChevronDown5,
   FileText as FileText5,
   ImageIcon,
-  Loader2 as Loader28,
+  Loader2 as Loader29,
   Minus,
   Pause,
   Pencil as Pencil4,
@@ -7738,8 +7738,8 @@ function useSlashCommands({
 }
 // src/components/thread/messages/ai.tsx
-import * as React35 from "react";
-import { ChevronDown as ChevronDown4, Clock3 as Clock32, Loader2 as Loader27 } from "lucide-react";
+import * as React36 from "react";
+import { ChevronDown as ChevronDown4, Clock3 as Clock32, Loader2 as Loader28 } from "lucide-react";
 // src/lib/agent-run-render-tree.ts
 function isTextContent(content) {
@@ -11661,8 +11661,829 @@ function hasLegacySurface(surface) {
   return !!surface?.componentTree;
 }
-// src/components/thread/messages/ai.tsx
+// src/components/thread/messages/mcp-app.tsx
+import * as React35 from "react";
+import {
+  resolveLocalizedText as resolveLocalizedText3
+} from "@xpert-ai/chatkit-types";
+import { AlertCircle as AlertCircle2, Loader2 as Loader27 } from "lucide-react";
 import { jsx as jsx41, jsxs as jsxs28 } from "react/jsx-runtime";
+function isRecord5(value) {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+function buildXpertApiUrl(apiUrl, path) {
+  const normalizedApiUrl = apiUrl.trim();
+  if (!normalizedApiUrl) return path;
+  try {
+    const url = new URL(normalizedApiUrl);
+    return `${url.origin}${path}`;
+  } catch {
+    return path;
+  }
+}
+function appendQuery(path, params) {
+  const query = params.toString();
+  return query ? `${path}?${query}` : path;
+}
+function buildMcpAppReviveParams(data) {
+  const params = new URLSearchParams();
+  const add = (key, value) => {
+    if (value) {
+      params.set(key, value);
+    }
+  };
+  add("toolsetId", data.toolsetId);
+  add("serverName", data.serverName);
+  add("toolName", data.toolName);
+  add("toolCallId", data.toolCallId);
+  add("resourceUri", data.resourceUri);
+  add("title", typeof data.title === "string" ? data.title : void 0);
+  add("token", data.appInstanceToken);
+  return params;
+}
+function buildMcpAppEndpointPath(data, endpoint) {
+  return appendQuery(
+    `/api/xpert-toolset/mcp-apps/${encodeURIComponent(
+      data.appInstanceId
+    )}/${endpoint}`,
+    buildMcpAppReviveParams(data)
+  );
+}
+function escapeHtmlAttribute(value) {
+  return value.replaceAll("&", "&amp;").replaceAll('"', "&quot;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+}
+function domains(values) {
+  return values?.filter((value) => value.trim()).join(" ") ?? "";
+}
+function buildCsp(csp) {
+  const resourceDomains = domains(csp?.resourceDomains);
+  const connectDomains = domains(csp?.connectDomains) || "'none'";
+  const frameDomains = domains(csp?.frameDomains) || "'none'";
+  const baseUriDomains = domains(csp?.baseUriDomains) || "'self'";
+  return [
+    "default-src 'none'",
+    `script-src 'unsafe-inline' ${resourceDomains}`.trim(),
+    `style-src 'unsafe-inline' ${resourceDomains}`.trim(),
+    `img-src data: blob: ${resourceDomains}`.trim(),
+    `media-src data: blob: ${resourceDomains}`.trim(),
+    `font-src data: ${resourceDomains}`.trim(),
+    `connect-src ${connectDomains}`,
+    `frame-src ${frameDomains}`,
+    `base-uri ${baseUriDomains}`
+  ].join("; ");
+}
+function injectHeadContent(html, content) {
+  if (/<head[^>]*>/i.test(html)) {
+    return html.replace(/<head([^>]*)>/i, `<head$1>${content}`);
+  }
+  return `<!doctype html><html><head>${content}</head><body>${html}</body></html>`;
+}
+function injectCsp(html, csp) {
+  const meta = `<meta http-equiv="Content-Security-Policy" content="${escapeHtmlAttribute(
+    buildCsp(csp)
+  )}">`;
+  return injectHeadContent(html, meta);
+}
+function decodeResourceHtml(resource) {
+  if (typeof resource.text === "string") {
+    return resource.text;
+  }
+  if (typeof resource.blob !== "string") {
+    return null;
+  }
+  try {
+    const decoded = window.atob(resource.blob);
+    const escaped = Array.from(decoded).map((char) => `%${char.charCodeAt(0).toString(16).padStart(2, "0")}`).join("");
+    return decodeURIComponent(escaped);
+  } catch {
+    try {
+      return window.atob(resource.blob);
+    } catch {
+      return null;
+    }
+  }
+}
+function normalizeJsonRpcMessage(value) {
+  const data = typeof value === "string" ? (() => {
+    try {
+      return JSON.parse(value);
+    } catch {
+      return null;
+    }
+  })() : value;
+  if (!isRecord5(data) || typeof data.method !== "string") {
+    return null;
+  }
+  return data;
+}
+function jsonRpcResult(id, result) {
+  return {
+    jsonrpc: "2.0",
+    id: id ?? null,
+    result
+  };
+}
+function jsonRpcError(id, message) {
+  return {
+    jsonrpc: "2.0",
+    id: id ?? null,
+    error: {
+      code: -32e3,
+      message
+    }
+  };
+}
+function getErrorMessage(error) {
+  return error instanceof Error ? error.message : String(error);
+}
+function getContainerDimensions(element) {
+  if (!element) return null;
+  const rect = element.getBoundingClientRect();
+  return {
+    width: rect.width,
+    height: rect.height
+  };
+}
+function normalizeHostLocale(locale) {
+  return locale?.trim() || navigator.language || "en-US";
+}
+function getLocaleLanguage(locale) {
+  return locale.split(/[-_]/)[0]?.toLowerCase() || locale.toLowerCase();
+}
+function getLocaleDirection(locale) {
+  const language = getLocaleLanguage(locale);
+  return ["ar", "fa", "he", "ur"].includes(language) ? "rtl" : "ltr";
+}
+function setHtmlAttribute(attrs, name, value) {
+  const escaped = escapeHtmlAttribute(value);
+  const pattern = new RegExp(`\\s${name}=("[^"]*"|'[^']*'|[^\\s>]*)`, "i");
+  if (pattern.test(attrs)) {
+    return attrs.replace(pattern, ` ${name}="${escaped}"`);
+  }
+  return `${attrs} ${name}="${escaped}"`;
+}
+function injectMcpAppLocale(html, locale) {
+  const normalizedLocale = normalizeHostLocale(locale);
+  const direction = getLocaleDirection(normalizedLocale);
+  if (/<html[\s>]/i.test(html)) {
+    return html.replace(/<html([^>]*)>/i, (_match, attrs) => {
+      const withLang = setHtmlAttribute(attrs, "lang", normalizedLocale);
+      const withDirection = setHtmlAttribute(withLang, "dir", direction);
+      return `<html${withDirection}>`;
+    });
+  }
+  return `<!doctype html><html lang="${escapeHtmlAttribute(
+    normalizedLocale
+  )}" dir="${direction}"><head></head><body>${html}</body></html>`;
+}
+var MCP_APP_THEME_COLOR_TOKENS = [
+  ["--background", "--mcp-app-color-background", "oklch(1 0 0)"],
+  ["--foreground", "--mcp-app-color-foreground", "oklch(0.145 0 0)"],
+  ["--card", "--mcp-app-color-card", "oklch(1 0 0)"],
+  [
+    "--card-foreground",
+    "--mcp-app-color-card-foreground",
+    "oklch(0.145 0 0)"
+  ],
+  ["--popover", "--mcp-app-color-popover", "oklch(1 0 0)"],
+  [
+    "--popover-foreground",
+    "--mcp-app-color-popover-foreground",
+    "oklch(0.145 0 0)"
+  ],
+  ["--primary", "--mcp-app-color-primary", "oklch(0.205 0 0)"],
+  [
+    "--primary-foreground",
+    "--mcp-app-color-primary-foreground",
+    "oklch(0.985 0 0)"
+  ],
+  ["--secondary", "--mcp-app-color-secondary", "oklch(0.97 0 0)"],
+  [
+    "--secondary-foreground",
+    "--mcp-app-color-secondary-foreground",
+    "oklch(0.205 0 0)"
+  ],
+  ["--muted", "--mcp-app-color-muted", "oklch(0.97 0 0)"],
+  [
+    "--muted-foreground",
+    "--mcp-app-color-muted-foreground",
+    "oklch(0.556 0 0)"
+  ],
+  ["--accent", "--mcp-app-color-accent", "oklch(0.97 0 0)"],
+  [
+    "--accent-foreground",
+    "--mcp-app-color-accent-foreground",
+    "oklch(0.205 0 0)"
+  ],
+  [
+    "--destructive",
+    "--mcp-app-color-destructive",
+    "oklch(0.577 0.245 27.325)"
+  ],
+  [
+    "--destructive-foreground",
+    "--mcp-app-color-destructive-foreground",
+    "oklch(0.985 0 0)"
+  ],
+  ["--border", "--mcp-app-color-border", "oklch(0.922 0 0)"],
+  ["--input", "--mcp-app-color-input", "oklch(0.922 0 0)"],
+  ["--ring", "--mcp-app-color-ring", "oklch(0.708 0 0)"],
+  ["--chart-1", "--mcp-app-color-chart-1", "oklch(0.87 0 0)"],
+  ["--chart-2", "--mcp-app-color-chart-2", "oklch(0.556 0 0)"],
+  ["--chart-3", "--mcp-app-color-chart-3", "oklch(0.439 0 0)"],
+  ["--chart-4", "--mcp-app-color-chart-4", "oklch(0.371 0 0)"],
+  ["--chart-5", "--mcp-app-color-chart-5", "oklch(0.269 0 0)"]
+];
+function sanitizeCssValue(value) {
+  return value.replace(/[;{}<>]/g, "").trim();
+}
+function normalizeColorCssValue(value) {
+  const trimmed = sanitizeCssValue(value);
+  if (!trimmed) return "";
+  if (/^(#|rgb\(|rgba\(|hsl\(|hsla\(|oklch\(|oklab\(|color\(|var\()/i.test(
+    trimmed
+  )) {
+    return trimmed;
+  }
+  if (/^-?\d/.test(trimmed) && /\s/.test(trimmed)) {
+    return `hsl(${trimmed})`;
+  }
+  return trimmed;
+}
+function getHostThemeMode() {
+  return document.documentElement.classList.contains("dark") ? "dark" : "light";
+}
+function readHostCssVariable(element, variableName) {
+  const candidates = [
+    element,
+    element === document.documentElement ? null : document.documentElement
+  ].filter(Boolean);
+  for (const candidate of candidates) {
+    const value = window.getComputedStyle(candidate).getPropertyValue(variableName).trim();
+    if (value) {
+      return value;
+    }
+  }
+  return "";
+}
+function buildMcpAppTheme(element) {
+  const source = element ?? document.documentElement;
+  const sourceStyles = window.getComputedStyle(source);
+  const cssVariables = {
+    "--mcp-app-color-scheme": getHostThemeMode(),
+    "--mcp-app-font-sans": sanitizeCssValue(
+      sourceStyles.fontFamily || "ui-sans-serif, system-ui, sans-serif"
+    ),
+    "--mcp-app-font-mono": sanitizeCssValue(
+      readHostCssVariable(source, "--font-mono") || "ui-monospace, SFMono-Regular, Menlo, monospace"
+    ),
+    "--mcp-app-radius": sanitizeCssValue(
+      readHostCssVariable(source, "--radius") || "0.5rem"
+    )
+  };
+  for (const [
+    hostVariable,
+    appVariable,
+    fallback
+  ] of MCP_APP_THEME_COLOR_TOKENS) {
+    cssVariables[appVariable] = normalizeColorCssValue(readHostCssVariable(source, hostVariable)) || fallback;
+  }
+  return {
+    mode: getHostThemeMode(),
+    cssVariables
+  };
+}
+function injectMcpAppTheme(html, theme) {
+  const declarations = Object.entries(theme.cssVariables).map(([name, value]) => `${name}: ${sanitizeCssValue(value)};`).join("");
+  const style = `<style id="mcp-app-host-theme">:root{color-scheme:${theme.mode};${declarations}}</style>`;
+  return injectHeadContent(html, style);
+}
+function buildStandardToolInfo(data, resource) {
+  const raw = resource?.toolInfo ?? {};
+  const rawTitle = isRecord5(raw) && (raw.title !== void 0 || raw.name !== void 0) ? raw.title ?? raw.name : void 0;
+  const rawDescription = isRecord5(raw) && raw.description !== void 0 ? raw.description : void 0;
+  const rawIcon = isRecord5(raw) && raw.icon !== void 0 ? raw.icon : void 0;
+  const originalName = isRecord5(raw) && typeof raw.originalName === "string" ? raw.originalName : data.toolName;
+  const title = rawTitle ?? resource?.title ?? data.title ?? data.toolName;
+  const description = rawDescription ?? resource?.description ?? data.description;
+  const icon = rawIcon ?? resource?.icon ?? data.icon;
+  return {
+    ...raw,
+    id: data.toolCallId,
+    tool: {
+      name: originalName,
+      title,
+      ...description ? { description } : {},
+      ...icon ? { icon } : {}
+    }
+  };
+}
+function hasPermissionGrant(value) {
+  return value === true || isRecord5(value);
+}
+function buildIframeAllow(permissions) {
+  if (!permissions) return void 0;
+  const policies = [];
+  if (hasPermissionGrant(permissions.camera)) {
+    policies.push("camera *");
+  }
+  if (hasPermissionGrant(permissions.microphone)) {
+    policies.push("microphone *");
+  }
+  if (hasPermissionGrant(permissions.geolocation)) {
+    policies.push("geolocation *");
+  }
+  if (hasPermissionGrant(permissions.clipboardWrite)) {
+    policies.push("clipboard-write *");
+  }
+  return policies.length ? policies.join("; ") : void 0;
+}
+function buildSandboxAttribute() {
+  return ["allow-downloads", "allow-forms", "allow-modals", "allow-scripts"].join(
+    " "
+  );
+}
+function stringifyToolResult(value) {
+  if (typeof value === "string") return value;
+  try {
+    return JSON.stringify(value ?? null);
+  } catch {
+    return String(value);
+  }
+}
+function normalizeCallToolResult(value) {
+  if (isRecord5(value) && Array.isArray(value.content)) {
+    return value;
+  }
+  if (Array.isArray(value) && value.length >= 2) {
+    const [content, artifact] = value;
+    const text = typeof content === "string" ? content : stringifyToolResult(content);
+    const normalized = {
+      content: [
+        {
+          type: "text",
+          text
+        }
+      ]
+    };
+    if (isRecord5(artifact)) {
+      normalized._meta = artifact;
+      if (isRecord5(artifact.structuredContent)) {
+        normalized.structuredContent = artifact.structuredContent;
+      }
+    } else if (Array.isArray(artifact)) {
+      const structured = artifact.find(
+        (item) => isRecord5(item) && isRecord5(item.structuredContent)
+      );
+      const meta = artifact.find(isRecord5);
+      if (structured?.structuredContent) {
+        normalized.structuredContent = structured.structuredContent;
+      }
+      if (meta) {
+        normalized._meta = meta;
+      }
+    }
+    return normalized;
+  }
+  return {
+    content: [
+      {
+        type: "text",
+        text: stringifyToolResult(value)
+      }
+    ]
+  };
+}
+function isHttpUrl(value) {
+  try {
+    const url = new URL(value);
+    return url.protocol === "http:" || url.protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+function contentBlocksToText(content) {
+  if (!Array.isArray(content)) return null;
+  const parts = content.map((item) => {
+    if (!isRecord5(item)) return "";
+    if (item.type === "text" && typeof item.text === "string") {
+      return item.text;
+    }
+    if (item.type === "resource_link" && typeof item.uri === "string") {
+      return item.uri;
+    }
+    if (item.type === "image" || item.type === "audio") {
+      return `[${item.type}]`;
+    }
+    return stringifyToolResult(item);
+  }).map((part) => part.trim()).filter(Boolean);
+  return parts.length ? parts.join("\n\n") : null;
+}
+function isMcpAppComponentData(data) {
+  return isRecord5(data) && data.type === "McpApp" && typeof data.appInstanceId === "string" && typeof data.resourceUri === "string";
+}
+function McpAppMessage({
+  data,
+  className
+}) {
+  const { i18n: i18n2 } = useChatkitTranslation();
+  const {
+    apiUrl,
+    authenticatedFetch,
+    isLoading: streamIsLoading,
+    submit
+  } = useStreamContext();
+  const iframeRef = React35.useRef(null);
+  const containerRef = React35.useRef(null);
+  const initializedRef = React35.useRef(false);
+  const sentInitialResultRef = React35.useRef(false);
+  const modelContextRef = React35.useRef(null);
+  const [resource, setResource] = React35.useState(
+    null
+  );
+  const [srcDoc, setSrcDoc] = React35.useState(null);
+  const [height, setHeight] = React35.useState(420);
+  const [error, setError] = React35.useState(null);
+  const [isLoading, setIsLoading] = React35.useState(true);
+  const resourceUrl = React35.useMemo(
+    () => buildXpertApiUrl(
+      apiUrl,
+      buildMcpAppEndpointPath(data, "resource")
+    ),
+    [apiUrl, data]
+  );
+  const rpcUrl = React35.useMemo(
+    () => buildXpertApiUrl(
+      apiUrl,
+      buildMcpAppEndpointPath(data, "rpc")
+    ),
+    [apiUrl, data]
+  );
+  const postToApp = React35.useCallback((message) => {
+    iframeRef.current?.contentWindow?.postMessage(message, "*");
+  }, []);
+  const callHostRpc = React35.useCallback(
+    async (request) => {
+      const response = await authenticatedFetch(rpcUrl, {
+        method: "POST",
+        headers: {
+          "content-type": "application/json"
+        },
+        body: JSON.stringify({
+          jsonrpc: "2.0",
+          id: request.id ?? null,
+          method: request.method,
+          params: request.params
+        })
+      });
+      if (!response.ok) {
+        throw new Error(`MCP App RPC failed with ${response.status}`);
+      }
+      return response.json();
+    },
+    [authenticatedFetch, rpcUrl]
+  );
+  const sendInitialToolNotifications = React35.useCallback(() => {
+    if (!initializedRef.current || sentInitialResultRef.current || !resource) {
+      return;
+    }
+    sentInitialResultRef.current = true;
+    postToApp({
+      jsonrpc: "2.0",
+      method: "ui/notifications/tool-input",
+      params: {
+        arguments: resource.toolInput ?? data.toolInput ?? {}
+      }
+    });
+    postToApp({
+      jsonrpc: "2.0",
+      method: "ui/notifications/tool-result",
+      params: {
+        ...normalizeCallToolResult(resource.toolResult),
+        toolCallId: data.toolCallId,
+        toolName: data.toolName,
+        // Legacy compatibility for apps written before the 2026-01-26 notification shape.
+        result: resource.toolResult
+      }
+    });
+  }, [data.toolCallId, data.toolInput, data.toolName, postToApp, resource]);
+  React35.useEffect(() => {
+    const controller = new AbortController();
+    initializedRef.current = false;
+    sentInitialResultRef.current = false;
+    setIsLoading(true);
+    setError(null);
+    setResource(null);
+    setSrcDoc(null);
+    void (async () => {
+      try {
+        const response = await authenticatedFetch(resourceUrl, {
+          signal: controller.signal
+        });
+        if (!response.ok) {
+          throw new Error(`MCP App resource failed with ${response.status}`);
+        }
+        const payload = await response.json();
+        const html = decodeResourceHtml(payload);
+        if (!html) {
+          throw new Error("MCP App resource did not include HTML content");
+        }
+        setResource(payload);
+        const hostLocale = normalizeHostLocale(i18n2.language);
+        setSrcDoc(
+          injectMcpAppTheme(
+            injectCsp(
+              injectMcpAppLocale(html, hostLocale),
+              payload.csp ?? data.csp
+            ),
+            buildMcpAppTheme(containerRef.current)
+          )
+        );
+      } catch (loadError) {
+        if (!controller.signal.aborted) {
+          setError(getErrorMessage(loadError));
+        }
+      } finally {
+        if (!controller.signal.aborted) {
+          setIsLoading(false);
+        }
+      }
+    })();
+    return () => {
+      controller.abort();
+    };
+  }, [
+    authenticatedFetch,
+    data.appInstanceId,
+    data.csp,
+    i18n2.language,
+    resourceUrl
+  ]);
+  React35.useEffect(() => {
+    sendInitialToolNotifications();
+  }, [sendInitialToolNotifications]);
+  React35.useEffect(() => {
+    const handleMessage = async (event) => {
+      if (event.source !== iframeRef.current?.contentWindow) {
+        return;
+      }
+      const request = normalizeJsonRpcMessage(event.data);
+      if (!request?.method) {
+        return;
+      }
+      if (request.method === "ui/notifications/initialized") {
+        initializedRef.current = true;
+        sendInitialToolNotifications();
+        return;
+      }
+      if (request.method === "ui/notifications/size-changed") {
+        const nextHeight = isRecord5(request.params) && typeof request.params.height === "number" ? request.params.height : null;
+        if (nextHeight !== null) {
+          setHeight(Math.min(900, Math.max(240, Math.round(nextHeight))));
+        }
+        return;
+      }
+      if (request.method === "ui/initialize") {
+        initializedRef.current = true;
+        const permissions = resource?.permissions ?? data.permissions;
+        const csp = resource?.csp ?? data.csp;
+        const toolInfo = buildStandardToolInfo(data, resource);
+        const theme = buildMcpAppTheme(containerRef.current);
+        const hostLocale = normalizeHostLocale(i18n2.language);
+        const hostLanguage = getLocaleLanguage(hostLocale);
+        const hostDirection = getLocaleDirection(hostLocale);
+        postToApp(
+          jsonRpcResult(request.id, {
+            protocolVersion: "2026-01-26",
+            hostInfo: {
+              name: "xpert-chatkit",
+              version: "1.0.0",
+              title: "Xpert ChatKit"
+            },
+            hostCapabilities: {
+              serverTools: {},
+              serverResources: {},
+              openLinks: {},
+              logging: {},
+              message: {
+                text: {}
+              },
+              updateModelContext: {
+                text: {},
+                structuredContent: {}
+              },
+              sandbox: {
+                ...permissions ? { permissions } : {},
+                ...csp ? { csp } : {}
+              }
+            },
+            hostContext: {
+              toolInfo,
+              theme: theme.mode,
+              themeCssVariables: theme.cssVariables,
+              locale: hostLocale,
+              language: hostLanguage,
+              direction: hostDirection,
+              timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+              displayMode: "inline",
+              availableDisplayModes: ["inline"],
+              containerDimensions: getContainerDimensions(containerRef.current),
+              userAgent: "xpert-chatkit",
+              platform: "web",
+              deviceCapabilities: {
+                touch: navigator.maxTouchPoints > 0,
+                hover: window.matchMedia("(hover: hover)").matches
+              }
+            },
+            // Legacy compatibility for apps written before the 2026-01-26 result shape.
+            capabilities: {
+              displayModes: ["inline"],
+              serverTools: true,
+              serverResources: true,
+              openLinks: true
+            },
+            context: {
+              toolInfo: resource?.toolInfo ?? {
+                name: data.toolName,
+                toolCallId: data.toolCallId
+              },
+              theme: theme.mode,
+              themeCssVariables: theme.cssVariables,
+              locale: hostLocale,
+              language: hostLanguage,
+              direction: hostDirection,
+              timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+              displayMode: "inline",
+              availableDisplayModes: ["inline"],
+              containerDimensions: getContainerDimensions(containerRef.current),
+              userAgent: navigator.userAgent,
+              platform: navigator.platform
+            }
+          })
+        );
+        sendInitialToolNotifications();
+        return;
+      }
+      if (request.method === "ui/open-link") {
+        const href = isRecord5(request.params) && typeof request.params.url === "string" ? request.params.url : isRecord5(request.params) && typeof request.params.href === "string" ? request.params.href : null;
+        if (href && isHttpUrl(href)) {
+          window.open(href, "_blank", "noopener,noreferrer");
+          if (request.id !== void 0) {
+            postToApp(jsonRpcResult(request.id, {}));
+          }
+        } else if (request.id !== void 0) {
+          postToApp(jsonRpcResult(request.id, { isError: true }));
+        }
+        return;
+      }
+      if (request.method === "ui/update-model-context") {
+        modelContextRef.current = request.params;
+        try {
+          postToApp(await callHostRpc(request));
+        } catch (rpcError) {
+          postToApp(jsonRpcError(request.id, getErrorMessage(rpcError)));
+        }
+        return;
+      }
+      if (request.method === "ui/message") {
+        try {
+          if (!isRecord5(request.params) || request.params.role !== "user" || !Array.isArray(request.params.content)) {
+            throw new Error(
+              'ui/message params must include role "user" and content blocks'
+            );
+          }
+          const hostResponse = await callHostRpc(request);
+          if (isRecord5(hostResponse) && hostResponse.error) {
+            postToApp(hostResponse);
+            return;
+          }
+          const inputText = contentBlocksToText(request.params.content);
+          if (!inputText) {
+            throw new Error("ui/message content did not include text");
+          }
+          await submit(
+            {
+              input: {
+                input: inputText
+              }
+            },
+            {
+              ...streamIsLoading ? { followUpMode: "queue" } : {},
+              context: {
+                mcpApp: {
+                  appInstanceId: data.appInstanceId,
+                  resourceUri: data.resourceUri,
+                  toolName: data.toolName,
+                  toolCallId: data.toolCallId,
+                  modelContext: modelContextRef.current
+                }
+              }
+            }
+          );
+          postToApp(hostResponse);
+        } catch (messageError) {
+          postToApp(jsonRpcError(request.id, getErrorMessage(messageError)));
+        }
+        return;
+      }
+      if (request.id === void 0 && request.method.startsWith("ui/")) {
+        return;
+      }
+      try {
+        postToApp(await callHostRpc(request));
+      } catch (rpcError) {
+        postToApp(jsonRpcError(request.id, getErrorMessage(rpcError)));
+      }
+    };
+    window.addEventListener("message", handleMessage);
+    return () => {
+      window.removeEventListener("message", handleMessage);
+    };
+  }, [
+    callHostRpc,
+    data.appInstanceId,
+    data.csp,
+    data.permissions,
+    data.resourceUri,
+    data.title,
+    data.toolCallId,
+    data.toolName,
+    i18n2.language,
+    postToApp,
+    resource?.csp,
+    resource?.permissions,
+    resource?.toolInfo,
+    sendInitialToolNotifications,
+    streamIsLoading,
+    submit
+  ]);
+  const iframePermissions = resource?.permissions ?? data.permissions;
+  const iframeAllow = React35.useMemo(
+    () => buildIframeAllow(iframePermissions),
+    [iframePermissions]
+  );
+  const sandbox = React35.useMemo(() => buildSandboxAttribute(), []);
+  const prefersBorder = resource?.prefersBorder ?? data.prefersBorder ?? true;
+  const displayTitle = resolveLocalizedText3(resource?.title ?? data.title, i18n2.language) ?? data.toolName;
+  const displayDescription = resolveLocalizedText3(
+    resource?.description ?? data.description,
+    i18n2.language
+  );
+  const displayIcon = resource?.icon ?? data.icon;
+  return /* @__PURE__ */ jsxs28(
+    "div",
+    {
+      ref: containerRef,
+      className: cn(
+        "overflow-hidden rounded-lg border bg-background shadow-sm",
+        !prefersBorder && "border-transparent shadow-none",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs28("div", { className: "flex min-h-10 items-center justify-between gap-3 border-b px-3 py-2", children: [
+          /* @__PURE__ */ jsxs28("div", { className: "flex min-w-0 items-center gap-2", children: [
+            displayIcon ? /* @__PURE__ */ jsx41(
+              IconDefinitionRenderer,
+              {
+                icon: displayIcon,
+                size: 18,
+                className: "shrink-0",
+                decorative: true
+              }
+            ) : null,
+            /* @__PURE__ */ jsxs28("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx41("div", { className: "truncate text-sm font-medium", children: displayTitle }),
+              /* @__PURE__ */ jsx41("div", { className: "truncate text-[11px] text-muted-foreground", children: displayDescription ?? data.resourceUri })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx41(Badge, { variant: "secondary", className: "shrink-0 rounded-md", children: "MCP App" })
+        ] }),
+        isLoading ? /* @__PURE__ */ jsxs28("div", { className: "flex h-40 items-center justify-center gap-2 text-sm text-muted-foreground", children: [
+          /* @__PURE__ */ jsx41(Loader27, { className: "h-4 w-4 animate-spin" }),
+          /* @__PURE__ */ jsx41("span", { children: "Loading MCP App" })
+        ] }) : error ? /* @__PURE__ */ jsxs28("div", { className: "flex h-40 items-center justify-center gap-2 px-4 text-sm text-destructive", children: [
+          /* @__PURE__ */ jsx41(AlertCircle2, { className: "h-4 w-4 shrink-0" }),
+          /* @__PURE__ */ jsx41("span", { className: "min-w-0 break-words", children: error })
+        ] }) : srcDoc ? /* @__PURE__ */ jsx41(
+          "iframe",
+          {
+            ref: iframeRef,
+            title: displayTitle,
+            srcDoc,
+            className: "block w-full bg-background",
+            style: { height },
+            sandbox,
+            allow: iframeAllow,
+            referrerPolicy: "no-referrer"
+          }
+        ) : null
+      ]
+    }
+  );
+}
+// src/components/thread/messages/ai.tsx
+import { jsx as jsx42, jsxs as jsxs29 } 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";
@@ -11680,6 +12501,9 @@ function isWidgetComponent2(content) {
   const data = content.data;
   return data?.type === "Widget" && Array.isArray(data.widgets);
 }
+function isMcpAppComponent(content) {
+  return isMcpAppComponentData(content.data);
+}
 function isMemoryContent(content) {
   return content.type === "memory";
 }
@@ -11698,11 +12522,11 @@ function ReasoningBlock({
 }) {
   const blocks = reasoning.filter((item) => item.text?.trim());
   if (blocks.length === 0) return null;
-  return /* @__PURE__ */ jsx41("div", { className: "space-y-2", children: blocks.map((item, index) => /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42("div", { className: "space-y-2", children: blocks.map((item, index) => /* @__PURE__ */ jsx42(
     "div",
     {
       className: "rounded-lg border bg-muted/40 p-3 text-xs text-muted-foreground",
-      children: /* @__PURE__ */ jsx41("p", { className: "whitespace-pre-wrap wrap-break-word leading-relaxed", children: item.text })
+      children: /* @__PURE__ */ jsx42("p", { className: "whitespace-pre-wrap wrap-break-word leading-relaxed", children: item.text })
     },
     item.id ?? `reasoning-${index}`
   )) });
@@ -11710,12 +12534,12 @@ function ReasoningBlock({
 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__ */ jsxs28(Card, { children: [
-      /* @__PURE__ */ jsx41(CardHeader, { className: "space-y-1", children: /* @__PURE__ */ jsx41(CardTitle, { className: "text-sm", children: "Image" }) }),
-      /* @__PURE__ */ jsx41(CardContent, { className: "text-xs text-muted-foreground", children: safeJson3(content) })
+    return /* @__PURE__ */ jsxs29(Card, { children: [
+      /* @__PURE__ */ jsx42(CardHeader, { className: "space-y-1", children: /* @__PURE__ */ jsx42(CardTitle, { className: "text-sm", children: "Image" }) }),
+      /* @__PURE__ */ jsx42(CardContent, { className: "text-xs text-muted-foreground", children: safeJson3(content) })
     ] });
   }
-  return /* @__PURE__ */ jsx41("figure", { className: "overflow-hidden rounded-lg border bg-background", children: /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42("figure", { className: "overflow-hidden rounded-lg border bg-background", children: /* @__PURE__ */ jsx42(
     "img",
     {
       src: imageUrl,
@@ -11725,12 +12549,12 @@ function ImageBlock({ content }) {
   ) });
 }
 function MemoryBlock({ content }) {
-  return /* @__PURE__ */ jsxs28(Card, { children: [
-    /* @__PURE__ */ jsxs28(CardHeader, { className: "flex flex-row items-center justify-between gap-2", children: [
-      /* @__PURE__ */ jsx41(CardTitle, { className: "text-sm", children: "Memory" }),
-      /* @__PURE__ */ jsx41(Badge, { variant: "secondary", children: "Memory" })
+  return /* @__PURE__ */ jsxs29(Card, { children: [
+    /* @__PURE__ */ jsxs29(CardHeader, { className: "flex flex-row items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsx42(CardTitle, { className: "text-sm", children: "Memory" }),
+      /* @__PURE__ */ jsx42(Badge, { variant: "secondary", children: "Memory" })
     ] }),
-    /* @__PURE__ */ jsx41(CardContent, { className: "text-xs text-muted-foreground", children: /* @__PURE__ */ jsx41("pre", { className: "whitespace-pre-wrap wrap-break-word", children: safeJson3(content.data ?? []) }) })
+    /* @__PURE__ */ jsx42(CardContent, { className: "text-xs text-muted-foreground", children: /* @__PURE__ */ jsx42("pre", { className: "whitespace-pre-wrap wrap-break-word", children: safeJson3(content.data ?? []) }) })
   ] });
 }
 function parseStepDate2(value) {
@@ -11764,11 +12588,11 @@ function formatStepDuration3(durationMs) {
 }
 function ComponentBlock({ content }) {
   const { i18n: i18n2 } = useChatkitTranslation();
-  const [isExpanded, setIsExpanded] = React35.useState(false);
-  const contentRef = React35.useRef(null);
-  const shouldAutoScrollRef = React35.useRef(true);
-  const previousScrollTopRef = React35.useRef(0);
-  const [durationNow, setDurationNow] = React35.useState(() => Date.now());
+  const [isExpanded, setIsExpanded] = React36.useState(false);
+  const contentRef = React36.useRef(null);
+  const shouldAutoScrollRef = React36.useRef(true);
+  const previousScrollTopRef = React36.useRef(0);
+  const [durationNow, setDurationNow] = React36.useState(() => Date.now());
   const data = getToolStepData(content);
   const category = data.category ?? "Component";
   const title = getToolActivityLabel(content, i18n2.language);
@@ -11782,10 +12606,10 @@ function ComponentBlock({ content }) {
   const endedAt = parseStepDate2(data.end_date);
   const durationMs = createdAt === null ? null : Math.max(0, (endedAt ?? durationNow) - createdAt);
   const durationLabel = durationMs === null ? null : formatStepDuration3(durationMs);
-  React35.useEffect(() => {
+  React36.useEffect(() => {
     if (status === "running" && output !== null) setIsExpanded(true);
   }, [status, output]);
-  React35.useEffect(() => {
+  React36.useEffect(() => {
     if (status !== "running" || createdAt === null || endedAt !== null) {
       return;
     }
@@ -11797,7 +12621,7 @@ function ComponentBlock({ content }) {
       window.clearInterval(timer);
     };
   }, [createdAt, endedAt, status]);
-  React35.useEffect(() => {
+  React36.useEffect(() => {
     const element = contentRef.current;
     if (!element) return;
     previousScrollTopRef.current = element.scrollTop;
@@ -11819,7 +12643,7 @@ function ComponentBlock({ content }) {
       element.removeEventListener("scroll", updateAutoScrollState);
     };
   }, [isExpanded]);
-  React35.useEffect(() => {
+  React36.useEffect(() => {
     if (status !== "running") {
       shouldAutoScrollRef.current = true;
       return;
@@ -11832,15 +12656,15 @@ function ComponentBlock({ content }) {
   }, [isExpanded, output, status]);
   const config = status ? toolStatusConfig[status] : null;
   const StatusIcon = config?.icon;
-  return /* @__PURE__ */ jsxs28(Card, { children: [
-    /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29(Card, { children: [
+    /* @__PURE__ */ jsxs29(
       CardHeader,
       {
         className: "flex flex-row items-center justify-between gap-2 px-2 py-1 cursor-pointer",
         onClick: () => setIsExpanded(!isExpanded),
         children: [
-          /* @__PURE__ */ jsxs28("div", { className: "flex items-center space-x-1 flex-1 min-w-0", children: [
-            status && StatusIcon && /* @__PURE__ */ jsx41(
+          /* @__PURE__ */ jsxs29("div", { className: "flex items-center space-x-1 flex-1 min-w-0", children: [
+            status && StatusIcon && /* @__PURE__ */ jsx42(
               StatusIcon,
               {
                 className: cn(
@@ -11850,20 +12674,20 @@ function ComponentBlock({ content }) {
                 )
               }
             ),
-            /* @__PURE__ */ jsx41(CardTitle, { className: "text-sm truncate", children: title })
+            /* @__PURE__ */ jsx42(CardTitle, { className: "text-sm truncate", children: title })
           ] }),
-          /* @__PURE__ */ jsxs28("div", { className: "flex flex-wrap items-center gap-2 shrink-0", children: [
-            durationLabel && /* @__PURE__ */ jsxs28("div", { className: "inline-flex items-center gap-1 text-[11px] text-muted-foreground tabular-nums", children: [
-              /* @__PURE__ */ jsx41(Clock32, { className: "h-3 w-3" }),
-              /* @__PURE__ */ jsx41("span", { children: durationLabel })
+          /* @__PURE__ */ jsxs29("div", { className: "flex flex-wrap items-center gap-2 shrink-0", children: [
+            durationLabel && /* @__PURE__ */ jsxs29("div", { className: "inline-flex items-center gap-1 text-[11px] text-muted-foreground tabular-nums", children: [
+              /* @__PURE__ */ jsx42(Clock32, { className: "h-3 w-3" }),
+              /* @__PURE__ */ jsx42("span", { children: durationLabel })
             ] }),
-            /* @__PURE__ */ jsx41(Badge, { variant: "secondary", className: "rounded-lg px-1.5", children: category }),
-            /* @__PURE__ */ jsx41(
+            /* @__PURE__ */ jsx42(Badge, { variant: "secondary", className: "rounded-lg px-1.5", children: category }),
+            /* @__PURE__ */ jsx42(
               "button",
               {
                 className: "text-muted-foreground hover:text-foreground transition-colors",
                 "aria-label": isExpanded ? "Collapse" : "Expand",
-                children: /* @__PURE__ */ jsx41(
+                children: /* @__PURE__ */ jsx42(
                   ChevronDown4,
                   {
                     className: cn(
@@ -11878,53 +12702,53 @@ function ComponentBlock({ content }) {
         ]
       }
     ),
-    isExpanded && /* @__PURE__ */ jsxs28(
+    isExpanded && /* @__PURE__ */ jsxs29(
       CardContent,
       {
         ref: contentRef,
         className: "text-xs text-muted-foreground max-h-60 overflow-auto",
         children: [
-          data.input && /* @__PURE__ */ jsx41("pre", { className: "whitespace-pre-wrap wrap-break-word", children: formatDisplayValue3(data.input) }),
-          error ? /* @__PURE__ */ jsx41("pre", { className: "whitespace-pre-wrap wrap-break-word text-destructive", children: formatDisplayValue3(error) }) : hasOutput && /* @__PURE__ */ jsx41("pre", { className: "whitespace-pre-wrap wrap-break-word", children: formatDisplayValue3(fallback) })
+          data.input && /* @__PURE__ */ jsx42("pre", { className: "whitespace-pre-wrap wrap-break-word", children: formatDisplayValue3(data.input) }),
+          error ? /* @__PURE__ */ jsx42("pre", { className: "whitespace-pre-wrap wrap-break-word text-destructive", children: formatDisplayValue3(error) }) : hasOutput && /* @__PURE__ */ jsx42("pre", { className: "whitespace-pre-wrap wrap-break-word", children: formatDisplayValue3(fallback) })
         ]
       }
     )
   ] });
 }
 function UnknownBlock({ content }) {
-  return /* @__PURE__ */ jsxs28(Card, { children: [
-    /* @__PURE__ */ jsxs28(CardHeader, { className: "flex flex-row items-center justify-between gap-2", children: [
-      /* @__PURE__ */ jsx41(CardTitle, { className: "text-sm", children: "Assistant Content" }),
-      /* @__PURE__ */ jsx41(Badge, { variant: "outline", children: content.type ?? "unknown" })
+  return /* @__PURE__ */ jsxs29(Card, { children: [
+    /* @__PURE__ */ jsxs29(CardHeader, { className: "flex flex-row items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsx42(CardTitle, { className: "text-sm", children: "Assistant Content" }),
+      /* @__PURE__ */ jsx42(Badge, { variant: "outline", children: content.type ?? "unknown" })
     ] }),
-    /* @__PURE__ */ jsx41(CardContent, { className: "text-xs text-muted-foreground", children: /* @__PURE__ */ jsx41("pre", { className: "whitespace-pre-wrap break-words", children: safeJson3(content) }) })
+    /* @__PURE__ */ jsx42(CardContent, { className: "text-xs text-muted-foreground", children: /* @__PURE__ */ jsx42("pre", { className: "whitespace-pre-wrap break-words", children: safeJson3(content) }) })
   ] });
 }
 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__ */ jsx41("div", { className: textClassName, children: /* @__PURE__ */ jsx41(MarkdownText, { children: content }) }, `text-${index}`);
+    return /* @__PURE__ */ jsx42("div", { className: textClassName, children: /* @__PURE__ */ jsx42(MarkdownText, { children: content }) }, `text-${index}`);
   }
   if (isThreadContextUsageRenderArtifact(content)) {
     return null;
   }
   if (isTextContent3(content)) {
-    return /* @__PURE__ */ jsx41("div", { className: textClassName, children: /* @__PURE__ */ jsx41(MarkdownText, { children: content.text }) }, content.id ?? `text-${index}`);
+    return /* @__PURE__ */ jsx42("div", { className: textClassName, children: /* @__PURE__ */ jsx42(MarkdownText, { children: content.text }) }, content.id ?? `text-${index}`);
   }
   if (isReasoningContent3(content)) {
-    return /* @__PURE__ */ jsx41("div", { children: /* @__PURE__ */ jsx41(ReasoningBlock, { reasoning: [content] }) }, content.id ?? `reasoning-${index}`);
+    return /* @__PURE__ */ jsx42("div", { children: /* @__PURE__ */ jsx42(ReasoningBlock, { reasoning: [content] }) }, content.id ?? `reasoning-${index}`);
   }
   if (isImageContent(content)) {
-    return /* @__PURE__ */ jsx41("div", { children: /* @__PURE__ */ jsx41(ImageBlock, { content }) }, content.id ?? `image-${index}`);
+    return /* @__PURE__ */ jsx42("div", { children: /* @__PURE__ */ jsx42(ImageBlock, { content }) }, content.id ?? `image-${index}`);
   }
   if (isComponentContent3(content)) {
     if (isContextCompressionComponent(content)) {
-      return /* @__PURE__ */ jsx41(
+      return /* @__PURE__ */ jsx42(
         "div",
         {
           className: "w-full",
-          children: /* @__PURE__ */ jsx41(ContextCompressionMessage, { content })
+          children: /* @__PURE__ */ jsx42(ContextCompressionMessage, { content })
         },
         content.id ?? `context-compression-${index}`
       );
@@ -11934,13 +12758,16 @@ function renderContentItem(content, index, message, lookupMessages, options) {
       lookupMessages
     );
     if (requestUserInputResult) {
-      return /* @__PURE__ */ jsx41("div", { children: /* @__PURE__ */ jsx41(RequestUserInputResultCard, { result: requestUserInputResult }) }, content.id ?? `request-user-input-result-${index}`);
+      return /* @__PURE__ */ jsx42("div", { children: /* @__PURE__ */ jsx42(RequestUserInputResultCard, { result: requestUserInputResult }) }, content.id ?? `request-user-input-result-${index}`);
     }
     if (isWidgetComponent2(content)) {
-      return /* @__PURE__ */ jsx41("div", { children: /* @__PURE__ */ jsx41(WidgetMessage, { messageId, data: content.data }) }, content.id ?? `widget-${index}`);
+      return /* @__PURE__ */ jsx42("div", { children: /* @__PURE__ */ jsx42(WidgetMessage, { messageId, data: content.data }) }, content.id ?? `widget-${index}`);
+    }
+    if (isMcpAppComponent(content)) {
+      return /* @__PURE__ */ jsx42("div", { children: /* @__PURE__ */ jsx42(McpAppMessage, { data: content.data }) }, content.id ?? `mcp-app-${index}`);
     }
     if (getComponentMessagePresentation(content, getToolStepData(content)) === "grouped-step") {
-      return /* @__PURE__ */ jsx41("div", { children: /* @__PURE__ */ jsx41(
+      return /* @__PURE__ */ jsx42("div", { children: /* @__PURE__ */ jsx42(
         ToolComponentGroup,
         {
           items: [content],
@@ -11951,15 +12778,15 @@ function renderContentItem(content, index, message, lookupMessages, options) {
         }
       ) }, content.id ?? `component-group-${index}`);
     }
-    return /* @__PURE__ */ jsx41("div", { children: /* @__PURE__ */ jsx41(ComponentBlock, { content }) }, content.id ?? `component-${index}`);
+    return /* @__PURE__ */ jsx42("div", { children: /* @__PURE__ */ jsx42(ComponentBlock, { content }) }, content.id ?? `component-${index}`);
   }
   if (isMemoryContent(content)) {
-    return /* @__PURE__ */ jsx41("div", { children: /* @__PURE__ */ jsx41(MemoryBlock, { content }) }, content.id ?? `memory-${index}`);
+    return /* @__PURE__ */ jsx42("div", { children: /* @__PURE__ */ jsx42(MemoryBlock, { content }) }, content.id ?? `memory-${index}`);
   }
   if (isAgentEventContent(content)) {
-    return /* @__PURE__ */ jsx41("div", { children: /* @__PURE__ */ jsx41(AgentEventRow, { content }) }, content.id ?? `agent-event-${index}`);
+    return /* @__PURE__ */ jsx42("div", { children: /* @__PURE__ */ jsx42(AgentEventRow, { content }) }, content.id ?? `agent-event-${index}`);
   }
-  return /* @__PURE__ */ jsx41("div", { children: /* @__PURE__ */ jsx41(UnknownBlock, { content }) }, content.id ?? `unknown-${index}`);
+  return /* @__PURE__ */ jsx42("div", { children: /* @__PURE__ */ jsx42(UnknownBlock, { content }) }, content.id ?? `unknown-${index}`);
 }
 function renderContentUnit(unit, message, lookupMessages, hasFollowingItem, options) {
   if (unit.type === "item") {
@@ -11970,7 +12797,7 @@ function renderContentUnit(unit, message, lookupMessages, hasFollowingItem, opti
       isAgentOutput: options?.isAgentOutput
     });
   }
-  return /* @__PURE__ */ jsx41("div", { children: /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42("div", { children: /* @__PURE__ */ jsx42(
     ToolComponentGroup,
     {
       items: unit.items,
@@ -11986,7 +12813,7 @@ function renderEntryBatch(entries, message, lookupMessages, hasFollowingItem, op
   const renderUnits = buildToolComponentRenderUnits(
     entries.map((entry) => entry.item),
     {
-      shouldGroupComponent: (item) => getRequestUserInputResultCardData(item, lookupMessages) === null
+      shouldGroupComponent: (item) => getRequestUserInputResultCardData(item, lookupMessages) === null && !isMcpAppComponent(item)
     }
   );
   return renderUnits.map(
@@ -12007,7 +12834,7 @@ function renderAssistantRenderUnits(units, message, lookupMessages, options, dep
     const batch = entryBatch;
     entryBatch = [];
     rendered.push(
-      /* @__PURE__ */ jsx41(React35.Fragment, { children: renderEntryBatch(batch, message, lookupMessages, hasFollowingItem, {
+      /* @__PURE__ */ jsx42(React36.Fragment, { children: renderEntryBatch(batch, message, lookupMessages, hasFollowingItem, {
         ...options,
         isAgentOutput: depth > 0
       }) }, `entries-${batch[0]?.order ?? rendered.length}`)
@@ -12024,7 +12851,7 @@ function renderAssistantRenderUnits(units, message, lookupMessages, options, dep
     }
     flushEntries(true);
     rendered.push(
-      /* @__PURE__ */ jsx41(
+      /* @__PURE__ */ jsx42(
         AgentRunGroup,
         {
           node: unit.node,
@@ -12049,7 +12876,7 @@ function renderContent(message, lookupMessages, options) {
     message
   );
   if (renderTree.hasAgentRuns) {
-    return /* @__PURE__ */ jsx41("div", { className: assistantMessageStackClassName, children: renderAssistantRenderUnits(
+    return /* @__PURE__ */ jsx42("div", { className: assistantMessageStackClassName, children: renderAssistantRenderUnits(
       renderTree.units,
       message,
       lookupMessages,
@@ -12059,13 +12886,13 @@ function renderContent(message, lookupMessages, options) {
   const content = message.content;
   if (typeof content === "string") {
     if (!content.trim()) return null;
-    return /* @__PURE__ */ jsx41(MarkdownText, { children: content });
+    return /* @__PURE__ */ jsx42(MarkdownText, { children: content });
   }
   if (!Array.isArray(content) || content.length === 0) return null;
   const renderUnits = buildToolComponentRenderUnits(content, {
-    shouldGroupComponent: (item) => getRequestUserInputResultCardData(item, lookupMessages) === null
+    shouldGroupComponent: (item) => getRequestUserInputResultCardData(item, lookupMessages) === null && !isMcpAppComponent(item)
   });
-  return /* @__PURE__ */ jsx41("div", { className: "space-y-3", children: renderUnits.map(
+  return /* @__PURE__ */ jsx42("div", { className: "space-y-3", children: renderUnits.map(
     (unit, index) => renderContentUnit(
       unit,
       message,
@@ -12085,7 +12912,7 @@ function AssistantStreamingIndicator({
     thinking: t("message.thinking"),
     answering: t("message.answering")
   };
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29(
     "div",
     {
       className: cn(
@@ -12093,18 +12920,18 @@ function AssistantStreamingIndicator({
         className
       ),
       children: [
-        status === "loading" && /* @__PURE__ */ jsx41(Loader27, { className: "h-3.5 w-3.5 animate-spin" }),
-        status === "thinking" && /* @__PURE__ */ jsxs28("div", { className: "flex items-end gap-1", "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsx41("span", { className: "h-1.5 w-1.5 rounded-full bg-current animate-bounce [animation-delay:-0.3s]" }),
-          /* @__PURE__ */ jsx41("span", { className: "h-1.5 w-1.5 rounded-full bg-current animate-bounce [animation-delay:-0.15s]" }),
-          /* @__PURE__ */ jsx41("span", { className: "h-1.5 w-1.5 rounded-full bg-current animate-bounce" })
+        status === "loading" && /* @__PURE__ */ jsx42(Loader28, { className: "h-3.5 w-3.5 animate-spin" }),
+        status === "thinking" && /* @__PURE__ */ jsxs29("div", { className: "flex items-end gap-1", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx42("span", { className: "h-1.5 w-1.5 rounded-full bg-current animate-bounce [animation-delay:-0.3s]" }),
+          /* @__PURE__ */ jsx42("span", { className: "h-1.5 w-1.5 rounded-full bg-current animate-bounce [animation-delay:-0.15s]" }),
+          /* @__PURE__ */ jsx42("span", { className: "h-1.5 w-1.5 rounded-full bg-current animate-bounce" })
         ] }),
-        status === "answering" && /* @__PURE__ */ jsxs28("div", { className: "flex items-end gap-1", "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsx41("span", { className: "h-2 w-0.5 rounded-full bg-current animate-pulse [animation-delay:-0.25s]" }),
-          /* @__PURE__ */ jsx41("span", { className: "h-3 w-0.5 rounded-full bg-current animate-pulse [animation-delay:-0.1s]" }),
-          /* @__PURE__ */ jsx41("span", { className: "h-2.5 w-0.5 rounded-full bg-current animate-pulse" })
+        status === "answering" && /* @__PURE__ */ jsxs29("div", { className: "flex items-end gap-1", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx42("span", { className: "h-2 w-0.5 rounded-full bg-current animate-pulse [animation-delay:-0.25s]" }),
+          /* @__PURE__ */ jsx42("span", { className: "h-3 w-0.5 rounded-full bg-current animate-pulse [animation-delay:-0.1s]" }),
+          /* @__PURE__ */ jsx42("span", { className: "h-2.5 w-0.5 rounded-full bg-current animate-pulse" })
         ] }),
-        /* @__PURE__ */ jsx41("span", { children: labelMap[status] })
+        /* @__PURE__ */ jsx42("span", { children: labelMap[status] })
       ]
     }
   );
@@ -12133,42 +12960,42 @@ function AssistantMessage({
     organizationId,
     apiUrl
   });
-  const reasoningNode = hasReasoning ? /* @__PURE__ */ jsx41(ReasoningBlock, { reasoning: rootReasoning ?? [] }) : null;
+  const reasoningNode = hasReasoning ? /* @__PURE__ */ jsx42(ReasoningBlock, { reasoning: rootReasoning ?? [] }) : null;
   if (!hasContent && !hasReasoning && !resolvedStreamingStatus) return null;
   const streamingClass = isStreaming ? "streaming-active" : "";
   if (!hasContent && !hasReasoning && resolvedStreamingStatus) {
-    return /* @__PURE__ */ jsx41("div", { className: cn("space-y-3", streamingClass, className), children: /* @__PURE__ */ jsx41(AssistantStreamingIndicator, { status: resolvedStreamingStatus }) });
+    return /* @__PURE__ */ jsx42("div", { className: cn("space-y-3", streamingClass, className), children: /* @__PURE__ */ jsx42(AssistantStreamingIndicator, { status: resolvedStreamingStatus }) });
   }
   if (hasContent && hasReasoning) {
-    return /* @__PURE__ */ jsxs28("div", { className: cn("space-y-3", streamingClass, className), children: [
-      /* @__PURE__ */ jsxs28(
+    return /* @__PURE__ */ jsxs29("div", { className: cn("space-y-3", streamingClass, className), children: [
+      /* @__PURE__ */ jsxs29(
         Tabs,
         {
           defaultValue: message.status === "reasoning" ? "reasoning" : "answer",
           className: "w-full",
           children: [
-            /* @__PURE__ */ jsxs28(TabsList, { className: "", children: [
-              /* @__PURE__ */ jsx41(TabsTrigger, { value: "answer", children: t("message.answer") }),
-              /* @__PURE__ */ jsx41(TabsTrigger, { value: "reasoning", children: t("message.reasoning") })
+            /* @__PURE__ */ jsxs29(TabsList, { className: "", children: [
+              /* @__PURE__ */ jsx42(TabsTrigger, { value: "answer", children: t("message.answer") }),
+              /* @__PURE__ */ jsx42(TabsTrigger, { value: "reasoning", children: t("message.reasoning") })
             ] }),
-            /* @__PURE__ */ jsx41(TabsContent, { value: "answer", className: "space-y-3", children: answerNode }),
-            /* @__PURE__ */ jsx41(TabsContent, { value: "reasoning", className: "space-y-3", children: reasoningNode })
+            /* @__PURE__ */ jsx42(TabsContent, { value: "answer", className: "space-y-3", children: answerNode }),
+            /* @__PURE__ */ jsx42(TabsContent, { value: "reasoning", className: "space-y-3", children: reasoningNode })
           ]
         }
       ),
-      resolvedStreamingStatus ? /* @__PURE__ */ jsx41(AssistantStreamingIndicator, { status: resolvedStreamingStatus }) : null
+      resolvedStreamingStatus ? /* @__PURE__ */ jsx42(AssistantStreamingIndicator, { status: resolvedStreamingStatus }) : null
     ] });
   }
-  return /* @__PURE__ */ jsxs28("div", { className: cn("space-y-3", streamingClass, className), children: [
+  return /* @__PURE__ */ jsxs29("div", { className: cn("space-y-3", streamingClass, className), children: [
     hasReasoning ? reasoningNode : answerNode,
-    resolvedStreamingStatus ? /* @__PURE__ */ jsx41(AssistantStreamingIndicator, { status: resolvedStreamingStatus }) : null
+    resolvedStreamingStatus ? /* @__PURE__ */ jsx42(AssistantStreamingIndicator, { status: resolvedStreamingStatus }) : null
   ] });
 }
 // src/components/thread/MessageActions.tsx
-import * as React36 from "react";
+import * as React37 from "react";
 import { Check as Check5, Copy as Copy3, RefreshCw as RefreshCw2 } from "lucide-react";
-import { jsx as jsx42, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs30 } from "react/jsx-runtime";
 function MessageActions({
   content,
   isAssistant = false,
@@ -12177,7 +13004,7 @@ function MessageActions({
   className
 }) {
   const { t } = useChatkitTranslation();
-  const [copied, setCopied] = React36.useState(false);
+  const [copied, setCopied] = React37.useState(false);
   const handleCopy = async () => {
     try {
       await navigator.clipboard.writeText(content);
@@ -12190,7 +13017,7 @@ function MessageActions({
   if (isStreaming) {
     return null;
   }
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs30(
     "div",
     {
       className: cn(
@@ -12198,7 +13025,7 @@ function MessageActions({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx42(
+        /* @__PURE__ */ jsx43(
           "button",
           {
             type: "button",
@@ -12208,17 +13035,17 @@ function MessageActions({
               copied && "text-green-500"
             ),
             title: copied ? t("messageActions.copied") : t("messageActions.copy"),
-            children: copied ? /* @__PURE__ */ jsx42(Check5, { size: 14 }) : /* @__PURE__ */ jsx42(Copy3, { size: 14 })
+            children: copied ? /* @__PURE__ */ jsx43(Check5, { size: 14 }) : /* @__PURE__ */ jsx43(Copy3, { size: 14 })
           }
         ),
-        isAssistant && onRetry && /* @__PURE__ */ jsx42(
+        isAssistant && onRetry && /* @__PURE__ */ jsx43(
           "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__ */ jsx42(RefreshCw2, { size: 14 })
+            children: /* @__PURE__ */ jsx43(RefreshCw2, { size: 14 })
           }
         )
       ]
@@ -12239,18 +13066,18 @@ import {
   Sparkles as Sparkles3,
   Zap
 } from "lucide-react";
-import { jsx as jsx43, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs31 } from "react/jsx-runtime";
 function getIconComponent2(icon) {
   const iconMap = {
-    "circle-question": /* @__PURE__ */ jsx43(HelpCircle, { size: 20 }),
-    "lightbulb": /* @__PURE__ */ jsx43(Lightbulb2, { size: 20 }),
-    "sparkle": /* @__PURE__ */ jsx43(Sparkles3, { size: 20 }),
-    "write": /* @__PURE__ */ jsx43(Pencil3, { size: 20 }),
-    "search": /* @__PURE__ */ jsx43(Search3, { size: 20 }),
-    "globe": /* @__PURE__ */ jsx43(Globe2, { size: 20 }),
-    "book-open": /* @__PURE__ */ jsx43(BookOpen2, { size: 20 }),
-    "compass": /* @__PURE__ */ jsx43(Compass, { size: 20 }),
-    "bolt": /* @__PURE__ */ jsx43(Zap, { size: 20 })
+    "circle-question": /* @__PURE__ */ jsx44(HelpCircle, { size: 20 }),
+    "lightbulb": /* @__PURE__ */ jsx44(Lightbulb2, { size: 20 }),
+    "sparkle": /* @__PURE__ */ jsx44(Sparkles3, { size: 20 }),
+    "write": /* @__PURE__ */ jsx44(Pencil3, { size: 20 }),
+    "search": /* @__PURE__ */ jsx44(Search3, { size: 20 }),
+    "globe": /* @__PURE__ */ jsx44(Globe2, { size: 20 }),
+    "book-open": /* @__PURE__ */ jsx44(BookOpen2, { size: 20 }),
+    "compass": /* @__PURE__ */ jsx44(Compass, { size: 20 }),
+    "bolt": /* @__PURE__ */ jsx44(Zap, { size: 20 })
   };
   return icon ? iconMap[icon] || iconMap["sparkle"] : iconMap["sparkle"];
 }
@@ -12266,7 +13093,7 @@ function StartScreen({
   const greeting = startScreen?.greeting ?? t("startScreen.greeting");
   const prompts = startScreen?.prompts ?? [];
   const editPromptLabel = t("startScreen.editPrompt");
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs31(
     "div",
     {
       className: cn(
@@ -12274,8 +13101,8 @@ function StartScreen({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx43("div", { className: "mb-8 text-center", children: /* @__PURE__ */ jsx43("h2", { className: "text-2xl font-semibold text-foreground mb-2", children: greeting }) }),
-        prompts.length > 0 && /* @__PURE__ */ jsx43("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ jsx43("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: prompts.map((item, index) => /* @__PURE__ */ jsxs30(
+        /* @__PURE__ */ jsx44("div", { className: "mb-8 text-center", children: /* @__PURE__ */ jsx44("h2", { className: "text-2xl font-semibold text-foreground mb-2", children: greeting }) }),
+        prompts.length > 0 && /* @__PURE__ */ jsx44("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ jsx44("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: prompts.map((item, index) => /* @__PURE__ */ jsxs31(
           "div",
           {
             className: cn(
@@ -12284,7 +13111,7 @@ function StartScreen({
               "focus-within:ring-2 focus-within:ring-primary/20"
             ),
             children: [
-              /* @__PURE__ */ jsxs30(
+              /* @__PURE__ */ jsxs31(
                 "button",
                 {
                   type: "button",
@@ -12295,12 +13122,12 @@ function StartScreen({
                     "focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
                   ),
                   children: [
-                    /* @__PURE__ */ jsx43("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__ */ jsx43("span", { className: "text-sm font-medium text-foreground", children: item.label })
+                    /* @__PURE__ */ jsx44("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__ */ jsx44("span", { className: "text-sm font-medium text-foreground", children: item.label })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx43(
+              /* @__PURE__ */ jsx44(
                 "button",
                 {
                   type: "button",
@@ -12313,7 +13140,7 @@ function StartScreen({
                     "rounded-r-xl transition-colors hover:bg-muted hover:text-foreground",
                     "focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
                   ),
-                  children: /* @__PURE__ */ jsx43(Pencil3, { size: 16 })
+                  children: /* @__PURE__ */ jsx44(Pencil3, { size: 16 })
                 }
               )
             ]
@@ -12326,7 +13153,7 @@ function StartScreen({
 }
 // src/hooks/useThreads.ts
-import * as React38 from "react";
+import * as React39 from "react";
 var DEFAULT_LIMIT = 50;
 var getThreadTitle = (threadRecord) => {
   const title = threadRecord.title?.trim();
@@ -12341,7 +13168,7 @@ var toDate = (value) => {
   if (Number.isNaN(timestamp)) return void 0;
   return new Date(timestamp);
 };
-var getErrorMessage = (error) => {
+var getErrorMessage2 = (error) => {
   if (!error) return void 0;
   if (error instanceof Error) return error.message;
   if (typeof error === "string") return error;
@@ -12379,16 +13206,16 @@ function useThreads(limit = DEFAULT_LIMIT) {
     isLoading: isStreamLoading,
     error: streamError
   } = useStreamContext();
-  const [threadRecords, setThreadRecords] = React38.useState([]);
-  const [isLoading, setIsLoading] = React38.useState(false);
-  const [error, setError] = React38.useState(null);
-  const upsertThreadRecord = React38.useCallback((threadRecord) => {
+  const [threadRecords, setThreadRecords] = React39.useState([]);
+  const [isLoading, setIsLoading] = React39.useState(false);
+  const [error, setError] = React39.useState(null);
+  const upsertThreadRecord = React39.useCallback((threadRecord) => {
     setThreadRecords((prev) => {
       const next = prev.filter((item) => item.id !== threadRecord.id);
       return sortThreadRecords([threadRecord, ...next]);
     });
   }, []);
-  const refreshThreads = React38.useCallback(async () => {
+  const refreshThreads = React39.useCallback(async () => {
     setIsLoading(true);
     setError(null);
     try {
@@ -12404,7 +13231,7 @@ function useThreads(limit = DEFAULT_LIMIT) {
       setIsLoading(false);
     }
   }, [client, limit, assistantId]);
-  const createThread = React38.useCallback(
+  const createThread = React39.useCallback(
     async (input) => {
       setError(null);
       const payload = {};
@@ -12418,7 +13245,7 @@ function useThreads(limit = DEFAULT_LIMIT) {
     },
     [client, upsertThreadRecord]
   );
-  const updateThread = React38.useCallback(
+  const updateThread = React39.useCallback(
     async (recordId, payload) => {
       setError(null);
       const updated = await client.conversations.update(recordId, payload);
@@ -12427,7 +13254,7 @@ function useThreads(limit = DEFAULT_LIMIT) {
     },
     [client, upsertThreadRecord]
   );
-  const deleteThread = React38.useCallback(
+  const deleteThread = React39.useCallback(
     async (recordId) => {
       setError(null);
       await client.conversations.delete(recordId);
@@ -12435,11 +13262,11 @@ function useThreads(limit = DEFAULT_LIMIT) {
     },
     [client]
   );
-  React38.useEffect(() => {
+  React39.useEffect(() => {
     if (!isReady) return;
     void refreshThreads();
   }, [refreshThreads, isReady]);
-  React38.useEffect(() => {
+  React39.useEffect(() => {
     if (!threadId || !isStreamLoading) return;
     const now = (/* @__PURE__ */ new Date()).toISOString();
     const busyStatus = "busy";
@@ -12460,8 +13287,8 @@ function useThreads(limit = DEFAULT_LIMIT) {
       return changed ? sortThreadRecords(next) : prev;
     });
   }, [threadId, isStreamLoading]);
-  React38.useEffect(() => {
-    const message = getErrorMessage(streamError)?.trim();
+  React39.useEffect(() => {
+    const message = getErrorMessage2(streamError)?.trim();
     if (!threadId || !message) return;
     const now = (/* @__PURE__ */ new Date()).toISOString();
     const errorStatus = "error";
@@ -12482,7 +13309,7 @@ function useThreads(limit = DEFAULT_LIMIT) {
       return changed ? sortThreadRecords(next) : prev;
     });
   }, [threadId, streamError]);
-  React38.useEffect(() => {
+  React39.useEffect(() => {
     if (!isReady || !threadId || isStreamLoading) return;
     let cancelled = false;
     void client.conversations.search({ where: { threadId }, limit: 1 }).then((result) => {
@@ -12496,7 +13323,7 @@ function useThreads(limit = DEFAULT_LIMIT) {
       cancelled = true;
     };
   }, [client, threadId, upsertThreadRecord, isReady, isStreamLoading]);
-  const threads = React38.useMemo(
+  const threads = React39.useMemo(
     () => threadRecords.map((threadRecord) => toThreadItem(threadRecord)),
     [threadRecords]
   );
@@ -12513,10 +13340,10 @@ function useThreads(limit = DEFAULT_LIMIT) {
 }
 // src/components/thread/context-usage-indicator.tsx
-import * as React39 from "react";
+import * as React40 from "react";
 // src/components/ui/progress-circle.tsx
-import { jsx as jsx44, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs32 } from "react/jsx-runtime";
 function clamp2(input, a, b) {
   return Math.max(Math.min(input, Math.max(a, b)), Math.min(a, b));
 }
@@ -12539,7 +13366,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__ */ jsxs31(
+    /* @__PURE__ */ jsxs32(
       "svg",
       {
         role: "progressbar",
@@ -12550,8 +13377,8 @@ var ProgressCircle = ({ value, className, ...restSvgProps }) => {
         "aria-valuemax": 100,
         ...restSvgProps,
         children: [
-          /* @__PURE__ */ jsx44("circle", { ...commonParams, className: "stroke-current/25" }),
-          /* @__PURE__ */ jsx44(
+          /* @__PURE__ */ jsx45("circle", { ...commonParams, className: "stroke-current/25" }),
+          /* @__PURE__ */ jsx45(
             "circle",
             {
               ...commonParams,
@@ -12570,7 +13397,7 @@ var ProgressCircle = ({ value, className, ...restSvgProps }) => {
 };
 // src/components/thread/context-usage-indicator.tsx
-import { jsx as jsx45, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs33 } from "react/jsx-runtime";
 var kNumberFormatter = new Intl.NumberFormat("en-US", {
   minimumFractionDigits: 0,
   maximumFractionDigits: 1
@@ -12603,21 +13430,22 @@ function ContextUsageIndicator({
 }) {
   const { t } = useChatkitTranslation();
   const stream = useStreamContext();
-  const [maxContextSize, setMaxContextSize] = React39.useState(null);
-  const [usedContextSize, setUsedContextSize] = React39.useState(null);
-  const [assistantAgentKey, setAssistantAgentKey] = React39.useState(null);
-  const latestRealtimeUsageRef = React39.useRef({
+  const [maxContextSize, setMaxContextSize] = React40.useState(null);
+  const [usedContextSize, setUsedContextSize] = React40.useState(null);
+  const [assistantAgentKey, setAssistantAgentKey] = React40.useState(null);
+  const latestRealtimeUsageRef = React40.useRef({
     threadId: null,
     agentKey: null,
     usedTokens: null
   });
-  const realtimeUsage = React39.useMemo(
+  const realtimeUsage = React40.useMemo(
     () => getThreadContextUsage(stream.contextUsageByAgentKey, assistantAgentKey),
     [assistantAgentKey, stream.contextUsageByAgentKey]
   );
   const realtimeUsedContextSize = getThreadContextUsageTotalTokens(realtimeUsage);
-  React39.useEffect(() => {
-    if (!stream.client || !stream.assistantId) {
+  const hasApiConfiguration = Boolean(stream.apiUrl?.trim() && stream.apiKey?.trim());
+  React40.useEffect(() => {
+    if (!hasApiConfiguration || !stream.client || !stream.assistantId) {
       setMaxContextSize(null);
       setAssistantAgentKey(null);
       return;
@@ -12635,20 +13463,20 @@ function ContextUsageIndicator({
     return () => {
       cancelled = true;
     };
-  }, [stream.client, stream.assistantId]);
-  React39.useEffect(() => {
+  }, [hasApiConfiguration, stream.client, stream.assistantId]);
+  React40.useEffect(() => {
     latestRealtimeUsageRef.current = {
       threadId: stream.threadId ?? null,
       agentKey: assistantAgentKey,
       usedTokens: realtimeUsedContextSize
     };
   }, [assistantAgentKey, realtimeUsedContextSize, stream.threadId]);
-  React39.useEffect(() => {
+  React40.useEffect(() => {
     if (realtimeUsedContextSize == null) return;
     setUsedContextSize(realtimeUsedContextSize);
   }, [realtimeUsedContextSize]);
-  React39.useEffect(() => {
-    if (!stream.client) {
+  React40.useEffect(() => {
+    if (!hasApiConfiguration || !stream.client) {
       setUsedContextSize(null);
       return;
     }
@@ -12684,6 +13512,7 @@ function ContextUsageIndicator({
     };
   }, [
     assistantAgentKey,
+    hasApiConfiguration,
     realtimeUsedContextSize,
     stream.apiKey,
     stream.apiUrl,
@@ -12712,8 +13541,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__ */ jsxs32(Tooltip, { children: [
-    /* @__PURE__ */ jsx45(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsxs33(Tooltip, { children: [
+    /* @__PURE__ */ jsx46(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx46(
       "button",
       {
         type: "button",
@@ -12722,31 +13551,31 @@ function ContextUsageIndicator({
           className
         ),
         "aria-label": `${usageLabelWithSuffix} ${usageFullLabel}. ${usageTokensLabel}`,
-        children: /* @__PURE__ */ jsx45(ProgressCircle, { value: percent, className: cn("size-3.5", progressClassName) })
+        children: /* @__PURE__ */ jsx46(ProgressCircle, { value: percent, className: cn("size-3.5", progressClassName) })
       }
     ) }),
-    /* @__PURE__ */ jsxs32(TooltipContent, { side: "top", sideOffset: 6, className: "space-y-0.5 px-3 py-2 text-center", children: [
-      /* @__PURE__ */ jsx45("div", { className: "text-primary-foreground/70", children: usageLabelWithSuffix }),
-      /* @__PURE__ */ jsx45("div", { className: "font-medium text-primary-foreground/80", children: usageFullLabel }),
-      /* @__PURE__ */ jsx45("div", { className: "text-sm font-semibold", children: usageTokensLabel })
+    /* @__PURE__ */ jsxs33(TooltipContent, { side: "top", sideOffset: 6, className: "space-y-0.5 px-3 py-2 text-center", children: [
+      /* @__PURE__ */ jsx46("div", { className: "text-primary-foreground/70", children: usageLabelWithSuffix }),
+      /* @__PURE__ */ jsx46("div", { className: "font-medium text-primary-foreground/80", children: usageFullLabel }),
+      /* @__PURE__ */ jsx46("div", { className: "text-sm font-semibold", children: usageTokensLabel })
     ] })
   ] });
 }
 // src/components/pet/PetBridge.tsx
-import * as React40 from "react";
+import * as React41 from "react";
 import { normalizePetOptions } from "@xpert-ai/chatkit-types";
 function PetBridge({ pet, state }) {
   const parentMessenger = useParentMessenger();
   const sendEvent = parentMessenger?.sendEvent;
-  const options = React40.useMemo(() => normalizePetOptions(pet), [pet]);
-  React40.useEffect(() => {
+  const options = React41.useMemo(() => normalizePetOptions(pet), [pet]);
+  React41.useEffect(() => {
     if (!sendEvent) {
       return;
     }
     sendEvent("pet_options_change", { pet: pet ?? null });
   }, [sendEvent, pet]);
-  React40.useEffect(() => {
+  React41.useEffect(() => {
     if (!sendEvent || !options) {
       return;
     }
@@ -12756,15 +13585,15 @@ function PetBridge({ pet, state }) {
 }
 // src/components/settings/SettingsSheet.tsx
-import * as React47 from "react";
+import * as React48 from "react";
 import { PawPrint, Settings } from "lucide-react";
 // src/components/ui/input.tsx
-import * as React41 from "react";
-import { jsx as jsx46 } from "react/jsx-runtime";
-var Input = React41.forwardRef(
+import * as React42 from "react";
+import { jsx as jsx47 } from "react/jsx-runtime";
+var Input = React42.forwardRef(
   ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ jsx46(
+    return /* @__PURE__ */ jsx47(
       "input",
       {
         ref,
@@ -12784,17 +13613,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 jsx47, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs34 } from "react/jsx-runtime";
 function Select({
   ...props
 }) {
-  return /* @__PURE__ */ jsx47(SelectPrimitive.Root, { "data-slot": "select", ...props });
+  return /* @__PURE__ */ jsx48(SelectPrimitive.Root, { "data-slot": "select", ...props });
 }
 function SelectGroup({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx48(
     SelectPrimitive.Group,
     {
       "data-slot": "select-group",
@@ -12806,7 +13635,7 @@ function SelectGroup({
 function SelectValue({
   ...props
 }) {
-  return /* @__PURE__ */ jsx47(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+  return /* @__PURE__ */ jsx48(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
 }
 function SelectTrigger({
   className,
@@ -12814,7 +13643,7 @@ function SelectTrigger({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs34(
     SelectPrimitive.Trigger,
     {
       "data-slot": "select-trigger",
@@ -12826,7 +13655,7 @@ function SelectTrigger({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx47(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx47(ChevronDownIcon2, { className: "pointer-events-none size-4 text-muted-foreground" }) })
+        /* @__PURE__ */ jsx48(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx48(ChevronDownIcon2, { className: "pointer-events-none size-4 text-muted-foreground" }) })
       ]
     }
   );
@@ -12838,7 +13667,7 @@ function SelectContent({
   align = "center",
   ...props
 }) {
-  return /* @__PURE__ */ jsx47(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsx48(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs34(
     SelectPrimitive.Content,
     {
       "data-slot": "select-content",
@@ -12848,8 +13677,8 @@ function SelectContent({
       align,
       ...props,
       children: [
-        /* @__PURE__ */ jsx47(SelectScrollUpButton, {}),
-        /* @__PURE__ */ jsx47(
+        /* @__PURE__ */ jsx48(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx48(
           SelectPrimitive.Viewport,
           {
             "data-position": position,
@@ -12860,7 +13689,7 @@ function SelectContent({
             children
           }
         ),
-        /* @__PURE__ */ jsx47(SelectScrollDownButton, {})
+        /* @__PURE__ */ jsx48(SelectScrollDownButton, {})
       ]
     }
   ) });
@@ -12870,7 +13699,7 @@ function SelectItem({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs34(
     SelectPrimitive.Item,
     {
       "data-slot": "select-item",
@@ -12880,8 +13709,8 @@ function SelectItem({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx47("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ jsx47(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx47(CheckIcon4, { className: "pointer-events-none" }) }) }),
-        /* @__PURE__ */ jsx47(SelectPrimitive.ItemText, { children })
+        /* @__PURE__ */ jsx48("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ jsx48(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx48(CheckIcon4, { className: "pointer-events-none" }) }) }),
+        /* @__PURE__ */ jsx48(SelectPrimitive.ItemText, { children })
       ]
     }
   );
@@ -12890,7 +13719,7 @@ function SelectScrollUpButton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx48(
     SelectPrimitive.ScrollUpButton,
     {
       "data-slot": "select-scroll-up-button",
@@ -12899,7 +13728,7 @@ function SelectScrollUpButton({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx47(
+      children: /* @__PURE__ */ jsx48(
         ChevronUpIcon,
         {}
       )
@@ -12910,7 +13739,7 @@ function SelectScrollDownButton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx48(
     SelectPrimitive.ScrollDownButton,
     {
       "data-slot": "select-scroll-down-button",
@@ -12919,7 +13748,7 @@ function SelectScrollDownButton({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx47(
+      children: /* @__PURE__ */ jsx48(
         ChevronDownIcon2,
         {}
       )
@@ -12928,9 +13757,9 @@ function SelectScrollDownButton({
 }
 // src/components/ui/slider.tsx
-import * as React43 from "react";
+import * as React44 from "react";
 import { Slider as SliderPrimitive } from "radix-ui";
-import { jsx as jsx48, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs35 } from "react/jsx-runtime";
 function Slider({
   className,
   defaultValue,
@@ -12939,11 +13768,11 @@ function Slider({
   max = 100,
   ...props
 }) {
-  const _values = React43.useMemo(
+  const _values = React44.useMemo(
     () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
     [value, defaultValue, min, max]
   );
-  return /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs35(
     SliderPrimitive.Root,
     {
       "data-slot": "slider",
@@ -12957,12 +13786,12 @@ function Slider({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx48(
+        /* @__PURE__ */ jsx49(
           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__ */ jsx48(
+            children: /* @__PURE__ */ jsx49(
               SliderPrimitive.Range,
               {
                 "data-slot": "slider-range",
@@ -12971,7 +13800,7 @@ function Slider({
             )
           }
         ),
-        Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ jsx48(
+        Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ jsx49(
           SliderPrimitive.Thumb,
           {
             "data-slot": "slider-thumb",
@@ -12985,7 +13814,7 @@ function Slider({
 }
 // src/components/ui/toggle-group.tsx
-import * as React45 from "react";
+import * as React46 from "react";
 import "class-variance-authority";
 import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
@@ -12993,7 +13822,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 jsx49 } from "react/jsx-runtime";
+import { jsx as jsx50 } 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",
   {
@@ -13016,8 +13845,8 @@ var toggleVariants = cva2(
 );
 // src/components/ui/toggle-group.tsx
-import { jsx as jsx50 } from "react/jsx-runtime";
-var ToggleGroupContext = React45.createContext({
+import { jsx as jsx51 } from "react/jsx-runtime";
+var ToggleGroupContext = React46.createContext({
   size: "default",
   variant: "default",
   spacing: 0,
@@ -13032,7 +13861,7 @@ function ToggleGroup({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx51(
     ToggleGroupPrimitive.Root,
     {
       "data-slot": "toggle-group",
@@ -13046,7 +13875,7 @@ function ToggleGroup({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx50(
+      children: /* @__PURE__ */ jsx51(
         ToggleGroupContext.Provider,
         {
           value: { variant, size: size2, spacing, orientation },
@@ -13063,8 +13892,8 @@ function ToggleGroupItem({
   size: size2 = "default",
   ...props
 }) {
-  const context = React45.useContext(ToggleGroupContext);
-  return /* @__PURE__ */ jsx50(
+  const context = React46.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsx51(
     ToggleGroupPrimitive.Item,
     {
       "data-slot": "toggle-group-item",
@@ -13304,7 +14133,7 @@ import {
 } from "@xpert-ai/chatkit-types";
 // src/components/pet/PetPreview.tsx
-import { jsx as jsx51 } from "react/jsx-runtime";
+import { jsx as jsx52 } from "react/jsx-runtime";
 function escapeCssUrl(value) {
   return value.replace(/["\\]/g, "\\$&");
 }
@@ -13312,7 +14141,7 @@ function PetPreview({ src, label, className }) {
   const scale = 0.13;
   const width = petSpriteAtlas.cellWidth;
   const height = petSpriteAtlas.cellHeight;
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx52(
     "span",
     {
       className: cn(
@@ -13321,7 +14150,7 @@ function PetPreview({ src, label, className }) {
       ),
       "aria-hidden": "true",
       title: label,
-      children: /* @__PURE__ */ jsx51(
+      children: /* @__PURE__ */ jsx52(
         "span",
         {
           className: "absolute left-1/2 top-1/2 block",
@@ -13343,7 +14172,7 @@ function PetPreview({ src, label, className }) {
 }
 // src/components/settings/SettingsSheet.tsx
-import { jsx as jsx52, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs36 } from "react/jsx-runtime";
 var CHARACTER_TYPES2 = [
   "builtin",
   "atlas"
@@ -13359,13 +14188,13 @@ function SettingsSheet({
   onSave
 }) {
   const { t } = useChatkitTranslation();
-  const [draft, setDraft] = React47.useState(settings);
-  React47.useEffect(() => {
+  const [draft, setDraft] = React48.useState(settings);
+  React48.useEffect(() => {
     if (open) {
       setDraft(petRequired ? { ...settings, enabled: true } : settings);
     }
   }, [open, petRequired, settings]);
-  const updateDraft = React47.useCallback(
+  const updateDraft = React48.useCallback(
     (patch) => {
       setDraft((previous) => ({ ...previous, ...patch }));
     },
@@ -13383,23 +14212,23 @@ function SettingsSheet({
       defaultValue: selectedBuiltinPet.label
     }
   );
-  return /* @__PURE__ */ jsx52(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsxs35(SheetContent, { side: "right", className: "w-[min(92vw,26rem)] overflow-y-auto", children: [
-    /* @__PURE__ */ jsx52(SheetHeader, { children: /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx52("span", { className: "flex h-8 w-8 items-center justify-center rounded-md bg-primary/10 text-primary", children: /* @__PURE__ */ jsx52(Settings, { size: 16 }) }),
-      /* @__PURE__ */ jsx52(SheetTitle, { children: t("settings.title") })
+  return /* @__PURE__ */ jsx53(Sheet, { open, onOpenChange, children: /* @__PURE__ */ jsxs36(SheetContent, { side: "right", className: "w-[min(92vw,26rem)] overflow-y-auto", children: [
+    /* @__PURE__ */ jsx53(SheetHeader, { children: /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx53("span", { className: "flex h-8 w-8 items-center justify-center rounded-md bg-primary/10 text-primary", children: /* @__PURE__ */ jsx53(Settings, { size: 16 }) }),
+      /* @__PURE__ */ jsx53(SheetTitle, { children: t("settings.title") })
     ] }) }),
-    /* @__PURE__ */ jsxs35("form", { className: "mt-6 space-y-5", onSubmit: handleSubmit, children: [
-      /* @__PURE__ */ jsxs35("section", { className: "space-y-5", children: [
-        /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx52("span", { className: "flex h-7 w-7 items-center justify-center rounded-md bg-muted text-muted-foreground", children: /* @__PURE__ */ jsx52(PawPrint, { size: 15 }) }),
-          /* @__PURE__ */ jsx52("h3", { className: "text-sm font-semibold", children: t("pet.settings.title") })
+    /* @__PURE__ */ jsxs36("form", { className: "mt-6 space-y-5", onSubmit: handleSubmit, children: [
+      /* @__PURE__ */ jsxs36("section", { className: "space-y-5", children: [
+        /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx53("span", { className: "flex h-7 w-7 items-center justify-center rounded-md bg-muted text-muted-foreground", children: /* @__PURE__ */ jsx53(PawPrint, { size: 15 }) }),
+          /* @__PURE__ */ jsx53("h3", { className: "text-sm font-semibold", children: t("pet.settings.title") })
         ] }),
-        /* @__PURE__ */ jsxs35("label", { className: "flex items-center justify-between gap-4 rounded-md border border-border px-3 py-2", children: [
-          /* @__PURE__ */ jsxs35("span", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsx52("span", { className: "block text-sm font-medium", children: t("pet.settings.enabled") }),
-            petRequired && /* @__PURE__ */ jsx52("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: t("pet.settings.requiredHint") })
+        /* @__PURE__ */ jsxs36("label", { className: "flex items-center justify-between gap-4 rounded-md border border-border px-3 py-2", children: [
+          /* @__PURE__ */ jsxs36("span", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx53("span", { className: "block text-sm font-medium", children: t("pet.settings.enabled") }),
+            petRequired && /* @__PURE__ */ jsx53("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: t("pet.settings.requiredHint") })
           ] }),
-          /* @__PURE__ */ jsx52(
+          /* @__PURE__ */ jsx53(
             "button",
             {
               type: "button",
@@ -13412,7 +14241,7 @@ function SettingsSheet({
                 draft.enabled ? "bg-primary" : "bg-muted-foreground/20",
                 petRequired ? "cursor-not-allowed opacity-70" : ""
               ].join(" "),
-              children: /* @__PURE__ */ jsx52(
+              children: /* @__PURE__ */ jsx53(
                 "span",
                 {
                   className: [
@@ -13425,9 +14254,9 @@ function SettingsSheet({
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsxs35("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx52("span", { id: "chatkit-pet-type-label", className: "text-sm font-medium", children: t("pet.settings.characterType") }),
-        /* @__PURE__ */ jsx52(
+      /* @__PURE__ */ jsxs36("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx53("span", { id: "chatkit-pet-type-label", className: "text-sm font-medium", children: t("pet.settings.characterType") }),
+        /* @__PURE__ */ jsx53(
           ToggleGroup,
           {
             id: "chatkit-pet-type",
@@ -13442,7 +14271,7 @@ function SettingsSheet({
             variant: "outline",
             spacing: 2,
             className: "!w-full",
-            children: CHARACTER_TYPES2.map((type) => /* @__PURE__ */ jsx52(
+            children: CHARACTER_TYPES2.map((type) => /* @__PURE__ */ jsx53(
               ToggleGroupItem,
               {
                 value: type,
@@ -13454,8 +14283,8 @@ function SettingsSheet({
           }
         )
       ] }),
-      draft.characterType === "builtin" && /* @__PURE__ */ jsxs35("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx52(
+      draft.characterType === "builtin" && /* @__PURE__ */ jsxs36("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx53(
           "label",
           {
             htmlFor: "chatkit-pet-builtin",
@@ -13463,7 +14292,7 @@ function SettingsSheet({
             children: t("pet.settings.builtin")
           }
         ),
-        /* @__PURE__ */ jsxs35(
+        /* @__PURE__ */ jsxs36(
           Select,
           {
             value: selectedBuiltinPet.id,
@@ -13474,26 +14303,26 @@ function SettingsSheet({
               }
             },
             children: [
-              /* @__PURE__ */ jsx52(
+              /* @__PURE__ */ jsx53(
                 SelectTrigger,
                 {
                   id: "chatkit-pet-builtin",
                   className: "min-h-12 w-full px-3 py-2",
-                  children: /* @__PURE__ */ jsx52(SelectValue, { placeholder: selectedBuiltinPetLabel })
+                  children: /* @__PURE__ */ jsx53(SelectValue, { placeholder: selectedBuiltinPetLabel })
                 }
               ),
-              /* @__PURE__ */ jsx52(SelectContent, { className: "w-[var(--radix-select-trigger-width)]", children: /* @__PURE__ */ jsx52(SelectGroup, { children: INCLUDED_PET_OPTIONS.map((pet) => {
+              /* @__PURE__ */ jsx53(SelectContent, { className: "w-[var(--radix-select-trigger-width)]", children: /* @__PURE__ */ jsx53(SelectGroup, { children: INCLUDED_PET_OPTIONS.map((pet) => {
                 const label = t(`pet.settings.builtins.${pet.id}`, {
                   defaultValue: pet.label
                 });
-                return /* @__PURE__ */ jsx52(
+                return /* @__PURE__ */ jsx53(
                   SelectItem,
                   {
                     value: pet.id,
                     className: "min-h-10 py-1.5 pl-2 pr-8",
-                    children: /* @__PURE__ */ jsxs35("span", { className: "flex min-w-0 items-center gap-2", children: [
-                      /* @__PURE__ */ jsx52(PetPreview, { src: pet.previewSrc, label }),
-                      /* @__PURE__ */ jsx52("span", { className: "min-w-0 truncate", children: label })
+                    children: /* @__PURE__ */ jsxs36("span", { className: "flex min-w-0 items-center gap-2", children: [
+                      /* @__PURE__ */ jsx53(PetPreview, { src: pet.previewSrc, label }),
+                      /* @__PURE__ */ jsx53("span", { className: "min-w-0 truncate", children: label })
                     ] })
                   },
                   pet.id
@@ -13503,8 +14332,8 @@ function SettingsSheet({
           }
         )
       ] }),
-      draft.characterType === "atlas" && /* @__PURE__ */ jsxs35("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx52(
+      draft.characterType === "atlas" && /* @__PURE__ */ jsxs36("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx53(
           "label",
           {
             className: "text-sm font-medium",
@@ -13512,7 +14341,7 @@ function SettingsSheet({
             children: t("pet.settings.atlasUrl")
           }
         ),
-        /* @__PURE__ */ jsx52(
+        /* @__PURE__ */ jsx53(
           Input,
           {
             id: "chatkit-pet-atlas",
@@ -13522,15 +14351,15 @@ function SettingsSheet({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs35("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsxs35("div", { className: "flex items-center justify-between gap-4", children: [
-          /* @__PURE__ */ jsx52("label", { className: "text-sm font-medium", htmlFor: "chatkit-pet-scale", children: t("pet.settings.scale") }),
-          /* @__PURE__ */ jsxs35("span", { className: "text-xs tabular-nums text-muted-foreground", children: [
+      /* @__PURE__ */ jsxs36("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs36("div", { className: "flex items-center justify-between gap-4", children: [
+          /* @__PURE__ */ jsx53("label", { className: "text-sm font-medium", htmlFor: "chatkit-pet-scale", children: t("pet.settings.scale") }),
+          /* @__PURE__ */ jsxs36("span", { className: "text-xs tabular-nums text-muted-foreground", children: [
             draft.scale.toFixed(2),
             "x"
           ] })
         ] }),
-        /* @__PURE__ */ jsx52(
+        /* @__PURE__ */ jsx53(
           Slider,
           {
             id: "chatkit-pet-scale",
@@ -13544,8 +14373,8 @@ function SettingsSheet({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs35("label", { className: "flex items-center gap-2 text-sm", children: [
-        /* @__PURE__ */ jsx52(
+      /* @__PURE__ */ jsxs36("label", { className: "flex items-center gap-2 text-sm", children: [
+        /* @__PURE__ */ jsx53(
           "input",
           {
             type: "checkbox",
@@ -13556,8 +14385,8 @@ function SettingsSheet({
         ),
         t("pet.settings.draggable")
       ] }),
-      /* @__PURE__ */ jsxs35("label", { className: "flex items-center gap-2 text-sm", children: [
-        /* @__PURE__ */ jsx52(
+      /* @__PURE__ */ jsxs36("label", { className: "flex items-center gap-2 text-sm", children: [
+        /* @__PURE__ */ jsx53(
           "input",
           {
             type: "checkbox",
@@ -13568,8 +14397,8 @@ function SettingsSheet({
         ),
         t("pet.settings.persistPosition")
       ] }),
-      /* @__PURE__ */ jsxs35("div", { className: "flex justify-end gap-2 pt-2", children: [
-        /* @__PURE__ */ jsx52(
+      /* @__PURE__ */ jsxs36("div", { className: "flex justify-end gap-2 pt-2", children: [
+        /* @__PURE__ */ jsx53(
           Button,
           {
             type: "button",
@@ -13578,7 +14407,7 @@ function SettingsSheet({
             children: t("pet.settings.cancel")
           }
         ),
-        /* @__PURE__ */ jsx52(Button, { type: "submit", children: t("pet.settings.save") })
+        /* @__PURE__ */ jsx53(Button, { type: "submit", children: t("pet.settings.save") })
       ] })
     ] })
   ] }) });
@@ -14205,7 +15034,7 @@ function findDomPointForComposerOffset(root, offset) {
 }
 // src/components/chat.tsx
-import { Fragment as Fragment9, jsx as jsx53, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx54, jsxs as jsxs37 } 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;
@@ -14350,7 +15179,7 @@ function ReferenceChip({
   const metaLine = getReferenceMetaLine(reference);
   const isComposer = variant === "composer";
   const Icon = reference.type === "quote" ? Quote : reference.type === "image" ? ImageIcon : FileText5;
-  return /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs37(
     "div",
     {
       className: cn(
@@ -14359,7 +15188,7 @@ function ReferenceChip({
       ),
       title: getReferenceTitle(reference),
       children: [
-        /* @__PURE__ */ jsx53(
+        /* @__PURE__ */ jsx54(
           Icon,
           {
             size: isComposer ? 14 : 12,
@@ -14369,8 +15198,8 @@ function ReferenceChip({
             )
           }
         ),
-        /* @__PURE__ */ jsxs36("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx53(
+        /* @__PURE__ */ jsxs37("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx54(
             "div",
             {
               className: cn(
@@ -14380,7 +15209,7 @@ function ReferenceChip({
               children: getReferenceLabel(reference)
             }
           ),
-          metaLine && /* @__PURE__ */ jsx53(
+          metaLine && /* @__PURE__ */ jsx54(
             "div",
             {
               className: cn(
@@ -14391,7 +15220,7 @@ function ReferenceChip({
             }
           )
         ] }),
-        onRemove && removeLabel && /* @__PURE__ */ jsx53(
+        onRemove && removeLabel && /* @__PURE__ */ jsx54(
           "button",
           {
             type: "button",
@@ -14402,7 +15231,7 @@ function ReferenceChip({
             ),
             title: removeLabel,
             "aria-label": removeLabel,
-            children: /* @__PURE__ */ jsx53(X6, { size: 12 })
+            children: /* @__PURE__ */ jsx54(X6, { size: 12 })
           }
         )
       ]
@@ -14426,26 +15255,26 @@ function Chat({
   const { setStream } = useStreamManager();
   const stream = useStreamContext();
   const { theme } = useTheme();
-  const [isHistoryLoading, setIsHistoryLoading] = React48.useState(false);
-  const [historyError, setHistoryError] = React48.useState(null);
-  const [assistantName, setAssistantName] = React48.useState(null);
-  const [assistantAvatar, setAssistantAvatar] = React48.useState(null);
-  const [threadGoal, setThreadGoal] = React48.useState(null);
-  const [goalError, setGoalError] = React48.useState(null);
-  const [isGoalLoading, setIsGoalLoading] = React48.useState(false);
-  const [isGoalPanelOpen, setIsGoalPanelOpen] = React48.useState(false);
-  const [isGoalObjectiveExpanded, setIsGoalObjectiveExpanded] = React48.useState(false);
-  const [goalElapsedStartedAt, setGoalElapsedStartedAt] = React48.useState(null);
+  const [isHistoryLoading, setIsHistoryLoading] = React49.useState(false);
+  const [historyError, setHistoryError] = React49.useState(null);
+  const [assistantName, setAssistantName] = React49.useState(null);
+  const [assistantAvatar, setAssistantAvatar] = React49.useState(null);
+  const [threadGoal, setThreadGoal] = React49.useState(null);
+  const [goalError, setGoalError] = React49.useState(null);
+  const [isGoalLoading, setIsGoalLoading] = React49.useState(false);
+  const [isGoalPanelOpen, setIsGoalPanelOpen] = React49.useState(false);
+  const [isGoalObjectiveExpanded, setIsGoalObjectiveExpanded] = React49.useState(false);
+  const [goalElapsedStartedAt, setGoalElapsedStartedAt] = React49.useState(null);
   const LOADING_DOTS_MIN_DURATION = 800;
   const STREAMING_STATUS_REFRESH_MS = 250;
-  const [showLoadingDots, setShowLoadingDots] = React48.useState(false);
-  const [streamingNow, setStreamingNow] = React48.useState(() => Date.now());
-  const loadingStartTimeRef = React48.useRef(null);
-  const lastStreamOutputAtRef = React48.useRef(null);
-  React48.useEffect(() => {
+  const [showLoadingDots, setShowLoadingDots] = React49.useState(false);
+  const [streamingNow, setStreamingNow] = React49.useState(() => Date.now());
+  const loadingStartTimeRef = React49.useRef(null);
+  const lastStreamOutputAtRef = React49.useRef(null);
+  React49.useEffect(() => {
     setStream(stream);
   }, [setStream, stream]);
-  React48.useEffect(() => {
+  React49.useEffect(() => {
     if (stream.isLoading) {
       if (!loadingStartTimeRef.current) {
         loadingStartTimeRef.current = Date.now();
@@ -14468,7 +15297,7 @@ function Chat({
       }
     }
   }, [stream.isLoading]);
-  React48.useEffect(() => {
+  React49.useEffect(() => {
     if (!stream.isLoading) {
       lastStreamOutputAtRef.current = null;
       setStreamingNow(Date.now());
@@ -14478,7 +15307,7 @@ function Chat({
     lastStreamOutputAtRef.current = now;
     setStreamingNow(now);
   }, [stream.messages, stream.isLoading]);
-  React48.useEffect(() => {
+  React49.useEffect(() => {
     if (!stream.isLoading) {
       return;
     }
@@ -14487,7 +15316,7 @@ function Chat({
     }, STREAMING_STATUS_REFRESH_MS);
     return () => window.clearInterval(timer);
   }, [stream.isLoading]);
-  React48.useEffect(() => {
+  React49.useEffect(() => {
     if (threadGoal?.status === "active" && stream.isLoading) {
       setGoalElapsedStartedAt(Date.now());
       return;
@@ -14499,82 +15328,82 @@ function Chat({
     threadGoal?.id,
     threadGoal?.status
   ]);
-  React48.useEffect(() => {
+  React49.useEffect(() => {
     setIsGoalObjectiveExpanded(false);
   }, [threadGoal?.id]);
-  const [composerParts, setComposerParts] = React48.useState([]);
-  const [renderedComposerParts, setRenderedComposerParts] = React48.useState([]);
-  const [composerDomVersion, setComposerDomVersion] = React48.useState(0);
-  const [selectedTool, setSelectedTool] = React48.useState(
+  const [composerParts, setComposerParts] = React49.useState([]);
+  const [renderedComposerParts, setRenderedComposerParts] = React49.useState([]);
+  const [composerDomVersion, setComposerDomVersion] = React49.useState(0);
+  const [selectedTool, setSelectedTool] = React49.useState(
     null
   );
-  const [planModeEnabled, setPlanModeEnabled] = React48.useState(false);
-  const [petSettingsOpen, setPetSettingsOpen] = React48.useState(false);
-  const [petLocalSettings, setPetLocalSettings] = React48.useState(() => readPetLocalSettings());
-  const [runtimeCapabilities, setRuntimeCapabilities] = React48.useState(null);
-  const [runtimeCapabilitiesReady, setRuntimeCapabilitiesReady] = React48.useState(false);
-  const [sessionRuntimeCapabilities, setSessionRuntimeCapabilities] = React48.useState(
+  const [planModeEnabled, setPlanModeEnabled] = React49.useState(false);
+  const [petSettingsOpen, setPetSettingsOpen] = React49.useState(false);
+  const [petLocalSettings, setPetLocalSettings] = React49.useState(() => readPetLocalSettings());
+  const [runtimeCapabilities, setRuntimeCapabilities] = React49.useState(null);
+  const [runtimeCapabilitiesReady, setRuntimeCapabilitiesReady] = React49.useState(false);
+  const [sessionRuntimeCapabilities, setSessionRuntimeCapabilities] = React49.useState(
     () => createEmptyRuntimeCapabilitiesSelection()
   );
-  const [runRuntimeCapabilities, setRunRuntimeCapabilities] = React48.useState(
+  const [runRuntimeCapabilities, setRunRuntimeCapabilities] = React49.useState(
     () => createEmptyRuntimeCapabilitiesSelection()
   );
-  const [runtimeCapabilityPalette, setRuntimeCapabilityPalette] = React48.useState(null);
-  const [attachmentState, setAttachmentState] = React48.useState({
+  const [runtimeCapabilityPalette, setRuntimeCapabilityPalette] = React49.useState(null);
+  const [attachmentState, setAttachmentState] = React49.useState({
     uploadedFiles: [],
     hasUploadingFiles: false,
     hasParsingFiles: false
   });
-  const [references, setReferences] = React48.useState([]);
-  const [isUploadingReferenceImages, setIsUploadingReferenceImages] = React48.useState(false);
-  const [quoteSelection, setQuoteSelection] = React48.useState(null);
-  const [isAtBottom, setIsAtBottom] = React48.useState(true);
-  const [hasUpdatesBelow, setHasUpdatesBelow] = React48.useState(false);
+  const [references, setReferences] = React49.useState([]);
+  const [isUploadingReferenceImages, setIsUploadingReferenceImages] = React49.useState(false);
+  const [quoteSelection, setQuoteSelection] = React49.useState(null);
+  const [isAtBottom, setIsAtBottom] = React49.useState(true);
+  const [hasUpdatesBelow, setHasUpdatesBelow] = React49.useState(false);
   const {
     threads,
     deleteThread,
     refreshThreads,
     isLoading: isThreadsLoading
   } = useThreads();
-  const viewportRef = React48.useRef(null);
-  const attachmentsRef = React48.useRef(null);
-  const composerInputRef = React48.useRef(null);
-  const slashPaletteRef = React48.useRef(null);
-  const slashPaletteOptionRefs = React48.useRef(
+  const viewportRef = React49.useRef(null);
+  const attachmentsRef = React49.useRef(null);
+  const composerInputRef = React49.useRef(null);
+  const slashPaletteRef = React49.useRef(null);
+  const slashPaletteOptionRefs = React49.useRef(
     []
   );
-  const composerPartsRef = React48.useRef([]);
-  const pendingComposerCaretOffsetRef = React48.useRef(null);
-  const shouldAutoScrollRef = React48.useRef(true);
-  const forceFollowRef = React48.useRef(false);
-  const previousMessageCountRef = React48.useRef(0);
-  const previousScrollTopRef = React48.useRef(0);
-  const isPrependingHistoryMessagesRef = React48.useRef(false);
-  const autoScrollFrameRef = React48.useRef(null);
-  const isPointerDownRef = React48.useRef(false);
-  const lastTouchYRef = React48.useRef(null);
-  const runtimeCapabilityPreferenceLoadRef = React48.useRef(0);
+  const composerPartsRef = React49.useRef([]);
+  const pendingComposerCaretOffsetRef = React49.useRef(null);
+  const shouldAutoScrollRef = React49.useRef(true);
+  const forceFollowRef = React49.useRef(false);
+  const previousMessageCountRef = React49.useRef(0);
+  const previousScrollTopRef = React49.useRef(0);
+  const isPrependingHistoryMessagesRef = React49.useRef(false);
+  const autoScrollFrameRef = React49.useRef(null);
+  const isPointerDownRef = React49.useRef(false);
+  const lastTouchYRef = React49.useRef(null);
+  const runtimeCapabilityPreferenceLoadRef = React49.useRef(0);
   const resolvedTitle = title ?? t("chat.title");
   const resolvedPlaceholder = placeholder ?? t("chat.placeholder");
   const petRequired = options?.displayMode === "pet";
-  const basePetSettings = React48.useMemo(
+  const basePetSettings = React49.useMemo(
     () => derivePetLocalSettings(options?.pet),
     [options?.pet]
   );
-  const displayedPetSettings = React48.useMemo(
+  const displayedPetSettings = React49.useMemo(
     () => ({
       ...petLocalSettings ?? basePetSettings,
       ...petRequired ? { enabled: true } : {}
     }),
     [basePetSettings, petLocalSettings, petRequired]
   );
-  const effectivePet = React48.useMemo(() => {
+  const effectivePet = React49.useMemo(() => {
     if (petRequired || petLocalSettings) {
       return buildPetOptionsFromLocalSettings(displayedPetSettings);
     }
     return options?.pet ?? null;
   }, [displayedPetSettings, options?.pet, petLocalSettings, petRequired]);
-  const savePetLocalSettings = React48.useCallback(
+  const savePetLocalSettings = React49.useCallback(
     (settings) => {
       const nextSettings = petRequired ? { ...settings, enabled: true } : settings;
       setPetLocalSettings(nextSettings);
@@ -14582,7 +15411,7 @@ function Chat({
     },
     [petRequired]
   );
-  const handlePetCommand = React48.useCallback(
+  const handlePetCommand = React49.useCallback(
     (mode) => {
       if (mode === "settings") {
         setPetSettingsOpen(true);
@@ -14604,7 +15433,7 @@ function Chat({
     [displayedPetSettings, effectivePet, petRequired, savePetLocalSettings]
   );
   const inputPlaceholder = selectedTool?.placeholderOverride ?? composer?.placeholder ?? resolvedPlaceholder;
-  const messages = React48.useMemo(
+  const messages = React49.useMemo(
     () => stream.messages ?? [],
     [stream.messages]
   );
@@ -14613,7 +15442,7 @@ function Chat({
     historyMessagePagination?.isLoadingMore
   );
   const canLoadMoreMessages = Boolean(historyMessagePagination?.hasMore);
-  const draft = React48.useMemo(
+  const draft = React49.useMemo(
     () => getComposerPlainText(composerParts),
     [composerParts]
   );
@@ -14627,7 +15456,7 @@ function Chat({
     isEmpty: isComposerInputEmpty,
     isStacked: isComposerStacked
   });
-  const pendingFollowUps = React48.useMemo(
+  const pendingFollowUps = React49.useMemo(
     () => sortVisiblePendingFollowUps(stream.pendingFollowUps ?? []),
     [stream.pendingFollowUps]
   );
@@ -14636,11 +15465,11 @@ function Chat({
   const hasPendingHITLRequest = Boolean(stream.pendingHITLRequest);
   const hasPendingInteractiveRequest = hasPendingRequestUserInput || hasPendingHITLRequest;
   const hasPendingTodos = Boolean(stream.todos?.items.length);
-  const runtimeCapabilityOptions = React48.useMemo(
+  const runtimeCapabilityOptions = React49.useMemo(
     () => getRuntimeCapabilityOptions(runtimeCapabilities),
     [runtimeCapabilities]
   );
-  const goalAdapter = React48.useMemo(
+  const goalAdapter = React49.useMemo(
     () => {
       if (isGoalAdapter(options?.goal)) {
         return options.goal;
@@ -14650,7 +15479,7 @@ function Chat({
     [options?.goal, stream.client]
   );
   const displayedGoalElapsedSeconds = threadGoal ? (threadGoal.elapsedSeconds ?? 0) + (goalElapsedStartedAt ? Math.max(0, Math.floor((streamingNow - goalElapsedStartedAt) / 1e3)) : 0) : 0;
-  const effectiveSessionRuntimeCapabilities = React48.useMemo(
+  const effectiveSessionRuntimeCapabilities = React49.useMemo(
     () => runtimeCapabilitiesReady && runtimeCapabilities ? mergeRuntimeCapabilitiesSelections(
       runtimeCapabilities,
       sessionRuntimeCapabilities
@@ -14663,7 +15492,7 @@ function Chat({
     "goal"
   );
   const showGoalStatus = goalCommandAvailable && !hasCompletedGoal && (Boolean(goalError) || threadGoal?.status === "active" && stream.isLoading);
-  const runRuntimeCapabilityOptions = React48.useMemo(
+  const runRuntimeCapabilityOptions = React49.useMemo(
     () => runtimeCapabilityOptions.filter(
       (option) => isRuntimeCapabilitySelected(
         runRuntimeCapabilities,
@@ -14673,11 +15502,11 @@ function Chat({
     ),
     [runRuntimeCapabilities, runtimeCapabilityOptions]
   );
-  const composerRuntimeCapabilitySelectionKeys = React48.useMemo(
+  const composerRuntimeCapabilitySelectionKeys = React49.useMemo(
     () => getComposerCapabilitySelectionKeys(composerParts),
     [composerParts]
   );
-  const detachedRunRuntimeCapabilityOptions = React48.useMemo(
+  const detachedRunRuntimeCapabilityOptions = React49.useMemo(
     () => runRuntimeCapabilityOptions.filter(
       (option) => !composerRuntimeCapabilitySelectionKeys.has(
         getRuntimeCapabilityOptionKey(option)
@@ -14685,7 +15514,7 @@ function Chat({
     ),
     [composerRuntimeCapabilitySelectionKeys, runRuntimeCapabilityOptions]
   );
-  const persistSessionRuntimeCapabilities = React48.useCallback(
+  const persistSessionRuntimeCapabilities = React49.useCallback(
     async (threadId, selection) => {
       if (!runtimeCapabilities || !selection) {
         return;
@@ -14710,10 +15539,10 @@ function Chat({
     },
     [runtimeCapabilities, stream.client]
   );
-  const clearQuoteSelection = React48.useCallback(() => {
+  const clearQuoteSelection = React49.useCallback(() => {
     setQuoteSelection(null);
   }, []);
-  const commitComposerParts = React48.useCallback(
+  const commitComposerParts = React49.useCallback(
     (nextParts, options2) => {
       const normalized = normalizeComposerParts(nextParts);
       const previous = composerPartsRef.current;
@@ -14749,7 +15578,7 @@ function Chat({
     },
     []
   );
-  const setComposerText = React48.useCallback(
+  const setComposerText = React49.useCallback(
     (text, caretOffset = text.length) => {
       commitComposerParts(createComposerTextParts(text), {
         caretOffset,
@@ -14759,7 +15588,7 @@ function Chat({
     },
     [commitComposerParts]
   );
-  const focusComposerAt = React48.useCallback((position) => {
+  const focusComposerAt = React49.useCallback((position) => {
     const nextPosition = position ?? getComposerEditingLength(composerPartsRef.current);
     pendingComposerCaretOffsetRef.current = nextPosition;
     requestAnimationFrame(() => {
@@ -14771,7 +15600,7 @@ function Chat({
     });
   }, []);
   const parentMessenger = useParentMessenger({
-    onSetComposerValue: React48.useCallback(
+    onSetComposerValue: React49.useCallback(
       (payload) => {
         if (!payload) {
           return;
@@ -14794,10 +15623,10 @@ function Chat({
       },
       [composer?.tools, setComposerText]
     ),
-    onFocusComposer: React48.useCallback(() => {
+    onFocusComposer: React49.useCallback(() => {
       composerInputRef.current?.focus();
     }, []),
-    onSetPetEnabled: React48.useCallback(
+    onSetPetEnabled: React49.useCallback(
       (enabled) => {
         if (petRequired) {
           return;
@@ -14811,10 +15640,10 @@ function Chat({
     )
   });
   const canMinimizeToPet = parentMessenger?.isParentAvailable === true && isPetEnabled(effectivePet);
-  const handleMinimizeToPet = React48.useCallback(() => {
+  const handleMinimizeToPet = React49.useCallback(() => {
     parentMessenger?.sendEvent("chat_minimize_change", { minimized: true });
   }, [parentMessenger]);
-  const syncQuoteSelection = React48.useCallback(() => {
+  const syncQuoteSelection = React49.useCallback(() => {
     if (typeof window === "undefined") {
       clearQuoteSelection();
       return;
@@ -14859,23 +15688,23 @@ function Chat({
       left
     });
   }, [clearQuoteSelection]);
-  const cancelPendingAutoScroll = React48.useCallback(() => {
+  const cancelPendingAutoScroll = React49.useCallback(() => {
     if (autoScrollFrameRef.current !== null) {
       cancelAnimationFrame(autoScrollFrameRef.current);
       autoScrollFrameRef.current = null;
     }
   }, []);
-  const disableAutoFollow = React48.useCallback(() => {
+  const disableAutoFollow = React49.useCallback(() => {
     forceFollowRef.current = false;
     shouldAutoScrollRef.current = false;
     cancelPendingAutoScroll();
   }, [cancelPendingAutoScroll]);
-  const enableAutoFollow = React48.useCallback(() => {
+  const enableAutoFollow = React49.useCallback(() => {
     forceFollowRef.current = true;
     shouldAutoScrollRef.current = true;
     setHasUpdatesBelow(false);
   }, []);
-  const scrollToBottom = React48.useCallback(
+  const scrollToBottom = React49.useCallback(
     (smooth = false, force = false) => {
       if (force) {
         enableAutoFollow();
@@ -14902,7 +15731,7 @@ function Chat({
     },
     [cancelPendingAutoScroll, enableAutoFollow]
   );
-  React48.useEffect(() => {
+  React49.useEffect(() => {
     const viewport = viewportRef.current;
     if (!viewport) return;
     previousScrollTopRef.current = viewport.scrollTop;
@@ -14983,14 +15812,14 @@ function Chat({
       window.removeEventListener("pointercancel", stopPointerTracking);
     };
   }, [cancelPendingAutoScroll, disableAutoFollow]);
-  React48.useEffect(() => {
+  React49.useEffect(() => {
     shouldAutoScrollRef.current = true;
     forceFollowRef.current = false;
     previousScrollTopRef.current = 0;
     setIsAtBottom(true);
     setHasUpdatesBelow(false);
   }, [stream.threadId]);
-  React48.useEffect(() => {
+  React49.useEffect(() => {
     const messageCountChanged = messages.length !== previousMessageCountRef.current;
     previousMessageCountRef.current = messages.length;
     if (isPrependingHistoryMessagesRef.current) {
@@ -15013,7 +15842,7 @@ function Chat({
     clientSecret: effectiveClientSecret
   });
   const missingConfig = Boolean(missingConfigKind);
-  const missingConfigShortMessage = React48.useMemo(() => {
+  const missingConfigShortMessage = React49.useMemo(() => {
     switch (missingConfigKind) {
       case "apiUrl":
         return t("chat.missingApiUrlShort");
@@ -15025,7 +15854,7 @@ function Chat({
         return t("chat.missingConfigShort");
     }
   }, [missingConfigKind, t]);
-  const missingConfigDetailMessage = React48.useMemo(() => {
+  const missingConfigDetailMessage = React49.useMemo(() => {
     switch (missingConfigKind) {
       case "apiUrl":
         return t("chat.missingApiUrlDetail");
@@ -15042,7 +15871,7 @@ function Chat({
   const isSubmissionBlocked = hasPendingInteractiveRequest || missingConfig || isHistoryLoading || hasUploadingFiles || isUploadingReferenceImages;
   const isSendDisabled = !trimmedDraft && !hasReferences || isSubmissionBlocked;
   const isPromptEditDisabled = hasPendingInteractiveRequest || missingConfig || isHistoryLoading;
-  const resizeComposerInput = React48.useCallback(() => {
+  const resizeComposerInput = React49.useCallback(() => {
     const input = composerInputRef.current;
     if (!input) {
       return;
@@ -15050,7 +15879,7 @@ function Chat({
     input.style.maxHeight = `${COMPOSER_INPUT_MAX_HEIGHT}px`;
     input.style.overflowY = input.scrollHeight > COMPOSER_INPUT_MAX_HEIGHT ? "auto" : "hidden";
   }, []);
-  React48.useLayoutEffect(() => {
+  React49.useLayoutEffect(() => {
     composerPartsRef.current = composerParts;
     resizeComposerInput();
     const caretOffset = pendingComposerCaretOffsetRef.current;
@@ -15062,13 +15891,13 @@ function Chat({
       }
     }
   }, [composerDomVersion, composerParts, resizeComposerInput]);
-  React48.useEffect(() => {
+  React49.useEffect(() => {
     document.addEventListener("selectionchange", syncQuoteSelection);
     return () => {
       document.removeEventListener("selectionchange", syncQuoteSelection);
     };
   }, [syncQuoteSelection]);
-  React48.useEffect(() => {
+  React49.useEffect(() => {
     const viewport = viewportRef.current;
     if (!viewport) {
       return;
@@ -15085,14 +15914,14 @@ function Chat({
       window.removeEventListener("resize", handleViewportScroll);
     };
   }, [clearQuoteSelection]);
-  React48.useEffect(() => {
+  React49.useEffect(() => {
     clearQuoteSelection();
   }, [messages.length, stream.threadId, clearQuoteSelection]);
-  React48.useEffect(() => {
+  React49.useEffect(() => {
     if (missingConfig) return;
     void refreshThreads();
   }, [missingConfig, refreshThreads]);
-  React48.useEffect(() => {
+  React49.useEffect(() => {
     if (missingConfig || !stream.client || !stream.assistantId) {
       setAssistantName(null);
       setAssistantAvatar(null);
@@ -15115,7 +15944,7 @@ function Chat({
       cancelled = true;
     };
   }, [missingConfig, stream.client, stream.assistantId]);
-  React48.useEffect(() => {
+  React49.useEffect(() => {
     if (missingConfig || !stream.client || !stream.assistantId) {
       setRuntimeCapabilities(null);
       setRuntimeCapabilitiesReady(false);
@@ -15162,7 +15991,7 @@ function Chat({
     });
     return () => controller.abort();
   }, [missingConfig, stream.client, stream.assistantId]);
-  React48.useEffect(() => {
+  React49.useEffect(() => {
     setRunRuntimeCapabilities(
       createEmptyRuntimeCapabilitiesSelection(runtimeCapabilities)
     );
@@ -15211,10 +16040,10 @@ function Chat({
     stream.client,
     stream.threadId
   ]);
-  React48.useEffect(() => {
+  React49.useEffect(() => {
     setThreadGoal(stream.threadGoal);
   }, [stream.threadGoal]);
-  React48.useEffect(() => {
+  React49.useEffect(() => {
     const threadId = stream.threadId?.trim();
     if (!threadId || !goalCommandAvailable) {
       setThreadGoal(null);
@@ -15255,7 +16084,7 @@ function Chat({
     return () => controller.abort();
   }, [goalAdapter, goalCommandAvailable, stream.threadId]);
   const uploadedFiles = attachmentState.uploadedFiles;
-  const handleSessionRuntimeCapabilityToggle = React48.useCallback(
+  const handleSessionRuntimeCapabilityToggle = React49.useCallback(
     (type, id, selected) => {
       setSessionRuntimeCapabilities((previous) => {
         const nextSelection = toggleRuntimeCapabilitySelection(
@@ -15273,7 +16102,7 @@ function Chat({
     },
     [persistSessionRuntimeCapabilities, stream.threadId]
   );
-  const updateRuntimeCapabilityPalette = React48.useCallback(
+  const updateRuntimeCapabilityPalette = React49.useCallback(
     (parts, selectionStart) => {
       const input = composerInputRef.current;
       const editingText = getComposerEditingText(parts);
@@ -15285,7 +16114,7 @@ function Chat({
     },
     []
   );
-  const syncComposerInputFromElement = React48.useCallback(
+  const syncComposerInputFromElement = React49.useCallback(
     (input) => {
       const previousCapabilities = getComposerCapabilityPartMap(
         composerPartsRef.current
@@ -15303,25 +16132,25 @@ function Chat({
     },
     [commitComposerParts, updateRuntimeCapabilityPalette]
   );
-  const handleComposerInput = React48.useCallback(
+  const handleComposerInput = React49.useCallback(
     (event) => {
       syncComposerInputFromElement(event.currentTarget);
     },
     [syncComposerInputFromElement]
   );
-  const handleComposerCompositionEnd = React48.useCallback(
+  const handleComposerCompositionEnd = React49.useCallback(
     (event) => {
       syncComposerInputFromElement(event.currentTarget);
     },
     [syncComposerInputFromElement]
   );
-  const handleComposerSelect = React48.useCallback(() => {
+  const handleComposerSelect = React49.useCallback(() => {
     updateRuntimeCapabilityPalette(
       composerPartsRef.current,
       composerInputRef.current ? getComposerSelectionOffset(composerInputRef.current) : void 0
     );
   }, [updateRuntimeCapabilityPalette]);
-  const removeRunRuntimeCapability = React48.useCallback(
+  const removeRunRuntimeCapability = React49.useCallback(
     (option) => {
       setRunRuntimeCapabilities(
         (previous) => toggleRuntimeCapabilitySelection(
@@ -15341,7 +16170,7 @@ function Chat({
     },
     [commitComposerParts]
   );
-  const submitDraft = React48.useCallback(
+  const submitDraft = React49.useCallback(
     (submitOptions = {}) => {
       if (isSubmissionBlocked) return;
       const contentToSubmit = (submitOptions.inputText ?? trimmedDraft).trim();
@@ -15464,7 +16293,7 @@ function Chat({
       t
     ]
   );
-  const handleGoalCommand = React48.useCallback(
+  const handleGoalCommand = React49.useCallback(
     async ({
       args,
       commandSource,
@@ -15576,13 +16405,13 @@ function Chat({
       t
     ]
   );
-  const handleGoalPanelOpenChange = React48.useCallback(
+  const handleGoalPanelOpenChange = React49.useCallback(
     (open) => {
       setIsGoalPanelOpen(open);
     },
     []
   );
-  const addRunRuntimeCapabilities = React48.useCallback(
+  const addRunRuntimeCapabilities = React49.useCallback(
     (selection) => {
       setRunRuntimeCapabilities(
         (previous) => runtimeCapabilities ? mergeRuntimeCapabilitiesSelections(
@@ -15594,7 +16423,7 @@ function Chat({
     },
     [runtimeCapabilities]
   );
-  const insertComposerCapabilityToken = React48.useCallback(
+  const insertComposerCapabilityToken = React49.useCallback(
     (capability, range) => {
       const token = createComposerCapabilityPart(capability, createMessageId());
       const currentParts = composerPartsRef.current;
@@ -15667,7 +16496,7 @@ function Chat({
     plugin: t("composer.slashCommands.empty.loadingCapabilities"),
     subAgent: t("composer.slashCommands.empty.loadingCapabilities")
   };
-  React48.useEffect(() => {
+  React49.useEffect(() => {
     if (!runtimeCapabilityPalette) {
       return;
     }
@@ -15686,7 +16515,7 @@ function Chat({
       );
     }
   }, [slashPaletteOptions.length, runtimeCapabilityPalette]);
-  React48.useLayoutEffect(() => {
+  React49.useLayoutEffect(() => {
     if (!runtimeCapabilityPalette) {
       return;
     }
@@ -15703,7 +16532,7 @@ function Chat({
       container.scrollTop += optionRect.bottom - containerRect.bottom;
     }
   }, [runtimeCapabilityPalette, slashPaletteOptions.length]);
-  const submitGoalModeDraft = React48.useCallback(() => {
+  const submitGoalModeDraft = React49.useCallback(() => {
     const objective = getComposerPlainText(composerPartsRef.current).trim();
     if (!isGoalModeOpen || !goalCommandAvailable || !objective) {
       return false;
@@ -15741,7 +16570,7 @@ function Chat({
     }
     submitDraft();
   };
-  const handleEditPendingFollowUp = React48.useCallback(
+  const handleEditPendingFollowUp = React49.useCallback(
     (id) => {
       const item = pendingFollowUps.find(
         (entry) => entry.id === id && entry.mode === "queue"
@@ -15768,7 +16597,7 @@ function Chat({
     },
     [pendingFollowUps, setComposerText, stream]
   );
-  const handleQuoteSelection = React48.useCallback(() => {
+  const handleQuoteSelection = React49.useCallback(() => {
     if (!quoteSelection) {
       return;
     }
@@ -15784,7 +16613,7 @@ function Chat({
   const handleAttachmentClick = () => {
     attachmentsRef.current?.openFilePicker();
   };
-  const uploadContextFile = React48.useCallback(
+  const uploadContextFile = React49.useCallback(
     (file) => {
       const formData = new FormData();
       formData.append("file", file, file.name || "upload");
@@ -15803,13 +16632,13 @@ function Chat({
     },
     [stream.assistantId, stream.client, stream.threadId]
   );
-  const getContextFileStatus = React48.useCallback(
+  const getContextFileStatus = React49.useCallback(
     (fileId) => stream.client.contexts.fetch(`/files/${fileId}/status`, {
       method: "GET"
     }),
     [stream.client]
   );
-  const deleteContextFile = React48.useCallback(
+  const deleteContextFile = React49.useCallback(
     (storageFileId) => stream.client.contexts.deleteFile(storageFileId),
     [stream.client]
   );
@@ -15917,7 +16746,7 @@ function Chat({
     }
     submitDraft();
   };
-  const handleComposerPaste = React48.useCallback(
+  const handleComposerPaste = React49.useCallback(
     (event) => {
       const clipboardData = event.clipboardData;
       if (!clipboardData) {
@@ -16019,13 +16848,13 @@ function Chat({
   const handleToolSelect = (tool) => {
     setSelectedTool((prev) => prev?.id === tool.id ? null : tool);
   };
-  const handlePromptClick = React48.useCallback(
+  const handlePromptClick = React49.useCallback(
     (prompt) => {
       submitDraft({ inputText: prompt, displayText: prompt });
     },
     [submitDraft]
   );
-  const handlePromptEdit = React48.useCallback(
+  const handlePromptEdit = React49.useCallback(
     (prompt) => {
       if (isPromptEditDisabled) return;
       setComposerText(prompt, prompt.length);
@@ -16034,7 +16863,7 @@ function Chat({
     },
     [focusComposerAt, isPromptEditDisabled, setComposerText]
   );
-  const loadConversationMessages = React48.useCallback(
+  const loadConversationMessages = React49.useCallback(
     async (recordId) => {
       if (missingConfig) {
         setHistoryError(missingConfigShortMessage);
@@ -16055,7 +16884,7 @@ function Chat({
     },
     [missingConfig, missingConfigShortMessage, stream, t]
   );
-  const handleLoadMoreMessages = React48.useCallback(async () => {
+  const handleLoadMoreMessages = React49.useCallback(async () => {
     if (!canLoadMoreMessages || isLoadingMoreMessages) {
       return;
     }
@@ -16164,15 +16993,15 @@ 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 canUploadDroppedFiles = composer?.attachments?.enabled === true && !missingConfig && !isHistoryLoading && !hasPendingInteractiveRequest;
-  const handleDroppedFiles = React48.useCallback((files) => {
+  const handleDroppedFiles = React49.useCallback((files) => {
     return attachmentsRef.current?.queueFiles(files) ?? false;
   }, []);
-  const currentThread = React48.useMemo(
+  const currentThread = React49.useMemo(
     () => threads.find((item) => item.id === stream.threadId),
     [threads, stream.threadId]
   );
   const streamErrorMessage = stream.error instanceof Error ? stream.error.message : void 0;
-  const threadErrorMessage = React48.useMemo(() => {
+  const threadErrorMessage = React49.useMemo(() => {
     if (streamErrorMessage?.trim()) return streamErrorMessage.trim();
     if (currentThread?.status !== "error") return void 0;
     const message = currentThread.error?.trim();
@@ -16203,7 +17032,7 @@ function Chat({
     fallbackTitle: t("history.threadFallback")
   });
   const assistantTitle = assistantName || resolvedTitle;
-  return /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs37(
     UploadDroppedFiles,
     {
       ref: viewportRef,
@@ -16218,10 +17047,10 @@ function Chat({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs36("div", { className: "flex items-center justify-between border-b p-2 sticky top-0 z-10 bg-background", children: [
-          /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-3 overflow-hidden", children: [
-            /* @__PURE__ */ jsxs36("div", { className: "relative shrink-0", children: [
-              /* @__PURE__ */ jsx53(
+        /* @__PURE__ */ jsxs37("div", { className: "flex items-center justify-between border-b p-2 sticky top-0 z-10 bg-background", children: [
+          /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-3 overflow-hidden", children: [
+            /* @__PURE__ */ jsxs37("div", { className: "relative shrink-0", children: [
+              /* @__PURE__ */ jsx54(
                 ChatkitAvatar,
                 {
                   avatar: assistantAvatar,
@@ -16229,10 +17058,10 @@ function Chat({
                   label: assistantTitle
                 }
               ),
-              /* @__PURE__ */ jsx53("span", { className: "absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full border-2 border-background bg-green-500" })
+              /* @__PURE__ */ jsx54("span", { className: "absolute bottom-0 right-0 h-2.5 w-2.5 rounded-full border-2 border-background bg-green-500" })
             ] }),
-            /* @__PURE__ */ jsxs36("div", { className: "truncate", children: [
-              /* @__PURE__ */ jsx53(
+            /* @__PURE__ */ jsxs37("div", { className: "truncate", children: [
+              /* @__PURE__ */ jsx54(
                 "h2",
                 {
                   className: "text-lg font-semibold truncate",
@@ -16240,12 +17069,12 @@ function Chat({
                   children: assistantTitle
                 }
               ),
-              /* @__PURE__ */ jsx53("p", { className: "text-xs text-muted-foreground", children: t("chat.statusOnline") })
+              /* @__PURE__ */ jsx54("p", { className: "text-xs text-muted-foreground", children: t("chat.statusOnline") })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-1", children: [
-            canMinimizeToPet && /* @__PURE__ */ jsxs36(Tooltip, { children: [
-              /* @__PURE__ */ jsx53(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx53("span", { className: "inline-flex h-8 w-8", children: /* @__PURE__ */ jsx53(
+          /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-1", children: [
+            canMinimizeToPet && /* @__PURE__ */ jsxs37(Tooltip, { children: [
+              /* @__PURE__ */ jsx54(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx54("span", { className: "inline-flex h-8 w-8", children: /* @__PURE__ */ jsx54(
                 "button",
                 {
                   type: "button",
@@ -16256,13 +17085,13 @@ function Chat({
                     "transition-colors duration-150"
                   ),
                   "aria-label": t("chat.minimizeToPet"),
-                  children: /* @__PURE__ */ jsx53(Minus, { size: 16 })
+                  children: /* @__PURE__ */ jsx54(Minus, { size: 16 })
                 }
               ) }) }),
-              /* @__PURE__ */ jsx53(TooltipContent, { side: "bottom", children: t("chat.minimizeToPet") })
+              /* @__PURE__ */ jsx54(TooltipContent, { side: "bottom", children: t("chat.minimizeToPet") })
             ] }),
-            /* @__PURE__ */ jsxs36(Tooltip, { children: [
-              /* @__PURE__ */ jsx53(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx53("span", { className: "inline-flex h-8 w-8", children: /* @__PURE__ */ jsx53(
+            /* @__PURE__ */ jsxs37(Tooltip, { children: [
+              /* @__PURE__ */ jsx54(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx54("span", { className: "inline-flex h-8 w-8", children: /* @__PURE__ */ jsx54(
                 "button",
                 {
                   type: "button",
@@ -16273,14 +17102,14 @@ function Chat({
                     "transition-colors duration-150"
                   ),
                   "aria-label": t("settings.open"),
-                  children: /* @__PURE__ */ jsx53(Settings2, { size: 16 })
+                  children: /* @__PURE__ */ jsx54(Settings2, { size: 16 })
                 }
               ) }) }),
-              /* @__PURE__ */ jsx53(TooltipContent, { side: "bottom", children: t("settings.open") })
+              /* @__PURE__ */ jsx54(TooltipContent, { side: "bottom", children: t("settings.open") })
             ] }),
-            history?.enabled !== false && /* @__PURE__ */ jsxs36(Fragment9, { children: [
-              /* @__PURE__ */ jsxs36(Tooltip, { children: [
-                /* @__PURE__ */ jsx53(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx53("span", { className: "inline-flex h-8 w-8", children: /* @__PURE__ */ jsx53(
+            history?.enabled !== false && /* @__PURE__ */ jsxs37(Fragment9, { children: [
+              /* @__PURE__ */ jsxs37(Tooltip, { children: [
+                /* @__PURE__ */ jsx54(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx54("span", { className: "inline-flex h-8 w-8", children: /* @__PURE__ */ jsx54(
                   "button",
                   {
                     type: "button",
@@ -16293,12 +17122,12 @@ function Chat({
                       "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed"
                     ),
                     "aria-label": t("history.newThread"),
-                    children: /* @__PURE__ */ jsx53(Pencil4, { size: 16 })
+                    children: /* @__PURE__ */ jsx54(Pencil4, { size: 16 })
                   }
                 ) }) }),
-                /* @__PURE__ */ jsx53(TooltipContent, { side: "bottom", children: t("history.newThread") })
+                /* @__PURE__ */ jsx54(TooltipContent, { side: "bottom", children: t("history.newThread") })
               ] }),
-              /* @__PURE__ */ jsx53(
+              /* @__PURE__ */ jsx54(
                 HistorySidebar,
                 {
                   threads,
@@ -16313,12 +17142,12 @@ function Chat({
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs36("div", { className: "flex-1 p-4", children: [
-          errorMessage && /* @__PURE__ */ jsx53("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__ */ jsx53("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__ */ jsx53("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__ */ jsx53("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 && !canLoadMoreMessages ? /* @__PURE__ */ jsx53(
+        /* @__PURE__ */ jsxs37("div", { className: "flex-1 p-4", children: [
+          errorMessage && /* @__PURE__ */ jsx54("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__ */ jsx54("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__ */ jsx54("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__ */ jsx54("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 && !canLoadMoreMessages ? /* @__PURE__ */ jsx54(
             StartScreen,
             {
               startScreen,
@@ -16327,10 +17156,10 @@ function Chat({
               promptSendDisabled: isSubmissionBlocked,
               promptEditDisabled: isPromptEditDisabled
             }
-          ) : /* @__PURE__ */ jsxs36("div", { className: "space-y-4", children: [
-            canLoadMoreMessages && /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-3 py-1", children: [
-              /* @__PURE__ */ jsx53("div", { className: "h-px min-w-8 flex-1 bg-border" }),
-              /* @__PURE__ */ jsx53(
+          ) : /* @__PURE__ */ jsxs37("div", { className: "space-y-4", children: [
+            canLoadMoreMessages && /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-3 py-1", children: [
+              /* @__PURE__ */ jsx54("div", { className: "h-px min-w-8 flex-1 bg-border" }),
+              /* @__PURE__ */ jsx54(
                 Button,
                 {
                   type: "button",
@@ -16342,7 +17171,7 @@ function Chat({
                   children: isLoadingMoreMessages ? t("chat.loadingMoreMessages") : t("chat.loadMoreMessages")
                 }
               ),
-              /* @__PURE__ */ jsx53("div", { className: "h-px min-w-8 flex-1 bg-border" })
+              /* @__PURE__ */ jsx54("div", { className: "h-px min-w-8 flex-1 bg-border" })
             ] }),
             messages.map((message, index) => {
               const messageType = String(message.type);
@@ -16379,7 +17208,7 @@ function Chat({
               if (!isAssistantMessage && !hasPlainRenderableContent && !hasHumanAttachments && humanRuntimeCapabilityOptions.length === 0 && humanReferences.length === 0) {
                 return null;
               }
-              return /* @__PURE__ */ jsx53(
+              return /* @__PURE__ */ jsx54(
                 "div",
                 {
                   className: cn(
@@ -16387,7 +17216,7 @@ function Chat({
                     message.type === "human" ? "justify-end" : "justify-start -ml-1"
                     // AI messages: slightly closer to left
                   ),
-                  children: /* @__PURE__ */ jsxs36(
+                  children: /* @__PURE__ */ jsxs37(
                     "div",
                     {
                       className: cn(
@@ -16395,7 +17224,7 @@ function Chat({
                         isAssistantMessage && "min-w-0 flex-1"
                       ),
                       children: [
-                        /* @__PURE__ */ jsx53(
+                        /* @__PURE__ */ jsx54(
                           "div",
                           {
                             ...canQuoteMessage ? {
@@ -16407,7 +17236,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__ */ jsx53(
+                            children: isAssistantMessage ? /* @__PURE__ */ jsx54(
                               AssistantMessage,
                               {
                                 message: {
@@ -16426,25 +17255,25 @@ function Chat({
                                 organizationId: stream.organizationId,
                                 apiUrl: stream.apiUrl
                               }
-                            ) : /* @__PURE__ */ jsxs36(Fragment9, { children: [
-                              message.type === "human" && humanRuntimeCapabilityOptions.length > 0 && /* @__PURE__ */ jsx53("div", { className: "mb-2 flex flex-wrap gap-1.5", children: humanRuntimeCapabilityOptions.map((option) => /* @__PURE__ */ jsxs36(
+                            ) : /* @__PURE__ */ jsxs37(Fragment9, { children: [
+                              message.type === "human" && humanRuntimeCapabilityOptions.length > 0 && /* @__PURE__ */ jsx54("div", { className: "mb-2 flex flex-wrap gap-1.5", children: humanRuntimeCapabilityOptions.map((option) => /* @__PURE__ */ jsxs37(
                                 "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__ */ jsx53(
+                                    /* @__PURE__ */ jsx54(
                                       RuntimeCapabilityIcon,
                                       {
                                         option,
                                         variant: "chip"
                                       }
                                     ),
-                                    /* @__PURE__ */ jsx53("span", { className: "max-w-[9rem] truncate", children: option.label })
+                                    /* @__PURE__ */ jsx54("span", { className: "max-w-[9rem] truncate", children: option.label })
                                   ]
                                 },
                                 `${option.type}:${option.id}`
                               )) }),
-                              message.type === "human" && humanReferences.length > 0 && /* @__PURE__ */ jsx53("div", { className: "mb-2 flex flex-wrap gap-1.5", children: humanReferences.map((reference) => /* @__PURE__ */ jsx53(
+                              message.type === "human" && humanReferences.length > 0 && /* @__PURE__ */ jsx54("div", { className: "mb-2 flex flex-wrap gap-1.5", children: humanReferences.map((reference) => /* @__PURE__ */ jsx54(
                                 ReferenceChip,
                                 {
                                   reference,
@@ -16452,29 +17281,29 @@ function Chat({
                                 },
                                 getReferenceKey(reference)
                               )) }),
-                              message.type === "human" && humanAttachments.length > 0 && /* @__PURE__ */ jsx53("div", { className: "flex flex-wrap gap-1.5 mb-2", children: humanAttachments.map((file, fileIndex) => /* @__PURE__ */ jsxs36(
+                              message.type === "human" && humanAttachments.length > 0 && /* @__PURE__ */ jsx54("div", { className: "flex flex-wrap gap-1.5 mb-2", children: humanAttachments.map((file, fileIndex) => /* @__PURE__ */ jsxs37(
                                 "div",
                                 {
                                   className: "flex items-center gap-1.5 rounded-md bg-primary-foreground/20 px-2 py-1 text-xs",
                                   children: [
-                                    /* @__PURE__ */ jsx53(FileText5, { size: 12 }),
-                                    /* @__PURE__ */ jsx53("span", { className: "max-w-[100px] truncate", children: file.originalName ?? file.id })
+                                    /* @__PURE__ */ jsx54(FileText5, { size: 12 }),
+                                    /* @__PURE__ */ jsx54("span", { className: "max-w-[100px] truncate", children: file.originalName ?? file.id })
                                   ]
                                 },
                                 fileIndex
                               )) }),
-                              Array.isArray(message.content) ? message.content.map((part, partIndex) => /* @__PURE__ */ jsx53(
+                              Array.isArray(message.content) ? message.content.map((part, partIndex) => /* @__PURE__ */ jsx54(
                                 "p",
                                 {
                                   className: "wrap-break-word text-sm leading-relaxed",
                                   children: formatMessageContent(part)
                                 },
                                 `${part.type}-${partIndex}`
-                              )) : /* @__PURE__ */ jsx53("span", { className: "wrap-break-word text-sm leading-relaxed", children: formatMessageContent(message.content) })
+                              )) : /* @__PURE__ */ jsx54("span", { className: "wrap-break-word text-sm leading-relaxed", children: formatMessageContent(message.content) })
                             ] })
                           }
                         ),
-                        /* @__PURE__ */ jsx53(
+                        /* @__PURE__ */ jsx54(
                           MessageActions,
                           {
                             content: messageContent,
@@ -16512,7 +17341,7 @@ function Chat({
                 stream.isLoading,
                 { now: streamingNow }
               );
-              return /* @__PURE__ */ jsx53("div", { className: "flex justify-start gap-3 -ml-2", children: /* @__PURE__ */ jsx53("div", { className: "max-w-full rounded-2xl py-2.5", children: /* @__PURE__ */ jsx53(
+              return /* @__PURE__ */ jsx54("div", { className: "flex justify-start gap-3 -ml-2", children: /* @__PURE__ */ jsx54("div", { className: "max-w-full rounded-2xl py-2.5", children: /* @__PURE__ */ jsx54(
                 AssistantStreamingIndicator,
                 {
                   status: fallbackStreamingStatus ?? "loading"
@@ -16521,7 +17350,7 @@ function Chat({
             })()
           ] })
         ] }),
-        !isAtBottom && messages.length > 0 && /* @__PURE__ */ jsx53("div", { className: "sticky bottom-20 z-20 flex justify-center px-4 pointer-events-none", children: /* @__PURE__ */ jsx53(
+        !isAtBottom && messages.length > 0 && /* @__PURE__ */ jsx54("div", { className: "sticky bottom-20 z-20 flex justify-center px-4 pointer-events-none", children: /* @__PURE__ */ jsx54(
           Button,
           {
             type: "button",
@@ -16534,10 +17363,10 @@ function Chat({
             onClick: () => scrollToBottom(true, true),
             "aria-label": t("chat.scrollToBottom"),
             title: t("chat.scrollToBottom"),
-            children: /* @__PURE__ */ jsx53(ArrowDown2, { size: 16 })
+            children: /* @__PURE__ */ jsx54(ArrowDown2, { size: 16 })
           }
         ) }),
-        quoteSelection && /* @__PURE__ */ jsx53(
+        quoteSelection && /* @__PURE__ */ jsx54(
           "div",
           {
             className: "pointer-events-none fixed z-50",
@@ -16546,7 +17375,7 @@ function Chat({
               left: `${quoteSelection.left}px`,
               transform: "translateX(-50%)"
             },
-            children: /* @__PURE__ */ jsxs36(
+            children: /* @__PURE__ */ jsxs37(
               Button,
               {
                 type: "button",
@@ -16558,16 +17387,16 @@ function Chat({
                 "aria-label": t("composer.quoteSelection"),
                 title: t("composer.quoteSelection"),
                 children: [
-                  /* @__PURE__ */ jsx53(Quote, { size: 14 }),
+                  /* @__PURE__ */ jsx54(Quote, { size: 14 }),
                   t("composer.quoteSelection")
                 ]
               }
             )
           }
         ),
-        /* @__PURE__ */ jsxs36("div", { className: "p-2 sticky bottom-0 z-10 bg-background", children: [
-          threadErrorMessage && /* @__PURE__ */ jsx53("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__ */ jsx53(
+        /* @__PURE__ */ jsxs37("div", { className: "p-2 sticky bottom-0 z-10 bg-background", children: [
+          threadErrorMessage && /* @__PURE__ */ jsx54("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__ */ jsx54(
             ChatAttachments,
             {
               ref: attachmentsRef,
@@ -16581,7 +17410,7 @@ function Chat({
               onStateChange: setAttachmentState
             }
           ),
-          references.length > 0 && /* @__PURE__ */ jsx53("div", { className: "mb-3 flex flex-wrap gap-2", children: references.map((reference) => /* @__PURE__ */ jsx53(
+          references.length > 0 && /* @__PURE__ */ jsx54("div", { className: "mb-3 flex flex-wrap gap-2", children: references.map((reference) => /* @__PURE__ */ jsx54(
             ReferenceChip,
             {
               reference,
@@ -16595,16 +17424,16 @@ function Chat({
             },
             getReferenceKey(reference)
           )) }),
-          detachedRunRuntimeCapabilityOptions.length > 0 && /* @__PURE__ */ jsxs36("div", { className: "mb-2 flex flex-wrap items-center gap-2", children: [
-            /* @__PURE__ */ jsx53("span", { className: "text-xs text-muted-foreground", children: t("composer.capabilities.runOnly") }),
-            detachedRunRuntimeCapabilityOptions.map((option) => /* @__PURE__ */ jsxs36(
+          detachedRunRuntimeCapabilityOptions.length > 0 && /* @__PURE__ */ jsxs37("div", { className: "mb-2 flex flex-wrap items-center gap-2", children: [
+            /* @__PURE__ */ jsx54("span", { className: "text-xs text-muted-foreground", children: t("composer.capabilities.runOnly") }),
+            detachedRunRuntimeCapabilityOptions.map((option) => /* @__PURE__ */ jsxs37(
               "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__ */ jsx53(RuntimeCapabilityIcon, { option, variant: "chip" }),
-                  /* @__PURE__ */ jsx53("span", { className: "max-w-40 truncate", children: option.label }),
-                  /* @__PURE__ */ jsx53(
+                  /* @__PURE__ */ jsx54(RuntimeCapabilityIcon, { option, variant: "chip" }),
+                  /* @__PURE__ */ jsx54("span", { className: "max-w-40 truncate", children: option.label }),
+                  /* @__PURE__ */ jsx54(
                     "button",
                     {
                       type: "button",
@@ -16612,7 +17441,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__ */ jsx53(X6, { size: 11 })
+                      children: /* @__PURE__ */ jsx54(X6, { size: 11 })
                     }
                   )
                 ]
@@ -16620,7 +17449,7 @@ function Chat({
               `${option.type}:${option.id}`
             ))
           ] }),
-          showGoalStatus && /* @__PURE__ */ jsxs36(
+          showGoalStatus && /* @__PURE__ */ jsxs37(
             "div",
             {
               className: cn(
@@ -16628,7 +17457,7 @@ function Chat({
                 isGoalObjectiveExpanded ? "items-start" : "items-center"
               ),
               children: [
-                /* @__PURE__ */ jsx53(
+                /* @__PURE__ */ jsx54(
                   Target2,
                   {
                     className: cn(
@@ -16637,13 +17466,13 @@ function Chat({
                     )
                   }
                 ),
-                /* @__PURE__ */ jsxs36("div", { className: "min-w-0 flex-1", children: [
-                  /* @__PURE__ */ jsxs36("div", { className: "flex min-w-0 items-center gap-2", children: [
-                    /* @__PURE__ */ jsx53("span", { className: "font-medium", children: t("chat.goal.label") }),
-                    threadGoal && /* @__PURE__ */ jsx53("span", { className: "shrink-0 rounded-md bg-muted px-1.5 py-0.5 text-[11px] text-muted-foreground", children: t(`chat.goal.status.${threadGoal.status}`) }),
-                    isGoalLoading && /* @__PURE__ */ jsx53(Loader28, { className: "size-3 animate-spin text-muted-foreground" })
+                /* @__PURE__ */ jsxs37("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsxs37("div", { className: "flex min-w-0 items-center gap-2", children: [
+                    /* @__PURE__ */ jsx54("span", { className: "font-medium", children: t("chat.goal.label") }),
+                    threadGoal && /* @__PURE__ */ jsx54("span", { className: "shrink-0 rounded-md bg-muted px-1.5 py-0.5 text-[11px] text-muted-foreground", children: t(`chat.goal.status.${threadGoal.status}`) }),
+                    isGoalLoading && /* @__PURE__ */ jsx54(Loader29, { className: "size-3 animate-spin text-muted-foreground" })
                   ] }),
-                  /* @__PURE__ */ jsx53(
+                  /* @__PURE__ */ jsx54(
                     "div",
                     {
                       className: cn(
@@ -16653,13 +17482,13 @@ function Chat({
                       children: goalError || threadGoal?.objective
                     }
                   ),
-                  threadGoal && /* @__PURE__ */ jsx53("div", { className: "mt-1 flex flex-wrap gap-x-3 gap-y-1 text-[11px] text-muted-foreground", children: /* @__PURE__ */ jsx53("span", { children: t("chat.goal.elapsed", {
+                  threadGoal && /* @__PURE__ */ jsx54("div", { className: "mt-1 flex flex-wrap gap-x-3 gap-y-1 text-[11px] text-muted-foreground", children: /* @__PURE__ */ jsx54("span", { children: t("chat.goal.elapsed", {
                     elapsed: formatGoalElapsed(displayedGoalElapsedSeconds)
                   }) }) })
                 ] }),
-                threadGoal && /* @__PURE__ */ jsxs36("div", { className: "flex shrink-0 items-center gap-1", children: [
-                  /* @__PURE__ */ jsxs36(Tooltip, { children: [
-                    /* @__PURE__ */ jsx53(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx53(
+                threadGoal && /* @__PURE__ */ jsxs37("div", { className: "flex shrink-0 items-center gap-1", children: [
+                  /* @__PURE__ */ jsxs37(Tooltip, { children: [
+                    /* @__PURE__ */ jsx54(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx54(
                       Button,
                       {
                         type: "button",
@@ -16670,13 +17499,13 @@ function Chat({
                           const prefix = "/goal edit ";
                           setComposerText(`${prefix}${threadGoal.objective}`);
                         },
-                        children: /* @__PURE__ */ jsx53(Pencil4, { className: "size-3" })
+                        children: /* @__PURE__ */ jsx54(Pencil4, { className: "size-3" })
                       }
                     ) }),
-                    /* @__PURE__ */ jsx53(TooltipContent, { children: t("chat.goal.edit") })
+                    /* @__PURE__ */ jsx54(TooltipContent, { children: t("chat.goal.edit") })
                   ] }),
-                  /* @__PURE__ */ jsxs36(Tooltip, { children: [
-                    /* @__PURE__ */ jsx53(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx53(
+                  /* @__PURE__ */ jsxs37(Tooltip, { children: [
+                    /* @__PURE__ */ jsx54(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx54(
                       Button,
                       {
                         type: "button",
@@ -16692,13 +17521,13 @@ function Chat({
                             executionType: "insert_invocation"
                           }
                         }),
-                        children: threadGoal.status === "paused" ? /* @__PURE__ */ jsx53(Play, { className: "size-3" }) : /* @__PURE__ */ jsx53(Pause, { className: "size-3" })
+                        children: threadGoal.status === "paused" ? /* @__PURE__ */ jsx54(Play, { className: "size-3" }) : /* @__PURE__ */ jsx54(Pause, { className: "size-3" })
                       }
                     ) }),
-                    /* @__PURE__ */ jsx53(TooltipContent, { children: threadGoal.status === "paused" ? t("chat.goal.resume") : t("chat.goal.pause") })
+                    /* @__PURE__ */ jsx54(TooltipContent, { children: threadGoal.status === "paused" ? t("chat.goal.resume") : t("chat.goal.pause") })
                   ] }),
-                  /* @__PURE__ */ jsxs36(Tooltip, { children: [
-                    /* @__PURE__ */ jsx53(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx53(
+                  /* @__PURE__ */ jsxs37(Tooltip, { children: [
+                    /* @__PURE__ */ jsx54(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx54(
                       Button,
                       {
                         type: "button",
@@ -16714,13 +17543,13 @@ function Chat({
                             executionType: "insert_invocation"
                           }
                         }),
-                        children: /* @__PURE__ */ jsx53(Trash23, { className: "size-3" })
+                        children: /* @__PURE__ */ jsx54(Trash23, { className: "size-3" })
                       }
                     ) }),
-                    /* @__PURE__ */ jsx53(TooltipContent, { children: t("chat.goal.clear") })
+                    /* @__PURE__ */ jsx54(TooltipContent, { children: t("chat.goal.clear") })
                   ] }),
-                  threadGoal.objective && !goalError && /* @__PURE__ */ jsxs36(Tooltip, { children: [
-                    /* @__PURE__ */ jsx53(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx53(
+                  threadGoal.objective && !goalError && /* @__PURE__ */ jsxs37(Tooltip, { children: [
+                    /* @__PURE__ */ jsx54(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx54(
                       Button,
                       {
                         type: "button",
@@ -16729,7 +17558,7 @@ function Chat({
                         "aria-expanded": isGoalObjectiveExpanded,
                         "aria-label": isGoalObjectiveExpanded ? t("chat.goal.collapseObjective") : t("chat.goal.expandObjective"),
                         onClick: () => setIsGoalObjectiveExpanded((expanded) => !expanded),
-                        children: /* @__PURE__ */ jsx53(
+                        children: /* @__PURE__ */ jsx54(
                           ChevronDown5,
                           {
                             className: cn(
@@ -16740,13 +17569,13 @@ function Chat({
                         )
                       }
                     ) }),
-                    /* @__PURE__ */ jsx53(TooltipContent, { children: isGoalObjectiveExpanded ? t("chat.goal.collapseObjective") : t("chat.goal.expandObjective") })
+                    /* @__PURE__ */ jsx54(TooltipContent, { children: isGoalObjectiveExpanded ? t("chat.goal.collapseObjective") : t("chat.goal.expandObjective") })
                   ] })
                 ] })
               ]
             }
           ),
-          /* @__PURE__ */ jsx53(
+          /* @__PURE__ */ jsx54(
             PendingRuntimeServices,
             {
               state: stream.runtimeActivities.sandboxServices,
@@ -16755,7 +17584,7 @@ function Chat({
               className: hasPendingTodos || hasPendingFollowUps ? "mb-2" : void 0
             }
           ),
-          /* @__PURE__ */ jsx53(
+          /* @__PURE__ */ jsx54(
             PendingTodos,
             {
               snapshot: stream.todos,
@@ -16763,7 +17592,7 @@ function Chat({
               className: hasPendingFollowUps ? "mb-2" : void 0
             }
           ),
-          /* @__PURE__ */ jsx53(
+          /* @__PURE__ */ jsx54(
             PendingFollowUps,
             {
               items: pendingFollowUps,
@@ -16776,7 +17605,7 @@ function Chat({
               attachToComposer: true
             }
           ),
-          /* @__PURE__ */ jsx53(
+          /* @__PURE__ */ jsx54(
             RequestUserInputPanel,
             {
               request: stream.pendingRequestUserInput,
@@ -16785,7 +17614,7 @@ function Chat({
               attachToComposer: true
             }
           ),
-          /* @__PURE__ */ jsx53(
+          /* @__PURE__ */ jsx54(
             HITLApprovalPanel,
             {
               request: stream.pendingHITLRequest,
@@ -16794,7 +17623,7 @@ function Chat({
               attachToComposer: true
             }
           ),
-          runtimeCapabilityPalette && /* @__PURE__ */ jsx53(
+          runtimeCapabilityPalette && /* @__PURE__ */ jsx54(
             SlashPalette,
             {
               palette: runtimeCapabilityPalette,
@@ -16808,7 +17637,7 @@ function Chat({
               onSelect: selectSlashPaletteOption
             }
           ),
-          /* @__PURE__ */ jsx53("form", { className: "flex items-end", onSubmit: handleSubmit, children: /* @__PURE__ */ jsxs36(
+          /* @__PURE__ */ jsx54("form", { className: "flex items-end", onSubmit: handleSubmit, children: /* @__PURE__ */ jsxs37(
             "div",
             {
               "data-slot": "composer-input-shell",
@@ -16822,7 +17651,7 @@ function Chat({
                 composerInputRoundedClass
               ),
               children: [
-                /* @__PURE__ */ jsx53(
+                /* @__PURE__ */ jsx54(
                   "div",
                   {
                     ref: composerInputRef,
@@ -16844,7 +17673,7 @@ function Chat({
                       (missingConfig || isHistoryLoading || hasPendingInteractiveRequest) && "cursor-not-allowed opacity-50"
                     ),
                     children: renderedComposerParts.map(
-                      (part, index) => part.type === "text" ? /* @__PURE__ */ jsx53(React48.Fragment, { children: part.text }, `text-${index}`) : /* @__PURE__ */ jsxs36(
+                      (part, index) => part.type === "text" ? /* @__PURE__ */ jsx54(React49.Fragment, { children: part.text }, `text-${index}`) : /* @__PURE__ */ jsxs37(
                         "span",
                         {
                           "data-composer-capability-key": part.key,
@@ -16853,14 +17682,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__ */ jsx53(
+                            /* @__PURE__ */ jsx54(
                               RuntimeCapabilityIcon,
                               {
                                 option: part.capability,
                                 variant: "chip"
                               }
                             ),
-                            /* @__PURE__ */ jsx53("span", { className: "truncate", children: part.capability.label })
+                            /* @__PURE__ */ jsx54("span", { className: "truncate", children: part.capability.label })
                           ]
                         },
                         part.key
@@ -16869,14 +17698,14 @@ function Chat({
                   },
                   composerDomVersion
                 ),
-                /* @__PURE__ */ jsxs36(
+                /* @__PURE__ */ jsxs37(
                   "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__ */ jsxs36("div", { className: "pointer-events-none flex min-w-0 flex-1 items-center gap-1.5", children: [
-                        /* @__PURE__ */ jsx53("div", { className: "pointer-events-auto flex shrink-0 items-center gap-1.5", children: /* @__PURE__ */ jsx53(
+                      /* @__PURE__ */ jsxs37("div", { className: "pointer-events-none flex min-w-0 flex-1 items-center gap-1.5", children: [
+                        /* @__PURE__ */ jsx54("div", { className: "pointer-events-auto flex shrink-0 items-center gap-1.5", children: /* @__PURE__ */ jsx54(
                           ComposerMenu,
                           {
                             composer,
@@ -16894,20 +17723,20 @@ function Chat({
                             disabled: missingConfig || isHistoryLoading || hasPendingInteractiveRequest
                           }
                         ) }),
-                        selectedTool && /* @__PURE__ */ jsxs36("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__ */ jsx53("span", { className: "truncate", children: selectedTool.shortLabel ?? selectedTool.label }),
-                          /* @__PURE__ */ jsx53(
+                        selectedTool && /* @__PURE__ */ jsxs37("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__ */ jsx54("span", { className: "truncate", children: selectedTool.shortLabel ?? selectedTool.label }),
+                          /* @__PURE__ */ jsx54(
                             "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__ */ jsx53(X6, { size: 12 })
+                              children: /* @__PURE__ */ jsx54(X6, { size: 12 })
                             }
                           )
                         ] })
                       ] }),
-                      /* @__PURE__ */ jsx53("div", { className: "pointer-events-auto shrink-0", children: /* @__PURE__ */ jsx53(
+                      /* @__PURE__ */ jsx54("div", { className: "pointer-events-auto shrink-0", children: /* @__PURE__ */ jsx54(
                         SendButton,
                         {
                           disabled: isSendDisabled,
@@ -16930,7 +17759,7 @@ function Chat({
               ]
             }
           ) }),
-          disclaimer?.text && /* @__PURE__ */ jsx53(
+          disclaimer?.text && /* @__PURE__ */ jsx54(
             "p",
             {
               className: cn(
@@ -16940,12 +17769,12 @@ function Chat({
               children: disclaimer.text
             }
           ),
-          /* @__PURE__ */ jsxs36("div", { className: "mt-2 flex items-center justify-center gap-2 text-xs text-muted-foreground", children: [
-            /* @__PURE__ */ jsx53("span", { children: t("chat.poweredBy") }),
-            /* @__PURE__ */ jsx53(ContextUsageIndicator, { className: "absolute right-4" })
+          /* @__PURE__ */ jsxs37("div", { className: "mt-2 flex items-center justify-center gap-2 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsx54("span", { children: t("chat.poweredBy") }),
+            /* @__PURE__ */ jsx54(ContextUsageIndicator, { className: "absolute right-4" })
           ] })
         ] }),
-        /* @__PURE__ */ jsx53(
+        /* @__PURE__ */ jsx54(
           SettingsSheet,
           {
             open: petSettingsOpen,
@@ -16955,17 +17784,17 @@ function Chat({
             onSave: savePetLocalSettings
           }
         ),
-        /* @__PURE__ */ jsx53(PetBridge, { pet: effectivePet, state: petAutoState })
+        /* @__PURE__ */ jsx54(PetBridge, { pet: effectivePet, state: petAutoState })
       ]
     }
   );
 }
 // src/components/ui/separator.tsx
-import * as React49 from "react";
-import { jsx as jsx54 } from "react/jsx-runtime";
-var Separator = React49.forwardRef(
-  ({ className, orientation = "horizontal", ...props }, ref) => /* @__PURE__ */ jsx54(
+import * as React50 from "react";
+import { jsx as jsx55 } from "react/jsx-runtime";
+var Separator = React50.forwardRef(
+  ({ className, orientation = "horizontal", ...props }, ref) => /* @__PURE__ */ jsx55(
     "div",
     {
       ref,