@agents24/chat-react 0.3.2 → 0.5.0

package/dist/templates/index.cjs

@@ -30,7 +30,11 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/templates/index.ts
 var templates_exports = {};
 __export(templates_exports, {
+  AgentChatApp: () => AgentChatApp,
+  AgentChatAppearanceControl: () => AgentChatAppearanceControl,
+  AgentChatLayout: () => AgentChatLayout,
   AgentChatShell: () => AgentChatShell,
+  AgentChatStatePanel: () => AgentChatStatePanel,
   buildAgentChatOutlineItems: () => buildAgentChatOutlineItems,
   getAgentChatShellScrollState: () => getAgentChatShellScrollState
 });
@@ -94,7 +98,7 @@ function LatestThreadScrollerRoot({
     {
       ref: setRef,
       className: cx(
-        "relative flex size-full min-h-0 flex-1 flex-col overflow-hidden",
+        "a24-scroller relative flex size-full min-h-0 flex-1 flex-col overflow-hidden",
         className
       ),
       ...props
@@ -124,7 +128,7 @@ function LatestThreadScrollerViewport({
     {
       ref: setRef,
       className: cx(
-        "size-full min-h-0 min-w-0 flex-1 overflow-y-auto overscroll-contain",
+        "a24-scroller__viewport size-full min-h-0 min-w-0 flex-1 overflow-y-auto overscroll-contain",
         className
       ),
       preserveScrollOnPrepend,
@@ -154,7 +158,7 @@ function LatestThreadScrollerContent({
     {
       ref: setRef,
       "data-agents24-latest-thread-content": "",
-      className: cx("flex h-max min-h-full flex-col gap-8 p-4", className),
+      className: cx("a24-scroller__content flex h-max min-h-full flex-col gap-8 p-4", className),
       ...props
     }
   );
@@ -168,7 +172,7 @@ function LatestThreadScrollerItem({
     import_message_scroller.MessageScroller.Item,
     {
       className: cx(
-        "min-w-0 shrink-0 overflow-visible",
+        "a24-scroller__item min-w-0 shrink-0 overflow-visible",
         className
       ),
       messageId,
@@ -203,7 +207,7 @@ function LatestThreadScrollerButton({
           ...buttonProps,
           "aria-label": direction === "end" ? "Scroll to latest message" : "Scroll to first message",
           className: cx(
-            "absolute bottom-4 left-1/2 z-50 flex size-9 -translate-x-1/2 items-center justify-center rounded-full border border-border bg-background text-foreground shadow-md transition-all duration-200 data-[active=false]:pointer-events-none data-[active=false]:translate-y-2 data-[active=false]:opacity-0 data-[active=true]:translate-y-0 data-[active=true]:opacity-100",
+            "a24-scroller__button absolute bottom-4 left-1/2 z-50 flex size-9 -translate-x-1/2 items-center justify-center rounded-full border border-border bg-background text-foreground shadow-md transition-[background-color,border-color,color,opacity,transform] duration-200 data-[active=false]:pointer-events-none data-[active=false]:translate-y-2 data-[active=false]:opacity-0 data-[active=true]:translate-y-0 data-[active=true]:opacity-100",
             className
           ),
           type: "button",
@@ -277,14 +281,16 @@ function LatestThreadScrollerOutline({
     {
       ref: navRef,
       "aria-label": "Transcript outline",
+      "data-side": railSide,
+      "data-visible": hasSideRoom ? "" : void 0,
       className: cx(
-        "pointer-events-none absolute top-[46%] z-10 max-h-[min(18rem,calc(100%-10rem))] w-16 -translate-y-1/2 overflow-visible",
+        "a24-outline pointer-events-none absolute top-[46%] z-10 max-h-[min(18rem,calc(100%-10rem))] w-16 -translate-y-1/2 overflow-visible",
         hasSideRoom ? "hidden md:block" : "hidden",
         railSide === "left" ? "left-1" : "right-1",
         className
       ),
       dir,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pointer-events-auto flex flex-col gap-0 py-1", children: items.map((item, index) => {
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "a24-outline__rail pointer-events-auto flex flex-col gap-0 py-1", children: items.map((item, index) => {
         const itemMessageIds = item.messageIds && item.messageIds.length > 0 ? item.messageIds : [item.id];
         const active = itemMessageIds.some(
           (messageId) => visibleMessageIdSet.has(messageId) || messageId === currentAnchorId
@@ -303,9 +309,10 @@ function LatestThreadScrollerOutline({
           {
             type: "button",
             "data-active": active,
+            "data-side": railSide,
             dir: "ltr",
             className: cx(
-              "group relative flex h-2 w-16 items-center rounded-sm outline-none",
+              "a24-outline__button group relative flex h-2 w-16 items-center rounded-sm outline-none",
               railSide === "left" ? "justify-start" : "justify-end"
             ),
             "aria-label": `Jump to ${item.label || fallbackLabel}`,
@@ -321,7 +328,7 @@ function LatestThreadScrollerOutline({
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 "span",
                 {
-                  className: "h-0.5 rounded-full bg-muted-foreground/55 transition-[width,background-color,opacity] duration-150 ease-out group-hover:bg-foreground group-focus-visible:bg-foreground group-data-[active=true]:bg-foreground",
+                  className: "a24-outline__bar h-0.5 rounded-full bg-muted-foreground/55 transition-[width,background-color,opacity] duration-150 ease-out group-hover:bg-foreground group-focus-visible:bg-foreground group-data-[active=true]:bg-foreground",
                   style: {
                     opacity: barOpacity,
                     width: barWidth
@@ -333,7 +340,7 @@ function LatestThreadScrollerOutline({
                 {
                   dir,
                   className: cx(
-                    "pointer-events-none absolute top-1/2 z-20 max-h-32 w-64 -translate-y-1/2 overflow-hidden rounded-lg border border-border/80 bg-background p-3 text-start opacity-0 shadow-lg transition-all duration-200 group-hover:pointer-events-auto group-hover:opacity-100 group-focus-visible:pointer-events-auto group-focus-visible:opacity-100",
+                    "a24-outline__preview pointer-events-none absolute top-1/2 z-20 max-h-32 w-64 -translate-y-1/2 overflow-hidden rounded-lg border border-border/80 bg-background p-3 text-start opacity-0 shadow-lg transition-[opacity,transform] duration-200 group-hover:pointer-events-auto group-hover:opacity-100 group-focus-visible:pointer-events-auto group-focus-visible:opacity-100",
                     railSide === "left" ? "left-full ml-2 -translate-x-1 group-hover:translate-x-0 group-focus-visible:translate-x-0" : "right-full mr-2 translate-x-1 group-hover:translate-x-0 group-focus-visible:translate-x-0",
                     cardClassName
                   ),
@@ -504,21 +511,21 @@ function AgentChatShell({
   const bottomPadding = hideComposer ? 32 : (composerOverlayHeight ?? measuredOverlayHeight) + 72;
   const isEmptyState = messages.length === 0;
   if (isEmptyState) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn("relative flex h-full min-h-0 w-full flex-col overflow-visible px-4", className), dir, children: renderEmptyState ? renderEmptyState({ composer: hideComposer ? void 0 : composer, title: emptyTitle }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "relative z-10 flex h-full flex-1 flex-col justify-center p-0 pt-13", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex w-full flex-col items-center pb-34 text-center animate-in fade-in slide-in-from-bottom-4 duration-500", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn("a24-shell a24-shell--empty relative flex h-full min-h-0 w-full flex-col overflow-visible px-4", className), dir, children: renderEmptyState ? renderEmptyState({ composer: hideComposer ? void 0 : composer, title: emptyTitle }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "a24-shell__empty relative z-10 flex h-full flex-1 flex-col justify-center p-0 pt-13", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "a24-shell__empty-content flex w-full flex-col items-center pb-34 text-center animate-in fade-in slide-in-from-bottom-4 duration-500", children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         "p",
         {
           className: cn(
-            "pb-6 text-3xl font-semibold transition-transform duration-200",
+            "a24-shell__empty-title pb-6 text-3xl font-semibold transition-transform duration-200",
             emptyInputAttachmentCount > 0 && "-translate-y-12"
           ),
           children: emptyTitle
         }
       ),
-      !hideComposer && composer ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "mx-auto w-full max-w-3xl px-4", children: composer }) : null
+      !hideComposer && composer ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "a24-shell__empty-composer mx-auto w-full max-w-3xl px-4", children: composer }) : null
     ] }) }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn("relative flex h-full min-h-0 w-full flex-col", className), dir, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(LatestThreadScroller.Provider, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: cn("a24-shell relative flex h-full min-h-0 w-full flex-col", className), dir, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(LatestThreadScroller.Provider, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(LatestThreadScroller.Root, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         LatestThreadScroller.Viewport,
@@ -533,7 +540,7 @@ function AgentChatShell({
             {
               ref: contentRef,
               className: cn(
-                "mx-auto flex min-h-full w-full max-w-3xl flex-col gap-8 px-4 pt-12",
+                "a24-shell__content mx-auto flex min-h-full w-full max-w-3xl flex-col gap-8 px-4 pt-12",
                 contentClassName
               ),
               style: { paddingBottom: bottomPadding },
@@ -567,23 +574,2026 @@ function AgentChatShell({
       {
         ref: overlayRef,
         className: cn(
-          "pointer-events-none absolute inset-x-0 bottom-0 z-20 overflow-visible px-4 pb-4 pt-10",
+          "a24-shell__composer-overlay pointer-events-none absolute inset-x-0 bottom-0 z-20 overflow-visible px-4 pb-4 pt-10",
           composerOverlayClassName
         ),
         style: {
           background: "linear-gradient(to bottom, transparent 0%, color-mix(in oklch, var(--chat-background, var(--background)) 85%, transparent) 45%, var(--chat-background, var(--background)) 65%, var(--chat-background, var(--background)) 100%)"
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "pointer-events-auto absolute inset-x-0 top-0 flex -translate-y-full justify-center pb-3", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LatestThreadScroller.Button, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "pointer-events-auto mx-auto w-full max-w-3xl px-4", children: composer })
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "a24-shell__scroll-button pointer-events-auto absolute inset-x-0 top-0 flex -translate-y-full justify-center pb-3", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LatestThreadScroller.Button, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "a24-shell__composer-inner pointer-events-auto mx-auto w-full max-w-3xl px-4", children: composer })
         ]
       }
     ) : null
   ] }) });
 }
+
+// src/templates/agent-chat-layout.tsx
+var React8 = __toESM(require("react"), 1);
+var import_lucide_react5 = require("lucide-react");
+
+// src/ui/agent-chat-composer.tsx
+var React3 = __toESM(require("react"), 1);
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime3 = require("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-full border-0 bg-neutral-100 text-sm text-neutral-600 shadow-none transition-colors hover:bg-neutral-200 hover:text-neutral-800 focus-visible:border-neutral-300 focus-visible:outline-none focus-visible:ring-0 disabled:pointer-events-none disabled:opacity-50 dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700";
+var submitButtonClass = "inline-flex size-9 shrink-0 items-center justify-center gap-2 rounded-full border-0 bg-neutral-900 text-sm text-white shadow-none transition-[background-color,color,opacity,transform] duration-200 hover:bg-neutral-800 hover:text-white focus-visible:border-neutral-300 focus-visible:outline-none focus-visible:ring-0 disabled:pointer-events-none disabled:opacity-50 dark:bg-neutral-100 dark:text-neutral-900 dark:hover:bg-white";
+function AgentChatComposer({
+  accept,
+  allowAttachments = true,
+  attachmentLayout = "flow",
+  className,
+  disabled = false,
+  inputToolbarContent,
+  isRunning = false,
+  onAttachmentCountChange,
+  onStop,
+  onSubmit,
+  placeholder = "Send follow-up\u2026",
+  textareaRef
+}) {
+  const fileInputRef = React3.useRef(null);
+  const filesRef = React3.useRef([]);
+  const localTextareaRef = React3.useRef(null);
+  const [text, setText] = React3.useState("");
+  const [files, setFiles] = React3.useState([]);
+  const [isSubmitting, setIsSubmitting] = React3.useState(false);
+  const isExpanded = text.includes("\n") || text.length > 62;
+  const setTextareaRef = React3.useCallback(
+    (node) => {
+      localTextareaRef.current = node;
+      if (typeof textareaRef === "function") {
+        textareaRef(node);
+      } else if (textareaRef) {
+        textareaRef.current = node;
+      }
+    },
+    [textareaRef]
+  );
+  React3.useEffect(() => {
+    filesRef.current = files;
+    onAttachmentCountChange?.(files.length);
+  }, [files, onAttachmentCountChange]);
+  React3.useEffect(() => () => revokeComposerFiles(filesRef.current), []);
+  React3.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);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+      void submit();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cn("a24-composer relative mx-auto w-full max-w-3xl overflow-visible", className), children: [
+    files.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.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__ */ (0, import_jsx_runtime3.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-neutral-200 bg-white px-1.5 text-sm font-medium text-foreground transition-colors hover:bg-neutral-50",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "flex size-5 shrink-0 items-center justify-center rounded bg-background text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Paperclip, { className: "size-3" }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "min-w-0 flex-1 truncate", children: file.filename }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.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__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.X, { className: "size-3" })
+                }
+              )
+            ]
+          },
+          file.id
+        ))
+      }
+    ) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        "data-expanded": isExpanded ? "" : void 0,
+        className: cn(
+          "a24-composer__surface relative w-full border border-neutral-200 bg-white shadow-sm transition-colors duration-200 focus-within:border-neutral-300 dark:border-neutral-700 dark:bg-card dark:focus-within:border-neutral-600",
+          isExpanded ? "rounded-[18px] p-2 pb-1.5" : "rounded-full px-2 py-[3px]"
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.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__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { gridArea: "plus" }, className: "a24-composer__attach-slot flex shrink-0 items-center justify-center", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "input",
+                  {
+                    ref: fileInputRef,
+                    accept,
+                    "aria-label": "Attach files",
+                    className: "hidden",
+                    multiple: true,
+                    name: "attachments",
+                    onChange: handleFilesChange,
+                    type: "file"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime3.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__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Plus, { className: "size-4" })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { gridArea: "textarea" }, className: "a24-composer__textarea-slot min-w-0 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime3.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-neutral-400 focus-visible:ring-0 scrollbar-thin",
+                    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__ */ (0, import_jsx_runtime3.jsx)("div", { style: { gridArea: "toolbar" }, className: "a24-composer__toolbar flex min-w-0 items-center gap-1.5", children: inputToolbarContent }) : null,
+              !isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { gridArea: "composer" }, className: "flex min-w-0 items-center gap-1.5" }) : null,
+              !isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { gridArea: "mic" }, className: "flex shrink-0 items-center justify-end" }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { gridArea: "submit" }, className: "a24-composer__submit-slot flex shrink-0 items-center justify-end", children: isRunning ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "button",
+                {
+                  "aria-label": "Stop generating",
+                  className: cn("a24-composer__submit", submitButtonClass),
+                  disabled: disabled || !onStop,
+                  onClick: onStop,
+                  title: "Stop",
+                  type: "button",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Square, { className: "size-3.5 fill-current" })
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime3.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__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.ArrowUp, { className: "size-4", strokeWidth: 2.5 })
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    ),
+    !isExpanded && inputToolbarContent ? /* @__PURE__ */ (0, import_jsx_runtime3.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-message.tsx
+var React7 = __toESM(require("react"), 1);
+var import_lucide_react4 = require("lucide-react");
+
+// src/ui/adapters.ts
+var React4 = __toESM(require("react"), 1);
+
+// src/ui/attachment.tsx
+var import_class_variance_authority = require("class-variance-authority");
+var import_react_slot = require("@radix-ui/react-slot");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var attachmentVariants = (0, import_class_variance_authority.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__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      "data-slot": "attachment",
+      "data-state": state,
+      "data-size": size,
+      "data-orientation": orientation,
+      className: cn(attachmentVariants({ size, orientation }), className),
+      ...props
+    }
+  );
+}
+var attachmentMediaVariants = (0, import_class_variance_authority.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__ */ (0, import_jsx_runtime4.jsx)(
+    "div",
+    {
+      "data-slot": "attachment-media",
+      "data-variant": variant,
+      className: cn(attachmentMediaVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+function AttachmentContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "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__ */ (0, import_jsx_runtime4.jsx)(
+    "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__ */ (0, import_jsx_runtime4.jsx)(
+    "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 AttachmentGroup({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "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
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Message({
+  className,
+  align = "start",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "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
+    }
+  );
+}
+
+// src/ui/adapters.ts
+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(
+    "group flex w-full flex-col gap-2",
+    isUser ? cn("is-user max-w-[80%] justify-end", isRtl ? "mr-auto" : "ml-auto") : "is-assistant max-w-full",
+    className
+  );
+  return React4.createElement(Message, messageProps);
+}
+function ChatMessageContent({
+  className,
+  ...props
+}) {
+  return React4.createElement("div", {
+    className: cn(
+      "is-user:dark flex w-full max-w-full min-w-0 flex-col gap-2 overflow-hidden text-sm group-[.is-user]:w-fit group-[.is-user]:overflow-visible",
+      "group-[.is-user]:rounded-lg group-[.is-user]:bg-secondary group-[.is-user]:px-4 group-[.is-user]:py-3 group-[.is-user]:text-foreground",
+      "group-[.is-assistant]:w-full group-[.is-assistant]:max-w-full group-[.is-assistant]:text-foreground",
+      props.dir === "rtl" ? "group-[.is-user]:mr-auto" : "group-[.is-user]:ml-auto",
+      className
+    ),
+    "data-slot": "bubble-content",
+    ...props
+  });
+}
+function ChatMessageActions({
+  className,
+  ...props
+}) {
+  return React4.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 React4.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,
+    React4.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 React4.createElement(
+    Attachment,
+    {
+      orientation: orientation || (isImage ? "vertical" : "horizontal"),
+      ...props
+    },
+    React4.createElement(
+      AttachmentMedia,
+      { variant: isImage ? "image" : "icon" },
+      isImage ? React4.createElement("img", {
+        alt: filename,
+        className: "size-full object-cover",
+        src: data.url
+      }) : React4.createElement(
+        "span",
+        { "aria-hidden": "true", className: "text-sm" },
+        filename.slice(0, 1).toUpperCase()
+      )
+    ),
+    React4.createElement(
+      AttachmentContent,
+      null,
+      React4.createElement(AttachmentTitle, null, filename),
+      React4.createElement(AttachmentDescription, null, mediaType)
+    ),
+    onRemove ? React4.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"
+      },
+      React4.createElement("span", { "aria-hidden": "true" }, "x")
+    ) : null
+  );
+}
+function ChatAttachments({
+  children,
+  className,
+  ...props
+}) {
+  if (!children) return null;
+  return React4.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
+var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function AgentChatDefaultActions({
+  handlers,
+  message
+}) {
+  if (!handlers || message.role !== "assistant" || message.isFinal === false) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(ChatMessageActions, { children: [
+    handlers.onRetry ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      ChatMessageAction,
+      {
+        label: "Retry",
+        onClick: () => void handlers.onRetry?.(message),
+        tooltip: "Regenerate response",
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.RefreshCcw, { className: "size-4" })
+      }
+    ) : null,
+    handlers.onLike ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      ChatMessageAction,
+      {
+        label: "Like",
+        onClick: () => void handlers.onLike?.(message),
+        tooltip: "Like this response",
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.ThumbsUp, { className: "size-4", fill: handlers.liked ? "currentColor" : "none" })
+      }
+    ) : null,
+    handlers.onDislike ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      ChatMessageAction,
+      {
+        label: "Dislike",
+        onClick: () => void handlers.onDislike?.(message),
+        tooltip: "Dislike this response",
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.ThumbsDown, { className: "size-4", fill: handlers.disliked ? "currentColor" : "none" })
+      }
+    ) : null,
+    handlers.onCopy ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      ChatMessageAction,
+      {
+        label: "Copy",
+        onClick: () => handlers.onCopy?.(message.content || "", message.id),
+        tooltip: handlers.copied ? "Copied!" : "Copy to clipboard",
+        children: handlers.copied ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.Check, { className: "size-4 text-green-600" }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.Copy, { className: "size-4" })
+      }
+    ) : null
+  ] });
+}
+
+// src/ui/agent-response-timeline.tsx
+var React6 = __toESM(require("react"), 1);
+var import_lucide_react3 = require("lucide-react");
+
+// src/ui/message-response.tsx
+var React5 = __toESM(require("react"), 1);
+var import_streamdown = require("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/streaming-text.ts
+var import_react = require("react");
+var DEFAULT_COMPLETED_TEXT_CACHE_SIZE = 200;
+var defaultCompletedTextCache = /* @__PURE__ */ new Map();
+var defaultStreamingTextCache = {
+  get: (id) => defaultCompletedTextCache.get(id),
+  set: (id, text) => {
+    defaultCompletedTextCache.set(id, text);
+    if (defaultCompletedTextCache.size > DEFAULT_COMPLETED_TEXT_CACHE_SIZE) {
+      const firstKey = defaultCompletedTextCache.keys().next().value;
+      if (firstKey) defaultCompletedTextCache.delete(firstKey);
+    }
+  }
+};
+function useStreamingText({
+  id,
+  isStreaming,
+  text,
+  cache = defaultStreamingTextCache,
+  charsPerSecond = 72,
+  catchupThreshold = 40,
+  maxCatchupChars = 20
+}) {
+  const cacheAdapter = cache === false ? null : cache;
+  const [displayedText, setDisplayedText] = (0, import_react.useState)(() => {
+    const cachedText = cacheAdapter?.get(id);
+    return cachedText && text.startsWith(cachedText) ? cachedText : text;
+  });
+  const targetRef = (0, import_react.useRef)(text);
+  const displayedRef = (0, import_react.useRef)(displayedText);
+  const rafRef = (0, import_react.useRef)(null);
+  const lastFrameAtRef = (0, import_react.useRef)(null);
+  const idRef = (0, import_react.useRef)(id);
+  const shouldAnimateRef = (0, import_react.useRef)(isStreaming);
+  (0, import_react.useEffect)(() => {
+    if (isStreaming || !text) return;
+    cacheAdapter?.set(id, text);
+  }, [cacheAdapter, id, isStreaming, text]);
+  (0, import_react.useEffect)(() => {
+    targetRef.current = text;
+  }, [text]);
+  (0, import_react.useEffect)(() => {
+    if (idRef.current === id) return;
+    idRef.current = id;
+    const cachedText = cacheAdapter?.get(id);
+    const initial = cachedText && text.startsWith(cachedText) ? cachedText : text;
+    shouldAnimateRef.current = isStreaming && initial !== text;
+    displayedRef.current = initial;
+    setDisplayedText(initial);
+    if (rafRef.current !== null) {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+    }
+    lastFrameAtRef.current = null;
+  }, [cacheAdapter, id, isStreaming, text]);
+  (0, import_react.useEffect)(() => {
+    if (typeof window === "undefined") {
+      displayedRef.current = text;
+      setDisplayedText(text);
+      return;
+    }
+    const reduceMotion = typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (reduceMotion) {
+      displayedRef.current = text;
+      setDisplayedText(text);
+      shouldAnimateRef.current = false;
+      return;
+    }
+    const cachedText = cacheAdapter?.get(id);
+    if (cachedText === text) {
+      displayedRef.current = text;
+      setDisplayedText(text);
+      shouldAnimateRef.current = false;
+      return;
+    }
+    if (isStreaming) {
+      shouldAnimateRef.current = true;
+    }
+    if (!shouldAnimateRef.current) {
+      displayedRef.current = text;
+      setDisplayedText(text);
+      return;
+    }
+    if (!text.startsWith(displayedRef.current)) {
+      displayedRef.current = "";
+      setDisplayedText("");
+    }
+    const tick = (timestamp) => {
+      const previousTimestamp = lastFrameAtRef.current ?? timestamp;
+      lastFrameAtRef.current = timestamp;
+      const target = targetRef.current;
+      const current = displayedRef.current;
+      if (current.length >= target.length) {
+        shouldAnimateRef.current = false;
+        rafRef.current = null;
+        return;
+      }
+      const elapsedMs = Math.max(8, timestamp - previousTimestamp);
+      const charsFromTime = Math.max(1, Math.floor(elapsedMs / 1e3 * charsPerSecond));
+      const gap = target.length - current.length;
+      const catchupStep = gap > catchupThreshold ? Math.min(maxCatchupChars, Math.ceil(gap / 10)) : charsFromTime;
+      const nextLength = Math.min(
+        target.length,
+        current.length + Math.max(charsFromTime, catchupStep)
+      );
+      const next = target.slice(0, nextLength);
+      displayedRef.current = next;
+      setDisplayedText(next);
+      rafRef.current = window.requestAnimationFrame(tick);
+    };
+    if (rafRef.current === null && displayedRef.current.length < text.length) {
+      rafRef.current = window.requestAnimationFrame(tick);
+    }
+    return () => {
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+      lastFrameAtRef.current = null;
+    };
+  }, [cacheAdapter, catchupThreshold, charsPerSecond, id, isStreaming, maxCatchupChars, text]);
+  return {
+    displayedText,
+    isAnimating: isStreaming,
+    mode: isStreaming ? "streaming" : "static",
+    parseIncompleteMarkdown: isStreaming
+  };
+}
+
+// src/ui/message-response.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function SafeMarkdownLink({ children, href, ...props }) {
+  const domProps = { ...props };
+  delete domProps.node;
+  const safeHref = safeChatMarkdownHref(href);
+  if (!safeHref) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children });
+  if (safeHref.startsWith("#")) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("a", { ...domProps, href: safeHref, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("a", { ...domProps, href: safeHref, rel: "noopener noreferrer", target: "_blank", children });
+}
+function BlockedMarkdownImage({ alt }) {
+  return alt ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("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__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children });
+  }
+  if (childArray.some(hasBlockMarkdownChild)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ...domProps, children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { ...domProps, children });
+}
+var MESSAGE_RESPONSE_COMPONENTS = {
+  a: SafeMarkdownLink,
+  img: BlockedMarkdownImage,
+  p: MessageMarkdownParagraph
+};
+var streamdownDefaultRehypePlugins = import_streamdown.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__ */ (0, import_jsx_runtime7.jsx)(
+      import_streamdown.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";
+  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/agent-response-timeline.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function optionalString2(value) {
+  return typeof value === "string" && value.trim() ? value.trim() : null;
+}
+function presentationValue(part, key) {
+  const presentation = part.presentation || {};
+  const snakeKey = key.replace(/[A-Z]/g, (letter) => `_${letter.toLowerCase()}`);
+  return optionalString2(presentation[key]) || optionalString2(presentation[snakeKey]);
+}
+function groupKey(part) {
+  return presentationValue(part, "groupKey");
+}
+function groupLabel(part) {
+  return presentationValue(part, "groupLabel") || toolLabel(part);
+}
+function toolLabel(part) {
+  return presentationValue(part, "activity") || presentationValue(part, "title") || part.toolName || "Tool activity";
+}
+function toolDetail(part) {
+  return presentationValue(part, "detail") || part.errorText || null;
+}
+function isActiveTool(part, activeToolId) {
+  return part.id === activeToolId || part.toolCallId === activeToolId || part.state === "input-available" || part.state === "input-streaming";
+}
+function Shimmer({ children, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: cn("inline-block animate-pulse", className), children });
+}
+function CompactTask({
+  children,
+  defaultOpen = false,
+  detail,
+  error,
+  label,
+  loading
+}) {
+  const [open, setOpen] = React6.useState(defaultOpen);
+  const expandable = Boolean(children || detail);
+  const content = loading ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Shimmer, { children: label }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: label });
+  if (!expandable) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: cn("flex min-w-0 items-center gap-1.5 text-sm", error ? "text-destructive" : "text-muted-foreground"), children: content });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "w-full", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      "button",
+      {
+        "aria-expanded": open,
+        className: cn(
+          "group flex min-w-0 items-center gap-1.5 rounded-md px-0 py-0.5 text-left text-sm transition-colors hover:text-foreground",
+          error ? "text-destructive" : "text-muted-foreground"
+        ),
+        onClick: () => setOpen((value) => !value),
+        type: "button",
+        children: [
+          content,
+          open ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.ChevronDown, { className: "size-3" }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react3.ChevronRight, { className: "size-3 opacity-70" })
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "mt-1 pl-4 text-sm text-muted-foreground", children: [
+      detail ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children: detail }) : null,
+      children
+    ] }) : null
+  ] });
+}
+function ToolPartRow({
+  activeToolId,
+  part
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { "data-agents24-tool-part": part.type, "data-state": part.state, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    CompactTask,
+    {
+      defaultOpen: part.state === "output-error",
+      detail: toolDetail(part),
+      error: part.state === "output-error",
+      label: toolLabel(part),
+      loading: isActiveTool(part, activeToolId)
+    }
+  ) });
+}
+function ToolGroup({
+  activeToolId,
+  parts
+}) {
+  const loading = parts.some((part) => isActiveTool(part, activeToolId));
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CompactTask, { label: groupLabel(parts[0]), loading, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "space-y-1", children: parts.map((part) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "div",
+    {
+      className: cn("text-sm", part.state === "output-error" ? "text-destructive" : "text-muted-foreground"),
+      children: [
+        isActiveTool(part, activeToolId) ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Shimmer, { children: toolLabel(part) }) : toolLabel(part),
+        toolDetail(part) ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "ml-1 text-xs text-muted-foreground/75", children: toolDetail(part) }) : null
+      ]
+    },
+    part.id
+  )) }) });
+}
+function HitlPartRow({
+  getHitlActionState,
+  isLoading,
+  onHitlAction,
+  part
+}) {
+  const state = getHitlActionState?.(part);
+  const [comment, setComment] = React6.useState("");
+  const presentation = part.presentation || {};
+  const requireComment = presentation.require_comment === true;
+  const isTerminal = part.status !== "pending";
+  const resolvedRef = React6.useRef(null);
+  const wasTerminal = React6.useRef(isTerminal);
+  React6.useEffect(() => {
+    if (isTerminal && !wasTerminal.current) resolvedRef.current?.focus();
+    wasTerminal.current = isTerminal;
+  }, [isTerminal]);
+  if (isTerminal) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("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__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "a24-hitl space-y-2.5 px-1 py-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "a24-hitl__title text-sm font-medium text-foreground text-pretty", children: hitlTitle(part) }),
+    requireComment ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "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__ */ (0, import_jsx_runtime8.jsx)("div", { className: "a24-hitl__error text-sm text-destructive", children: state.error }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "a24-hitl__actions flex flex-wrap items-center gap-1.5", children: part.allowedActions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "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() || void 0),
+        type: "button",
+        children: hitlActionLabel(part, action)
+      },
+      action
+    )) })
+  ] });
+}
+function DefaultPartRow({
+  activeToolId,
+  getHitlActionState,
+  isLoading,
+  message,
+  onHitlAction,
+  part
+}) {
+  if (part.kind === "text") return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MessageResponse, { children: part.text });
+  if (part.kind === "tool") return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ToolPartRow, { activeToolId, part });
+  if (part.kind === "reasoning") {
+    const label = part.text || part.label || "Thinking";
+    return part.status === "running" || part.status === "streaming" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Shimmer, { className: "text-sm text-muted-foreground", children: label }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-sm text-muted-foreground", children: label });
+  }
+  if (part.kind === "ui-blocks") {
+    if (part.state === "output-error") {
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-sm text-destructive", children: part.errorText || "Failed to render UI content." });
+    }
+    return part.bundle ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SafeUiBlocks, { bundle: part.bundle }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CompactTask, { label: part.state === "input-streaming" ? "Rendering UI block" : "Rendered UI block", loading: part.state === "input-streaming" });
+  }
+  if (part.kind === "hitl") {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      HitlPartRow,
+      {
+        getHitlActionState,
+        isLoading,
+        onHitlAction,
+        part
+      }
+    );
+  }
+  if (part.kind === "error") return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-sm text-destructive", role: "alert", children: part.errorText });
+  if (part.kind === "source") {
+    const href = safeExternalUrl(part.url);
+    return href ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("a", { className: "a24-source-link", href, rel: "noopener noreferrer", target: "_blank", children: part.title }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "a24-source-link", children: part.title });
+  }
+  if (part.kind === "citation") {
+    const href = safeExternalUrl(part.url);
+    const label = part.label || "Citation";
+    return href ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("a", { className: "a24-citation", href, rel: "noopener noreferrer", target: "_blank", children: label }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "a24-citation", children: label });
+  }
+  if (part.kind === "attachment") return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "a24-output-attachment", children: part.attachment.filename || "Attachment" });
+  if (part.kind === "data") return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("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__ */ (0, import_jsx_runtime8.jsxs)("section", { "aria-label": typeof bundle.title === "string" ? bundle.title : "Agent result", className: "a24-ui-blocks", children: [
+    typeof bundle.title === "string" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { children: bundle.title }) : null,
+    rows.map((rawRow, rowIndex) => {
+      const row = rawRow && typeof rawRow === "object" && !Array.isArray(rawRow) ? rawRow : {};
+      const blocks = Array.isArray(row.blocks) ? row.blocks : [];
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "a24-ui-blocks__row", children: blocks.map((rawBlock, blockIndex) => {
+        const block = rawBlock && typeof rawBlock === "object" && !Array.isArray(rawBlock) ? rawBlock : {};
+        const title = typeof block.title === "string" ? block.title : "Result";
+        const kind = String(block.kind || "note");
+        if (kind === "table" && Array.isArray(block.columns) && Array.isArray(block.rows)) {
+          return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "a24-ui-block", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h4", { children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "a24-ui-table-scroll", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("table", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("tr", { children: block.columns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("th", { children: String(column) }, index)) }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("tbody", { children: block.rows.map((rawCells, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("tr", { children: (Array.isArray(rawCells) ? rawCells : []).map((cell, cellIndex) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("td", { children: String(cell) }, cellIndex)) }, index)) })
+            ] }) })
+          ] }, String(block.id || blockIndex));
+        }
+        const value = block.value ?? block.text ?? "";
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "a24-ui-block", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h4", { children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { children: String(value) })
+        ] }, String(block.id || blockIndex));
+      }) }, `row-${rowIndex}`);
+    })
+  ] });
+}
+function AgentResponseTimeline({
+  getHitlActionState,
+  isLoading = false,
+  message,
+  onHitlAction,
+  renderPart
+}) {
+  const parts = message.parts || [];
+  const activeToolId = [...parts].reverse().find((part) => part.kind === "tool" && (part.state === "input-available" || part.state === "input-streaming"))?.id;
+  const rendered = [];
+  let index = 0;
+  while (index < parts.length) {
+    const part = parts[index];
+    if (part.kind === "tool" && groupKey(part)) {
+      const key = groupKey(part);
+      const group = [];
+      while (index < parts.length) {
+        const candidate = parts[index];
+        if (candidate.kind !== "tool" || groupKey(candidate) !== key) break;
+        group.push(candidate);
+        index += 1;
+      }
+      rendered.push(group.length === 1 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ToolPartRow, { activeToolId, part: group[0] }, group[0].id) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ToolGroup, { activeToolId, parts: group }, `tool-group-${key}-${group[0].id}`));
+      continue;
+    }
+    rendered.push(
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(React6.Fragment, { children: renderPart ? renderPart(part, message) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        DefaultPartRow,
+        {
+          activeToolId,
+          getHitlActionState,
+          isLoading,
+          message,
+          onHitlAction,
+          part
+        }
+      ) }, part.id)
+    );
+    index += 1;
+  }
+  if (rendered.length === 0 && message.content) {
+    rendered.push(/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(MessageResponse, { children: message.content }, `${message.id}-fallback`));
+  }
+  if (rendered.length === 0 && isLoading) {
+    rendered.push(/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-sm text-muted-foreground", children: "Thinking" }, `${message.id}-thinking`));
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "space-y-3", children: rendered });
+}
+
+// src/ui/agent-chat-message.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var DEFAULT_USER_MESSAGE_COLLAPSE_THRESHOLD = 360;
+var DEFAULT_USER_MESSAGE_COLLAPSED_LINES = 4;
+function shouldCollapseUserMessage(content, threshold = DEFAULT_USER_MESSAGE_COLLAPSE_THRESHOLD) {
+  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] = React7.useState(false);
+  const contentId = React7.useId();
+  const shouldCollapse = shouldCollapseUserMessage(content, collapseThreshold);
+  const Icon = isExpanded ? import_lucide_react4.ChevronUp : import_lucide_react4.ChevronDown;
+  const clampedStyle = shouldCollapse && !isExpanded ? {
+    WebkitBoxOrient: "vertical",
+    WebkitLineClamp: Math.max(1, collapsedLines),
+    display: "-webkit-box",
+    overflow: "hidden"
+  } : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex min-w-0 flex-col gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { id: contentId, className: "min-w-0", style: clampedStyle, children: content }),
+    shouldCollapse ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      "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__ */ (0, import_jsx_runtime9.jsx)(Icon, { "aria-hidden": "true", className: "size-4", strokeWidth: 2 })
+        ]
+      }
+    ) : null
+  ] });
+}
+function AgentChatMessage({
+  actionHandlers,
+  actions,
+  actionsClassName,
+  className,
+  contentClassName,
+  dir,
+  getHitlActionState,
+  message,
+  onHitlAction,
+  renderAssistantContent,
+  renderPart,
+  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__ */ (0, import_jsx_runtime9.jsx)(AgentChatDefaultActions, { handlers: actionHandlers, message }) : null);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(ChatMessage, { className, dir, from: message.role, children: [
+    showAttachments ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChatAttachments, { className: "mb-2", dir, children: message.attachments?.map((attachment, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      ChatAttachment,
+      {
+        data: attachment,
+        dir: "ltr"
+      },
+      String(attachment.url || attachment.filename || index)
+    )) }) : null,
+    shouldRenderContent ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      ChatMessageContent,
+      {
+        className: cn(isAssistant ? "bg-transparent p-0" : void 0, contentClassName),
+        dir,
+        children: [
+          isAssistant ? renderAssistantContent ? renderAssistantContent({ isStreaming, message }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            AgentResponseTimeline,
+            {
+              getHitlActionState,
+              isLoading: isStreaming,
+              message,
+              onHitlAction,
+              renderPart
+            }
+          ) : null,
+          !isAssistant ? renderUserContent ? renderUserContent({ message }) : resolvedUserContent ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            AgentChatUserMessageContent,
+            {
+              collapsedLines: userMessageCollapsedLines,
+              collapseThreshold: userMessageCollapseThreshold,
+              content: resolvedUserContent,
+              showLessLabel: userMessageShowLessLabel,
+              showMoreLabel: userMessageShowMoreLabel
+            }
+          ) : null : null
+        ]
+      }
+    ) : null,
+    renderedActions ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: cn(dir === "rtl" ? "mt-1 h-9 w-full translate-x-2" : "mt-1 h-9 w-full -translate-x-2", actionsClassName), children: renderedActions }) : null
+  ] });
+}
+
+// src/templates/agent-chat-layout.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var stateCopy = {
+  loading: { title: "Loading chat", detail: "Your conversation is being prepared." },
+  reconnecting: { title: "Reconnecting", detail: "Messages are safe. Trying the connection again." },
+  offline: { title: "You\u2019re offline", detail: "Reconnect to continue this conversation." },
+  denied: { title: "Access denied", detail: "This deployment does not allow this request." },
+  quota: { title: "Usage limit reached", detail: "Try again after the deployment limit resets." },
+  failed: { title: "Something went wrong", detail: "The request could not be completed safely." },
+  expired: { title: "Session expired", detail: "Reconnect to start a new secure session." }
+};
+function AgentChatStatePanel({
+  errorMessage,
+  onRetry,
+  state
+}) {
+  const copy = stateCopy[state];
+  const retryable = state === "offline" || state === "failed" || state === "expired";
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "a24-state", "data-state": state, role: state === "failed" ? "alert" : "status", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "a24-state__icon", "aria-hidden": "true", children: state === "offline" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react5.WifiOff, {}) : state === "reconnecting" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react5.RefreshCw, {}) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react5.MessageSquare, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h2", { children: copy.title }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { children: errorMessage || copy.detail }),
+    retryable && onRetry ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { className: "a24-button a24-button--primary", onClick: () => void onRetry(), type: "button", children: "Try again" }) : null
+  ] });
+}
+function connectionLabel(state) {
+  if (state === "connected") return "Connected";
+  if (state === "connecting") return "Connecting";
+  if (state === "reconnecting") return "Reconnecting";
+  if (state === "expired") return "Session expired";
+  return "Offline";
+}
+function AgentAvatar({ agent }) {
+  return agent.avatarUrl ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("img", { alt: "", className: "a24-avatar", height: 36, src: agent.avatarUrl, width: 36 }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { "aria-hidden": "true", className: "a24-avatar a24-avatar--fallback", children: agent.name.trim().slice(0, 1).toUpperCase() || "A" });
+}
+function AgentTargetSelector({ agent, selector }) {
+  const rootRef = React8.useRef(null);
+  const triggerRef = React8.useRef(null);
+  const inputId = React8.useId();
+  const [draft, setDraft] = React8.useState(selector.value);
+  const [error, setError] = React8.useState(null);
+  const [open, setOpen] = React8.useState(false);
+  const [submitting, setSubmitting] = React8.useState(false);
+  React8.useEffect(() => setDraft(selector.value), [selector.value]);
+  React8.useEffect(() => {
+    if (!open) return void 0;
+    const closeOnPointerDown = (event) => {
+      if (!rootRef.current?.contains(event.target)) setOpen(false);
+    };
+    const closeOnEscape = (event) => {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      setOpen(false);
+      triggerRef.current?.focus();
+    };
+    document.addEventListener("pointerdown", closeOnPointerDown);
+    document.addEventListener("keydown", closeOnEscape);
+    return () => {
+      document.removeEventListener("pointerdown", closeOnPointerDown);
+      document.removeEventListener("keydown", closeOnEscape);
+    };
+  }, [open]);
+  const apply = async (event) => {
+    event.preventDefault();
+    const value = draft.trim();
+    if (!value) {
+      setError(`${selector.label} is required.`);
+      return;
+    }
+    setSubmitting(true);
+    setError(null);
+    try {
+      await selector.onApply(value);
+      setOpen(false);
+    } catch (nextError) {
+      setError(nextError instanceof Error ? nextError.message : "The target could not be changed.");
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "a24-target-selector", "data-open": open || void 0, ref: rootRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      "button",
+      {
+        "aria-expanded": open,
+        "aria-haspopup": "dialog",
+        "aria-label": `Change ${selector.label}`,
+        className: "a24-target-selector__trigger",
+        onClick: () => setOpen((value) => !value),
+        ref: triggerRef,
+        type: "button",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AgentAvatar, { agent }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "a24-target-selector__copy", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("strong", { children: agent.name }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: agent.description || "Click to change target" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react5.ChevronDown, { "aria-hidden": "true" })
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("form", { "aria-label": `Change ${selector.label}`, className: "a24-target-selector__panel", onSubmit: (event) => void apply(event), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("label", { htmlFor: inputId, children: selector.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("input", { autoComplete: "off", id: inputId, onChange: (event) => setDraft(event.target.value), placeholder: selector.placeholder, spellCheck: false, value: draft }),
+      selector.helperText ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { children: selector.helperText }) : null,
+      error ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "a24-target-selector__error", role: "alert", children: error }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { className: "a24-button a24-target-selector__apply", disabled: submitting || !draft.trim(), type: "submit", children: submitting ? "Switching\u2026" : "Use target" })
+    ] }) : null
+  ] });
+}
+function ThreadNavigation({
+  activeThreadId,
+  agent,
+  close,
+  hasMoreThreads,
+  isDeletingThread,
+  isLoadingThreads,
+  onDeleteThread,
+  onLoadMoreThreads,
+  onNewThread,
+  onOpenThread,
+  slots,
+  targetSelector,
+  threads
+}) {
+  const [query, setQuery] = React8.useState("");
+  const normalizedQuery = query.trim().toLocaleLowerCase();
+  const visibleThreads = normalizedQuery ? threads.filter((thread) => String(thread.title || "New chat").toLocaleLowerCase().includes(normalizedQuery)) : threads;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "a24-sidebar__inner", children: [
+    targetSelector ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AgentTargetSelector, { agent, selector: targetSelector }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "a24-sidebar__top", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+        "button",
+        {
+          "aria-label": "New chat",
+          className: "a24-button a24-button--primary a24-sidebar__new",
+          onClick: () => {
+            onNewThread();
+            close();
+          },
+          type: "button",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react5.Plus, { "aria-hidden": "true" }),
+            "New chat"
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { "aria-label": "Close conversations", className: "a24-icon-button a24-sidebar__mobile-close", onClick: close, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react5.X, { "aria-hidden": "true" }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { className: "a24-search", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react5.Search, { "aria-hidden": "true" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "a24-sr-only", children: "Search conversations" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "input",
+        {
+          autoComplete: "off",
+          name: "conversation-search",
+          onChange: (event) => setQuery(event.target.value),
+          placeholder: "Search conversations\u2026",
+          type: "search",
+          value: query
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("nav", { "aria-label": "Conversations", className: "a24-thread-list", children: [
+      isLoadingThreads && threads.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "a24-sidebar__hint", role: "status", children: "Loading conversations\u2026" }) : null,
+      !isLoadingThreads && visibleThreads.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "a24-sidebar__hint", children: "No conversations yet." }) : null,
+      visibleThreads.map((thread) => {
+        const selected = thread.id === activeThreadId;
+        return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "a24-thread", "data-selected": selected || void 0, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+            "button",
+            {
+              "aria-current": selected ? "page" : void 0,
+              className: "a24-thread__open",
+              onClick: () => {
+                void onOpenThread(thread.id);
+                close();
+              },
+              type: "button",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "a24-thread__title", children: thread.title || "New chat" }),
+                thread.status ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "a24-thread__status", children: thread.status }) : null
+              ]
+            }
+          ),
+          slots?.threadActions ? slots.threadActions(thread) : onDeleteThread ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            "button",
+            {
+              "aria-label": `Delete ${thread.title || "conversation"}`,
+              className: "a24-icon-button a24-thread__delete",
+              disabled: isDeletingThread,
+              onClick: () => void onDeleteThread(thread.id),
+              type: "button",
+              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react5.Trash2, { "aria-hidden": "true" })
+            }
+          ) : null
+        ] }, thread.id);
+      })
+    ] }),
+    hasMoreThreads && onLoadMoreThreads ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("button", { className: "a24-button a24-button--quiet a24-sidebar__more", onClick: () => void onLoadMoreThreads(), type: "button", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react5.MoreHorizontal, { "aria-hidden": "true" }),
+      "Load more"
+    ] }) : null
+  ] });
+}
+function AgentChatLayout({
+  activeThreadId,
+  agent,
+  allowAttachments = true,
+  className,
+  connectionState = "connected",
+  dir = "ltr",
+  errorMessage,
+  hasMoreThreads,
+  isDeletingThread,
+  isLoadingOlder,
+  isLoadingThreads,
+  isRunning = false,
+  messages,
+  modelId,
+  models = [],
+  onDeleteThread,
+  onHitlAction,
+  onLoadMoreThreads,
+  onLoadOlder,
+  onModelChange,
+  onNewThread,
+  onOpenThread,
+  onRetryConnection,
+  onStop,
+  onSubmit,
+  placeholder,
+  slots,
+  state = "ready",
+  streamingMessageId,
+  targetSelector,
+  threads,
+  title
+}) {
+  const [sidebarOpen, setSidebarOpen] = React8.useState(false);
+  const menuButtonRef = React8.useRef(null);
+  const closeSidebar = React8.useCallback(() => {
+    setSidebarOpen(false);
+    menuButtonRef.current?.focus();
+  }, []);
+  React8.useEffect(() => {
+    if (!sidebarOpen) return void 0;
+    const onKeyDown = (event) => {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      closeSidebar();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [closeSidebar, sidebarOpen]);
+  const shellState = state === "streaming" || state === "paused" ? "ready" : state;
+  const showState = shellState !== "ready";
+  const liveLabel = state === "streaming" ? "Agent is responding" : state === "paused" ? "Waiting for your response" : connectionLabel(connectionState);
+  const composer = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    AgentChatComposer,
+    {
+      allowAttachments,
+      disabled: state === "denied" || state === "quota" || state === "expired" || state === "offline",
+      inputToolbarContent: models.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("label", { className: "a24-model-select", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "a24-sr-only", children: "Model" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("select", { "aria-label": "Model", onChange: (event) => onModelChange?.(event.target.value), value: modelId || models[0]?.id, children: models.map((model) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: model.id, children: model.label }, model.id)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react5.ChevronDown, { "aria-hidden": "true" })
+      ] }) : void 0,
+      isRunning,
+      onStop,
+      onSubmit,
+      placeholder
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("section", { className: cn("a24-chat", className), "data-agents24-chat-layout": "", dir, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("a", { className: "a24-skip-link", href: "#agents24-chat-main", children: "Skip to messages" }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("nav", { "aria-label": "Chat navigation", className: "a24-sidebar", "data-open": sidebarOpen || void 0, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      ThreadNavigation,
+      {
+        activeThreadId,
+        agent,
+        close: closeSidebar,
+        hasMoreThreads,
+        isDeletingThread,
+        isLoadingThreads,
+        onDeleteThread,
+        onLoadMoreThreads,
+        onNewThread,
+        onOpenThread,
+        slots,
+        targetSelector,
+        threads
+      }
+    ) }),
+    sidebarOpen ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { "aria-label": "Close conversations", className: "a24-sidebar-backdrop", onClick: closeSidebar, type: "button" }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "a24-chat__body", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("header", { className: "a24-header", role: "banner", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { "aria-label": "Open conversations", className: "a24-icon-button a24-header__menu", onClick: () => setSidebarOpen(true), ref: menuButtonRef, type: "button", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react5.Menu, { "aria-hidden": "true" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AgentAvatar, { agent }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "a24-header__identity", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h1", { children: title || agent.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "a24-connection", "data-state": connectionState, children: [
+            connectionState === "offline" || connectionState === "expired" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react5.WifiOff, { "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react5.Wifi, { "aria-hidden": "true" }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: connectionLabel(connectionState) })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "a24-header__actions", children: slots?.headerActions })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("main", { "aria-busy": state === "loading" || state === "reconnecting", className: "a24-main", id: "agents24-chat-main", children: showState ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(AgentChatStatePanel, { errorMessage, onRetry: onRetryConnection, state: shellState }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        AgentChatShell,
+        {
+          composer,
+          dir,
+          isLoadingOlder,
+          messages,
+          onLoadOlder,
+          renderEmptyState: slots?.empty ? () => slots.empty : void 0,
+          renderMessage: (message) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            AgentChatMessage,
+            {
+              actions: slots?.messageActions?.(message),
+              message,
+              onHitlAction: (part, action, comment) => void onHitlAction?.(part, action, comment),
+              renderAssistantContent: slots?.assistantBody,
+              streamingMessageId
+            }
+          )
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { "aria-live": "polite", "aria-atomic": "true", className: "a24-sr-only", children: liveLabel })
+    ] })
+  ] });
+}
+
+// src/templates/agent-chat-app.tsx
+var import_react2 = require("@agents24/react");
+var React9 = __toESM(require("react"), 1);
+
+// src/mcp-oauth.ts
+var UUID_PATTERN = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-8][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
+function isLoopback(hostname) {
+  return hostname === "localhost" || hostname === "127.0.0.1" || hostname === "[::1]";
+}
+function normalizedOrigin(value) {
+  try {
+    const url = new URL(value);
+    if (url.protocol !== "https:" && !(url.protocol === "http:" && isLoopback(url.hostname))) {
+      throw new Error("unsafe callback origin");
+    }
+    if (url.origin === "null") throw new Error("opaque callback origin");
+    return url.origin;
+  } catch {
+    throw new Error("MCP authorization returned an invalid callback origin.");
+  }
+}
+function validateMcpCallbackResult(result, expectedServerId) {
+  const serverId = String(result.server_id || "").trim();
+  const connectionId = String(result.connection_id || "").trim();
+  if (!serverId || serverId !== expectedServerId) {
+    throw new Error("MCP authorization completed for an unexpected server.");
+  }
+  if (!UUID_PATTERN.test(connectionId)) {
+    throw new Error("MCP authorization returned an invalid connection identity.");
+  }
+  return result;
+}
+function waitForMcpOauthComplete({
+  popup,
+  callbackOrigin,
+  popupNonce,
+  requireConnectionId = false,
+  serverId,
+  timeoutMs = 12e4
+}) {
+  if (!popup) return Promise.reject(new Error("Could not open the MCP authorization popup."));
+  const expectedOrigin = normalizedOrigin(callbackOrigin);
+  const expectedServerId = String(serverId || "").trim();
+  const expectedPopupNonce = String(popupNonce || "").trim();
+  if (!expectedServerId) return Promise.reject(new Error("MCP authorization is missing its server identity."));
+  if (!expectedPopupNonce) return Promise.reject(new Error("MCP authorization is missing its popup binding."));
+  const returnFocusTo = typeof document !== "undefined" ? document.activeElement : null;
+  return new Promise((resolve, reject) => {
+    let settled = false;
+    const finish = (result) => {
+      if (settled) return;
+      settled = true;
+      window.clearTimeout(timeout);
+      window.clearInterval(closeTimer);
+      window.removeEventListener("message", onMessage);
+      returnFocusTo?.focus?.();
+      if (result instanceof Error) reject(result);
+      else resolve(result);
+    };
+    const onMessage = (event) => {
+      if (event.source !== popup || event.origin !== expectedOrigin) return;
+      const data = event.data;
+      if (data?.type !== "agents24.mcp.callback" || data.server_id !== expectedServerId || data.popup_nonce !== expectedPopupNonce) return;
+      const code = String(data.code || "").trim();
+      if (!code || code.length > 2048) return;
+      const connectionId = String(data.connection_id || "").trim();
+      if ((requireConnectionId || connectionId) && !UUID_PATTERN.test(connectionId)) return;
+      finish({
+        code,
+        ...connectionId ? { connectionId } : {},
+        popupNonce: expectedPopupNonce,
+        serverId: expectedServerId
+      });
+    };
+    const timeout = window.setTimeout(
+      () => finish(new Error("MCP authorization timed out.")),
+      Math.max(1, timeoutMs)
+    );
+    const closeTimer = window.setInterval(() => {
+      if (popup.closed) finish(new Error("MCP authorization window was closed before connecting."));
+    }, 500);
+    window.addEventListener("message", onMessage);
+  });
+}
+
+// src/templates/agent-chat-app.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function browserCrypto() {
+  const value = globalThis.crypto;
+  if (!value?.subtle || !value.randomUUID) throw new Error("Secure browser crypto is required for MCP authorization.");
+  return value;
+}
+function base64Url(bytes) {
+  let binary = "";
+  bytes.forEach((byte) => {
+    binary += String.fromCharCode(byte);
+  });
+  return btoa(binary).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/g, "");
+}
+async function createPkceProof() {
+  const crypto2 = browserCrypto();
+  const verifier = base64Url(crypto2.getRandomValues(new Uint8Array(32)));
+  const bytes = new TextEncoder().encode(verifier);
+  const digest = await crypto2.subtle.digest("SHA-256", bytes);
+  return { verifier, challenge: base64Url(new Uint8Array(digest)) };
+}
+function stateFromError(error) {
+  const typed = error;
+  if (typed?.kind === "authentication") return "expired";
+  if (typed?.kind === "authorization") return "denied";
+  if (typed?.kind === "quota" || typed?.kind === "rate_limit") return "quota";
+  if (typed?.kind === "network") return "offline";
+  return "failed";
+}
+function BoundAgentChatApp({
+  agent: agentOverride,
+  client,
+  completeMcpAuthorization,
+  mcpRedirectUri,
+  modelId,
+  models: modelOverrides,
+  onModelChange,
+  slots,
+  ...layoutProps
+}) {
+  const controller = (0, import_react2.useAgentChat)();
+  const attachments = (0, import_react2.useAgentAttachments)();
+  const mcp = (0, import_react2.useAgentMcp)();
+  const [agent, setAgent] = React9.useState(agentOverride || { name: "Agent" });
+  const [capabilities, setCapabilities] = React9.useState([]);
+  const [bootstrapModels, setBootstrapModels] = React9.useState([]);
+  const [selectedModelId, setSelectedModelId] = React9.useState(modelId || null);
+  const [bootstrapLoading, setBootstrapLoading] = React9.useState(true);
+  const [localError, setLocalError] = React9.useState(null);
+  const [liked, setLiked] = React9.useState({});
+  const [disliked, setDisliked] = React9.useState({});
+  const loadBootstrap = React9.useCallback(async () => {
+    setBootstrapLoading(true);
+    setLocalError(null);
+    try {
+      const bootstrap = await client.bootstrap();
+      if (!agentOverride) setAgent({ name: bootstrap.deployment.name || "Agent" });
+      setCapabilities(bootstrap.capabilities);
+      const modelFeatures = bootstrap.features.models;
+      const allowedModelIds = Array.isArray(modelFeatures?.allowed_ids) ? modelFeatures.allowed_ids.filter((value) => typeof value === "string") : [];
+      if (bootstrap.capabilities.includes("models.select") && modelFeatures?.selectable) {
+        setBootstrapModels(allowedModelIds.map((id) => ({ id, label: id })));
+        if (!modelId) {
+          const defaultId = typeof modelFeatures.default_id === "string" ? modelFeatures.default_id : allowedModelIds[0];
+          setSelectedModelId(defaultId || null);
+        }
+      } else {
+        setBootstrapModels([]);
+      }
+      await controller.refreshThreads();
+    } catch (error2) {
+      setLocalError(error2);
+    } finally {
+      setBootstrapLoading(false);
+    }
+  }, [agentOverride, client, controller.refreshThreads, modelId]);
+  React9.useEffect(() => {
+    if (modelId !== void 0) setSelectedModelId(modelId);
+  }, [modelId]);
+  React9.useEffect(() => {
+    void loadBootstrap();
+  }, [loadBootstrap]);
+  const submit = React9.useCallback(async (message) => {
+    setLocalError(null);
+    try {
+      const uploaded = await Promise.all(message.files.map((file) => attachments.upload({
+        data: file.source,
+        name: file.filename,
+        mediaType: file.mediaType,
+        threadId: controller.activeThreadId || void 0
+      })));
+      await controller.submit({
+        text: message.text,
+        attachmentIds: uploaded.flatMap((attachment) => attachment.id ? [attachment.id] : []),
+        attachments: uploaded,
+        requestedModelId: selectedModelId || void 0
+      });
+    } catch (error2) {
+      setLocalError(error2);
+    }
+  }, [attachments, controller, selectedModelId]);
+  const deleteThread = React9.useCallback(async (threadId) => {
+    if (!window.confirm("Delete this conversation? This cannot be undone.")) return;
+    await controller.deleteThread(threadId);
+  }, [controller.deleteThread]);
+  const changeModel = React9.useCallback((nextModelId) => {
+    if (modelId === void 0) setSelectedModelId(nextModelId);
+    onModelChange?.(nextModelId);
+  }, [modelId, onModelChange]);
+  const handleMcp = React9.useCallback(async (part) => {
+    if (!mcpRedirectUri) throw new Error("mcpRedirectUri is required for MCP Connect.");
+    const serverId = String(part.presentation.server_id || "").trim();
+    if (!serverId) throw new Error("MCP authorization is missing its server identity.");
+    const runId = controller.activeRunId || controller.messages.find((message) => message.parts.includes(part))?.runId;
+    if (!runId) throw new Error("MCP authorization is missing its paused run.");
+    const popupNonce = browserCrypto().randomUUID();
+    const proof = await createPkceProof();
+    const popup = window.open("about:blank", "agents24-mcp", "popup,width=560,height=720");
+    try {
+      const start = await mcp.startAuthorization({
+        runId,
+        serverId,
+        interruptId: part.interruptId,
+        redirectUri: mcpRedirectUri,
+        popupNonce,
+        codeChallenge: proof.challenge
+      });
+      if (!start.callback_origin) throw new Error("MCP authorization did not return a callback origin.");
+      if (popup) popup.location.replace(start.authorization_url);
+      const completion = await waitForMcpOauthComplete({
+        popup,
+        callbackOrigin: start.callback_origin,
+        popupNonce,
+        requireConnectionId: Boolean(completeMcpAuthorization),
+        serverId
+      });
+      if (completeMcpAuthorization) {
+        await completeMcpAuthorization({ completion, codeVerifier: proof.verifier, serverId });
+      } else {
+        const redeemed = await mcp.redeemCallback({ code: completion.code, codeVerifier: proof.verifier });
+        validateMcpCallbackResult(redeemed, serverId);
+      }
+      popup?.close();
+      await controller.resumeHitl(part, "connect");
+    } catch (error2) {
+      popup?.close();
+      throw error2;
+    }
+  }, [completeMcpAuthorization, controller, mcp, mcpRedirectUri]);
+  const onHitlAction = React9.useCallback(async (part, action, comment) => {
+    setLocalError(null);
+    try {
+      if (part.hitlKind === "mcp_auth" && action === "connect") await handleMcp(part);
+      else await controller.resumeHitl(part, action, comment);
+    } catch (error2) {
+      setLocalError(error2);
+    }
+  }, [controller, handleMcp]);
+  const error = localError || controller.error;
+  const state = bootstrapLoading ? "loading" : error ? stateFromError(error) : controller.runState === "streaming" ? "streaming" : controller.runState === "reconnecting" ? "reconnecting" : controller.runState === "paused" ? "paused" : "ready";
+  const connectionState = state === "offline" ? "offline" : state === "expired" ? "expired" : state === "reconnecting" ? "reconnecting" : bootstrapLoading ? "connecting" : "connected";
+  const defaultMessageActions = (message) => message.role === "assistant" ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    AgentChatDefaultActions,
+    {
+      handlers: {
+        copied: false,
+        disliked: Boolean(disliked[message.id]),
+        liked: Boolean(liked[message.id]),
+        onCopy: async (content) => navigator.clipboard.writeText(content),
+        onDislike: () => {
+          setDisliked((current) => ({ ...current, [message.id]: !current[message.id] }));
+          setLiked((current) => ({ ...current, [message.id]: false }));
+        },
+        onLike: () => {
+          setLiked((current) => ({ ...current, [message.id]: !current[message.id] }));
+          setDisliked((current) => ({ ...current, [message.id]: false }));
+        },
+        onRetry: () => controller.regenerate(message)
+      },
+      message
+    }
+  ) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    AgentChatLayout,
+    {
+      ...layoutProps,
+      activeThreadId: controller.activeThreadId,
+      agent,
+      allowAttachments: layoutProps.allowAttachments ?? capabilities.includes("attachments.write"),
+      connectionState,
+      errorMessage: error instanceof Error ? error.message : null,
+      isLoadingOlder: controller.isLoadingOlder,
+      isLoadingThreads: controller.isLoadingThreads,
+      isRunning: controller.runState === "streaming" || controller.isSubmitting,
+      messages: controller.messages,
+      hasMoreThreads: controller.hasMoreThreads,
+      modelId: selectedModelId,
+      models: modelOverrides ?? bootstrapModels,
+      onDeleteThread: deleteThread,
+      onHitlAction,
+      onLoadOlder: controller.hasOlderTurns ? controller.loadOlder : void 0,
+      onLoadMoreThreads: controller.hasMoreThreads ? controller.loadMoreThreads : void 0,
+      onModelChange: changeModel,
+      onNewThread: controller.startNewThread,
+      onOpenThread: controller.openThread,
+      onRetryConnection: loadBootstrap,
+      onStop: () => void controller.cancelRun(),
+      onSubmit: submit,
+      slots: { ...slots, messageActions: slots?.messageActions || defaultMessageActions },
+      state,
+      streamingMessageId: controller.streamingMessageId,
+      threads: controller.threads.map((thread) => ({ id: thread.id, title: thread.title, status: thread.last_run_status || thread.status, updatedAt: thread.updated_at }))
+    }
+  );
+}
+function AgentChatApp({
+  client,
+  createAbortController,
+  createId: createId2,
+  storage,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    import_react2.Agents24Provider,
+    {
+      client,
+      createAbortController: createAbortController || (() => new AbortController()),
+      createId: createId2,
+      storage,
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(BoundAgentChatApp, { client, ...props })
+    }
+  );
+}
+
+// src/templates/appearance-control.tsx
+var import_lucide_react6 = require("lucide-react");
+var React10 = __toESM(require("react"), 1);
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var MODES = ["system", "light", "dark"];
+function storedMode(storageKey) {
+  if (typeof window === "undefined") return "system";
+  const value = window.localStorage.getItem(storageKey);
+  return value === "light" || value === "dark" ? value : "system";
+}
+function applyMode(mode) {
+  if (typeof document === "undefined") return;
+  document.documentElement.dataset.agents24ColorMode = mode;
+}
+function AgentChatAppearanceControl({
+  storageKey = "agents24-color-mode"
+}) {
+  const [mode, setMode] = React10.useState(() => storedMode(storageKey));
+  React10.useEffect(() => applyMode(mode), [mode]);
+  const label = `Appearance: ${mode[0]?.toUpperCase()}${mode.slice(1)}`;
+  const Icon = mode === "light" ? import_lucide_react6.Sun : mode === "dark" ? import_lucide_react6.Moon : import_lucide_react6.Monitor;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    "button",
+    {
+      "aria-label": `${label}. Activate to change.`,
+      className: "a24-icon-button a24-appearance",
+      onClick: () => {
+        const next = MODES[(MODES.indexOf(mode) + 1) % MODES.length] || "system";
+        window.localStorage.setItem(storageKey, next);
+        setMode(next);
+      },
+      title: label,
+      type: "button",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { "aria-hidden": "true" }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "a24-sr-only", children: label })
+      ]
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AgentChatApp,
+  AgentChatAppearanceControl,
+  AgentChatLayout,
   AgentChatShell,
+  AgentChatStatePanel,
   buildAgentChatOutlineItems,
   getAgentChatShellScrollState
 });