@agents24/chat-react 0.5.0 → 0.5.2

package/dist/ui/index.js

@@ -1,48 +1,2283 @@
 import {
-  AgentChatComposer,
-  AgentChatDefaultActions,
-  AgentChatMessage,
-  AgentChatUserMessageContent,
-  AgentResponseTimeline,
-  Attachment,
-  AttachmentAction,
-  AttachmentActions,
-  AttachmentContent,
-  AttachmentDescription,
-  AttachmentGroup,
-  AttachmentMedia,
-  AttachmentTitle,
-  AttachmentTrigger,
-  ChatAttachment,
-  ChatAttachments,
-  ChatMessage,
-  ChatMessageAction,
-  ChatMessageActions,
-  ChatMessageContent,
-  DefaultPartRow,
-  Message,
-  MessageAvatar,
-  MessageContent,
-  MessageFooter,
-  MessageGroup,
-  MessageHeader,
-  MessageResponse,
-  attachmentMediaVariants,
-  attachmentVariants,
-  cn,
-  hitlActionLabel,
-  hitlTitle,
-  resolvedHitlLabel,
-  shouldCollapseUserMessage
-} from "../chunk-R7WFL3YR.js";
-import "../chunk-CHAU7FNW.js";
+  getActiveStreamingTextPartId,
+  useStreamingText
+} from "../chunk-SSUO4EPD.js";
+
+// src/ui/agent-chat-composer.tsx
+import * as React from "react";
+import { ArrowUp, Paperclip, Plus, Square, X } from "lucide-react";
+
+// src/ui/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...values) {
+  return twMerge(clsx(values));
+}
+
+// src/ui/agent-chat-composer.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var createId = () => typeof crypto !== "undefined" && "randomUUID" in crypto ? crypto.randomUUID() : `file-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+function createComposerFile(file) {
+  return {
+    id: createId(),
+    type: "file",
+    url: URL.createObjectURL(file),
+    filename: file.name || "attachment",
+    mediaType: file.type || "application/octet-stream",
+    source: file
+  };
+}
+function revokeComposerFiles(files) {
+  files.forEach((file) => {
+    try {
+      URL.revokeObjectURL(file.url);
+    } catch {
+    }
+  });
+}
+function formatFileCount(files) {
+  if (files.length === 1) return files[0].filename;
+  return `${files.length} files`;
+}
+var pillButtonClass = "inline-flex size-8 shrink-0 items-center justify-center gap-2 rounded-lg border-0 bg-muted text-sm text-muted-foreground shadow-none transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-0 disabled:pointer-events-none disabled:opacity-50";
+var submitButtonClass = "inline-flex size-9 shrink-0 items-center justify-center gap-2 rounded-lg border-0 bg-primary text-sm text-primary-foreground shadow-none transition-[background-color,color,opacity,transform] duration-200 hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-0 disabled:pointer-events-none disabled:opacity-50";
+function AgentChatComposer({
+  accept,
+  allowAttachments = true,
+  attachmentLayout = "flow",
+  className,
+  disabled = false,
+  forceExpanded = false,
+  inputToolbarContent,
+  isRunning = false,
+  onAttachmentCountChange,
+  onStop,
+  onSubmit,
+  placeholder = "Message the agent",
+  textareaRef
+}) {
+  const fileInputRef = React.useRef(null);
+  const filesRef = React.useRef([]);
+  const localTextareaRef = React.useRef(null);
+  const [text, setText] = React.useState("");
+  const [files, setFiles] = React.useState([]);
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const isExpanded = forceExpanded || text.includes("\n") || text.length > 62;
+  const setTextareaRef = React.useCallback(
+    (node) => {
+      localTextareaRef.current = node;
+      if (typeof textareaRef === "function") {
+        textareaRef(node);
+      } else if (textareaRef) {
+        textareaRef.current = node;
+      }
+    },
+    [textareaRef]
+  );
+  React.useEffect(() => {
+    filesRef.current = files;
+    onAttachmentCountChange?.(files.length);
+  }, [files, onAttachmentCountChange]);
+  React.useEffect(() => () => revokeComposerFiles(filesRef.current), []);
+  React.useLayoutEffect(() => {
+    const textarea = localTextareaRef.current;
+    if (!textarea) return;
+    if (isExpanded) {
+      textarea.style.height = "auto";
+      const scrollHeight = textarea.scrollHeight;
+      textarea.style.height = `${Math.min(scrollHeight, 224)}px`;
+      textarea.style.overflowY = scrollHeight >= 224 ? "auto" : "hidden";
+      return;
+    }
+    textarea.style.height = "";
+    textarea.style.overflowY = "hidden";
+  }, [isExpanded, text]);
+  const canSubmit = !disabled && !isSubmitting && !isRunning && (text.trim().length > 0 || files.length > 0);
+  const handleFilesChange = (event) => {
+    const selected = Array.from(event.target.files || []).map(createComposerFile);
+    if (selected.length > 0) {
+      setFiles((current) => [...current, ...selected]);
+    }
+    event.currentTarget.value = "";
+  };
+  const removeFile = (fileId) => {
+    setFiles((current) => {
+      const target = current.find((file) => file.id === fileId);
+      if (target) revokeComposerFiles([target]);
+      return current.filter((file) => file.id !== fileId);
+    });
+  };
+  const submit = async () => {
+    if (!canSubmit) return;
+    const submittedText = text.trim();
+    const submittedFiles = files;
+    setIsSubmitting(true);
+    try {
+      await onSubmit({ text: submittedText, files: submittedFiles });
+      setText("");
+      setFiles([]);
+      revokeComposerFiles(submittedFiles);
+    } catch {
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+      void submit();
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("a24-composer relative mx-auto w-full max-w-3xl overflow-visible", className), "data-agents24-chat-composer": "", children: [
+    files.length > 0 ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-testid": "agent-chat-composer-attachments",
+        "data-layout": attachmentLayout,
+        className: cn(
+          "a24-composer__attachments flex min-w-0 gap-2 py-1",
+          attachmentLayout === "overlay" ? "absolute bottom-full left-0 right-0 mb-1.5 flex-nowrap overflow-x-auto overflow-y-hidden overscroll-x-contain px-2" : "mb-2 flex-wrap px-1"
+        ),
+        children: files.map((file) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "a24-composer__attachment group relative flex h-8 max-w-[min(20rem,calc(100vw-2rem))] cursor-default select-none items-center gap-1.5 rounded-md border border-border bg-card px-1.5 text-sm font-medium text-card-foreground transition-colors hover:bg-accent",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "flex size-5 shrink-0 items-center justify-center rounded bg-background text-muted-foreground", children: /* @__PURE__ */ jsx(Paperclip, { className: "size-3" }) }),
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: file.filename }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  "aria-label": `Remove ${file.filename}`,
+                  className: "a24-composer__attachment-remove inline-flex size-5 shrink-0 items-center justify-center rounded text-muted-foreground opacity-70 transition-colors hover:bg-muted hover:text-foreground hover:opacity-100 focus-visible:outline-none",
+                  onClick: () => removeFile(file.id),
+                  type: "button",
+                  children: /* @__PURE__ */ jsx(X, { className: "size-3" })
+                }
+              )
+            ]
+          },
+          file.id
+        ))
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-expanded": isExpanded ? "" : void 0,
+        className: cn(
+          "a24-composer__surface relative w-full border border-input bg-background shadow-sm",
+          isExpanded ? "rounded-xl p-2 pb-1.5" : "rounded-xl px-2 py-[3px]"
+        ),
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "a24-composer__grid w-full",
+            style: {
+              alignItems: "center",
+              display: "grid",
+              gridTemplateAreas: isExpanded ? `"textarea textarea textarea" "plus toolbar submit"` : `"plus textarea composer mic submit"`,
+              gridTemplateColumns: isExpanded ? "auto 1fr auto" : "auto 1fr auto auto auto",
+              gap: isExpanded ? "3px 10px" : "8px"
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { style: { gridArea: "plus" }, className: "a24-composer__attach-slot flex shrink-0 items-center justify-center", children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ref: fileInputRef,
+                    accept,
+                    "aria-label": "Attach files",
+                    className: "hidden",
+                    multiple: true,
+                    name: "attachments",
+                    onChange: handleFilesChange,
+                    type: "file"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    "aria-label": "Attach files",
+                    className: cn("a24-composer__attach", pillButtonClass),
+                    disabled: disabled || isSubmitting || isRunning || !allowAttachments,
+                    onClick: () => fileInputRef.current?.click(),
+                    title: "Attach files",
+                    type: "button",
+                    children: /* @__PURE__ */ jsx(Plus, { className: "size-4" })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("div", { style: { gridArea: "textarea" }, className: "a24-composer__textarea-slot min-w-0 w-full", children: /* @__PURE__ */ jsx(
+                "textarea",
+                {
+                  ref: setTextareaRef,
+                  "aria-label": "Message",
+                  autoComplete: "off",
+                  className: cn(
+                    "a24-composer__textarea w-full resize-none border-0 bg-transparent px-1 text-[15px] leading-relaxed text-foreground shadow-none outline-none placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0",
+                    isExpanded ? "min-h-9 max-h-[224px] py-1" : "min-h-9 h-9 max-h-9 py-2"
+                  ),
+                  disabled: disabled || isSubmitting || isRunning,
+                  name: "message",
+                  onChange: (event) => setText(event.target.value),
+                  onKeyDown: handleKeyDown,
+                  placeholder,
+                  rows: isExpanded ? 2 : 1,
+                  value: text
+                }
+              ) }),
+              isExpanded ? /* @__PURE__ */ jsx("div", { style: { gridArea: "toolbar" }, className: "a24-composer__toolbar flex min-w-0 items-center gap-1.5", children: inputToolbarContent }) : null,
+              !isExpanded ? /* @__PURE__ */ jsx("div", { style: { gridArea: "composer" }, className: "flex min-w-0 items-center gap-1.5" }) : null,
+              !isExpanded ? /* @__PURE__ */ jsx("div", { style: { gridArea: "mic" }, className: "flex shrink-0 items-center justify-end" }) : null,
+              /* @__PURE__ */ jsx("div", { style: { gridArea: "submit" }, className: "a24-composer__submit-slot flex shrink-0 items-center justify-end", children: isRunning ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  "aria-label": "Stop generating",
+                  className: cn("a24-composer__submit", submitButtonClass),
+                  disabled: disabled || !onStop,
+                  onClick: onStop,
+                  title: "Stop",
+                  type: "button",
+                  children: /* @__PURE__ */ jsx(Square, { className: "size-3.5 fill-current" })
+                }
+              ) : /* @__PURE__ */ jsx(
+                "button",
+                {
+                  "aria-label": files.length > 0 ? `Send ${formatFileCount(files)}` : "Send message",
+                  className: cn("a24-composer__submit", submitButtonClass, text.trim().length > 0 && "hover:scale-105"),
+                  disabled: !canSubmit,
+                  onClick: () => void submit(),
+                  title: "Send",
+                  type: "button",
+                  children: /* @__PURE__ */ jsx(ArrowUp, { className: "size-4", strokeWidth: 2.5 })
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    ),
+    !isExpanded && inputToolbarContent ? /* @__PURE__ */ jsx("div", { className: "a24-composer__toolbar a24-composer__toolbar--external mt-2 flex items-center gap-2 px-1", children: inputToolbarContent }) : null
+  ] });
+}
+
+// src/ui/agent-chat-actions.tsx
+import * as React3 from "react";
+import { Check, Copy, RefreshCcw, ThumbsDown, ThumbsUp } from "lucide-react";
+import { Popover } from "radix-ui";
+
+// src/ui/adapters.ts
+import * as React2 from "react";
+
+// src/ui/attachment.tsx
+import { cva } from "class-variance-authority";
+import { Slot } from "@radix-ui/react-slot";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var attachmentVariants = cva(
+  "group/attachment relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-xl border bg-card text-card-foreground transition-colors focus-within:border-neutral-300 focus-within:ring-0 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 data-[state=idle]:border-dashed",
+  {
+    variants: {
+      size: {
+        default: "gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2",
+        sm: "gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5",
+        xs: "gap-1.5 rounded-lg text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1"
+      },
+      orientation: {
+        horizontal: "min-w-40 items-center",
+        vertical: "w-24 flex-col has-data-[slot=attachment-content]:w-30"
+      }
+    }
+  }
+);
+function Attachment({
+  className,
+  state = "done",
+  size = "default",
+  orientation = "horizontal",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-slot": "attachment",
+      "data-state": state,
+      "data-size": size,
+      "data-orientation": orientation,
+      className: cn(attachmentVariants({ size, orientation }), className),
+      ...props
+    }
+  );
+}
+var attachmentMediaVariants = cva(
+  "relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted text-foreground group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-md group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive group-data-[orientation=vertical]/attachment:*:data-[slot=spinner]:size-6! [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5",
+  {
+    variants: {
+      variant: {
+        icon: "",
+        image: "opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover"
+      }
+    },
+    defaultVariants: {
+      variant: "icon"
+    }
+  }
+);
+function AttachmentMedia({
+  className,
+  variant = "icon",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-slot": "attachment-media",
+      "data-variant": variant,
+      className: cn(attachmentMediaVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+function AttachmentContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-slot": "attachment-content",
+      className: cn(
+        "max-w-full min-w-0 flex-1 leading-tight group-data-[orientation=vertical]/attachment:px-1",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AttachmentTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "span",
+    {
+      "data-slot": "attachment-title",
+      className: cn(
+        "block max-w-full min-w-0 truncate font-medium group-data-[state=processing]/attachment:shimmer group-data-[state=uploading]/attachment:shimmer",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AttachmentDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "span",
+    {
+      "data-slot": "attachment-description",
+      className: cn(
+        "mt-0.5 block min-w-0 truncate text-xs text-muted-foreground group-data-[state=error]/attachment:text-destructive/80",
+        "max-w-full",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AttachmentActions({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-slot": "attachment-actions",
+      className: cn(
+        "relative z-20 flex shrink-0 items-center group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:top-3 group-data-[orientation=vertical]/attachment:right-3 group-data-[orientation=vertical]/attachment:gap-1",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AttachmentAction({
+  className,
+  type = "button",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      "data-slot": "attachment-action",
+      type,
+      className: cn(
+        "inline-flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:border-neutral-300 focus-visible:outline-none focus-visible:ring-0 disabled:pointer-events-none disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AttachmentTrigger({
+  className,
+  asChild = false,
+  type,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx2(
+    Comp,
+    {
+      "data-slot": "attachment-trigger",
+      type: asChild ? void 0 : type ?? "button",
+      className: cn("absolute inset-0 z-10 outline-none", className),
+      ...props
+    }
+  );
+}
+function AttachmentGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-slot": "attachment-group",
+      className: cn(
+        "flex min-w-0 scroll-fade-x snap-x snap-mandatory scroll-px-1 scrollbar-none gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/ui/message.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function MessageGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      "data-slot": "message-group",
+      className: cn("flex min-w-0 flex-col gap-2", className),
+      ...props
+    }
+  );
+}
+function Message({
+  className,
+  align = "start",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      "data-slot": "message",
+      "data-align": align,
+      className: cn(
+        "group/message relative flex w-full min-w-0 gap-2 text-sm data-[align=end]:flex-row-reverse",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MessageAvatar({ className, ...props }) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      "data-slot": "message-avatar",
+      className: cn(
+        "flex w-fit min-w-8 shrink-0 items-center justify-center self-end overflow-hidden rounded-full bg-muted group-has-data-[slot=message-footer]/message:-translate-y-8",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MessageContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      "data-slot": "message-content",
+      className: cn(
+        "flex w-full min-w-0 flex-col gap-2.5 wrap-break-word group-data-[align=end]/message:*:data-slot:self-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MessageHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      "data-slot": "message-header",
+      className: cn(
+        "flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function MessageFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      "data-slot": "message-footer",
+      className: cn(
+        "flex max-w-full min-w-0 items-center px-3 text-xs font-medium text-muted-foreground group-has-data-[variant=ghost]/message:px-0 group-data-[align=end]/message:justify-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/ui/adapters.ts
+var ChatMessageRoleContext = React2.createContext("assistant");
+function ChatMessage(input) {
+  const { className, from, align, ...props } = input;
+  const isUser = from === "user";
+  const isRtl = props.dir === "rtl";
+  const resolvedAlign = align || "start";
+  const messageProps = Object.assign({}, props);
+  messageProps.align = resolvedAlign;
+  messageProps.className = cn(
+    "a24-chat-message group flex w-full flex-col gap-2",
+    isUser ? cn("a24-chat-message--user is-user max-w-[80%] justify-end", isRtl ? "mr-auto" : "ml-auto") : "a24-chat-message--assistant is-assistant max-w-full",
+    className
+  );
+  return React2.createElement(
+    ChatMessageRoleContext.Provider,
+    { value: from },
+    React2.createElement(Message, messageProps)
+  );
+}
+function ChatMessageContent({
+  className,
+  from,
+  ...props
+}) {
+  const inheritedRole = React2.useContext(ChatMessageRoleContext);
+  const isUser = (from ?? inheritedRole) === "user";
+  return React2.createElement("div", {
+    className: cn(
+      "a24-chat-message-content flex max-w-full min-w-0 flex-col gap-2 text-sm",
+      isUser ? "a24-chat-message-content--user is-user:dark w-fit overflow-visible rounded-lg bg-secondary px-4 py-3 text-foreground" : "a24-chat-message-content--assistant w-full overflow-visible text-foreground",
+      className
+    ),
+    "data-slot": "bubble-content",
+    ...props
+  });
+}
+function ChatMessageActions({
+  className,
+  ...props
+}) {
+  return React2.createElement("div", {
+    className: cn("flex items-center gap-1", className),
+    "data-slot": "message-actions",
+    ...props
+  });
+}
+function ChatMessageAction({
+  children,
+  className,
+  label,
+  tooltip,
+  type = "button",
+  ...props
+}) {
+  const tooltipLabel = typeof tooltip === "string" ? tooltip : void 0;
+  return React2.createElement(
+    "button",
+    {
+      "aria-label": label || tooltipLabel,
+      className: cn(
+        "inline-flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:border-neutral-300 focus-visible:outline-none focus-visible:ring-0 disabled:pointer-events-none disabled:opacity-50",
+        className
+      ),
+      title: tooltipLabel,
+      type,
+      ...props
+    },
+    children,
+    React2.createElement(
+      "span",
+      { className: "sr-only" },
+      label || tooltipLabel
+    )
+  );
+}
+function ChatAttachment({
+  data,
+  onRemove,
+  orientation,
+  ...props
+}) {
+  const mediaType = data.mediaType || data.contentType || String(data.type || "application/octet-stream");
+  const filename = data.filename || data.name || "Attachment";
+  const isImage = mediaType.startsWith("image/") && Boolean(data.url);
+  return React2.createElement(
+    Attachment,
+    {
+      orientation: orientation || (isImage ? "vertical" : "horizontal"),
+      ...props
+    },
+    React2.createElement(
+      AttachmentMedia,
+      { variant: isImage ? "image" : "icon" },
+      isImage ? React2.createElement("img", {
+        alt: filename,
+        className: "size-full object-cover",
+        src: data.url
+      }) : React2.createElement(
+        "span",
+        { "aria-hidden": "true", className: "text-sm" },
+        filename.slice(0, 1).toUpperCase()
+      )
+    ),
+    React2.createElement(
+      AttachmentContent,
+      null,
+      React2.createElement(AttachmentTitle, null, filename),
+      React2.createElement(AttachmentDescription, null, mediaType)
+    ),
+    onRemove ? React2.createElement(
+      "button",
+      {
+        "aria-label": "Remove attachment",
+        className: "relative z-20 mr-1 inline-flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground hover:bg-muted hover:text-foreground",
+        onClick: (event) => {
+          event.stopPropagation();
+          onRemove();
+        },
+        type: "button"
+      },
+      React2.createElement("span", { "aria-hidden": "true" }, "x")
+    ) : null
+  );
+}
+function ChatAttachments({
+  children,
+  className,
+  ...props
+}) {
+  if (!children) return null;
+  return React2.createElement(
+    AttachmentGroup,
+    {
+      className: cn(
+        props.dir === "rtl" ? "mr-auto" : "ml-auto",
+        "w-fit flex-wrap overflow-visible",
+        className
+      ),
+      ...props
+    },
+    children
+  );
+}
+
+// src/ui/agent-chat-actions.tsx
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var FEEDBACK_REASONS = [
+  ["incorrect", "Incorrect"],
+  ["irrelevant", "Irrelevant"],
+  ["incomplete", "Incomplete"],
+  ["unsafe", "Unsafe"],
+  ["citation_issue", "Citation issue"],
+  ["other", "Other"]
+];
+function AgentChatDefaultActions({
+  additionalActions,
+  dir,
+  handlers,
+  message
+}) {
+  const [feedbackOpen, setFeedbackOpen] = React3.useState(false);
+  const [feedbackTrigger, setFeedbackTrigger] = React3.useState(null);
+  const [reason, setReason] = React3.useState(handlers?.feedback?.reason ?? null);
+  const [comment, setComment] = React3.useState(handlers?.feedback?.comment ?? "");
+  React3.useEffect(() => {
+    setReason(handlers?.feedback?.reason ?? null);
+    setComment(handlers?.feedback?.comment ?? "");
+  }, [handlers?.feedback?.comment, handlers?.feedback?.reason]);
+  if (!handlers || message.role !== "assistant" || message.isFinal === false) return null;
+  const canWriteFeedback = Boolean(message.runId && handlers.onSetFeedback);
+  return /* @__PURE__ */ jsxs2(ChatMessageActions, { children: [
+    handlers.onRetry ? /* @__PURE__ */ jsx4(
+      ChatMessageAction,
+      {
+        label: "Retry",
+        onClick: () => void handlers.onRetry?.(message),
+        tooltip: "Regenerate response",
+        children: /* @__PURE__ */ jsx4(RefreshCcw, { className: "size-4" })
+      }
+    ) : null,
+    canWriteFeedback ? /* @__PURE__ */ jsx4(
+      ChatMessageAction,
+      {
+        label: "Like",
+        onClick: () => void handlers.onSetFeedback?.(message, {
+          rating: handlers.feedback?.rating === "like" ? null : "like"
+        }),
+        tooltip: "Like this response",
+        children: /* @__PURE__ */ jsx4(ThumbsUp, { className: "size-4", fill: handlers.feedback?.rating === "like" ? "currentColor" : "none" })
+      }
+    ) : null,
+    canWriteFeedback ? /* @__PURE__ */ jsxs2(Popover.Root, { onOpenChange: setFeedbackOpen, open: feedbackOpen, children: [
+      /* @__PURE__ */ jsx4(Popover.Trigger, { asChild: true, children: /* @__PURE__ */ jsx4(
+        ChatMessageAction,
+        {
+          label: "Dislike",
+          onClick: () => {
+            if (handlers.feedback?.rating !== "dislike") {
+              void handlers.onSetFeedback?.(message, { rating: "dislike" });
+            }
+            setFeedbackOpen(true);
+          },
+          ref: setFeedbackTrigger,
+          tooltip: "Dislike this response",
+          children: /* @__PURE__ */ jsx4(ThumbsDown, { className: "size-4", fill: handlers.feedback?.rating === "dislike" ? "currentColor" : "none" })
+        }
+      ) }),
+      /* @__PURE__ */ jsx4(
+        Popover.Portal,
+        {
+          container: feedbackTrigger?.closest("[data-agents24-theme-root]") ?? void 0,
+          children: /* @__PURE__ */ jsxs2(
+            Popover.Content,
+            {
+              align: "end",
+              "aria-label": "Dislike details",
+              className: "z-50 w-80 rounded-lg border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+              dir,
+              side: "top",
+              sideOffset: 8,
+              children: [
+                /* @__PURE__ */ jsx4("p", { className: "text-sm font-medium", children: "What could be better?" }),
+                /* @__PURE__ */ jsx4("div", { className: "mt-3 flex flex-wrap gap-1.5", children: FEEDBACK_REASONS.map(([value, label]) => /* @__PURE__ */ jsx4(
+                  "button",
+                  {
+                    "aria-pressed": reason === value,
+                    className: "rounded-md border border-border px-2.5 py-1.5 text-xs font-medium transition-colors hover:bg-muted aria-pressed:border-transparent aria-pressed:bg-secondary",
+                    onClick: () => setReason(reason === value ? null : value),
+                    type: "button",
+                    children: label
+                  },
+                  value
+                )) }),
+                /* @__PURE__ */ jsx4(
+                  "textarea",
+                  {
+                    "aria-label": "Optional feedback comment",
+                    className: "mt-3 min-h-20 w-full resize-none rounded-md border border-input bg-background px-3 py-2 text-sm outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring",
+                    maxLength: 1e3,
+                    onChange: (event) => setComment(event.target.value),
+                    placeholder: "Add a comment (optional)",
+                    value: comment
+                  }
+                ),
+                /* @__PURE__ */ jsxs2("div", { className: "mt-3 flex items-center justify-between gap-2", children: [
+                  /* @__PURE__ */ jsx4(
+                    "button",
+                    {
+                      className: "rounded-md px-3 py-2 text-sm font-medium hover:bg-muted",
+                      onClick: () => {
+                        void Promise.resolve(handlers.onSetFeedback?.(message, { rating: null })).then(() => setFeedbackOpen(false)).catch(() => void 0);
+                      },
+                      type: "button",
+                      children: "Remove feedback"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx4(
+                    "button",
+                    {
+                      className: "rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:opacity-90",
+                      onClick: () => {
+                        void Promise.resolve(handlers.onSetFeedback?.(message, { rating: "dislike", reason, comment })).then(() => setFeedbackOpen(false)).catch(() => void 0);
+                      },
+                      type: "button",
+                      children: "Save"
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        }
+      )
+    ] }) : null,
+    additionalActions,
+    handlers.onCopy ? /* @__PURE__ */ jsx4(
+      ChatMessageAction,
+      {
+        label: "Copy",
+        onClick: () => handlers.onCopy?.(message.content || "", message.id),
+        tooltip: handlers.copied ? "Copied!" : "Copy to clipboard",
+        children: handlers.copied ? /* @__PURE__ */ jsx4(Check, { className: "size-4 text-green-600" }) : /* @__PURE__ */ jsx4(Copy, { className: "size-4" })
+      }
+    ) : null
+  ] });
+}
+
+// src/ui/agent-chat-message.tsx
+import * as React8 from "react";
+import { ChevronDown as ChevronDown3, ChevronUp } from "lucide-react";
+
+// src/ui/agent-response-timeline.tsx
+import * as React7 from "react";
+
+// src/ui/ask-user-interaction.tsx
+import * as React4 from "react";
+import {
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  Pencil
+} from "lucide-react";
+
+// src/ui/ask-user-interaction-state.ts
+function emptyAskUserDrafts(questions) {
+  return Object.fromEntries(
+    questions.map((question) => [
+      question.id,
+      { customText: "", selectedOptionIds: [] }
+    ])
+  );
+}
+function askUserDraftHasAnswer(draft) {
+  return Boolean(
+    draft && (draft.selectedOptionIds.length > 0 || draft.customText.trim().length > 0)
+  );
+}
+function selectAskUserOption({
+  draft,
+  drafts,
+  optionId,
+  question
+}) {
+  const selectedOptionIds = question.multiSelect ? draft.selectedOptionIds.includes(optionId) ? draft.selectedOptionIds.filter((id) => id !== optionId) : [...draft.selectedOptionIds, optionId] : [optionId];
+  return {
+    ...drafts,
+    [question.id]: {
+      customText: "",
+      selectedOptionIds
+    }
+  };
+}
+function updateAskUserCustomText({
+  customText,
+  drafts,
+  question
+}) {
+  return {
+    ...drafts,
+    [question.id]: {
+      customText,
+      selectedOptionIds: question.multiSelect ? drafts[question.id]?.selectedOptionIds || [] : []
+    }
+  };
+}
+function askUserAnswersFromDrafts(questions, drafts) {
+  return questions.map((question) => {
+    const answer = drafts[question.id];
+    return {
+      questionId: question.id,
+      selectedOptionIds: answer?.selectedOptionIds || [],
+      ...answer?.customText.trim() ? { customText: answer.customText.trim() } : {}
+    };
+  });
+}
+
+// src/ui/ask-user-interaction.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function resolvedAnswerText(question, answer) {
+  if (!answer) return ["No response recorded"];
+  const labels = answer.selectedOptionIds.flatMap((optionId) => {
+    const option = question.options.find((item) => item.id === optionId);
+    return option ? [option.label] : [];
+  });
+  if (answer.customText) labels.push(answer.customText);
+  return labels.length ? labels : ["No response recorded"];
+}
+function ResolvedQuestions({
+  buttonRef,
+  part
+}) {
+  const [open, setOpen] = React4.useState(false);
+  const count = part.questions.length;
+  const answers = new Map(
+    (part.resolution?.answers || []).map((answer) => [
+      answer.questionId,
+      answer
+    ])
+  );
+  return /* @__PURE__ */ jsxs3("div", { className: "a24-ask-user a24-ask-user--resolved w-full", children: [
+    /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        "aria-expanded": open,
+        className: "group flex min-w-0 items-center gap-1.5 rounded-md px-0 py-0.5 text-start text-sm text-muted-foreground transition-colors hover:text-foreground motion-reduce:transition-none",
+        onClick: () => setOpen((value) => !value),
+        ref: buttonRef,
+        type: "button",
+        children: [
+          /* @__PURE__ */ jsxs3("span", { children: [
+            "Asked ",
+            count,
+            " question",
+            count === 1 ? "" : "s"
+          ] }),
+          open ? /* @__PURE__ */ jsx5(ChevronDown, { "aria-hidden": "true", className: "size-3.5" }) : /* @__PURE__ */ jsx5(
+            ChevronRight,
+            {
+              "aria-hidden": "true",
+              className: "size-3.5 opacity-70 rtl:rotate-180"
+            }
+          )
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ jsx5("div", { className: "mt-2 space-y-3 ps-4", children: part.questions.map((question) => /* @__PURE__ */ jsxs3("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx5("div", { className: "text-sm font-medium text-foreground", children: question.question }),
+      /* @__PURE__ */ jsx5("div", { className: "mt-1 space-y-1 text-sm text-muted-foreground", children: resolvedAnswerText(
+        question,
+        answers.get(question.id)
+      ).map((value, index) => /* @__PURE__ */ jsx5(
+        "div",
+        {
+          className: "whitespace-pre-wrap break-words",
+          children: value
+        },
+        `${question.id}:${index}`
+      )) })
+    ] }, question.id)) }) : null
+  ] });
+}
+function AskUserInteraction({
+  error,
+  isBusy = false,
+  onSubmit,
+  part
+}) {
+  const questions = part.questions;
+  const [step, setStep] = React4.useState(0);
+  const [drafts, setDrafts] = React4.useState(
+    () => emptyAskUserDrafts(questions)
+  );
+  const headingRef = React4.useRef(null);
+  const questionsRef = React4.useRef(questions);
+  const resolvedButtonRef = React4.useRef(null);
+  const wasResolvedRef = React4.useRef(part.status !== "pending");
+  questionsRef.current = questions;
+  React4.useEffect(() => {
+    setStep(0);
+    setDrafts(emptyAskUserDrafts(questionsRef.current));
+  }, [part.interruptId]);
+  React4.useEffect(() => {
+    headingRef.current?.focus();
+  }, [step]);
+  React4.useEffect(() => {
+    const isResolved = part.status !== "pending";
+    if (isResolved && !wasResolvedRef.current) {
+      resolvedButtonRef.current?.focus();
+    }
+    wasResolvedRef.current = isResolved;
+  }, [part.status]);
+  if (part.status !== "pending") {
+    return /* @__PURE__ */ jsx5(ResolvedQuestions, { buttonRef: resolvedButtonRef, part });
+  }
+  const question = questions[step];
+  if (!question) {
+    return /* @__PURE__ */ jsx5("div", { className: "text-sm text-destructive", role: "alert", children: "This question request is unavailable." });
+  }
+  const draft = drafts[question.id] || {
+    customText: "",
+    selectedOptionIds: []
+  };
+  const isLastQuestion = step === questions.length - 1;
+  const canMoveForward = askUserDraftHasAnswer(draft);
+  const completeStep = (nextDrafts) => {
+    if (isLastQuestion) {
+      onSubmit?.(askUserAnswersFromDrafts(questions, nextDrafts));
+      return;
+    }
+    setStep((current) => Math.min(current + 1, questions.length - 1));
+  };
+  const selectOption = (optionId) => {
+    const nextDrafts = selectAskUserOption({
+      draft,
+      drafts,
+      optionId,
+      question
+    });
+    setDrafts(nextDrafts);
+    if (!question.multiSelect) completeStep(nextDrafts);
+  };
+  const updateCustomText = (customText) => {
+    setDrafts(
+      (current) => updateAskUserCustomText({
+        customText,
+        drafts: current,
+        question
+      })
+    );
+  };
+  return /* @__PURE__ */ jsxs3("div", { className: "a24-ask-user space-y-3 rounded-xl border border-border/50 bg-background p-4 shadow-sm", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "flex min-w-0 items-start justify-between gap-4", children: [
+      /* @__PURE__ */ jsx5(
+        "h3",
+        {
+          className: "min-w-0 flex-1 text-base font-medium leading-6 text-foreground outline-none",
+          ref: headingRef,
+          tabIndex: -1,
+          children: question.question
+        }
+      ),
+      /* @__PURE__ */ jsxs3("div", { className: "flex shrink-0 items-center gap-1 text-muted-foreground", children: [
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            "aria-label": "Previous question",
+            className: "flex size-8 items-center justify-center rounded-full transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-30",
+            disabled: isBusy || step === 0,
+            onClick: () => setStep((current) => Math.max(0, current - 1)),
+            type: "button",
+            children: /* @__PURE__ */ jsx5(
+              ChevronLeft,
+              {
+                "aria-hidden": "true",
+                className: "size-4 rtl:rotate-180"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs3(
+          "span",
+          {
+            "aria-label": `Question ${step + 1} of ${questions.length}`,
+            className: "min-w-12 text-center text-sm tabular-nums",
+            children: [
+              step + 1,
+              " / ",
+              questions.length
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          "button",
+          {
+            "aria-label": isLastQuestion ? "Submit answers" : "Next question",
+            className: "flex size-8 items-center justify-center rounded-full transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-30",
+            disabled: isBusy || !onSubmit || !canMoveForward,
+            onClick: () => completeStep(drafts),
+            type: "button",
+            children: /* @__PURE__ */ jsx5(
+              ChevronRight,
+              {
+                "aria-hidden": "true",
+                className: "size-4 rtl:rotate-180"
+              }
+            )
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs3("div", { className: "space-y-1", children: [
+      question.options.map((option, index) => {
+        const selected = draft.selectedOptionIds.includes(option.id);
+        return /* @__PURE__ */ jsxs3(
+          "button",
+          {
+            "aria-pressed": selected,
+            className: cn(
+              "group flex min-h-11 w-full items-center gap-3 rounded-xl px-2.5 py-2 text-start text-sm transition-colors motion-reduce:transition-none",
+              selected ? "bg-muted" : "hover:bg-muted/70"
+            ),
+            disabled: isBusy || !onSubmit,
+            onClick: () => selectOption(option.id),
+            type: "button",
+            children: [
+              /* @__PURE__ */ jsx5(
+                "span",
+                {
+                  className: cn(
+                    "flex size-8 shrink-0 items-center justify-center rounded-full border text-sm tabular-nums transition-colors",
+                    selected ? "border-border bg-background text-foreground" : "border-border/70 bg-muted/60 text-muted-foreground"
+                  ),
+                  children: index + 1
+                }
+              ),
+              /* @__PURE__ */ jsx5("span", { className: "min-w-0 flex-1 font-medium text-foreground", children: option.label }),
+              /* @__PURE__ */ jsx5(
+                ChevronRight,
+                {
+                  "aria-hidden": "true",
+                  className: "size-4 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100 rtl:rotate-180"
+                }
+              )
+            ]
+          },
+          option.id
+        );
+      }),
+      /* @__PURE__ */ jsxs3("div", { className: "flex min-h-11 items-center gap-2 rounded-xl bg-muted px-2.5 py-1.5 focus-within:ring-1 focus-within:ring-ring", children: [
+        /* @__PURE__ */ jsx5("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-full border border-border/70 bg-background/70 text-muted-foreground", children: /* @__PURE__ */ jsx5(Pencil, { "aria-hidden": "true", className: "size-4" }) }),
+        /* @__PURE__ */ jsx5(
+          "input",
+          {
+            "aria-label": "Other response",
+            autoComplete: "off",
+            className: "h-8 min-w-0 flex-1 bg-transparent px-1 text-sm text-foreground outline-none placeholder:text-muted-foreground",
+            disabled: isBusy || !onSubmit,
+            maxLength: 2e3,
+            onChange: (event) => updateCustomText(event.target.value),
+            onKeyDown: (event) => {
+              if (event.key === "Enter" && !event.nativeEvent.isComposing && draft.customText.trim()) {
+                event.preventDefault();
+                completeStep(drafts);
+              }
+            },
+            placeholder: "Other\u2026",
+            value: draft.customText
+          }
+        ),
+        draft.customText.trim() ? /* @__PURE__ */ jsx5(
+          "button",
+          {
+            className: "h-8 shrink-0 rounded-full bg-foreground px-4 text-sm font-medium text-background transition-colors hover:opacity-85 disabled:opacity-50",
+            disabled: isBusy || !onSubmit,
+            onClick: () => completeStep(drafts),
+            type: "button",
+            children: isLastQuestion ? "Submit" : "Next"
+          }
+        ) : null
+      ] })
+    ] }),
+    error ? /* @__PURE__ */ jsx5("div", { className: "text-sm text-destructive", role: "alert", children: error }) : null
+  ] });
+}
+
+// src/ui/agent-chat-context-compression-row.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function compressionPresentation(part) {
+  if (part.status === "failed") {
+    return { label: "Could not compact message history", status: "failed" };
+  }
+  if (part.status === "completed") {
+    return { label: "Compacted message history", status: "completed" };
+  }
+  return { label: "Compacting message history", status: "running" };
+}
+function AgentChatContextCompressionRow({
+  className,
+  part
+}) {
+  const presentation = compressionPresentation(part);
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      "aria-live": "polite",
+      className: cn("a24-context-compression-row", className),
+      "data-agents24-context-compression": "",
+      "data-status": part.status,
+      role: "status",
+      children: /* @__PURE__ */ jsx6("div", { className: "a24-tool-trigger-row", children: /* @__PURE__ */ jsx6("div", { className: cn(
+        "a24-tool-trigger a24-tool-trigger--root a24-tool-trigger--without-orb",
+        presentation.status === "failed" && "a24-tool-trigger--error",
+        presentation.status === "running" && "a24-tool-trigger--active"
+      ), children: /* @__PURE__ */ jsx6("span", { className: cn(
+        "a24-tool-trigger__label",
+        presentation.status === "running" && "a24-tool-shimmer"
+      ), children: presentation.label }) }) })
+    }
+  );
+}
+
+// src/ui/message-response.tsx
+import * as React5 from "react";
+import { defaultRehypePlugins, Streamdown } from "streamdown";
+
+// src/active-content.ts
+var CHAT_MARKDOWN_HARDEN_OPTIONS = Object.freeze({
+  allowDataImages: false,
+  allowedImagePrefixes: [],
+  allowedLinkPrefixes: ["*"],
+  allowedProtocols: [],
+  defaultOrigin: void 0,
+  imageBlockPolicy: "text-only",
+  linkBlockPolicy: "text-only"
+});
+function safeChatMarkdownHref(value) {
+  if (!value) return void 0;
+  if (value.startsWith("#")) return value;
+  try {
+    const url = new URL(value);
+    return url.protocol === "https:" || url.protocol === "http:" ? url.href : void 0;
+  } catch {
+    return void 0;
+  }
+}
+
+// src/ui/message-response.tsx
+import { Fragment, jsx as jsx7 } from "react/jsx-runtime";
+function SafeMarkdownLink({ children, href, ...props }) {
+  const domProps = { ...props };
+  delete domProps.node;
+  const safeHref = safeChatMarkdownHref(href);
+  if (!safeHref) return /* @__PURE__ */ jsx7("span", { children });
+  if (safeHref.startsWith("#")) return /* @__PURE__ */ jsx7("a", { ...domProps, href: safeHref, children });
+  return /* @__PURE__ */ jsx7("a", { ...domProps, href: safeHref, rel: "noopener noreferrer", target: "_blank", children });
+}
+function BlockedMarkdownImage({ alt }) {
+  return alt ? /* @__PURE__ */ jsx7("span", { "aria-label": `Image blocked: ${alt}`, role: "img", children: alt }) : null;
+}
+var BLOCK_MARKDOWN_TAGS = /* @__PURE__ */ new Set([
+  "blockquote",
+  "div",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "hr",
+  "ol",
+  "pre",
+  "table",
+  "ul"
+]);
+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 (!React5.isValidElement(child)) {
+    return false;
+  }
+  if (typeof child.type === "string" && BLOCK_MARKDOWN_TAGS.has(child.type)) {
+    return true;
+  }
+  const props = child.props;
+  if (BLOCK_MARKDOWN_TAGS.has(props.node?.tagName || "") || isMultilineCodeNode(props.node)) {
+    return true;
+  }
+  return React5.Children.toArray(props.children).some(hasBlockMarkdownChild);
+}
+function MessageMarkdownParagraph({
+  children,
+  ...props
+}) {
+  const domProps = { ...props };
+  delete domProps.node;
+  const childArray = React5.Children.toArray(children).filter(
+    (child) => child !== null && child !== ""
+  );
+  const isImageOnly = childArray.length === 1 && React5.isValidElement(childArray[0]) && childArray[0].props.node?.tagName === "img";
+  if (isImageOnly) {
+    return /* @__PURE__ */ jsx7(Fragment, { children });
+  }
+  if (childArray.some(hasBlockMarkdownChild)) {
+    return /* @__PURE__ */ jsx7("div", { ...domProps, children });
+  }
+  return /* @__PURE__ */ jsx7("p", { ...domProps, children });
+}
+var MESSAGE_RESPONSE_COMPONENTS = {
+  a: SafeMarkdownLink,
+  img: BlockedMarkdownImage,
+  p: MessageMarkdownParagraph
+};
+var streamdownDefaultRehypePlugins = defaultRehypePlugins || {};
+var streamdownHardenPlugin = Array.isArray(
+  streamdownDefaultRehypePlugins.harden
+) ? streamdownDefaultRehypePlugins.harden[0] : streamdownDefaultRehypePlugins.harden;
+var MESSAGE_RESPONSE_REHYPE_PLUGINS = [
+  ...Object.entries(streamdownDefaultRehypePlugins).filter(([key]) => key !== "harden").map(([, plugin]) => plugin),
+  ...streamdownHardenPlugin ? [
+    [
+      streamdownHardenPlugin,
+      CHAT_MARKDOWN_HARDEN_OPTIONS
+    ]
+  ] : []
+];
+var MessageResponse = React5.memo(
+  ({
+    children,
+    className,
+    components,
+    rehypePlugins,
+    streaming = false,
+    streamingId,
+    ...props
+  }) => {
+    const text = typeof children === "string" || typeof children === "number" ? String(children) : "";
+    const streamingText = useStreamingText({
+      charsPerSecond: 120,
+      id: streamingId || text,
+      isStreaming: streaming && text.length > 0,
+      maxCatchupChars: 32,
+      text
+    });
+    const streamdownComponents = React5.useMemo(
+      () => ({ ...MESSAGE_RESPONSE_COMPONENTS, ...components }),
+      [components]
+    );
+    return /* @__PURE__ */ jsx7(
+      Streamdown,
+      {
+        className: cn("a24-message-response", className),
+        components: streamdownComponents,
+        rehypePlugins: rehypePlugins || MESSAGE_RESPONSE_REHYPE_PLUGINS,
+        ...props,
+        children: text ? streamingText.displayedText : children
+      }
+    );
+  },
+  (prevProps, nextProps) => prevProps.children === nextProps.children && prevProps.className === nextProps.className && prevProps.streaming === nextProps.streaming && prevProps.streamingId === nextProps.streamingId && prevProps.components === nextProps.components
+);
+MessageResponse.displayName = "MessageResponse";
+
+// src/ui/hitl-presentation.ts
+function optionalString(value) {
+  return typeof value === "string" && value.trim() ? value.trim() : null;
+}
+function hitlActionLabel(part, action) {
+  if (action === "approve") return ["tool_review", "app_data_permission"].includes(part.hitlKind) ? "Allow once" : "Approve";
+  if (action === "reject") return ["tool_review", "app_data_permission"].includes(part.hitlKind) ? "Don\u2019t allow" : "Reject";
+  if (action === "connect") return "Connect";
+  if (action === "respond") return "Submit";
+  return "Skip";
+}
+function hitlTitle(part) {
+  const presentation = part.presentation || {};
+  if (part.hitlKind === "tool_review") return `Run ${optionalString(presentation.tool_name) || "this tool"}?`;
+  if (part.hitlKind === "mcp_auth") {
+    const serverName = optionalString(presentation.server_name);
+    return serverName ? `Connect ${serverName} to continue` : part.message;
+  }
+  if (part.hitlKind === "app_data_permission") return "Allow this data change?";
+  return part.message;
+}
+function resolvedHitlLabel(part) {
+  const outcome = String(part.resolution?.outcome || part.status).trim().toLowerCase();
+  return {
+    approved: part.hitlKind === "user_approval" ? "Approved" : "Allowed",
+    rejected: part.hitlKind === "user_approval" ? "Rejected" : "Not allowed",
+    connected: "connected",
+    skipped: "Skipped",
+    timeout: "Timed out",
+    expired: "Timed out",
+    cancelled: "Cancelled",
+    invalidated: "No longer available",
+    policy_denied: "Not allowed"
+  }[outcome] || outcome.replace(/_/g, " ");
+}
+
+// src/ui/tool-sessions.tsx
+import * as React6 from "react";
+import { ChevronDown as ChevronDown2, ChevronRight as ChevronRight2 } from "lucide-react";
+import { ThinkingOrb } from "thinking-orbs";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+function agentChatToolLabel(part) {
+  const presentation = part.presentation || {};
+  return optionalText(presentation.activity) || optionalText(presentation.title) || optionalText(part.displayName) || optionalText(part.summary) || optionalText(part.toolName) || "Tool activity";
+}
+function isAgentChatSubagent(part) {
+  const sourceKind = String(part.sourceKind || "").trim().toLowerCase();
+  return sourceKind === "agent" || sourceKind === "agent_call" || Boolean(part.presentation.childRun);
+}
+function isAgentChatToolRunning(part) {
+  return part.state === "input-available" || part.state === "input-streaming";
+}
+function latestRunningAgentChatToolId(parts) {
+  const active = [...parts].reverse().find(isAgentChatToolRunning);
+  return active?.toolCallId || active?.id || null;
+}
+function partitionAgentChatToolTimeline(parts, toolViewMode = "closed") {
+  const segments = [];
+  let index = 0;
+  while (index < parts.length) {
+    const part = parts[index];
+    const leadingModelTurn = part.kind === "model-turn" && parts[index + 1]?.kind === "tool" && !isAgentChatSubagent(parts[index + 1]) ? part : void 0;
+    if (leadingModelTurn) index += 1;
+    const candidate = parts[index];
+    if (candidate.kind !== "tool") {
+      segments.push({ kind: "part", part: candidate });
+      index += 1;
+      continue;
+    }
+    if (isAgentChatSubagent(candidate)) {
+      segments.push({ kind: "subagent", part: candidate });
+      index += 1;
+      continue;
+    }
+    const streak = [];
+    while (index < parts.length) {
+      const candidate2 = parts[index];
+      if (candidate2.kind !== "tool" || isAgentChatSubagent(candidate2)) break;
+      streak.push(candidate2);
+      index += 1;
+    }
+    const modelTurn = parts[index]?.kind === "model-turn" ? parts[index] : void 0;
+    if (modelTurn) index += 1;
+    if (toolViewMode === "expanded") {
+      if (leadingModelTurn) segments.push({ kind: "part", part: leadingModelTurn });
+      segments.push(...streak.map((toolPart) => ({ kind: "tool", part: toolPart })));
+      if (modelTurn) segments.push({ kind: "part", part: modelTurn });
+    } else if (streak.length === 1 && !modelTurn && !leadingModelTurn) {
+      segments.push({ kind: "tool", part: streak[0] });
+    } else {
+      segments.push({
+        kind: "tool-session",
+        parts: streak,
+        ...leadingModelTurn ? { leadingModelTurn } : {},
+        ...modelTurn ? { modelTurn } : {}
+      });
+    }
+  }
+  return segments;
+}
+function optionalText(value) {
+  return typeof value === "string" && value.trim() ? value.trim() : null;
+}
+function isActive(part, activeToolId) {
+  return Boolean(activeToolId && (part.id === activeToolId || part.toolCallId === activeToolId));
+}
+function ToolActivityReel({
+  announce = true,
+  initialLabel,
+  initialShownAt,
+  label
+}) {
+  const initial = initialLabel && initialLabel !== label ? initialLabel : label;
+  const parsedInitialShownAt = initialShownAt ? Date.parse(initialShownAt) : Number.NaN;
+  const [displayed, setDisplayed] = React6.useState(initial);
+  const [previous, setPrevious] = React6.useState(null);
+  const displayedRef = React6.useRef(initial);
+  const latestRef = React6.useRef(label);
+  const shownAtRef = React6.useRef(Number.isFinite(parsedInitialShownAt) ? parsedInitialShownAt : Date.now());
+  React6.useEffect(() => {
+    latestRef.current = label;
+    if (displayedRef.current === label) return;
+    const showLatest = () => {
+      const next = latestRef.current;
+      if (displayedRef.current === next) return;
+      const old = displayedRef.current;
+      displayedRef.current = next;
+      shownAtRef.current = Date.now();
+      setPrevious(old);
+      setDisplayed(next);
+    };
+    const remaining = Math.max(0, 500 - (Date.now() - shownAtRef.current));
+    if (remaining === 0) {
+      showLatest();
+      return;
+    }
+    const timer = window.setTimeout(showLatest, remaining);
+    return () => window.clearTimeout(timer);
+  }, [label]);
+  React6.useEffect(() => {
+    if (!previous) return;
+    const timer = window.setTimeout(() => setPrevious(null), 200);
+    return () => window.clearTimeout(timer);
+  }, [previous]);
+  return /* @__PURE__ */ jsxs4("span", { className: "a24-tool-reel", "aria-live": announce ? "polite" : "off", children: [
+    previous ? /* @__PURE__ */ jsx8("span", { "aria-hidden": "true", className: "a24-tool-reel__previous", children: previous }) : null,
+    /* @__PURE__ */ jsx8("span", { className: previous ? "a24-tool-reel__current" : void 0, children: displayed })
+  ] });
+}
+function ToolActivityOrb({ label }) {
+  return /* @__PURE__ */ jsx8("span", { className: "a24-tool-orb", children: /* @__PURE__ */ jsx8(ThinkingOrb, { "aria-label": label || "Working", size: 20, speed: 0.8, state: "searching" }) });
+}
+function AgentChatActivityRow({
+  label,
+  modelTurnId,
+  onSelect
+}) {
+  const content = /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    /* @__PURE__ */ jsx8(ToolActivityOrb, { label }),
+    /* @__PURE__ */ jsx8("span", { className: "a24-tool-trigger__label a24-tool-shimmer", children: /* @__PURE__ */ jsx8(ToolActivityReel, { label }) })
+  ] });
+  return /* @__PURE__ */ jsx8("div", { className: "a24-tool-trigger-row", "data-agents24-model-turn": modelTurnId, role: "status", children: onSelect ? /* @__PURE__ */ jsx8("button", { className: "a24-tool-trigger a24-tool-trigger--root a24-tool-trigger--active", onClick: onSelect, type: "button", children: content }) : /* @__PURE__ */ jsx8("div", { className: "a24-tool-trigger a24-tool-trigger--root a24-tool-trigger--active", children: content }) });
+}
+function AgentChatModelTurnRow({ part }) {
+  return /* @__PURE__ */ jsx8(AgentChatActivityRow, { label: "Planning next moves", modelTurnId: part.modelTurnId });
+}
+function AgentChatNodeActivityRow({
+  onSelect,
+  part
+}) {
+  const [open, setOpen] = React6.useState(false);
+  const contentId = React6.useId();
+  const running = part.status === "running";
+  const failed = part.status === "failed";
+  const failureMessage = part.failure?.message || "The node could not complete the request.";
+  const triggerClassName = cn(
+    "a24-tool-trigger",
+    "a24-tool-trigger--root",
+    !running && "a24-tool-trigger--without-orb",
+    running && "a24-tool-trigger--active",
+    failed && "a24-tool-trigger--error"
+  );
+  const label = running ? /* @__PURE__ */ jsx8("span", { className: "a24-tool-shimmer", children: /* @__PURE__ */ jsx8(ToolActivityReel, { label: part.label }) }) : part.label;
+  if (!failed) {
+    return /* @__PURE__ */ jsx8("div", { className: "a24-tool-trigger-row", role: "status", children: onSelect ? /* @__PURE__ */ jsxs4("button", { className: triggerClassName, onClick: () => onSelect(part), type: "button", children: [
+      running ? /* @__PURE__ */ jsx8(ToolActivityOrb, { label: part.label }) : null,
+      /* @__PURE__ */ jsx8("span", { className: "a24-tool-trigger__label", children: label })
+    ] }) : /* @__PURE__ */ jsxs4("div", { className: triggerClassName, children: [
+      running ? /* @__PURE__ */ jsx8(ToolActivityOrb, { label: part.label }) : null,
+      /* @__PURE__ */ jsx8("span", { className: "a24-tool-trigger__label", children: label })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs4("div", { className: "a24-tool-disclosure", children: [
+    /* @__PURE__ */ jsx8("div", { className: "a24-tool-trigger-row", children: /* @__PURE__ */ jsxs4(
+      "button",
+      {
+        "aria-controls": contentId,
+        "aria-expanded": open,
+        className: triggerClassName,
+        onClick: () => {
+          onSelect?.(part);
+          setOpen((value) => !value);
+        },
+        type: "button",
+        children: [
+          /* @__PURE__ */ jsx8("span", { className: "a24-tool-trigger__label", children: label }),
+          open ? /* @__PURE__ */ jsx8(ChevronDown2, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" }) : /* @__PURE__ */ jsx8(ChevronRight2, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" })
+        ]
+      }
+    ) }),
+    open ? /* @__PURE__ */ jsx8("div", { className: "a24-tool-detail a24-tool-detail--error", id: contentId, children: failureMessage }) : null
+  ] });
+}
+function toolRowLabel(part) {
+  const label = agentChatToolLabel(part);
+  return isAgentChatToolRunning(part) ? label : label.replace(/^(?:running|ran)\s+/i, "");
+}
+function ToolDisclosure({
+  children,
+  error,
+  label,
+  loading,
+  onExpandedChange,
+  onSelect,
+  part,
+  root,
+  showOrb,
+  statusLabel,
+  accessory
+}) {
+  const [open, setOpen] = React6.useState(false);
+  const contentId = React6.useId();
+  const expandable = React6.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__ */ jsxs4("div", { className: "a24-tool-trigger-row", children: [
+      onSelect && part ? /* @__PURE__ */ jsxs4("button", { className: triggerClassName, onClick: () => onSelect(part), type: "button", children: [
+        showOrb ? /* @__PURE__ */ jsx8(ToolActivityOrb, { label: statusLabel }) : null,
+        /* @__PURE__ */ jsx8("span", { className: "a24-tool-trigger__label", children: label })
+      ] }) : /* @__PURE__ */ jsxs4("div", { className: triggerClassName, children: [
+        showOrb ? /* @__PURE__ */ jsx8(ToolActivityOrb, { label: statusLabel }) : null,
+        /* @__PURE__ */ jsx8("span", { className: "a24-tool-trigger__label", children: label })
+      ] }),
+      accessory
+    ] });
+  }
+  return /* @__PURE__ */ jsxs4("div", { className: "a24-tool-disclosure", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "a24-tool-trigger-row", children: [
+      /* @__PURE__ */ jsxs4(
+        "button",
+        {
+          "aria-controls": contentId,
+          "aria-expanded": open,
+          className: 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"),
+          onClick: () => {
+            const nextOpen = !open;
+            setOpen(nextOpen);
+            if (part) onSelect?.(part);
+            onExpandedChange?.(nextOpen, part);
+          },
+          type: "button",
+          children: [
+            showOrb ? /* @__PURE__ */ jsx8(ToolActivityOrb, { label: statusLabel }) : null,
+            /* @__PURE__ */ jsx8("span", { className: "a24-tool-trigger__label", children: label }),
+            open ? /* @__PURE__ */ jsx8(ChevronDown2, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" }) : /* @__PURE__ */ jsx8(ChevronRight2, { "aria-hidden": "true", className: "a24-tool-trigger__chevron" })
+          ]
+        }
+      ),
+      accessory
+    ] }),
+    open ? /* @__PURE__ */ jsx8("div", { className: "a24-tool-disclosure__content", id: contentId, children }) : null
+  ] });
+}
+function ToolLabel({ active, label, part, slots }) {
+  const rendered = slots?.renderToolLabel?.({ isActive: active, label, part }) ?? label;
+  return active ? /* @__PURE__ */ jsx8("span", { className: "a24-tool-shimmer", children: rendered }) : /* @__PURE__ */ jsx8(Fragment2, { children: rendered });
+}
+function ToolList({ children }) {
+  const listRef = React6.useRef(null);
+  const [fades, setFades] = React6.useState({ bottom: false, top: false });
+  const updateFades = React6.useCallback(() => {
+    const list = listRef.current;
+    if (!list) return;
+    const next = {
+      bottom: list.scrollTop + list.clientHeight < list.scrollHeight - 1,
+      top: list.scrollTop > 1
+    };
+    setFades((current) => current.bottom === next.bottom && current.top === next.top ? current : next);
+  }, []);
+  React6.useEffect(() => {
+    updateFades();
+    const list = listRef.current;
+    if (!list || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(updateFades);
+    observer.observe(list);
+    return () => observer.disconnect();
+  }, [children, updateFades]);
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      className: "a24-tool-list-frame",
+      "data-scroll-fade-bottom": fades.bottom ? "" : void 0,
+      "data-scroll-fade-top": fades.top ? "" : void 0,
+      children: /* @__PURE__ */ jsx8("div", { className: "a24-tool-list", onScroll: updateFades, ref: listRef, role: "list", children })
+    }
+  );
+}
+function AgentChatToolRow({
+  activeToolId,
+  part,
+  root = true,
+  showOrb,
+  slots
+}) {
+  const active = isActive(part, activeToolId);
+  const failed = part.state === "output-error";
+  const failureMessage = part.failure?.message || null;
+  const detail = failed ? failureMessage : optionalText(part.presentation.detail);
+  const hostDetails = failed ? null : slots?.renderToolDetails?.(part);
+  const context = { isActive: active, label: toolRowLabel(part), part };
+  return /* @__PURE__ */ jsx8("div", { "data-agents24-tool-part": part.type, "data-state": part.state, children: /* @__PURE__ */ jsxs4(
+    ToolDisclosure,
+    {
+      error: failed,
+      accessory: slots?.renderToolAccessory?.(context),
+      label: /* @__PURE__ */ jsx8(ToolLabel, { active, label: context.label, part, slots }),
+      loading: active,
+      onExpandedChange: slots?.onExpandedChange,
+      onSelect: slots?.onToolSelect,
+      part,
+      root,
+      showOrb: showOrb ?? active,
+      statusLabel: active ? context.label : void 0,
+      children: [
+        detail ? /* @__PURE__ */ jsx8("div", { className: cn("a24-tool-detail", failed && "a24-tool-detail--error"), children: detail }) : null,
+        hostDetails
+      ]
+    }
+  ) });
+}
+function sessionLabel(parts, visiblePart, running) {
+  const label = agentChatToolLabel(visiblePart);
+  const terminalLabel = label.replace(/^(?:running|ran)\s+/i, "");
+  return running ? label : `Ran ${terminalLabel} + ${parts.length - 1} more`;
+}
+function AgentChatToolSession({
+  activeToolId,
+  isLatestActivity = true,
+  isLive = false,
+  leadingModelTurn,
+  modelTurn,
+  parts,
+  slots
+}) {
+  const presentedLiveRef = React6.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__ */ jsx8(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 ? agentChatToolLabel(visiblePart) : sessionLabel(parts, visiblePart, running);
+  const labelContent = presentedLiveRef.current ? /* @__PURE__ */ jsx8("span", { className: presentingActivity ? "a24-tool-shimmer" : void 0, children: /* @__PURE__ */ jsx8(ToolActivityReel, { initialLabel: leadingModelTurn ? "Planning next moves" : void 0, initialShownAt: leadingModelTurn?.timestamp, label }) }) : label;
+  const context = { isActive: presentingActivity, label, part: visiblePart };
+  return /* @__PURE__ */ jsx8(
+    ToolDisclosure,
+    {
+      accessory: slots?.renderToolAccessory?.(context),
+      error: failed,
+      label: labelContent,
+      loading: presentingActivity,
+      onExpandedChange: slots?.onExpandedChange,
+      part: visiblePart,
+      root: true,
+      showOrb: isLive && isLatestActivity,
+      statusLabel: planning ? "Planning next moves" : label,
+      children: /* @__PURE__ */ jsx8(ToolList, { children: parts.map((part) => /* @__PURE__ */ jsx8("div", { role: "listitem", children: /* @__PURE__ */ jsx8(AgentChatToolRow, { activeToolId, part, root: false, showOrb: false, slots }) }, part.id)) })
+    }
+  );
+}
+function childLabel(child) {
+  return optionalText(child.title) || optionalText(child.toolName) || "Tool";
+}
+function subagentLabel(part) {
+  const childRun = part.presentation.childRun;
+  const children = part.presentation.childTools || [];
+  const name = optionalText(childRun?.agentName) || optionalText(part.displayName) || "agent";
+  const status = String(childRun?.status || (isAgentChatToolRunning(part) ? "running" : "completed")).toLowerCase();
+  const activeChild = children.find((child) => child.id === part.presentation.activeChildToolId) || [...children].reverse().find((child) => child.status === "running") || children[children.length - 1];
+  if (status === "running" && activeChild) return { label: `Agent ${name}, running ${childLabel(activeChild)}`, running: true };
+  if (status === "running") return { label: `Agent ${name}, starting`, running: true };
+  if (status === "failed" || part.state === "output-error") return { label: `Agent ${name}, failed`, running: false };
+  if (status === "cancelled" || status === "canceled" || part.state === "cancelled") return { label: `Agent ${name}, cancelled`, running: false };
+  if (status === "paused") return { label: `Agent ${name}, paused`, running: false };
+  return { label: `Agent ${name}, ran ${children.length} ${children.length === 1 ? "tool" : "tools"}`, running: false };
+}
+function AgentChatSubagentGroup({ isLatestActivity = true, isLive = false, part, slots }) {
+  const presentedLiveRef = React6.useRef(false);
+  if (isLive && isLatestActivity) presentedLiveRef.current = true;
+  const children = part.presentation.childTools || [];
+  const state = subagentLabel(part);
+  const childRunStatus = String(part.presentation.childRun?.status || "").toLowerCase();
+  const failed = part.state === "output-error" || part.state === "cancelled" || childRunStatus === "failed" || childRunStatus === "cancelled" || childRunStatus === "canceled";
+  const hostDetails = failed ? null : slots?.renderToolDetails?.(part);
+  const failureMessage = part.failure?.message || null;
+  const presentingActivity = isLatestActivity && state.running;
+  const labelContent = presentedLiveRef.current ? /* @__PURE__ */ jsx8("span", { className: presentingActivity ? "a24-tool-shimmer" : void 0, children: /* @__PURE__ */ jsx8(ToolActivityReel, { label: state.label }) }) : state.label;
+  const context = { isActive: presentingActivity, label: state.label, part };
+  return /* @__PURE__ */ jsx8(
+    ToolDisclosure,
+    {
+      accessory: slots?.renderToolAccessory?.(context),
+      error: failed,
+      label: labelContent,
+      loading: presentingActivity,
+      onExpandedChange: slots?.onExpandedChange,
+      part,
+      root: true,
+      showOrb: isLive && isLatestActivity,
+      statusLabel: state.label,
+      children: /* @__PURE__ */ jsxs4(ToolList, { children: [
+        children.map((child) => /* @__PURE__ */ jsx8("div", { className: cn("a24-child-tool", child.status === "failed" && "a24-child-tool--error"), role: "listitem", children: slots?.renderChildTool?.(child, part) ?? /* @__PURE__ */ jsxs4(Fragment2, { children: [
+          /* @__PURE__ */ jsx8("span", { className: cn(isLive && isLatestActivity && child.status === "running" && "a24-tool-shimmer"), children: childLabel(child) }),
+          child.detail ? /* @__PURE__ */ jsx8("span", { className: "a24-child-tool__detail", children: child.detail }) : null
+        ] }) }, child.id)),
+        failureMessage ? /* @__PURE__ */ jsx8("div", { className: "a24-tool-detail a24-tool-detail--error", children: failureMessage }) : null,
+        hostDetails
+      ] })
+    }
+  );
+}
+
+// src/ui/agent-response-timeline.tsx
+import { jsx as jsx9, jsxs as jsxs5 } from "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__ */ jsx9("span", { className: cn("inline-block animate-pulse", className), children });
+}
+function AgentChatToolPart({
+  activeToolId,
+  part
+}) {
+  return /* @__PURE__ */ jsx9(AgentChatToolRow, { activeToolId, part });
+}
+function AgentChatToolGroup({
+  activeToolId,
+  parts
+}) {
+  return /* @__PURE__ */ jsx9(AgentChatToolSession, { activeToolId, parts });
+}
+function HitlPartRow({
+  getHitlActionState,
+  isLoading,
+  onHitlAction,
+  part
+}) {
+  const state = getHitlActionState?.(part);
+  const [comment, setComment] = React7.useState("");
+  const presentation = part.presentation || {};
+  const requireComment = presentation.require_comment === true;
+  const isTerminal = part.status !== "pending";
+  const resolvedRef = React7.useRef(null);
+  const wasTerminal = React7.useRef(isTerminal);
+  React7.useEffect(() => {
+    if (isTerminal && !wasTerminal.current) resolvedRef.current?.focus();
+    wasTerminal.current = isTerminal;
+  }, [isTerminal]);
+  if (part.hitlKind === "user_input") {
+    return /* @__PURE__ */ jsx9(
+      AskUserInteraction,
+      {
+        error: state?.error,
+        isBusy: isLoading || state?.status === "resuming",
+        onSubmit: onHitlAction ? (answers) => onHitlAction(part, {
+          action: "respond",
+          answers: answers.map((answer) => ({
+            question_id: answer.questionId,
+            selected_option_ids: answer.selectedOptionIds,
+            ...answer.customText ? { custom_text: answer.customText } : {}
+          }))
+        }) : void 0,
+        part
+      }
+    );
+  }
+  if (isTerminal) {
+    return /* @__PURE__ */ jsx9("div", { className: "a24-hitl a24-hitl--resolved px-1 py-1 text-sm text-muted-foreground", ref: resolvedRef, role: "status", tabIndex: -1, children: resolvedHitlLabel(part) });
+  }
+  return /* @__PURE__ */ jsxs5("div", { className: "a24-hitl space-y-2.5 px-1 py-2", children: [
+    /* @__PURE__ */ jsx9("div", { className: "a24-hitl__title text-sm font-medium text-foreground text-pretty", children: hitlTitle(part) }),
+    requireComment ? /* @__PURE__ */ jsx9(
+      "textarea",
+      {
+        "aria-label": "Approval comment",
+        autoComplete: "off",
+        className: "a24-hitl__comment min-h-20 w-full resize-y rounded-md border border-border/60 bg-background px-3 py-2 text-sm outline-none focus-visible:border-neutral-300 focus-visible:ring-0 dark:focus-visible:border-neutral-600",
+        name: "hitl-comment",
+        onChange: (event) => setComment(event.target.value),
+        placeholder: "Comment required\u2026",
+        value: comment
+      }
+    ) : null,
+    state?.error ? /* @__PURE__ */ jsx9("div", { className: "a24-hitl__error text-sm text-destructive", children: state.error }) : null,
+    /* @__PURE__ */ jsx9("div", { className: "a24-hitl__actions flex flex-wrap items-center gap-1.5", children: part.allowedActions.map((action) => /* @__PURE__ */ jsx9(
+      "button",
+      {
+        "aria-label": hitlActionLabel(part, action),
+        className: cn(
+          "a24-hitl__action min-h-10 rounded-md px-3 text-sm font-medium transition-[background-color,color,opacity,transform] duration-150 ease-out active:scale-[0.96] disabled:pointer-events-none disabled:opacity-60",
+          action === "approve" || action === "connect" ? "bg-neutral-900 text-white hover:bg-neutral-800 dark:bg-neutral-100 dark:text-neutral-900 dark:hover:bg-white" : "bg-transparent text-muted-foreground hover:bg-background/80 hover:text-foreground"
+        ),
+        "data-primary": action === "approve" || action === "connect" ? "" : void 0,
+        disabled: !onHitlAction || isLoading || state?.status === "connecting" || state?.status === "resuming" || requireComment && !comment.trim(),
+        onClick: () => onHitlAction?.(part, {
+          action,
+          ...comment.trim() ? { comment: comment.trim() } : {}
+        }),
+        type: "button",
+        children: hitlActionLabel(part, action)
+      },
+      action
+    )) })
+  ] });
+}
+function AgentChatPart({
+  activeToolId,
+  getHitlActionState,
+  isLoading,
+  isTextStreaming,
+  message,
+  onHitlAction,
+  part,
+  responseProps,
+  toolSlots
+}) {
+  if (part.kind === "text") {
+    return /* @__PURE__ */ jsx9(
+      MessageResponse,
+      {
+        ...responseProps,
+        streaming: isTextStreaming ?? Boolean(isLoading && part.raw?.status === "streaming"),
+        streamingId: part.id,
+        children: part.text
+      }
+    );
+  }
+  if (part.kind === "tool") return isAgentChatSubagent(part) ? /* @__PURE__ */ jsx9(AgentChatSubagentGroup, { part, slots: toolSlots }) : /* @__PURE__ */ jsx9(AgentChatToolRow, { activeToolId, part, slots: toolSlots });
+  if (part.kind === "model-turn") return /* @__PURE__ */ jsx9(AgentChatModelTurnRow, { part });
+  if (part.kind === "reasoning") {
+    const label = part.text || part.label || "Thinking";
+    return part.status === "running" || part.status === "streaming" ? /* @__PURE__ */ jsx9(Shimmer, { className: "text-sm text-muted-foreground", children: label }) : /* @__PURE__ */ jsx9("div", { className: "text-sm text-muted-foreground", children: label });
+  }
+  if (part.kind === "context-compression") {
+    return /* @__PURE__ */ jsx9(AgentChatContextCompressionRow, { part });
+  }
+  if (part.kind === "ui-blocks") {
+    if (part.state === "output-error") {
+      return /* @__PURE__ */ jsx9("div", { className: "a24-timeline-error text-sm text-destructive", children: part.errorText || "Failed to render UI content." });
+    }
+    return part.bundle ? /* @__PURE__ */ jsx9(SafeUiBlocks, { bundle: part.bundle }) : /* @__PURE__ */ jsx9("div", { className: "text-sm text-muted-foreground", children: part.state === "input-streaming" ? /* @__PURE__ */ jsx9(Shimmer, { children: "Rendering UI block" }) : "Rendered UI block" });
+  }
+  if (part.kind === "hitl") {
+    return /* @__PURE__ */ jsx9(
+      HitlPartRow,
+      {
+        getHitlActionState,
+        isLoading,
+        onHitlAction,
+        part
+      }
+    );
+  }
+  if (part.kind === "error") return /* @__PURE__ */ jsx9("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__ */ jsx9("a", { className: "a24-source-link", href, rel: "noopener noreferrer", target: "_blank", children: part.title }) : /* @__PURE__ */ jsx9("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__ */ jsx9("a", { className: "a24-citation", href, rel: "noopener noreferrer", target: "_blank", children: label }) : /* @__PURE__ */ jsx9("span", { className: "a24-citation", children: label });
+  }
+  if (part.kind === "attachment") return /* @__PURE__ */ jsx9("div", { className: "a24-output-attachment", children: part.attachment.filename || "Attachment" });
+  if (part.kind === "data") return /* @__PURE__ */ jsx9("div", { "data-agents24-data-part": part.name, className: "hidden", children: message.id });
+  return null;
+}
+function safeExternalUrl(value) {
+  if (!value) return null;
+  try {
+    const url = new URL(value);
+    return url.protocol === "https:" || url.protocol === "http:" ? url.href : null;
+  } catch {
+    return null;
+  }
+}
+function SafeUiBlocks({ bundle }) {
+  const rows = Array.isArray(bundle.rows) ? bundle.rows : [];
+  return /* @__PURE__ */ jsxs5("section", { "aria-label": typeof bundle.title === "string" ? bundle.title : "Agent result", className: "a24-ui-blocks", children: [
+    typeof bundle.title === "string" ? /* @__PURE__ */ jsx9("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__ */ jsx9("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__ */ jsxs5("div", { className: "a24-ui-block", children: [
+            /* @__PURE__ */ jsx9("h4", { children: title }),
+            /* @__PURE__ */ jsx9("div", { className: "a24-ui-table-scroll", children: /* @__PURE__ */ jsxs5("table", { children: [
+              /* @__PURE__ */ jsx9("thead", { children: /* @__PURE__ */ jsx9("tr", { children: block.columns.map((column, index) => /* @__PURE__ */ jsx9("th", { children: String(column) }, index)) }) }),
+              /* @__PURE__ */ jsx9("tbody", { children: block.rows.map((rawCells, index) => /* @__PURE__ */ jsx9("tr", { children: (Array.isArray(rawCells) ? rawCells : []).map((cell, cellIndex) => /* @__PURE__ */ jsx9("td", { children: String(cell) }, cellIndex)) }, index)) })
+            ] }) })
+          ] }, String(block.id || blockIndex));
+        }
+        const value = block.value ?? block.text ?? "";
+        return /* @__PURE__ */ jsxs5("div", { className: "a24-ui-block", children: [
+          /* @__PURE__ */ jsx9("h4", { children: title }),
+          /* @__PURE__ */ jsx9("p", { children: String(value) })
+        ] }, String(block.id || blockIndex));
+      }) }, `row-${rowIndex}`);
+    })
+  ] });
+}
+function AgentResponseTimeline({
+  getHitlActionState,
+  isLoading = false,
+  message,
+  nodeActivityMode = "default",
+  onHitlAction,
+  parts: displayParts,
+  responseProps,
+  toolSlots,
+  toolViewMode = "closed"
+}) {
+  const parts = (displayParts || message.parts || []).filter((part) => (part.kind !== "tool" || !isInternalAskUserTool(part)) && (part.kind !== "model-turn" || part.turnKind === "agent") && (part.kind !== "node-activity" || nodeActivityMode === "all" || nodeActivityMode === "default" && part.defaultChatVisible));
+  const toolParts = parts.filter((part) => part.kind === "tool");
+  const activeToolId = latestRunningAgentChatToolId(toolParts);
+  const activeTextPartId = getActiveStreamingTextPartId(
+    { ...message, parts: [...parts] },
+    isLoading ? message.id : null
+  );
+  const rendered = [];
+  let activeActivityClaimed = false;
+  const segments = partitionAgentChatToolTimeline(parts, toolViewMode);
+  for (const [segmentIndex, segment] of segments.entries()) {
+    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__ */ jsx9(AgentChatToolRow, { activeToolId, part: segment.part, showOrb, slots: toolSlots }, segment.part.id));
+      continue;
+    }
+    if (segment.kind === "tool-session") {
+      rendered.push(/* @__PURE__ */ jsx9(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__ */ jsx9(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__ */ jsx9(AgentChatActivityRow, { 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__ */ jsx9(AgentChatActivityRow, { label: part.label }, key) : /* @__PURE__ */ jsx9(AgentChatNodeActivityRow, { part }, part.id)
+      );
+      continue;
+    }
+    rendered.push(
+      /* @__PURE__ */ jsx9(React7.Fragment, { children: /* @__PURE__ */ jsx9(
+        AgentChatPart,
+        {
+          activeToolId,
+          getHitlActionState,
+          isLoading,
+          isTextStreaming: part.kind === "text" && part.id === activeTextPartId,
+          message,
+          onHitlAction,
+          part,
+          responseProps,
+          toolSlots
+        }
+      ) }, part.id)
+    );
+  }
+  if (rendered.length === 0 && message.content) {
+    rendered.push(/* @__PURE__ */ jsx9(MessageResponse, { children: message.content }, `${message.id}-fallback`));
+  }
+  if (rendered.length === 0 && isLoading) {
+    rendered.push(/* @__PURE__ */ jsx9(AgentChatActivityRow, { label: "Thinking" }, `${message.id}-active-activity`));
+  }
+  return /* @__PURE__ */ jsx9("div", { className: "space-y-3", children: rendered });
+}
+
+// src/ui/agent-chat-message.tsx
+import { jsx as jsx10, jsxs as jsxs6 } from "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) {
+  return typeof threshold === "number" && threshold > 0 && content.length > threshold;
+}
+function AgentChatUserMessageContent({
+  collapsedLines = DEFAULT_USER_MESSAGE_COLLAPSED_LINES,
+  collapseThreshold = DEFAULT_USER_MESSAGE_COLLAPSE_THRESHOLD,
+  content,
+  showLessLabel = "Show less",
+  showMoreLabel = "Show more"
+}) {
+  const [isExpanded, setIsExpanded] = React8.useState(false);
+  const contentId = React8.useId();
+  const shouldCollapse = shouldCollapseUserMessage(content, collapseThreshold);
+  const Icon = isExpanded ? ChevronUp : ChevronDown3;
+  const clampedStyle = shouldCollapse && !isExpanded ? {
+    WebkitBoxOrient: "vertical",
+    WebkitLineClamp: Math.max(1, collapsedLines),
+    display: "-webkit-box",
+    overflow: "hidden"
+  } : void 0;
+  return /* @__PURE__ */ jsxs6("div", { className: "flex min-w-0 flex-col gap-3", children: [
+    /* @__PURE__ */ jsx10("div", { id: contentId, className: "min-w-0", style: clampedStyle, children: content }),
+    shouldCollapse ? /* @__PURE__ */ jsxs6(
+      "button",
+      {
+        "aria-controls": contentId,
+        "aria-expanded": isExpanded,
+        className: cn(
+          "inline-flex w-fit items-center gap-1 rounded-md text-left text-sm font-medium text-muted-foreground transition-colors",
+          "hover:text-foreground focus-visible:border-neutral-300 focus-visible:outline-none focus-visible:ring-0"
+        ),
+        onClick: () => setIsExpanded((current) => !current),
+        type: "button",
+        children: [
+          isExpanded ? showLessLabel : showMoreLabel,
+          /* @__PURE__ */ jsx10(Icon, { "aria-hidden": "true", className: "size-4", strokeWidth: 2 })
+        ]
+      }
+    ) : null
+  ] });
+}
+function AgentChatMessage({
+  actionHandlers,
+  additionalActions,
+  actions,
+  actionsClassName,
+  className,
+  contentClassName,
+  dir,
+  getHitlActionState,
+  message,
+  nodeActivityMode,
+  onHitlAction,
+  Timeline = AgentResponseTimeline,
+  renderAssistantContent,
+  renderUserContent,
+  showAssistantAttachments = false,
+  streamingMessageId,
+  userMessageCollapsedLines,
+  userMessageContent,
+  userMessageCollapseThreshold,
+  userMessageShowLessLabel,
+  userMessageShowMoreLabel
+}) {
+  const isAssistant = message.role === "assistant";
+  const isStreaming = isAssistant && message.id === streamingMessageId;
+  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__ */ jsx10(
+    AgentChatDefaultActions,
+    {
+      additionalActions,
+      dir,
+      handlers: actionHandlers,
+      message
+    }
+  ) : null);
+  return /* @__PURE__ */ jsxs6(ChatMessage, { className, dir, from: message.role, children: [
+    showAttachments ? /* @__PURE__ */ jsx10(ChatAttachments, { className: "mb-2", dir, children: message.attachments?.map((attachment, index) => /* @__PURE__ */ jsx10(
+      ChatAttachment,
+      {
+        data: attachment,
+        dir: "ltr"
+      },
+      String(attachment.url || attachment.filename || index)
+    )) }) : null,
+    shouldRenderContent ? /* @__PURE__ */ jsxs6(
+      ChatMessageContent,
+      {
+        className: cn(isAssistant ? "bg-transparent p-0" : void 0, contentClassName),
+        dir,
+        from: message.role,
+        children: [
+          isAssistant ? renderAssistantContent ? renderAssistantContent({ isStreaming, message }) : /* @__PURE__ */ jsx10(
+            Timeline,
+            {
+              getHitlActionState,
+              isLoading: isStreaming,
+              message,
+              nodeActivityMode,
+              onHitlAction,
+              parts: message.parts
+            }
+          ) : null,
+          !isAssistant ? renderUserContent ? renderUserContent({ message }) : resolvedUserContent ? /* @__PURE__ */ jsx10(
+            AgentChatUserMessageContent,
+            {
+              collapsedLines: userMessageCollapsedLines,
+              collapseThreshold: userMessageCollapseThreshold,
+              content: resolvedUserContent,
+              showLessLabel: userMessageShowLessLabel,
+              showMoreLabel: userMessageShowMoreLabel
+            }
+          ) : null : null
+        ]
+      }
+    ) : null,
+    renderedActions ? /* @__PURE__ */ jsx10("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/agent-chat-context-status.tsx
+import * as React9 from "react";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+var COMPACT_TOKENS = new Intl.NumberFormat("en-US", { notation: "compact" });
+var PERCENT = new Intl.NumberFormat("en-US", {
+  style: "percent",
+  maximumFractionDigits: 1
+});
+var EXACT_SOURCES = /* @__PURE__ */ new Set(["exact", "provider_usage"]);
+function contextStatusMetrics(contextWindow) {
+  const maximum = Number(contextWindow?.max_tokens || 0);
+  const input = Math.max(0, Number(contextWindow?.input_tokens || 0));
+  const admissionInput = Math.max(0, Number(contextWindow?.admission_input_tokens ?? input));
+  const usageRatio = Math.max(0, Math.min(1, Number(
+    contextWindow?.usage_ratio ?? input / maximum
+  )));
+  const admissionRatio = Math.max(0, Math.min(1, Number(
+    contextWindow?.admission_ratio ?? admissionInput / maximum
+  )));
+  return { maximum, input, admissionInput, usageRatio, admissionRatio };
+}
+function AgentChatContextStatus({
+  className,
+  contextWindow
+}) {
+  const tooltipId = React9.useId();
+  const [open, setOpen] = React9.useState(false);
+  const { maximum, input, admissionInput, usageRatio, admissionRatio } = contextStatusMetrics(contextWindow);
+  const percentage = Math.round(usageRatio * 100);
+  const exact = EXACT_SOURCES.has(contextWindow?.source || "unknown");
+  if (!Number.isFinite(maximum) || maximum <= 0) return null;
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      className: cn("a24-context-status", className),
+      onBlurCapture: (event) => {
+        if (!event.currentTarget.contains(event.relatedTarget)) setOpen(false);
+      },
+      onFocusCapture: () => setOpen(true),
+      onMouseEnter: () => setOpen(true),
+      onMouseLeave: () => setOpen(false),
+      children: [
+        /* @__PURE__ */ jsxs7(
+          "button",
+          {
+            "aria-describedby": open ? tooltipId : void 0,
+            "aria-label": `Context window ${percentage}% used`,
+            className: "a24-context-status__trigger",
+            onKeyDown: (event) => {
+              if (event.key === "Escape") setOpen(false);
+            },
+            type: "button",
+            children: [
+              /* @__PURE__ */ jsxs7("svg", { "aria-hidden": "true", className: "a24-context-status__ring", viewBox: "0 0 24 24", children: [
+                /* @__PURE__ */ jsx11("circle", { className: "a24-context-status__track", cx: "12", cy: "12", r: "10" }),
+                /* @__PURE__ */ jsx11(
+                  "circle",
+                  {
+                    className: "a24-context-status__value",
+                    cx: "12",
+                    cy: "12",
+                    pathLength: "100",
+                    r: "10",
+                    strokeDasharray: `${percentage} 100`
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs7("span", { children: [
+                percentage,
+                "%"
+              ] })
+            ]
+          }
+        ),
+        open ? /* @__PURE__ */ jsxs7("div", { className: "a24-context-status__popover", id: tooltipId, role: "tooltip", children: [
+          /* @__PURE__ */ jsx11("span", { className: "a24-context-status__sr-only", children: "Context window" }),
+          /* @__PURE__ */ jsxs7("strong", { children: [
+            PERCENT.format(usageRatio),
+            " context used"
+          ] }),
+          /* @__PURE__ */ jsxs7("span", { children: [
+            exact ? "Input" : "Estimated input",
+            ": ",
+            COMPACT_TOKENS.format(input),
+            " / ",
+            COMPACT_TOKENS.format(maximum),
+            " tokens"
+          ] }),
+          admissionInput !== input ? /* @__PURE__ */ jsxs7("span", { children: [
+            "Safety bound: ",
+            COMPACT_TOKENS.format(admissionInput),
+            " tokens (",
+            PERCENT.format(admissionRatio),
+            ")"
+          ] }) : null
+        ] }) : null
+      ]
+    }
+  );
+}
 
 // src/ui/bubble.tsx
-import { cva } from "class-variance-authority";
-import { Slot } from "@radix-ui/react-slot";
-import { jsx } from "react/jsx-runtime";
+import { cva as cva2 } from "class-variance-authority";
+import { Slot as Slot2 } from "@radix-ui/react-slot";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function BubbleGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx12(
     "div",
     {
       "data-slot": "bubble-group",
@@ -51,7 +2286,7 @@ function BubbleGroup({ className, ...props }) {
     }
   );
 }
-var bubbleVariants = cva(
+var bubbleVariants = cva2(
   "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: {
@@ -76,7 +2311,7 @@ function Bubble({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx12(
     "div",
     {
       "data-slot": "bubble",
@@ -92,8 +2327,8 @@ function BubbleContent({
   className,
   ...props
 }) {
-  const Comp = asChild ? Slot : "div";
-  return /* @__PURE__ */ jsx(
+  const Comp = asChild ? Slot2 : "div";
+  return /* @__PURE__ */ jsx12(
     Comp,
     {
       "data-slot": "bubble-content",
@@ -105,7 +2340,7 @@ function BubbleContent({
     }
   );
 }
-var bubbleReactionsVariants = cva(
+var bubbleReactionsVariants = cva2(
   "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: {
@@ -130,7 +2365,7 @@ function BubbleReactions({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx12(
     "div",
     {
       "data-slot": "bubble-reactions",
@@ -143,10 +2378,10 @@ function BubbleReactions({
 }
 
 // src/ui/marker.tsx
-import { cva as cva2 } from "class-variance-authority";
-import { Slot as Slot2 } from "@radix-ui/react-slot";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var markerVariants = cva2(
+import { cva as cva3 } from "class-variance-authority";
+import { Slot as Slot3 } from "@radix-ui/react-slot";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var markerVariants = cva3(
   "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: {
@@ -164,8 +2399,8 @@ function Marker({
   asChild = false,
   ...props
 }) {
-  const Comp = asChild ? Slot2 : "div";
-  return /* @__PURE__ */ jsx2(
+  const Comp = asChild ? Slot3 : "div";
+  return /* @__PURE__ */ jsx13(
     Comp,
     {
       "data-slot": "marker",
@@ -176,7 +2411,7 @@ function Marker({
   );
 }
 function MarkerIcon({ className, ...props }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx13(
     "span",
     {
       "data-slot": "marker-icon",
@@ -190,7 +2425,7 @@ function MarkerIcon({ className, ...props }) {
   );
 }
 function MarkerContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx13(
     "span",
     {
       "data-slot": "marker-content",
@@ -204,7 +2439,7 @@ function MarkerContent({ className, ...props }) {
 }
 
 // src/ui/mcp-connect-required-card.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 var STATUS_LABELS = {
   pending: "Connect",
   connecting: "Connecting",
@@ -228,7 +2463,7 @@ function McpConnectRequiredCard({
   const isBusy = loading || status === "connecting" || status === "resuming";
   const isConnected = status === "connected";
   const buttonDisabled = disabled || isBusy || isConnected || !onConnect;
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx14(
     "div",
     {
       "data-agents24-mcp-connect-card": true,
@@ -238,13 +2473,13 @@ function McpConnectRequiredCard({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-start justify-between gap-3", children: [
-        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsx3("div", { className: "truncate text-sm font-medium", children: label }),
-          /* @__PURE__ */ jsx3("div", { className: "mt-1 text-sm text-muted-foreground", children: message || "Connect your account to continue." }),
-          status === "error" && error ? /* @__PURE__ */ jsx3("div", { className: "mt-2 text-sm text-destructive", children: error }) : null
+      children: /* @__PURE__ */ jsxs8("div", { className: "flex min-w-0 items-start justify-between gap-3", children: [
+        /* @__PURE__ */ jsxs8("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx14("div", { className: "truncate text-sm font-medium", children: label }),
+          /* @__PURE__ */ jsx14("div", { className: "mt-1 text-sm text-muted-foreground", children: message || "Connect your account to continue." }),
+          status === "error" && error ? /* @__PURE__ */ jsx14("div", { className: "mt-2 text-sm text-destructive", children: error }) : null
         ] }),
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx14(
           "button",
           {
             type: "button",
@@ -261,13 +2496,86 @@ function McpConnectRequiredCard({
     }
   );
 }
+
+// src/ui/use-audio-recorder.ts
+import * as React10 from "react";
+var RECORDING_CANDIDATES = ["audio/webm;codecs=opus", "audio/webm", "audio/mp4"];
+function recordingExtension(mimeType) {
+  return mimeType.startsWith("audio/mp4") ? "m4a" : "webm";
+}
+function useAudioRecorder(onRecorded, options = {}) {
+  const recorderRef = React10.useRef(null);
+  const streamRef = React10.useRef(null);
+  const onRecordedRef = React10.useRef(onRecorded);
+  const onStreamChangeRef = React10.useRef(options.onStreamChange);
+  onRecordedRef.current = onRecorded;
+  onStreamChangeRef.current = options.onStreamChange;
+  const [isRecording, setIsRecording] = React10.useState(false);
+  const [error, setError] = React10.useState(null);
+  const stop = React10.useCallback(() => recorderRef.current?.stop(), []);
+  const start = React10.useCallback(async () => {
+    setError(null);
+    if (!navigator.mediaDevices?.getUserMedia || typeof MediaRecorder === "undefined") {
+      setError("Audio recording is not supported in this browser.");
+      return;
+    }
+    try {
+      const mimeType = RECORDING_CANDIDATES.find((candidate) => MediaRecorder.isTypeSupported(candidate));
+      if (!mimeType) {
+        setError("Audio recording is not supported in this browser.");
+        return;
+      }
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      onStreamChangeRef.current?.(stream);
+      const recorder = new MediaRecorder(stream, { mimeType });
+      const chunks = [];
+      recorder.ondataavailable = (event) => {
+        if (event.data.size) chunks.push(event.data);
+      };
+      recorder.onstop = () => {
+        const actualType = recorder.mimeType || "audio/webm";
+        onRecordedRef.current(new File([new Blob(chunks, { type: actualType })], `recording-${Date.now()}.${recordingExtension(actualType)}`, { type: actualType }));
+        stream.getTracks().forEach((track) => track.stop());
+        onStreamChangeRef.current?.(null);
+        recorderRef.current = null;
+        streamRef.current = null;
+        setIsRecording(false);
+      };
+      recorderRef.current = recorder;
+      streamRef.current = stream;
+      recorder.start();
+      setIsRecording(true);
+    } catch {
+      streamRef.current?.getTracks().forEach((track) => track.stop());
+      onStreamChangeRef.current?.(null);
+      setError("Microphone access is unavailable.");
+    }
+  }, []);
+  React10.useEffect(() => () => {
+    recorderRef.current?.stop();
+    streamRef.current?.getTracks().forEach((track) => track.stop());
+    onStreamChangeRef.current?.(null);
+  }, []);
+  return { error, isRecording, start, stop };
+}
 export {
+  AgentChatActivityRow,
   AgentChatComposer,
+  AgentChatContextCompressionRow,
+  AgentChatContextStatus,
   AgentChatDefaultActions,
   AgentChatMessage,
-  DefaultPartRow as AgentChatPartRow,
+  AgentChatModelTurnRow,
+  AgentChatNodeActivityRow,
+  AgentChatPart,
+  AgentChatSubagentGroup,
+  AgentChatToolGroup,
+  AgentChatToolPart,
+  AgentChatToolRow,
+  AgentChatToolSession,
   AgentChatUserMessageContent,
   AgentResponseTimeline,
+  AskUserInteraction,
   Attachment,
   AttachmentAction,
   AttachmentActions,
@@ -304,14 +2612,21 @@ export {
   MessageResponse,
   Message as ShadcnMessage,
   MessageContent as ShadcnMessageContent,
+  agentChatToolLabel,
   attachmentMediaVariants,
   attachmentVariants,
   bubbleVariants,
   cn,
+  contextStatusMetrics,
   hitlActionLabel,
   hitlTitle,
+  isAgentChatSubagent,
+  isAgentChatToolRunning,
+  latestRunningAgentChatToolId,
   markerVariants,
+  partitionAgentChatToolTimeline,
   resolvedHitlLabel,
-  shouldCollapseUserMessage
+  shouldCollapseUserMessage,
+  useAudioRecorder
 };
 //# sourceMappingURL=index.js.map