@xpert-ai/chatkit-ui 0.3.21 → 0.4.1

package/dist/index.js

@@ -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,
@@ -1680,6 +1680,9 @@ var en_US_default = {
     loading: "Loading",
     thinking: "Thinking",
     answering: "Answering",
+    mcpApp: {
+      loading: "Loading MCP App"
+    },
     contextCompression: {
       running: "Automatically compressing context",
       success: "Context automatically compressed",
@@ -2070,6 +2073,9 @@ var zh_CN_default = {
     loading: "\u6B63\u5728\u52A0\u8F7D",
     thinking: "\u6B63\u5728\u601D\u8003",
     answering: "\u6B63\u5728\u751F\u6210",
+    mcpApp: {
+      loading: "\u6B63\u5728\u52A0\u8F7D MCP App"
+    },
     contextCompression: {
       running: "\u6B63\u5728\u81EA\u52A8\u538B\u7F29\u4E0A\u4E0B\u6587",
       success: "\u4E0A\u4E0B\u6587\u5DF2\u81EA\u52A8\u538B\u7F29",
@@ -7738,8 +7744,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 +11667,985 @@ 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";
+var EMPTY_INPUT_SCHEMA = {
+  type: "object",
+  properties: {}
+};
+function isRecord5(value) {
+  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
+}
+function readRecord(value) {
+  return isRecord5(value) ? value : void 0;
+}
+function readNonEmptyRecord(value) {
+  const record = readRecord(value);
+  return record && Object.keys(record).length ? record : void 0;
+}
+function readString3(value) {
+  return typeof value === "string" ? value : void 0;
+}
+function readBoolean(value) {
+  return typeof value === "boolean" ? value : void 0;
+}
+function readLocalizedText(value) {
+  if (typeof value === "string") return value;
+  if (isRecord5(value)) return value;
+  return void 0;
+}
+function readIconDefinition(value) {
+  if (!isRecord5(value)) return void 0;
+  return typeof value.type === "string" && typeof value.value === "string" ? value : void 0;
+}
+function readStringList(value) {
+  if (!Array.isArray(value)) return void 0;
+  const strings = value.filter((item) => typeof item === "string");
+  return strings.length ? strings : void 0;
+}
+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 normalizeCspMetadata(value) {
+  const raw = readRecord(value);
+  if (!raw) return void 0;
+  const csp = {};
+  const connectDomains = readStringList(raw.connectDomains);
+  const resourceDomains = readStringList(raw.resourceDomains);
+  const frameDomains = readStringList(raw.frameDomains);
+  const baseUriDomains = readStringList(raw.baseUriDomains);
+  if (connectDomains) csp.connectDomains = connectDomains;
+  if (resourceDomains) csp.resourceDomains = resourceDomains;
+  if (frameDomains) csp.frameDomains = frameDomains;
+  if (baseUriDomains) csp.baseUriDomains = baseUriDomains;
+  return Object.keys(csp).length ? csp : void 0;
+}
+function normalizePermissionGrant(value) {
+  return value === true || isRecord5(value) ? value : void 0;
+}
+function normalizePermissionsMetadata(value) {
+  const raw = readRecord(value);
+  if (!raw) return void 0;
+  const permissions = {};
+  const camera = normalizePermissionGrant(raw.camera);
+  const microphone = normalizePermissionGrant(raw.microphone);
+  const geolocation = normalizePermissionGrant(raw.geolocation);
+  const clipboardWrite = normalizePermissionGrant(raw.clipboardWrite);
+  if (camera !== void 0) permissions.camera = camera;
+  if (microphone !== void 0) permissions.microphone = microphone;
+  if (geolocation !== void 0) permissions.geolocation = geolocation;
+  if (clipboardWrite !== void 0) permissions.clipboardWrite = clipboardWrite;
+  return Object.keys(permissions).length ? permissions : void 0;
+}
+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 normalizeInputSchema(value) {
+  const raw = readRecord(value);
+  if (!raw || raw.type !== void 0 && raw.type !== "object") {
+    return EMPTY_INPUT_SCHEMA;
+  }
+  return {
+    ...raw,
+    type: "object",
+    properties: readRecord(raw.properties) ?? {},
+    ...Array.isArray(raw.required) && raw.required.every((item) => typeof item === "string") ? { required: raw.required } : {}
+  };
+}
+function normalizeMcpAppToolInfo(value, data, resource = {}) {
+  const raw = readRecord(value) ?? {};
+  const rawTool = readRecord(raw.tool) ?? {};
+  const rawName = readString3(raw.name);
+  const originalName = readString3(rawTool.name) ?? readString3(raw.originalName) ?? data.toolName;
+  const title = readLocalizedText(rawTool.title) ?? readLocalizedText(raw.title) ?? resource.title ?? data.title ?? data.toolName;
+  const description = readLocalizedText(rawTool.description) ?? readLocalizedText(raw.description) ?? resource.description ?? data.description;
+  const icon = readIconDefinition(rawTool.icon) ?? readIconDefinition(raw.icon) ?? resource.icon ?? data.icon;
+  return {
+    ...raw,
+    id: data.toolCallId,
+    name: rawName ?? data.toolName,
+    originalName,
+    title,
+    ...description ? { description } : {},
+    ...icon ? { icon } : {},
+    serverName: readString3(raw.serverName) ?? data.serverName,
+    toolCallId: readString3(raw.toolCallId) ?? data.toolCallId,
+    toolsetId: readString3(raw.toolsetId) ?? data.toolsetId,
+    tool: {
+      ...rawTool,
+      name: originalName,
+      title: readLocalizedText(rawTool.title) ?? title,
+      inputSchema: normalizeInputSchema(
+        rawTool.inputSchema ?? raw.inputSchema
+      ),
+      ...description ? {
+        description: readLocalizedText(rawTool.description) ?? description
+      } : {},
+      ...icon ? { icon: readIconDefinition(rawTool.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 createTextContentBlock(text) {
+  return {
+    type: "text",
+    text
+  };
+}
+function normalizeContentBlocks(value) {
+  if (!Array.isArray(value)) return [];
+  return value.filter(
+    (item) => isRecord5(item) && typeof item.type === "string"
+  );
+}
+function extractLegacyArtifactMeta(value) {
+  const meta = readRecord(value._meta);
+  if (meta) return meta;
+  const entries = Object.entries(value).filter(
+    ([key]) => key !== "structuredContent" && key !== "isError"
+  );
+  return entries.length ? Object.fromEntries(entries) : void 0;
+}
+function normalizeToolArtifact(value) {
+  if (isRecord5(value)) {
+    return {
+      ...readRecord(value.structuredContent) ? { structuredContent: readRecord(value.structuredContent) } : {},
+      ...readBoolean(value.isError) !== void 0 ? { isError: readBoolean(value.isError) } : {},
+      ...extractLegacyArtifactMeta(value) ? { _meta: extractLegacyArtifactMeta(value) } : {}
+    };
+  }
+  if (!Array.isArray(value)) return {};
+  return value.reduce((result, item) => {
+    const normalized = normalizeToolArtifact(item);
+    return {
+      ...result,
+      ...normalized,
+      _meta: result._meta ?? normalized._meta,
+      structuredContent: result.structuredContent ?? normalized.structuredContent,
+      isError: result.isError ?? normalized.isError
+    };
+  }, {});
+}
+function normalizeCallToolResult(value) {
+  if (value === void 0) {
+    return {
+      content: []
+    };
+  }
+  if (isRecord5(value)) {
+    if (value.toolResult !== void 0 && !Array.isArray(value.content)) {
+      return normalizeCallToolResult(value.toolResult);
+    }
+    const content = normalizeContentBlocks(value.content);
+    const result = {
+      content: content.length ? content : []
+    };
+    const structuredContent = readRecord(value.structuredContent);
+    const isError = readBoolean(value.isError);
+    const meta = readRecord(value._meta);
+    if (structuredContent) result.structuredContent = structuredContent;
+    if (isError !== void 0) result.isError = isError;
+    if (meta) result._meta = meta;
+    return result;
+  }
+  if (Array.isArray(value) && value.length >= 2) {
+    const [content, artifact] = value;
+    const artifactFields = normalizeToolArtifact(artifact);
+    return {
+      content: [
+        createTextContentBlock(
+          typeof content === "string" ? content : stringifyToolResult(content)
+        )
+      ],
+      ...artifactFields
+    };
+  }
+  return {
+    content: [createTextContentBlock(stringifyToolResult(value))]
+  };
+}
+function normalizeMcpAppResourceResponse(value, data) {
+  const raw = readRecord(value);
+  if (!raw) {
+    throw new Error("MCP App resource response must be an object");
+  }
+  const html = decodeResourceHtml(raw);
+  if (!html) {
+    throw new Error("MCP App resource did not include HTML content");
+  }
+  const resourceInfo = {
+    title: readLocalizedText(raw.title),
+    description: readLocalizedText(raw.description),
+    icon: readIconDefinition(raw.icon)
+  };
+  const toolInput = readNonEmptyRecord(raw.toolInput) ?? data.toolInput ?? readRecord(raw.toolInput) ?? {};
+  const rawToolResult = raw.toolResult ?? data.toolResult;
+  return {
+    uri: readString3(raw.uri),
+    mimeType: readString3(raw.mimeType),
+    html,
+    resourceUri: readString3(raw.resourceUri),
+    title: resourceInfo.title,
+    description: resourceInfo.description,
+    icon: resourceInfo.icon,
+    csp: normalizeCspMetadata(raw.csp),
+    permissions: normalizePermissionsMetadata(raw.permissions),
+    domain: readString3(raw.domain),
+    prefersBorder: readBoolean(raw.prefersBorder),
+    toolInfo: normalizeMcpAppToolInfo(raw.toolInfo, data, resourceInfo),
+    toolInput,
+    hasToolResult: rawToolResult !== void 0,
+    toolResult: normalizeCallToolResult(rawToolResult),
+    rawToolResult
+  };
+}
+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
+      }
+    });
+    if (!resource.hasToolResult) {
+      return;
+    }
+    postToApp({
+      jsonrpc: "2.0",
+      method: "ui/notifications/tool-result",
+      params: {
+        ...resource.toolResult,
+        toolCallId: data.toolCallId,
+        toolName: data.toolName,
+        // Legacy compatibility for apps written before the 2026-01-26 notification shape.
+        result: resource.rawToolResult
+      }
+    });
+  }, [data.toolCallId, 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 normalizedResource = normalizeMcpAppResourceResponse(
+          payload,
+          data
+        );
+        setResource(normalizedResource);
+        const hostLocale = normalizeHostLocale(i18n2.language);
+        setSrcDoc(
+          injectMcpAppTheme(
+            injectCsp(
+              injectMcpAppLocale(normalizedResource.html, hostLocale),
+              normalizedResource.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,
+    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 = resource?.toolInfo ?? normalizeMcpAppToolInfo(void 0, data);
+        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,
+              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: i18n2.t("message.mcpApp.loading") })
+        ] }) : 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 +12663,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 +12684,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 +12696,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 +12711,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 +12750,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 +12768,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 +12783,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 +12805,7 @@ function ComponentBlock({ content }) {
       element.removeEventListener("scroll", updateAutoScrollState);
     };
   }, [isExpanded]);
-  React35.useEffect(() => {
+  React36.useEffect(() => {
     if (status !== "running") {
       shouldAutoScrollRef.current = true;
       return;
@@ -11832,15 +12818,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 +12836,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 +12864,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 +12920,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 +12940,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 +12959,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 +12975,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 +12996,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 +13013,7 @@ function renderAssistantRenderUnits(units, message, lookupMessages, options, dep
     }
     flushEntries(true);
     rendered.push(
-      /* @__PURE__ */ jsx41(
+      /* @__PURE__ */ jsx42(
         AgentRunGroup,
         {
           node: unit.node,
@@ -12049,7 +13038,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 +13048,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 +13074,7 @@ function AssistantStreamingIndicator({
     thinking: t("message.thinking"),
     answering: t("message.answering")
   };
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29(
     "div",
     {
       className: cn(
@@ -12093,18 +13082,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 +13122,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 +13166,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 +13179,7 @@ function MessageActions({
   if (isStreaming) {
     return null;
   }
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs30(
     "div",
     {
       className: cn(
@@ -12198,7 +13187,7 @@ function MessageActions({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx42(
+        /* @__PURE__ */ jsx43(
           "button",
           {
             type: "button",
@@ -12208,17 +13197,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 +13228,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 +13255,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 +13263,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 +13273,7 @@ function StartScreen({
               "focus-within:ring-2 focus-within:ring-primary/20"
             ),
             children: [
-              /* @__PURE__ */ jsxs30(
+              /* @__PURE__ */ jsxs31(
                 "button",
                 {
                   type: "button",
@@ -12295,12 +13284,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 +13302,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 +13315,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 +13330,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 +13368,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 +13393,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 +13407,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 +13416,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 +13424,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 +13449,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 +13471,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 +13485,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 +13502,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 +13528,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 +13539,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 +13559,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 +13592,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 +13625,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 +13674,7 @@ function ContextUsageIndicator({
     };
   }, [
     assistantAgentKey,
+    hasApiConfiguration,
     realtimeUsedContextSize,
     stream.apiKey,
     stream.apiUrl,
@@ -12712,8 +13703,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 +13713,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 +13747,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 +13775,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 +13797,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 +13805,7 @@ function SelectTrigger({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs34(
     SelectPrimitive.Trigger,
     {
       "data-slot": "select-trigger",
@@ -12826,7 +13817,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 +13829,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 +13839,8 @@ function SelectContent({
       align,
       ...props,
       children: [
-        /* @__PURE__ */ jsx47(SelectScrollUpButton, {}),
-        /* @__PURE__ */ jsx47(
+        /* @__PURE__ */ jsx48(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx48(
           SelectPrimitive.Viewport,
           {
             "data-position": position,
@@ -12860,7 +13851,7 @@ function SelectContent({
             children
           }
         ),
-        /* @__PURE__ */ jsx47(SelectScrollDownButton, {})
+        /* @__PURE__ */ jsx48(SelectScrollDownButton, {})
       ]
     }
   ) });
@@ -12870,7 +13861,7 @@ function SelectItem({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs34(
     SelectPrimitive.Item,
     {
       "data-slot": "select-item",
@@ -12880,8 +13871,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 +13881,7 @@ function SelectScrollUpButton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx48(
     SelectPrimitive.ScrollUpButton,
     {
       "data-slot": "select-scroll-up-button",
@@ -12899,7 +13890,7 @@ function SelectScrollUpButton({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx47(
+      children: /* @__PURE__ */ jsx48(
         ChevronUpIcon,
         {}
       )
@@ -12910,7 +13901,7 @@ function SelectScrollDownButton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx48(
     SelectPrimitive.ScrollDownButton,
     {
       "data-slot": "select-scroll-down-button",
@@ -12919,7 +13910,7 @@ function SelectScrollDownButton({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx47(
+      children: /* @__PURE__ */ jsx48(
         ChevronDownIcon2,
         {}
       )
@@ -12928,9 +13919,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 +13930,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 +13948,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 +13962,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 +13976,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 +13984,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 +14007,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 +14023,7 @@ function ToggleGroup({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx51(
     ToggleGroupPrimitive.Root,
     {
       "data-slot": "toggle-group",
@@ -13046,7 +14037,7 @@ function ToggleGroup({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx50(
+      children: /* @__PURE__ */ jsx51(
         ToggleGroupContext.Provider,
         {
           value: { variant, size: size2, spacing, orientation },
@@ -13063,8 +14054,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 +14295,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 +14303,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 +14312,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 +14334,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 +14350,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 +14374,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 +14403,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 +14416,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 +14433,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 +14445,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 +14454,7 @@ function SettingsSheet({
             children: t("pet.settings.builtin")
           }
         ),
-        /* @__PURE__ */ jsxs35(
+        /* @__PURE__ */ jsxs36(
           Select,
           {
             value: selectedBuiltinPet.id,
@@ -13474,26 +14465,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 +14494,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 +14503,7 @@ function SettingsSheet({
             children: t("pet.settings.atlasUrl")
           }
         ),
-        /* @__PURE__ */ jsx52(
+        /* @__PURE__ */ jsx53(
           Input,
           {
             id: "chatkit-pet-atlas",
@@ -13522,15 +14513,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 +14535,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 +14547,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 +14559,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 +14569,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 +15196,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 +15341,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 +15350,7 @@ function ReferenceChip({
       ),
       title: getReferenceTitle(reference),
       children: [
-        /* @__PURE__ */ jsx53(
+        /* @__PURE__ */ jsx54(
           Icon,
           {
             size: isComposer ? 14 : 12,
@@ -14369,8 +15360,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 +15371,7 @@ function ReferenceChip({
               children: getReferenceLabel(reference)
             }
           ),
-          metaLine && /* @__PURE__ */ jsx53(
+          metaLine && /* @__PURE__ */ jsx54(
             "div",
             {
               className: cn(
@@ -14391,7 +15382,7 @@ function ReferenceChip({
             }
           )
         ] }),
-        onRemove && removeLabel && /* @__PURE__ */ jsx53(
+        onRemove && removeLabel && /* @__PURE__ */ jsx54(
           "button",
           {
             type: "button",
@@ -14402,7 +15393,7 @@ function ReferenceChip({
             ),
             title: removeLabel,
             "aria-label": removeLabel,
-            children: /* @__PURE__ */ jsx53(X6, { size: 12 })
+            children: /* @__PURE__ */ jsx54(X6, { size: 12 })
           }
         )
       ]
@@ -14426,26 +15417,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 +15459,7 @@ function Chat({
       }
     }
   }, [stream.isLoading]);
-  React48.useEffect(() => {
+  React49.useEffect(() => {
     if (!stream.isLoading) {
       lastStreamOutputAtRef.current = null;
       setStreamingNow(Date.now());
@@ -14478,7 +15469,7 @@ function Chat({
     lastStreamOutputAtRef.current = now;
     setStreamingNow(now);
   }, [stream.messages, stream.isLoading]);
-  React48.useEffect(() => {
+  React49.useEffect(() => {
     if (!stream.isLoading) {
       return;
     }
@@ -14487,7 +15478,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 +15490,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 +15573,7 @@ function Chat({
     },
     [petRequired]
   );
-  const handlePetCommand = React48.useCallback(
+  const handlePetCommand = React49.useCallback(
     (mode) => {
       if (mode === "settings") {
         setPetSettingsOpen(true);
@@ -14604,7 +15595,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 +15604,7 @@ function Chat({
     historyMessagePagination?.isLoadingMore
   );
   const canLoadMoreMessages = Boolean(historyMessagePagination?.hasMore);
-  const draft = React48.useMemo(
+  const draft = React49.useMemo(
     () => getComposerPlainText(composerParts),
     [composerParts]
   );
@@ -14627,7 +15618,7 @@ function Chat({
     isEmpty: isComposerInputEmpty,
     isStacked: isComposerStacked
   });
-  const pendingFollowUps = React48.useMemo(
+  const pendingFollowUps = React49.useMemo(
     () => sortVisiblePendingFollowUps(stream.pendingFollowUps ?? []),
     [stream.pendingFollowUps]
   );
@@ -14636,11 +15627,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 +15641,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 +15654,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 +15664,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 +15676,7 @@ function Chat({
     ),
     [composerRuntimeCapabilitySelectionKeys, runRuntimeCapabilityOptions]
   );
-  const persistSessionRuntimeCapabilities = React48.useCallback(
+  const persistSessionRuntimeCapabilities = React49.useCallback(
     async (threadId, selection) => {
       if (!runtimeCapabilities || !selection) {
         return;
@@ -14710,10 +15701,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 +15740,7 @@ function Chat({
     },
     []
   );
-  const setComposerText = React48.useCallback(
+  const setComposerText = React49.useCallback(
     (text, caretOffset = text.length) => {
       commitComposerParts(createComposerTextParts(text), {
         caretOffset,
@@ -14759,7 +15750,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 +15762,7 @@ function Chat({
     });
   }, []);
   const parentMessenger = useParentMessenger({
-    onSetComposerValue: React48.useCallback(
+    onSetComposerValue: React49.useCallback(
       (payload) => {
         if (!payload) {
           return;
@@ -14794,10 +15785,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 +15802,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 +15850,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 +15893,7 @@ function Chat({
     },
     [cancelPendingAutoScroll, enableAutoFollow]
   );
-  React48.useEffect(() => {
+  React49.useEffect(() => {
     const viewport = viewportRef.current;
     if (!viewport) return;
     previousScrollTopRef.current = viewport.scrollTop;
@@ -14983,14 +15974,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 +16004,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 +16016,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 +16033,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 +16041,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 +16053,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 +16076,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 +16106,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 +16153,7 @@ function Chat({
     });
     return () => controller.abort();
   }, [missingConfig, stream.client, stream.assistantId]);
-  React48.useEffect(() => {
+  React49.useEffect(() => {
     setRunRuntimeCapabilities(
       createEmptyRuntimeCapabilitiesSelection(runtimeCapabilities)
     );
@@ -15211,10 +16202,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 +16246,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 +16264,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 +16276,7 @@ function Chat({
     },
     []
   );
-  const syncComposerInputFromElement = React48.useCallback(
+  const syncComposerInputFromElement = React49.useCallback(
     (input) => {
       const previousCapabilities = getComposerCapabilityPartMap(
         composerPartsRef.current
@@ -15303,25 +16294,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 +16332,7 @@ function Chat({
     },
     [commitComposerParts]
   );
-  const submitDraft = React48.useCallback(
+  const submitDraft = React49.useCallback(
     (submitOptions = {}) => {
       if (isSubmissionBlocked) return;
       const contentToSubmit = (submitOptions.inputText ?? trimmedDraft).trim();
@@ -15464,7 +16455,7 @@ function Chat({
       t
     ]
   );
-  const handleGoalCommand = React48.useCallback(
+  const handleGoalCommand = React49.useCallback(
     async ({
       args,
       commandSource,
@@ -15576,13 +16567,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 +16585,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 +16658,7 @@ function Chat({
     plugin: t("composer.slashCommands.empty.loadingCapabilities"),
     subAgent: t("composer.slashCommands.empty.loadingCapabilities")
   };
-  React48.useEffect(() => {
+  React49.useEffect(() => {
     if (!runtimeCapabilityPalette) {
       return;
     }
@@ -15686,7 +16677,7 @@ function Chat({
       );
     }
   }, [slashPaletteOptions.length, runtimeCapabilityPalette]);
-  React48.useLayoutEffect(() => {
+  React49.useLayoutEffect(() => {
     if (!runtimeCapabilityPalette) {
       return;
     }
@@ -15703,7 +16694,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 +16732,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 +16759,7 @@ function Chat({
     },
     [pendingFollowUps, setComposerText, stream]
   );
-  const handleQuoteSelection = React48.useCallback(() => {
+  const handleQuoteSelection = React49.useCallback(() => {
     if (!quoteSelection) {
       return;
     }
@@ -15784,7 +16775,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 +16794,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 +16908,7 @@ function Chat({
     }
     submitDraft();
   };
-  const handleComposerPaste = React48.useCallback(
+  const handleComposerPaste = React49.useCallback(
     (event) => {
       const clipboardData = event.clipboardData;
       if (!clipboardData) {
@@ -16019,13 +17010,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 +17025,7 @@ function Chat({
     },
     [focusComposerAt, isPromptEditDisabled, setComposerText]
   );
-  const loadConversationMessages = React48.useCallback(
+  const loadConversationMessages = React49.useCallback(
     async (recordId) => {
       if (missingConfig) {
         setHistoryError(missingConfigShortMessage);
@@ -16055,7 +17046,7 @@ function Chat({
     },
     [missingConfig, missingConfigShortMessage, stream, t]
   );
-  const handleLoadMoreMessages = React48.useCallback(async () => {
+  const handleLoadMoreMessages = React49.useCallback(async () => {
     if (!canLoadMoreMessages || isLoadingMoreMessages) {
       return;
     }
@@ -16164,15 +17155,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 +17194,7 @@ function Chat({
     fallbackTitle: t("history.threadFallback")
   });
   const assistantTitle = assistantName || resolvedTitle;
-  return /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs37(
     UploadDroppedFiles,
     {
       ref: viewportRef,
@@ -16218,10 +17209,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 +17220,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 +17231,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 +17247,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 +17264,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 +17284,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 +17304,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 +17318,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 +17333,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 +17370,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 +17378,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 +17386,7 @@ function Chat({
                         isAssistantMessage && "min-w-0 flex-1"
                       ),
                       children: [
-                        /* @__PURE__ */ jsx53(
+                        /* @__PURE__ */ jsx54(
                           "div",
                           {
                             ...canQuoteMessage ? {
@@ -16407,7 +17398,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 +17417,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 +17443,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 +17503,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 +17512,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 +17525,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 +17537,7 @@ function Chat({
               left: `${quoteSelection.left}px`,
               transform: "translateX(-50%)"
             },
-            children: /* @__PURE__ */ jsxs36(
+            children: /* @__PURE__ */ jsxs37(
               Button,
               {
                 type: "button",
@@ -16558,16 +17549,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 +17572,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 +17586,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 +17603,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 +17611,7 @@ function Chat({
               `${option.type}:${option.id}`
             ))
           ] }),
-          showGoalStatus && /* @__PURE__ */ jsxs36(
+          showGoalStatus && /* @__PURE__ */ jsxs37(
             "div",
             {
               className: cn(
@@ -16628,7 +17619,7 @@ function Chat({
                 isGoalObjectiveExpanded ? "items-start" : "items-center"
               ),
               children: [
-                /* @__PURE__ */ jsx53(
+                /* @__PURE__ */ jsx54(
                   Target2,
                   {
                     className: cn(
@@ -16637,13 +17628,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 +17644,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 +17661,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 +17683,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 +17705,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 +17720,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 +17731,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 +17746,7 @@ function Chat({
               className: hasPendingTodos || hasPendingFollowUps ? "mb-2" : void 0
             }
           ),
-          /* @__PURE__ */ jsx53(
+          /* @__PURE__ */ jsx54(
             PendingTodos,
             {
               snapshot: stream.todos,
@@ -16763,7 +17754,7 @@ function Chat({
               className: hasPendingFollowUps ? "mb-2" : void 0
             }
           ),
-          /* @__PURE__ */ jsx53(
+          /* @__PURE__ */ jsx54(
             PendingFollowUps,
             {
               items: pendingFollowUps,
@@ -16776,7 +17767,7 @@ function Chat({
               attachToComposer: true
             }
           ),
-          /* @__PURE__ */ jsx53(
+          /* @__PURE__ */ jsx54(
             RequestUserInputPanel,
             {
               request: stream.pendingRequestUserInput,
@@ -16785,7 +17776,7 @@ function Chat({
               attachToComposer: true
             }
           ),
-          /* @__PURE__ */ jsx53(
+          /* @__PURE__ */ jsx54(
             HITLApprovalPanel,
             {
               request: stream.pendingHITLRequest,
@@ -16794,7 +17785,7 @@ function Chat({
               attachToComposer: true
             }
           ),
-          runtimeCapabilityPalette && /* @__PURE__ */ jsx53(
+          runtimeCapabilityPalette && /* @__PURE__ */ jsx54(
             SlashPalette,
             {
               palette: runtimeCapabilityPalette,
@@ -16808,7 +17799,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 +17813,7 @@ function Chat({
                 composerInputRoundedClass
               ),
               children: [
-                /* @__PURE__ */ jsx53(
+                /* @__PURE__ */ jsx54(
                   "div",
                   {
                     ref: composerInputRef,
@@ -16844,7 +17835,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 +17844,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 +17860,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 +17885,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 +17921,7 @@ function Chat({
               ]
             }
           ) }),
-          disclaimer?.text && /* @__PURE__ */ jsx53(
+          disclaimer?.text && /* @__PURE__ */ jsx54(
             "p",
             {
               className: cn(
@@ -16940,12 +17931,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 +17946,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,