@agents24/chat-react 0.5.35 → 0.5.36

package/dist/ui/index.cjs

@@ -69,6 +69,16 @@ __export(ui_exports, {
   ChatMessageAction: () => ChatMessageAction,
   ChatMessageActions: () => ChatMessageActions,
   ChatMessageContent: () => ChatMessageContent,
+  CodeBlock: () => CodeBlock,
+  CodeBlockActions: () => CodeBlockActions,
+  CodeBlockContent: () => CodeBlockContent,
+  CodeBlockCopyButton: () => CodeBlockCopyButton,
+  CodeBlockDownloadButton: () => CodeBlockDownloadButton,
+  CodeBlockFooter: () => CodeBlockFooter,
+  CodeBlockHeader: () => CodeBlockHeader,
+  CodeBlockLine: () => CodeBlockLine,
+  CodeBlockTitle: () => CodeBlockTitle,
+  CodeBlockWrapButton: () => CodeBlockWrapButton,
   Marker: () => Marker,
   MarkerContent: () => MarkerContent,
   MarkerIcon: () => MarkerIcon,
@@ -110,6 +120,7 @@ __export(ui_exports, {
   useAudioRecorder: () => useAudioRecorder,
   useChatComposerFocus: () => useChatComposerFocus,
   useCompletionActionEntrance: () => useCompletionActionEntrance,
+  useHighlightedCode: () => useHighlightedCode,
   useLiveCompletionRuns: () => useLiveCompletionRuns
 });
 module.exports = __toCommonJS(ui_exports);
@@ -1524,7 +1535,7 @@ function QueueRow({ message, onRemove, onEdit }) {
 }
 function AgentChatQueue({ pending, queue, onRemove, onEdit, onResume, className }) {
   const [resumeError, setResumeError] = React7.useState(null);
-  if (!pending.length && !queue?.paused) return null;
+  if (!pending.length) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("section", { "aria-label": "Message queue", className: cn("a24-queue relative z-0 -mb-2 overflow-visible rounded-t-xl border border-b-0 border-border/50 bg-background pb-2", className), children: [
     queue?.paused ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex min-h-9 items-center justify-between gap-2 px-3 text-xs text-muted-foreground", children: [
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: "Queue paused" }),
@@ -1771,11 +1782,11 @@ function AgentChatDefaultActions({
 }
 
 // src/ui/agent-chat-message.tsx
-var React13 = __toESM(require("react"), 1);
-var import_lucide_react7 = require("lucide-react");
+var React16 = __toESM(require("react"), 1);
+var import_lucide_react9 = require("lucide-react");
 
 // src/ui/agent-response-timeline.tsx
-var React12 = __toESM(require("react"), 1);
+var React15 = __toESM(require("react"), 1);
 
 // src/streaming-text.ts
 var import_react = require("react");
@@ -2322,7 +2333,7 @@ function AgentChatContextCompressionRow({
 }
 
 // src/ui/message-response.tsx
-var React10 = __toESM(require("react"), 1);
+var React13 = __toESM(require("react"), 1);
 var import_streamdown = require("streamdown");
 
 // src/active-content.ts
@@ -2346,18 +2357,492 @@ function safeChatMarkdownHref(value) {
   }
 }
 
-// src/ui/message-response.tsx
+// src/ui/message-code.tsx
+var React12 = __toESM(require("react"), 1);
+var import_lucide_react7 = require("lucide-react");
+
+// src/ui/code-block.tsx
+var React10 = __toESM(require("react"), 1);
+var import_class_variance_authority2 = require("class-variance-authority");
+var import_lucide_react6 = require("lucide-react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
+var codeBlockVariants = (0, import_class_variance_authority2.cva)(
+  "a24-code-block",
+  {
+    variants: {
+      variant: {
+        default: "a24-code-block--default",
+        destructive: "a24-code-block--destructive"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function CodeBlock({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "div",
+    {
+      "data-slot": "code-block",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(codeBlockVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+function CodeBlockHeader({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "div",
+    {
+      "data-slot": "code-block-header",
+      className: cn(
+        "a24-code-block__header",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CodeBlockTitle({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "div",
+    {
+      "data-slot": "code-block-title",
+      className: cn(
+        "a24-code-block__title",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CodeBlockActions({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "div",
+    {
+      "data-slot": "code-block-actions",
+      className: cn(
+        "a24-code-block__actions",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CodeBlockCopyButton({
+  value,
+  className,
+  onClick,
+  ...props
+}) {
+  const [copied, setCopied] = React10.useState(false);
+  React10.useEffect(() => {
+    if (!copied) {
+      return;
+    }
+    const timeout = setTimeout(() => setCopied(false), 2e3);
+    return () => clearTimeout(timeout);
+  }, [copied]);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "button",
+      {
+        type: "button",
+        "data-slot": "code-block-copy-button",
+        "data-copied": copied || void 0,
+        "aria-label": copied ? "Copied" : "Copy",
+        title: copied ? "Copied" : "Copy code",
+        className: cn("a24-code-block__action", className),
+        onClick: (event) => {
+          onClick?.(event);
+          if (event.defaultPrevented || !navigator.clipboard) return;
+          navigator.clipboard.writeText(value).then(() => setCopied(true)).catch(() => {
+          });
+        },
+        ...props,
+        children: copied ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react6.CheckIcon, { size: 12, strokeWidth: 1.5 }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react6.CopyIcon, { size: 12, strokeWidth: 1.5 })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { "aria-live": "polite", className: "a24-code-block__announcement", children: copied ? "Copied" : "" })
+  ] });
+}
+function CodeBlockWrapButton({
+  wrap,
+  onWrapChange,
+  className,
+  onClick,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "button",
+    {
+      type: "button",
+      "data-slot": "code-block-wrap-button",
+      "aria-label": "Wrap lines",
+      "aria-pressed": wrap,
+      title: wrap ? "Unwrap lines" : "Wrap lines",
+      className: cn("a24-code-block__action", className),
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) onWrapChange(!wrap);
+      },
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react6.WrapTextIcon, { size: 12, strokeWidth: 1.5 })
+    }
+  );
+}
+function CodeBlockDownloadButton({
+  value,
+  filename = "code.txt",
+  className,
+  onClick,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "button",
+    {
+      type: "button",
+      "data-slot": "code-block-download-button",
+      "aria-label": "Download code",
+      title: "Download code",
+      className: cn("a24-code-block__action", className),
+      onClick: (event) => {
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        const url = URL.createObjectURL(new Blob([value], { type: "text/plain;charset=utf-8" }));
+        const link = document.createElement("a");
+        link.href = url;
+        link.download = filename;
+        document.body.append(link);
+        link.click();
+        link.remove();
+        setTimeout(() => URL.revokeObjectURL(url), 1e3);
+      },
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react6.DownloadIcon, { size: 12, strokeWidth: 1.5 })
+    }
+  );
+}
+function CodeBlockContent({
+  className,
+  children,
+  style,
+  wrap = false,
+  lineNumbers = false,
+  startLine = 1,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "pre",
+    {
+      "data-slot": "code-block-content",
+      "data-wrap": wrap || void 0,
+      "data-numbered": lineNumbers || void 0,
+      dir: "ltr",
+      tabIndex: 0,
+      style: { counterReset: `line ${startLine - 1}`, ...style },
+      className: cn(
+        "a24-code-block__content",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        "code",
+        {
+          "data-slot": "code-block-code",
+          className: "a24-code-block__code",
+          children: lineNumbers && typeof children === "string" ? children.replace(/\n$/, "").split("\n").map((line, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CodeBlockLine, { children: line }, index)) : children
+        }
+      )
+    }
+  );
+}
+var codeBlockLineVariants = (0, import_class_variance_authority2.cva)(
+  "a24-code-block__line",
+  {
+    variants: {
+      variant: {
+        default: "",
+        added: "a24-code-block__line--added",
+        removed: "a24-code-block__line--removed",
+        highlighted: "a24-code-block__line--highlighted"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function CodeBlockLine({
+  className,
+  variant = "default",
+  children,
+  ...props
+}) {
+  const empty = children === void 0 || children === null || children === "" || Array.isArray(children) && children.length === 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "span",
+    {
+      "data-slot": "code-block-line",
+      "data-variant": variant,
+      className: cn(codeBlockLineVariants({ variant }), className),
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { "data-slot": "code-block-line-content", className: "a24-code-block__line-content", children: empty ? "\n" : children })
+    }
+  );
+}
+function CodeBlockFooter({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "div",
+    {
+      "data-slot": "code-block-footer",
+      className: cn(
+        "a24-code-block__footer",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/ui/use-highlighted-code.ts
+var React11 = __toESM(require("react"), 1);
+
+// src/ui/code-highlighter.tsx
+var import_core = require("shiki/core");
+var import_javascript = require("shiki/engine/javascript");
+var import_langs = require("shiki/langs");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var languageLoaders = {
+  ...import_langs.bundledLanguages,
+  ...import_langs.bundledLanguagesAlias
+};
+var highlighter;
+function getHighlighter() {
+  highlighter ?? (highlighter = (0, import_core.createHighlighterCore)({
+    themes: [
+      import("shiki/themes/github-light.mjs"),
+      import("shiki/themes/github-dark.mjs")
+    ],
+    langs: [],
+    engine: (0, import_javascript.createJavaScriptRegexEngine)({ forgiving: true })
+  }));
+  return highlighter;
+}
+function getLanguage(language) {
+  const name = language.toLowerCase();
+  if (name === "ansi") return name;
+  if (Object.prototype.hasOwnProperty.call(languageLoaders, name)) return name;
+  return null;
+}
+async function loadHighlighter(language) {
+  const lang = getLanguage(language);
+  if (!lang) {
+    return null;
+  }
+  const shiki = await getHighlighter();
+  if (lang !== "ansi" && !shiki.getLoadedLanguages().includes(lang)) {
+    await shiki.loadLanguage(languageLoaders[lang]);
+  }
+  return {
+    // Returns one React node per line, and the grammar state after the last
+    // line. Pass that state back to continue where the code left off.
+    highlight(code, state) {
+      const tokenize = (text) => shiki.codeToTokens(text, {
+        lang,
+        themes: { light: "github-light", dark: "github-dark" },
+        defaultColor: false,
+        grammarState: state
+      }).tokens;
+      const tokens = lang === "ansi" ? code.split("\n").flatMap((line) => tokenize(line)) : tokenize(code);
+      return {
+        lines: tokens.map(
+          (line) => line.map((token, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "span",
+            {
+              style: token.htmlStyle,
+              className: "a24-code-token",
+              children: token.content
+            },
+            index
+          ))
+        ),
+        state: shiki.getLastGrammarState(tokens)
+      };
+    }
+  };
+}
+
+// src/ui/use-highlighted-code.ts
+function useHighlightedCode(value, language) {
+  const code = value.endsWith("\n") ? value.slice(0, -1) : value;
+  const [loaded, setLoaded] = React11.useState(null);
+  const highlighter2 = loaded?.language === language ? loaded.highlighter : null;
+  React11.useEffect(() => {
+    let cancelled = false;
+    loadHighlighter(language).then((next2) => {
+      if (!cancelled) {
+        setLoaded({ language, highlighter: next2 });
+      }
+    }).catch(() => {
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [language]);
+  const [done, setDone] = React11.useState({ highlighter: null, text: "", lines: [] });
+  let next = done;
+  if (next.highlighter !== highlighter2 || !code.startsWith(next.text)) {
+    next = { highlighter: highlighter2, text: "", lines: [] };
+  }
+  const end = code.lastIndexOf("\n") + 1;
+  if (highlighter2 && end > next.text.length) {
+    const result = highlighter2.highlight(
+      code.slice(next.text.length, end - 1),
+      next.state
+    );
+    next = {
+      highlighter: highlighter2,
+      text: code.slice(0, end),
+      lines: [...next.lines, ...result.lines],
+      state: result.state
+    };
+  }
+  if (next !== done) {
+    setDone(next);
+  }
+  const tail = code.slice(end);
+  return React11.useMemo(() => {
+    if (!highlighter2) {
+      return code.split("\n");
+    }
+    return [...next.lines, highlighter2.highlight(tail, next.state).lines[0]];
+  }, [code, highlighter2, next, tail]);
+}
+
+// src/ui/message-code.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var CODE_EXTENSIONS = {
+  bash: "sh",
+  shell: "sh",
+  shellscript: "sh",
+  sh: "sh",
+  zsh: "sh",
+  javascript: "js",
+  js: "js",
+  jsx: "jsx",
+  typescript: "ts",
+  ts: "ts",
+  tsx: "tsx",
+  python: "py",
+  py: "py",
+  ruby: "rb",
+  rust: "rs",
+  rs: "rs",
+  go: "go",
+  java: "java",
+  kotlin: "kt",
+  swift: "swift",
+  c: "c",
+  cpp: "cpp",
+  csharp: "cs",
+  json: "json",
+  jsonc: "jsonc",
+  yaml: "yaml",
+  yml: "yml",
+  toml: "toml",
+  html: "html",
+  xml: "xml",
+  css: "css",
+  scss: "scss",
+  sql: "sql",
+  markdown: "md",
+  md: "md",
+  diff: "diff",
+  text: "txt",
+  plaintext: "txt"
+};
+function MessageCodeBlock({ code, language = "text" }) {
+  const [wrap, setWrap] = React12.useState(false);
+  const lines = useHighlightedCode(code, language);
+  const extension = Object.prototype.hasOwnProperty.call(CODE_EXTENSIONS, language.toLowerCase()) ? CODE_EXTENSIONS[language.toLowerCase()] : "txt";
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(CodeBlock, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(CodeBlockHeader, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(CodeBlockTitle, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react7.FileCode2Icon, { size: 14, strokeWidth: 1.5, "aria-hidden": "true" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: language })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(CodeBlockActions, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CodeBlockWrapButton, { wrap, onWrapChange: setWrap }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CodeBlockDownloadButton, { value: code, filename: `code.${extension}` }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CodeBlockCopyButton, { value: code })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CodeBlockContent, { "aria-label": `${language} code`, lineNumbers: true, wrap, children: lines.map((line, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CodeBlockLine, { children: line }, index)) })
+  ] });
+}
+function MessageMarkdownCode({ children, className, node, ...props }) {
+  const language = className?.match(/(?:^|\s)language-([^\s]+)/)?.[1];
+  const multiline = node?.position?.start?.line !== node?.position?.end?.line;
+  if (props["data-block"] === void 0 && !language && !multiline) {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("code", { ...props, className: cn("a24-inline-code", className), "data-streamdown": "inline-code", children });
+  }
+  const code = typeof children === "string" ? children.replace(/\n$/, "") : "";
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MessageCodeBlock, { code, language });
+}
+function formatMessageJson(text) {
+  const trimmed = text.trim();
+  if (!trimmed.startsWith("{") && !trimmed.startsWith("[")) return null;
+  try {
+    JSON.parse(trimmed);
+  } catch {
+    return null;
+  }
+  const tokens = trimmed.match(/"(?:\\.|[^"\\])*"|[{}\[\],:]|[^\s{}\[\],:]+/g) || [];
+  let depth = 0;
+  let result = "";
+  const newline = () => `
+${"  ".repeat(depth)}`;
+  tokens.forEach((token, index) => {
+    const previous = tokens[index - 1];
+    const next = tokens[index + 1];
+    if (token === "{" || token === "[") {
+      result += token;
+      depth += 1;
+      if (next !== "}" && next !== "]") result += newline();
+    } else if (token === "}" || token === "]") {
+      depth -= 1;
+      if (previous !== "{" && previous !== "[") result += newline();
+      result += token;
+    } else if (token === ",") result += `,${newline()}`;
+    else if (token === ":") result += ": ";
+    else result += token;
+  });
+  return result;
+}
+
+// src/ui/message-response.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function SafeMarkdownLink({ children, href, ...props }) {
   const domProps = { ...props };
   delete domProps.node;
   const safeHref = safeChatMarkdownHref(href);
-  if (!safeHref) return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children });
-  if (safeHref.startsWith("#")) return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("a", { ...domProps, href: safeHref, children });
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("a", { ...domProps, href: safeHref, rel: "noopener noreferrer", target: "_blank", children });
+  if (!safeHref) return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children });
+  if (safeHref.startsWith("#")) return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("a", { ...domProps, href: safeHref, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("a", { ...domProps, href: safeHref, rel: "noopener noreferrer", target: "_blank", children });
 }
 function BlockedMarkdownImage({ alt }) {
-  return alt ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { "aria-label": `Image blocked: ${alt}`, role: "img", children: alt }) : null;
+  return alt ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { "aria-label": `Image blocked: ${alt}`, role: "img", children: alt }) : null;
 }
 var BLOCK_MARKDOWN_TAGS = /* @__PURE__ */ new Set([
   "blockquote",
@@ -2378,7 +2863,7 @@ function isMultilineCodeNode(node) {
   return node?.tagName === "code" && node.position?.start?.line !== void 0 && node.position?.end?.line !== void 0 && node.position.start.line !== node.position.end.line;
 }
 function hasBlockMarkdownChild(child) {
-  if (!React10.isValidElement(child)) {
+  if (!React13.isValidElement(child)) {
     return false;
   }
   if (typeof child.type === "string" && BLOCK_MARKDOWN_TAGS.has(child.type)) {
@@ -2388,7 +2873,7 @@ function hasBlockMarkdownChild(child) {
   if (BLOCK_MARKDOWN_TAGS.has(props.node?.tagName || "") || isMultilineCodeNode(props.node)) {
     return true;
   }
-  return React10.Children.toArray(props.children).some(hasBlockMarkdownChild);
+  return React13.Children.toArray(props.children).some(hasBlockMarkdownChild);
 }
 function MessageMarkdownParagraph({
   children,
@@ -2396,22 +2881,23 @@ function MessageMarkdownParagraph({
 }) {
   const domProps = { ...props };
   delete domProps.node;
-  const childArray = React10.Children.toArray(children).filter(
+  const childArray = React13.Children.toArray(children).filter(
     (child) => child !== null && child !== ""
   );
-  const isImageOnly = childArray.length === 1 && React10.isValidElement(childArray[0]) && childArray[0].props.node?.tagName === "img";
+  const isImageOnly = childArray.length === 1 && React13.isValidElement(childArray[0]) && childArray[0].props.node?.tagName === "img";
   if (isImageOnly) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children });
   }
   if (childArray.some(hasBlockMarkdownChild)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ...domProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ...domProps, children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { ...domProps, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { ...domProps, children });
 }
 var MESSAGE_RESPONSE_COMPONENTS = {
   a: SafeMarkdownLink,
   img: BlockedMarkdownImage,
-  p: MessageMarkdownParagraph
+  p: MessageMarkdownParagraph,
+  code: MessageMarkdownCode
 };
 var streamdownDefaultRehypePlugins = import_streamdown.defaultRehypePlugins || {};
 var streamdownHardenPlugin = Array.isArray(
@@ -2426,7 +2912,7 @@ var MESSAGE_RESPONSE_REHYPE_PLUGINS = [
     ]
   ] : []
 ];
-var MessageResponse = React10.memo(
+var MessageResponse = React13.memo(
   ({
     children,
     className,
@@ -2444,11 +2930,21 @@ var MessageResponse = React10.memo(
       maxCatchupChars: 32,
       text
     });
-    const streamdownComponents = React10.useMemo(
+    const streamdownComponents = React13.useMemo(
       () => ({ ...MESSAGE_RESPONSE_COMPONENTS, ...components }),
       [components]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    const json = React13.useMemo(() => formatMessageJson(text), [text]);
+    if (json !== null && !components?.code) {
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: cn("a24-message-response", className), children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        MessageCodeBlock,
+        {
+          code: streaming || streamingText.isAnimating ? streamingText.displayedText : json,
+          language: "json"
+        }
+      ) });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       import_streamdown.Streamdown,
       {
         className: cn("a24-message-response", className),
@@ -2500,10 +2996,10 @@ function resolvedHitlLabel(part) {
 }
 
 // src/ui/tool-sessions.tsx
-var React11 = __toESM(require("react"), 1);
-var import_lucide_react6 = require("lucide-react");
+var React14 = __toESM(require("react"), 1);
+var import_lucide_react8 = require("lucide-react");
 var import_thinking_orbs = require("thinking-orbs");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function toolSlotContext(isActive2, label, part, slots) {
   return {
     isActive: isActive2,
@@ -2521,7 +3017,7 @@ function ToolResourceAction({ context }) {
   const target = context.resourceTargets[0];
   if (!target) return null;
   const name = resourceTargetName(target);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "button",
     {
       "aria-label": `Open ${target.kind} ${target.path}`,
@@ -2535,8 +3031,8 @@ function ToolResourceAction({ context }) {
   );
 }
 function toolAccessory(context, slots) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-    slots?.onResourceAction ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ToolResourceAction, { context }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+    slots?.onResourceAction ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ToolResourceAction, { context }) : null,
     slots?.renderToolAccessory?.(context)
   ] });
 }
@@ -2613,12 +3109,12 @@ function ToolActivityReel({
 }) {
   const initial = initialLabel && initialLabel !== label ? initialLabel : label;
   const parsedInitialShownAt = initialShownAt ? Date.parse(initialShownAt) : Number.NaN;
-  const [displayed, setDisplayed] = React11.useState(initial);
-  const [previous, setPrevious] = React11.useState(null);
-  const displayedRef = React11.useRef(initial);
-  const latestRef = React11.useRef(label);
-  const shownAtRef = React11.useRef(Number.isFinite(parsedInitialShownAt) ? parsedInitialShownAt : Date.now());
-  React11.useEffect(() => {
+  const [displayed, setDisplayed] = React14.useState(initial);
+  const [previous, setPrevious] = React14.useState(null);
+  const displayedRef = React14.useRef(initial);
+  const latestRef = React14.useRef(label);
+  const shownAtRef = React14.useRef(Number.isFinite(parsedInitialShownAt) ? parsedInitialShownAt : Date.now());
+  React14.useEffect(() => {
     latestRef.current = label;
     if (displayedRef.current === label) return;
     const showLatest = () => {
@@ -2638,18 +3134,18 @@ function ToolActivityReel({
     const timer = window.setTimeout(showLatest, remaining);
     return () => window.clearTimeout(timer);
   }, [label]);
-  React11.useEffect(() => {
+  React14.useEffect(() => {
     if (!previous) return;
     const timer = window.setTimeout(() => setPrevious(null), 200);
     return () => window.clearTimeout(timer);
   }, [previous]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "a24-tool-reel", "aria-live": announce ? "polite" : "off", children: [
-    previous ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { "aria-hidden": "true", className: "a24-tool-reel__previous", children: previous }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: previous ? "a24-tool-reel__current" : void 0, children: displayed })
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "a24-tool-reel", "aria-live": announce ? "polite" : "off", children: [
+    previous ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { "aria-hidden": "true", className: "a24-tool-reel__previous", children: previous }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: previous ? "a24-tool-reel__current" : void 0, children: displayed })
   ] });
 }
 function ToolActivityOrb({ label = "Working", kind = "tool", part, renderActivityIcon }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "a24-tool-orb", children: renderActivityIcon ? renderActivityIcon({ label, kind, part }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_thinking_orbs.ThinkingOrb, { "aria-label": label, size: 20, speed: 0.8, state: "searching" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "a24-tool-orb", children: renderActivityIcon ? renderActivityIcon({ label, kind, part }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_thinking_orbs.ThinkingOrb, { "aria-label": label, size: 20, speed: 0.8, state: "searching" }) });
 }
 function AgentChatActivityRow({
   label,
@@ -2657,22 +3153,22 @@ function AgentChatActivityRow({
   renderActivityIcon,
   onSelect
 }) {
-  const content = /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ToolActivityOrb, { label, kind: "planning", renderActivityIcon }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "a24-tool-trigger__label a24-tool-shimmer", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ToolActivityReel, { label }) })
+  const content = /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ToolActivityOrb, { label, kind: "planning", renderActivityIcon }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "a24-tool-trigger__label a24-tool-shimmer", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ToolActivityReel, { label }) })
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "a24-tool-trigger-row a24-tool-trigger-row--root", "data-agents24-model-turn": modelTurnId, role: "status", children: onSelect ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { className: "a24-tool-trigger a24-tool-trigger--root a24-tool-trigger--active", onClick: onSelect, type: "button", children: content }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "a24-tool-trigger a24-tool-trigger--root a24-tool-trigger--active", children: content }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "a24-tool-trigger-row a24-tool-trigger-row--root", "data-agents24-model-turn": modelTurnId, role: "status", children: onSelect ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { className: "a24-tool-trigger a24-tool-trigger--root a24-tool-trigger--active", onClick: onSelect, type: "button", children: content }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "a24-tool-trigger a24-tool-trigger--root a24-tool-trigger--active", children: content }) });
 }
 function AgentChatModelTurnRow({ part }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AgentChatActivityRow, { label: "Planning next moves", modelTurnId: part.modelTurnId });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AgentChatActivityRow, { label: "Planning next moves", modelTurnId: part.modelTurnId });
 }
 function AgentChatNodeActivityRow({
   renderActivityIcon,
   onSelect,
   part
 }) {
-  const [open, setOpen] = React11.useState(false);
-  const contentId = React11.useId();
+  const [open, setOpen] = React14.useState(false);
+  const contentId = React14.useId();
   const running = part.status === "running";
   const failed = part.status === "failed";
   const failureMessage = part.failure?.message || "The node could not complete the request.";
@@ -2683,18 +3179,18 @@ function AgentChatNodeActivityRow({
     running && "a24-tool-trigger--active",
     failed && "a24-tool-trigger--error"
   );
-  const label = running ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "a24-tool-shimmer", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ToolActivityReel, { label: part.label }) }) : part.label;
+  const label = running ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "a24-tool-shimmer", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ToolActivityReel, { label: part.label }) }) : part.label;
   if (!failed) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "a24-tool-trigger-row", role: "status", children: onSelect ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("button", { className: triggerClassName, onClick: () => onSelect(part), type: "button", children: [
-      running ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ToolActivityOrb, { label: part.label, kind: "node", part, renderActivityIcon }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "a24-tool-trigger__label", children: label })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: triggerClassName, children: [
-      running ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ToolActivityOrb, { label: part.label, kind: "node", part, renderActivityIcon }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "a24-tool-trigger__label", children: label })
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "a24-tool-trigger-row", role: "status", children: onSelect ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("button", { className: triggerClassName, onClick: () => onSelect(part), type: "button", children: [
+      running ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ToolActivityOrb, { label: part.label, kind: "node", part, renderActivityIcon }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "a24-tool-trigger__label", children: label })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: triggerClassName, children: [
+      running ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ToolActivityOrb, { label: part.label, kind: "node", part, renderActivityIcon }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "a24-tool-trigger__label", children: label })
     ] }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "a24-tool-disclosure", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "a24-tool-trigger-row", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "a24-tool-disclosure", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "a24-tool-trigger-row", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
       "button",
       {
         "aria-controls": contentId,
@@ -2706,12 +3202,12 @@ function AgentChatNodeActivityRow({
         },
         type: "button",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "a24-tool-trigger__label", children: label }),
-          open ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react6.ChevronDown, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react6.ChevronRight, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" })
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "a24-tool-trigger__label", children: label }),
+          open ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react8.ChevronDown, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react8.ChevronRight, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" })
         ]
       }
     ) }),
-    open ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "a24-tool-detail a24-tool-detail--error", id: contentId, children: failureMessage }) : null
+    open ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "a24-tool-detail a24-tool-detail--error", id: contentId, children: failureMessage }) : null
   ] });
 }
 function toolRowLabel(part, separateResource = false) {
@@ -2738,25 +3234,25 @@ function ToolDisclosure({
   renderActivityIcon,
   accessory
 }) {
-  const [open, setOpen] = React11.useState(false);
-  const contentId = React11.useId();
-  const expandable = React11.Children.toArray(children).length > 0;
+  const [open, setOpen] = React14.useState(false);
+  const contentId = React14.useId();
+  const expandable = React14.Children.toArray(children).length > 0;
   if (!expandable) {
     const triggerClassName = cn("a24-tool-trigger", root && "a24-tool-trigger--root", root && !showOrb && "a24-tool-trigger--without-orb", error && "a24-tool-trigger--error", loading && "a24-tool-trigger--active");
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cn("a24-tool-trigger-row", root && "a24-tool-trigger-row--root"), children: [
-      onSelect && part ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("button", { className: triggerClassName, onClick: () => onSelect(part), type: "button", children: [
-        showOrb ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ToolActivityOrb, { label: statusLabel || "Working", kind: grouped ? "group" : "tool", part, renderActivityIcon }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "a24-tool-trigger__label", children: label })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: triggerClassName, children: [
-        showOrb ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ToolActivityOrb, { label: statusLabel || "Working", kind: grouped ? "group" : "tool", part, renderActivityIcon }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "a24-tool-trigger__label", children: label })
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: cn("a24-tool-trigger-row", root && "a24-tool-trigger-row--root"), children: [
+      onSelect && part ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("button", { className: triggerClassName, onClick: () => onSelect(part), type: "button", children: [
+        showOrb ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ToolActivityOrb, { label: statusLabel || "Working", kind: grouped ? "group" : "tool", part, renderActivityIcon }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "a24-tool-trigger__label", children: label })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: triggerClassName, children: [
+        showOrb ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ToolActivityOrb, { label: statusLabel || "Working", kind: grouped ? "group" : "tool", part, renderActivityIcon }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "a24-tool-trigger__label", children: label })
       ] }),
       accessory
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "a24-tool-disclosure", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cn("a24-tool-trigger-row", root && "a24-tool-trigger-row--root"), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "a24-tool-disclosure", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: cn("a24-tool-trigger-row", root && "a24-tool-trigger-row--root"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
         "button",
         {
           "aria-controls": contentId,
@@ -2770,25 +3266,25 @@ function ToolDisclosure({
           },
           type: "button",
           children: [
-            showOrb ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ToolActivityOrb, { label: statusLabel || "Working", kind: grouped ? "group" : "tool", part, renderActivityIcon }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "a24-tool-trigger__label", children: label }),
-            open ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react6.ChevronDown, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react6.ChevronRight, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" })
+            showOrb ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ToolActivityOrb, { label: statusLabel || "Working", kind: grouped ? "group" : "tool", part, renderActivityIcon }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "a24-tool-trigger__label", children: label }),
+            open ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react8.ChevronDown, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react8.ChevronRight, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" })
           ]
         }
       ),
       accessory
     ] }),
-    open ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "a24-tool-disclosure__content", id: contentId, children }) : null
+    open ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "a24-tool-disclosure__content", id: contentId, children }) : null
   ] });
 }
 function ToolLabel({ active, label, part, slots }) {
   const rendered = slots?.renderToolLabel?.(toolSlotContext(active, label, part, slots)) ?? label;
-  return active ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "a24-tool-shimmer", children: rendered }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { children: rendered });
+  return active ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "a24-tool-shimmer", children: rendered }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx_runtime13.Fragment, { children: rendered });
 }
 function ToolList({ children }) {
-  const listRef = React11.useRef(null);
-  const [fades, setFades] = React11.useState({ bottom: false, top: false });
-  const updateFades = React11.useCallback(() => {
+  const listRef = React14.useRef(null);
+  const [fades, setFades] = React14.useState({ bottom: false, top: false });
+  const updateFades = React14.useCallback(() => {
     const list = listRef.current;
     if (!list) return;
     const next = {
@@ -2797,7 +3293,7 @@ function ToolList({ children }) {
     };
     setFades((current) => current.bottom === next.bottom && current.top === next.top ? current : next);
   }, []);
-  React11.useEffect(() => {
+  React14.useEffect(() => {
     updateFades();
     const list = listRef.current;
     if (!list || typeof ResizeObserver === "undefined") return;
@@ -2805,13 +3301,13 @@ function ToolList({ children }) {
     observer.observe(list);
     return () => observer.disconnect();
   }, [children, updateFades]);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "div",
     {
       className: "a24-tool-list-frame",
       "data-scroll-fade-bottom": fades.bottom ? "" : void 0,
       "data-scroll-fade-top": fades.top ? "" : void 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "a24-tool-list", onScroll: updateFades, ref: listRef, role: "list", children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "a24-tool-list", onScroll: updateFades, ref: listRef, role: "list", children })
     }
   );
 }
@@ -2828,13 +3324,13 @@ function AgentChatToolRow({
   const detail = failed ? failureMessage : optionalText(part.presentation.detail);
   const hostDetails = failed ? null : slots?.renderToolDetails?.(part);
   const context = toolSlotContext(active, toolRowLabel(part, Boolean(slots?.onResourceAction)), part, slots);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { "data-agents24-tool-part": part.type, "data-state": part.state, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { "data-agents24-tool-part": part.type, "data-state": part.state, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     ToolDisclosure,
     {
       renderActivityIcon: slots?.renderActivityIcon,
       error: failed,
       accessory: toolAccessory(context, slots),
-      label: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ToolLabel, { active, label: context.label, part, slots }),
+      label: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ToolLabel, { active, label: context.label, part, slots }),
       loading: active,
       onExpandedChange: slots?.onExpandedChange,
       onSelect: slots?.onToolSelect,
@@ -2843,7 +3339,7 @@ function AgentChatToolRow({
       showOrb: showOrb ?? active,
       statusLabel: active ? context.label : void 0,
       children: [
-        detail ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: cn("a24-tool-detail", failed && "a24-tool-detail--error"), children: detail }) : null,
+        detail ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn("a24-tool-detail", failed && "a24-tool-detail--error"), children: detail }) : null,
         hostDetails
       ]
     }
@@ -2863,19 +3359,19 @@ function AgentChatToolSession({
   parts,
   slots
 }) {
-  const presentedLiveRef = React11.useRef(false);
+  const presentedLiveRef = React14.useRef(false);
   if (isLive && isLatestActivity) presentedLiveRef.current = true;
   const activeIndex = parts.findLastIndex((part) => isActive(part, activeToolId));
   const running = activeIndex >= 0;
-  if (parts.length === 1 && !modelTurn && !leadingModelTurn) return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AgentChatToolRow, { activeToolId, part: parts[0], slots });
+  if (parts.length === 1 && !modelTurn && !leadingModelTurn) return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AgentChatToolRow, { activeToolId, part: parts[0], slots });
   const visibleIndex = running ? activeIndex : parts.length - 1;
   const visiblePart = parts[visibleIndex];
   const planning = Boolean(modelTurn);
   const presentingActivity = isLatestActivity && (planning || running || isLive);
   const failed = isLatestActivity && (visiblePart.state === "output-error" || visiblePart.state === "cancelled");
   const label = planning ? "Planning next moves" : isLive && isLatestActivity ? toolRowLabel(visiblePart, true) : sessionLabel(parts, visiblePart, running);
-  const labelContent = presentedLiveRef.current ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: presentingActivity ? "a24-tool-shimmer" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ToolActivityReel, { initialLabel: leadingModelTurn ? "Planning next moves" : void 0, initialShownAt: leadingModelTurn?.timestamp, label }) }) : label;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  const labelContent = presentedLiveRef.current ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: presentingActivity ? "a24-tool-shimmer" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ToolActivityReel, { initialLabel: leadingModelTurn ? "Planning next moves" : void 0, initialShownAt: leadingModelTurn?.timestamp, label }) }) : label;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     ToolDisclosure,
     {
       renderActivityIcon: slots?.renderActivityIcon,
@@ -2888,7 +3384,7 @@ function AgentChatToolSession({
       root: true,
       showOrb: isLive && isLatestActivity,
       statusLabel: planning ? "Planning next moves" : label,
-      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ToolList, { children: parts.map((part) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { role: "listitem", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AgentChatToolRow, { activeToolId, part, root: false, showOrb: false, slots }) }, part.id)) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ToolList, { children: parts.map((part) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { role: "listitem", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(AgentChatToolRow, { activeToolId, part, root: false, showOrb: false, slots }) }, part.id)) })
     }
   );
 }
@@ -2909,7 +3405,7 @@ function subagentLabel(part) {
   return { label: `Agent ${name}, ran ${children.length} ${children.length === 1 ? "tool" : "tools"}`, running: false };
 }
 function AgentChatSubagentGroup({ isLatestActivity = true, isLive = false, part, slots }) {
-  const presentedLiveRef = React11.useRef(false);
+  const presentedLiveRef = React14.useRef(false);
   if (isLive && isLatestActivity) presentedLiveRef.current = true;
   const children = part.presentation.childTools || [];
   const state = subagentLabel(part);
@@ -2918,9 +3414,9 @@ function AgentChatSubagentGroup({ isLatestActivity = true, isLive = false, part,
   const hostDetails = failed ? null : slots?.renderToolDetails?.(part);
   const failureMessage = part.failure?.message || null;
   const presentingActivity = isLatestActivity && state.running;
-  const labelContent = presentedLiveRef.current ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: presentingActivity ? "a24-tool-shimmer" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ToolActivityReel, { label: state.label }) }) : state.label;
+  const labelContent = presentedLiveRef.current ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: presentingActivity ? "a24-tool-shimmer" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ToolActivityReel, { label: state.label }) }) : state.label;
   const context = toolSlotContext(presentingActivity, state.label, part, slots);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     ToolDisclosure,
     {
       renderActivityIcon: slots?.renderActivityIcon,
@@ -2934,12 +3430,12 @@ function AgentChatSubagentGroup({ isLatestActivity = true, isLive = false, part,
       root: true,
       showOrb: isLive && isLatestActivity,
       statusLabel: state.label,
-      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(ToolList, { children: [
-        children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: cn("a24-child-tool", child.status === "failed" && "a24-child-tool--error"), role: "listitem", children: slots?.renderChildTool?.(child, part) ?? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: cn(isLive && isLatestActivity && child.status === "running" && "a24-tool-shimmer"), children: childLabel(child) }),
-          child.detail ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "a24-child-tool__detail", children: child.detail }) : null
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(ToolList, { children: [
+        children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn("a24-child-tool", child.status === "failed" && "a24-child-tool--error"), role: "listitem", children: slots?.renderChildTool?.(child, part) ?? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: cn(isLive && isLatestActivity && child.status === "running" && "a24-tool-shimmer"), children: childLabel(child) }),
+          child.detail ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "a24-child-tool__detail", children: child.detail }) : null
         ] }) }, child.id)),
-        failureMessage ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "a24-tool-detail a24-tool-detail--error", children: failureMessage }) : null,
+        failureMessage ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "a24-tool-detail a24-tool-detail--error", children: failureMessage }) : null,
         hostDetails
       ] })
     }
@@ -2947,24 +3443,24 @@ function AgentChatSubagentGroup({ isLatestActivity = true, isLive = false, part,
 }
 
 // src/ui/agent-response-timeline.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function isInternalAskUserTool(part) {
   return [part.toolName, part.toolKey, part.action].some((value) => value?.trim().toLowerCase() === "runtime__ask_user");
 }
 function Shimmer({ children, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: cn("inline-block animate-pulse", className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: cn("inline-block animate-pulse", className), children });
 }
 function AgentChatToolPart({
   activeToolId,
   part
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AgentChatToolRow, { activeToolId, part });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AgentChatToolRow, { activeToolId, part });
 }
 function AgentChatToolGroup({
   activeToolId,
   parts
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AgentChatToolSession, { activeToolId, parts });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AgentChatToolSession, { activeToolId, parts });
 }
 function HitlPartRow({
   getHitlActionState,
@@ -2973,12 +3469,12 @@ function HitlPartRow({
   part
 }) {
   const state = getHitlActionState?.(part);
-  const [comment, setComment] = React12.useState("");
+  const [comment, setComment] = React15.useState("");
   const presentation = part.presentation || {};
   const requireComment = presentation.require_comment === true;
   const isTerminal = part.status !== "pending";
   if (part.hitlKind === "user_input") {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       AskUserInteraction,
       {
         error: state?.error,
@@ -2996,9 +3492,9 @@ function HitlPartRow({
     );
   }
   if (isTerminal) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "a24-hitl space-y-2.5 px-1 py-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "a24-hitl__title text-sm font-medium text-foreground text-pretty", children: hitlTitle(part) }),
-    requireComment ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "a24-hitl space-y-2.5 px-1 py-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "a24-hitl__title text-sm font-medium text-foreground text-pretty", children: hitlTitle(part) }),
+    requireComment ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       "textarea",
       {
         "aria-label": "Approval comment",
@@ -3010,8 +3506,8 @@ function HitlPartRow({
         value: comment
       }
     ) : null,
-    state?.error ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "a24-hitl__error text-sm text-destructive", children: state.error }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "a24-hitl__actions flex flex-wrap items-center gap-1.5", children: part.allowedActions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    state?.error ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "a24-hitl__error text-sm text-destructive", children: state.error }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "a24-hitl__actions flex flex-wrap items-center gap-1.5", children: part.allowedActions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       "button",
       {
         "aria-label": hitlActionLabel(part, action),
@@ -3044,7 +3540,7 @@ function AgentChatPart({
   toolSlots
 }) {
   if (part.kind === "text") {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       MessageResponse,
       {
         ...responseProps,
@@ -3054,23 +3550,23 @@ function AgentChatPart({
       }
     );
   }
-  if (part.kind === "tool") return isAgentChatSubagent(part) ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AgentChatSubagentGroup, { part, slots: toolSlots }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AgentChatToolRow, { activeToolId, part, slots: toolSlots });
-  if (part.kind === "model-turn") return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AgentChatModelTurnRow, { part });
+  if (part.kind === "tool") return isAgentChatSubagent(part) ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AgentChatSubagentGroup, { part, slots: toolSlots }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AgentChatToolRow, { activeToolId, part, slots: toolSlots });
+  if (part.kind === "model-turn") return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AgentChatModelTurnRow, { part });
   if (part.kind === "reasoning") {
     const label = part.text || part.label || "Thinking";
-    return part.status === "running" || part.status === "streaming" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Shimmer, { className: "text-sm text-muted-foreground", children: label }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "text-sm text-muted-foreground", children: label });
+    return part.status === "running" || part.status === "streaming" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Shimmer, { className: "text-sm text-muted-foreground", children: label }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "text-sm text-muted-foreground", children: label });
   }
   if (part.kind === "context-compression") {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AgentChatContextCompressionRow, { part });
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AgentChatContextCompressionRow, { part });
   }
   if (part.kind === "ui-blocks") {
     if (part.state === "output-error") {
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "a24-timeline-error text-sm text-destructive", children: part.errorText || "Failed to render UI content." });
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "a24-timeline-error text-sm text-destructive", children: part.errorText || "Failed to render UI content." });
     }
-    return part.bundle ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SafeUiBlocks, { bundle: part.bundle }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "text-sm text-muted-foreground", children: part.state === "input-streaming" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Shimmer, { children: "Rendering UI block" }) : "Rendered UI block" });
+    return part.bundle ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SafeUiBlocks, { bundle: part.bundle }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "text-sm text-muted-foreground", children: part.state === "input-streaming" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Shimmer, { children: "Rendering UI block" }) : "Rendered UI block" });
   }
   if (part.kind === "hitl") {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       HitlPartRow,
       {
         getHitlActionState,
@@ -3080,18 +3576,18 @@ function AgentChatPart({
       }
     );
   }
-  if (part.kind === "error") return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "a24-timeline-error text-sm text-destructive", role: "alert", children: part.errorText });
+  if (part.kind === "error") return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "a24-timeline-error text-sm text-destructive", role: "alert", children: part.errorText });
   if (part.kind === "source") {
     const href = safeExternalUrl(part.url);
-    return href ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("a", { className: "a24-source-link", href, rel: "noopener noreferrer", target: "_blank", children: part.title }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "a24-source-link", children: part.title });
+    return href ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("a", { className: "a24-source-link", href, rel: "noopener noreferrer", target: "_blank", children: part.title }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "a24-source-link", children: part.title });
   }
   if (part.kind === "citation") {
     const href = safeExternalUrl(part.url);
     const label = part.label || "Citation";
-    return href ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("a", { className: "a24-citation", href, rel: "noopener noreferrer", target: "_blank", children: label }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "a24-citation", children: label });
+    return href ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("a", { className: "a24-citation", href, rel: "noopener noreferrer", target: "_blank", children: label }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "a24-citation", children: label });
   }
-  if (part.kind === "attachment") return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "a24-output-attachment", children: part.attachment.filename || "Attachment" });
-  if (part.kind === "data") return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { "data-agents24-data-part": part.name, className: "hidden", children: message.id });
+  if (part.kind === "attachment") return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "a24-output-attachment", children: part.attachment.filename || "Attachment" });
+  if (part.kind === "data") return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { "data-agents24-data-part": part.name, className: "hidden", children: message.id });
   return null;
 }
 function safeExternalUrl(value) {
@@ -3105,28 +3601,28 @@ function safeExternalUrl(value) {
 }
 function SafeUiBlocks({ bundle }) {
   const rows = Array.isArray(bundle.rows) ? bundle.rows : [];
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("section", { "aria-label": typeof bundle.title === "string" ? bundle.title : "Agent result", className: "a24-ui-blocks", children: [
-    typeof bundle.title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h3", { children: bundle.title }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("section", { "aria-label": typeof bundle.title === "string" ? bundle.title : "Agent result", className: "a24-ui-blocks", children: [
+    typeof bundle.title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { children: bundle.title }) : null,
     rows.map((rawRow, rowIndex) => {
       const row = rawRow && typeof rawRow === "object" && !Array.isArray(rawRow) ? rawRow : {};
       const blocks = Array.isArray(row.blocks) ? row.blocks : [];
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "a24-ui-blocks__row", children: blocks.map((rawBlock, blockIndex) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "a24-ui-blocks__row", children: blocks.map((rawBlock, blockIndex) => {
         const block = rawBlock && typeof rawBlock === "object" && !Array.isArray(rawBlock) ? rawBlock : {};
         const title = typeof block.title === "string" ? block.title : "Result";
         const kind = String(block.kind || "note");
         if (kind === "table" && Array.isArray(block.columns) && Array.isArray(block.rows)) {
-          return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "a24-ui-block", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h4", { children: title }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "a24-ui-table-scroll", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("table", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("tr", { children: block.columns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("th", { children: String(column) }, index)) }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("tbody", { children: block.rows.map((rawCells, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("tr", { children: (Array.isArray(rawCells) ? rawCells : []).map((cell, cellIndex) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("td", { children: String(cell) }, cellIndex)) }, index)) })
+          return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "a24-ui-block", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h4", { children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "a24-ui-table-scroll", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("table", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("tr", { children: block.columns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("th", { children: String(column) }, index)) }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("tbody", { children: block.rows.map((rawCells, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("tr", { children: (Array.isArray(rawCells) ? rawCells : []).map((cell, cellIndex) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("td", { children: String(cell) }, cellIndex)) }, index)) })
             ] }) })
           ] }, String(block.id || blockIndex));
         }
         const value = block.value ?? block.text ?? "";
-        return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "a24-ui-block", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h4", { children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { children: String(value) })
+        return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "a24-ui-block", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h4", { children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { children: String(value) })
         ] }, String(block.id || blockIndex));
       }) }, `row-${rowIndex}`);
     })
@@ -3160,38 +3656,38 @@ function AgentResponseTimeline({
     if (segment.kind === "tool") {
       const isLatestActivity = segmentIndex === segments.length - 1;
       const showOrb = toolViewMode === "closed" ? isLoading && isLatestActivity : Boolean(activeToolId && (segment.part.id === activeToolId || segment.part.toolCallId === activeToolId));
-      rendered.push(/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AgentChatToolRow, { activeToolId, part: segment.part, showOrb, slots: toolSlots }, segment.part.id));
+      rendered.push(/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AgentChatToolRow, { activeToolId, part: segment.part, showOrb, slots: toolSlots }, segment.part.id));
       continue;
     }
     if (segment.kind === "tool-session") {
-      rendered.push(/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AgentChatToolSession, { activeToolId, isLatestActivity: segmentIndex === segments.length - 1, isLive: isLoading, leadingModelTurn: segment.leadingModelTurn, modelTurn: segment.modelTurn, parts: segment.parts, slots: toolSlots }, `tool-session-${segment.parts[0].id}`));
+      rendered.push(/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AgentChatToolSession, { activeToolId, isLatestActivity: segmentIndex === segments.length - 1, isLive: isLoading, leadingModelTurn: segment.leadingModelTurn, modelTurn: segment.modelTurn, parts: segment.parts, slots: toolSlots }, `tool-session-${segment.parts[0].id}`));
       continue;
     }
     if (segment.kind === "subagent") {
-      rendered.push(/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AgentChatSubagentGroup, { isLatestActivity: segmentIndex === segments.length - 1, isLive: isLoading, part: segment.part, slots: toolSlots }, segment.part.id));
+      rendered.push(/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AgentChatSubagentGroup, { isLatestActivity: segmentIndex === segments.length - 1, isLive: isLoading, part: segment.part, slots: toolSlots }, segment.part.id));
       continue;
     }
     const part = segment.part;
     if (part.kind === "model-turn") {
       const key = activeActivityClaimed ? part.id : `${message.id}-active-activity`;
       activeActivityClaimed = true;
-      rendered.push(/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AgentChatActivityRow, { renderActivityIcon: toolSlots?.renderActivityIcon, label: "Planning next moves", modelTurnId: part.modelTurnId }, key));
+      rendered.push(/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AgentChatActivityRow, { renderActivityIcon: toolSlots?.renderActivityIcon, label: "Planning next moves", modelTurnId: part.modelTurnId }, key));
       continue;
     }
     if (part.kind === "node-activity") {
       const key = activeActivityClaimed ? part.id : `${message.id}-active-activity`;
       if (part.status === "running") activeActivityClaimed = true;
       rendered.push(
-        part.status === "running" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AgentChatActivityRow, { renderActivityIcon: toolSlots?.renderActivityIcon, label: part.label, onSelect: onNodeSelect ? () => onNodeSelect(part) : void 0 }, key) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AgentChatNodeActivityRow, { renderActivityIcon: toolSlots?.renderActivityIcon, onSelect: onNodeSelect, part }, part.id)
+        part.status === "running" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AgentChatActivityRow, { renderActivityIcon: toolSlots?.renderActivityIcon, label: part.label, onSelect: onNodeSelect ? () => onNodeSelect(part) : void 0 }, key) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AgentChatNodeActivityRow, { renderActivityIcon: toolSlots?.renderActivityIcon, onSelect: onNodeSelect, part }, part.id)
       );
       continue;
     }
     if (part.kind === "ui-blocks" && renderUiBlocks) {
-      rendered.push(/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(React12.Fragment, { children: renderUiBlocks(part) }, part.id));
+      rendered.push(/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(React15.Fragment, { children: renderUiBlocks(part) }, part.id));
       continue;
     }
     rendered.push(
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(React12.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(React15.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         AgentChatPart,
         {
           activeToolId,
@@ -3208,16 +3704,16 @@ function AgentResponseTimeline({
     );
   }
   if (rendered.length === 0 && message.content) {
-    rendered.push(/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MessageResponse, { children: message.content }, `${message.id}-fallback`));
+    rendered.push(/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(MessageResponse, { children: message.content }, `${message.id}-fallback`));
   }
   if (rendered.length === 0 && isLoading) {
-    rendered.push(/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(AgentChatActivityRow, { renderActivityIcon: toolSlots?.renderActivityIcon, label: "Thinking" }, `${message.id}-active-activity`));
+    rendered.push(/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(AgentChatActivityRow, { renderActivityIcon: toolSlots?.renderActivityIcon, label: "Thinking" }, `${message.id}-active-activity`));
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "space-y-3", children: rendered });
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "space-y-3", children: rendered });
 }
 
 // src/ui/agent-chat-message.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var DEFAULT_USER_MESSAGE_COLLAPSE_THRESHOLD = 360;
 var DEFAULT_USER_MESSAGE_COLLAPSED_LINES = 4;
 function shouldCollapseUserMessage(content, threshold = DEFAULT_USER_MESSAGE_COLLAPSE_THRESHOLD) {
@@ -3230,19 +3726,19 @@ function AgentChatUserMessageContent({
   showLessLabel = "Show less",
   showMoreLabel = "Show more"
 }) {
-  const [isExpanded, setIsExpanded] = React13.useState(false);
-  const contentId = React13.useId();
+  const [isExpanded, setIsExpanded] = React16.useState(false);
+  const contentId = React16.useId();
   const shouldCollapse = shouldCollapseUserMessage(content, collapseThreshold);
-  const Icon = isExpanded ? import_lucide_react7.ChevronUp : import_lucide_react7.ChevronDown;
+  const Icon = isExpanded ? import_lucide_react9.ChevronUp : import_lucide_react9.ChevronDown;
   const clampedStyle = shouldCollapse && !isExpanded ? {
     WebkitBoxOrient: "vertical",
     WebkitLineClamp: Math.max(1, collapsedLines),
     display: "-webkit-box",
     overflow: "hidden"
   } : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex min-w-0 flex-col gap-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { id: contentId, className: "min-w-0", style: clampedStyle, children: content }),
-    shouldCollapse ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex min-w-0 flex-col gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { id: contentId, className: "min-w-0", style: clampedStyle, children: content }),
+    shouldCollapse ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "button",
       {
         "aria-controls": contentId,
@@ -3255,7 +3751,7 @@ function AgentChatUserMessageContent({
         type: "button",
         children: [
           isExpanded ? showLessLabel : showMoreLabel,
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { "aria-hidden": "true", className: "size-4", strokeWidth: 2 })
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { "aria-hidden": "true", className: "size-4", strokeWidth: 2 })
         ]
       }
     ) : null
@@ -3265,9 +3761,9 @@ function AgentChatUserMessageActionRow({
   children,
   className
 }) {
-  const rowRef = React13.useRef(null);
-  const [visible, setVisible] = React13.useState(false);
-  React13.useEffect(() => {
+  const rowRef = React16.useRef(null);
+  const [visible, setVisible] = React16.useState(false);
+  React16.useEffect(() => {
     const message = rowRef.current?.closest('[data-slot="message"]');
     if (!message) return;
     const show = () => setVisible(true);
@@ -3286,7 +3782,7 @@ function AgentChatUserMessageActionRow({
       message.removeEventListener("focusout", hideWhenFocusLeaves);
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "div",
     {
       ref: rowRef,
@@ -3325,7 +3821,7 @@ function AgentChatMessage({
   const resolvedUserContent = userMessageContent ?? message.content;
   const shouldRenderContent = isAssistant || Boolean(renderUserContent || resolvedUserContent);
   const showAttachments = Boolean(message.attachments?.length) && (message.role === "user" || showAssistantAttachments);
-  const renderedActions = actions ?? (actionHandlers ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  const renderedActions = actions ?? (actionHandlers ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     AgentChatDefaultActions,
     {
       additionalActions,
@@ -3335,14 +3831,14 @@ function AgentChatMessage({
     }
   ) : null);
   const defaultUserActions = !actions && Boolean(actionHandlers) && !isAssistant;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     ChatMessage,
     {
       className,
       dir,
       from: message.role,
       children: [
-        showAttachments ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        showAttachments ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           ChatAttachmentRows,
           {
             attachments: message.attachments || [],
@@ -3351,14 +3847,14 @@ function AgentChatMessage({
             resolveContent: attachmentContentResolver
           }
         ) : null,
-        shouldRenderContent ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        shouldRenderContent ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
           ChatMessageContent,
           {
             className: cn(isAssistant ? "bg-transparent p-0" : void 0, contentClassName),
             dir,
             from: message.role,
             children: [
-              isAssistant ? renderAssistantContent ? renderAssistantContent({ isStreaming, message }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              isAssistant ? renderAssistantContent ? renderAssistantContent({ isStreaming, message }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                 Timeline,
                 {
                   getHitlActionState,
@@ -3369,7 +3865,7 @@ function AgentChatMessage({
                   parts: message.parts
                 }
               ) : null,
-              !isAssistant ? renderUserContent ? renderUserContent({ message }) : resolvedUserContent ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              !isAssistant ? renderUserContent ? renderUserContent({ message }) : resolvedUserContent ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                 AgentChatUserMessageContent,
                 {
                   collapsedLines: userMessageCollapsedLines,
@@ -3382,18 +3878,18 @@ function AgentChatMessage({
             ]
           }
         ) : null,
-        renderedActions ? defaultUserActions ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(AgentChatUserMessageActionRow, { className: actionsClassName, children: renderedActions }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: cn(dir === "rtl" ? "mt-1 h-9 w-full" : "mt-1 h-9 w-full -translate-x-2", actionsClassName), children: renderedActions }) : null
+        renderedActions ? defaultUserActions ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(AgentChatUserMessageActionRow, { className: actionsClassName, children: renderedActions }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: cn(dir === "rtl" ? "mt-1 h-9 w-full" : "mt-1 h-9 w-full -translate-x-2", actionsClassName), children: renderedActions }) : null
       ]
     }
   );
 }
 
 // src/ui/bubble.tsx
-var import_class_variance_authority2 = require("class-variance-authority");
+var import_class_variance_authority3 = require("class-variance-authority");
 var import_react_slot2 = require("@radix-ui/react-slot");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function BubbleGroup({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "div",
     {
       "data-slot": "bubble-group",
@@ -3402,7 +3898,7 @@ function BubbleGroup({ className, ...props }) {
     }
   );
 }
-var bubbleVariants = (0, import_class_variance_authority2.cva)(
+var bubbleVariants = (0, import_class_variance_authority3.cva)(
   "group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-1 group-data-[align=end]/message:self-end data-[align=end]:self-end data-[variant=ghost]:max-w-full",
   {
     variants: {
@@ -3427,7 +3923,7 @@ function Bubble({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "div",
     {
       "data-slot": "bubble",
@@ -3444,7 +3940,7 @@ function BubbleContent({
   ...props
 }) {
   const Comp = asChild ? import_react_slot2.Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     Comp,
     {
       "data-slot": "bubble-content",
@@ -3456,7 +3952,7 @@ function BubbleContent({
     }
   );
 }
-var bubbleReactionsVariants = (0, import_class_variance_authority2.cva)(
+var bubbleReactionsVariants = (0, import_class_variance_authority3.cva)(
   "absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-muted px-1.5 py-0.5 text-sm ring-3 ring-card has-[button]:p-0",
   {
     variants: {
@@ -3481,7 +3977,7 @@ function BubbleReactions({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "div",
     {
       "data-slot": "bubble-reactions",
@@ -3494,10 +3990,10 @@ function BubbleReactions({
 }
 
 // src/ui/marker.tsx
-var import_class_variance_authority3 = require("class-variance-authority");
+var import_class_variance_authority4 = require("class-variance-authority");
 var import_react_slot3 = require("@radix-ui/react-slot");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var markerVariants = (0, import_class_variance_authority3.cva)(
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var markerVariants = (0, import_class_variance_authority4.cva)(
   "group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm text-muted-foreground [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-foreground",
   {
     variants: {
@@ -3516,7 +4012,7 @@ function Marker({
   ...props
 }) {
   const Comp = asChild ? import_react_slot3.Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     Comp,
     {
       "data-slot": "marker",
@@ -3527,7 +4023,7 @@ function Marker({
   );
 }
 function MarkerIcon({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "span",
     {
       "data-slot": "marker-icon",
@@ -3541,7 +4037,7 @@ function MarkerIcon({ className, ...props }) {
   );
 }
 function MarkerContent({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "span",
     {
       "data-slot": "marker-content",
@@ -3555,7 +4051,7 @@ function MarkerContent({ className, ...props }) {
 }
 
 // src/ui/mcp-connect-required-card.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var STATUS_LABELS = {
   pending: "Connect",
   connecting: "Connecting",
@@ -3579,7 +4075,7 @@ function McpConnectRequiredCard({
   const isBusy = loading || status === "connecting" || status === "resuming";
   const isConnected = status === "connected";
   const buttonDisabled = disabled || isBusy || isConnected || !onConnect;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "div",
     {
       "data-agents24-mcp-connect-card": true,
@@ -3589,13 +4085,13 @@ function McpConnectRequiredCard({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex min-w-0 items-start justify-between gap-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "truncate text-sm font-medium", children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "mt-1 text-sm text-muted-foreground", children: message || "Connect your account to continue." }),
-          status === "error" && error ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "mt-2 text-sm text-destructive", children: error }) : null
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex min-w-0 items-start justify-between gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "truncate text-sm font-medium", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "mt-1 text-sm text-muted-foreground", children: message || "Connect your account to continue." }),
+          status === "error" && error ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "mt-2 text-sm text-destructive", children: error }) : null
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "button",
           {
             type: "button",
@@ -3653,6 +4149,16 @@ function McpConnectRequiredCard({
   ChatMessageAction,
   ChatMessageActions,
   ChatMessageContent,
+  CodeBlock,
+  CodeBlockActions,
+  CodeBlockContent,
+  CodeBlockCopyButton,
+  CodeBlockDownloadButton,
+  CodeBlockFooter,
+  CodeBlockHeader,
+  CodeBlockLine,
+  CodeBlockTitle,
+  CodeBlockWrapButton,
   Marker,
   MarkerContent,
   MarkerIcon,
@@ -3694,6 +4200,7 @@ function McpConnectRequiredCard({
   useAudioRecorder,
   useChatComposerFocus,
   useCompletionActionEntrance,
+  useHighlightedCode,
   useLiveCompletionRuns
 });
 //# sourceMappingURL=index.cjs.map