@ash-cloud/ash-ui 0.0.9 → 0.1.1

package/dist/index.js

@@ -1,4 +1,4 @@
-import { lazy, createContext, useState, useRef, useMemo, useEffect, Suspense, useCallback, useContext } from 'react';
+import { lazy, createContext, useState, useCallback, useRef, useMemo, useEffect, Suspense, Fragment as Fragment$1, useContext } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 // src/components/ToolCallCard.tsx
@@ -692,6 +692,26 @@ function ErrorIcon({ className }) {
     /* @__PURE__ */ jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15" })
   ] });
 }
+function MicrophoneIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("path", { d: "M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" }),
+    /* @__PURE__ */ jsx("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "19", x2: "12", y2: "23" }),
+    /* @__PURE__ */ jsx("line", { x1: "8", y1: "23", x2: "16", y2: "23" })
+  ] });
+}
+function HomeIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("path", { d: "M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }),
+    /* @__PURE__ */ jsx("polyline", { points: "9 22 9 12 15 12 15 22" })
+  ] });
+}
+function ArrowUpIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "19", x2: "12", y2: "5" }),
+    /* @__PURE__ */ jsx("polyline", { points: "5 12 12 5 19 12" })
+  ] });
+}
 function StatusIndicator({ status, size = "sm", className }) {
   const sizeClasses = {
     sm: "w-2 h-2",
@@ -752,14 +772,41 @@ function CodeBlock({
   className
 }) {
   const [expanded, setExpanded] = useState(false);
+  const [copied, setCopied] = useState(false);
   const lines = children.split("\n");
   const isLong = lines.length > 10 || children.length > 500;
-  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(children);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch (err) {
+      console.error("Failed to copy:", err);
+    }
+  }, [children]);
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative rounded-lg overflow-hidden border border-white/10", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2 bg-[var(--ash-code-header-bg)] border-b border-white/10", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-white/60 font-medium", children: language || "code" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleCopy,
+          className: "flex items-center gap-1.5 text-xs text-white/60 hover:text-white transition-colors",
+          children: copied ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(CheckIcon, { className: "w-3.5 h-3.5" }),
+            /* @__PURE__ */ jsx("span", { children: "Copied!" })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(CopyIcon, { className: "w-3.5 h-3.5" }),
+            /* @__PURE__ */ jsx("span", { children: "Copy" })
+          ] })
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsx(
       "pre",
       {
         className: cn(
-          "ash-tool-code-block text-xs font-mono text-white/90 p-3 rounded-xl overflow-x-auto whitespace-pre-wrap break-words",
+          "text-xs font-mono text-white/90 p-4 bg-black/30 overflow-x-auto whitespace-pre-wrap break-words",
           !expanded && isLong && "overflow-y-hidden"
         ),
         style: !expanded && isLong ? { maxHeight } : void 0,
@@ -943,7 +990,7 @@ function SectionHeader({ children }) {
   return /* @__PURE__ */ jsx("div", { className: "ash-tool-section-header", children });
 }
 function SectionContent({ children }) {
-  return /* @__PURE__ */ jsx("div", { className: "px-3 py-2", children });
+  return /* @__PURE__ */ jsx("div", { className: "px-3 py-1.5", children });
 }
 function CommandRunDetails({ action }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -1064,7 +1111,7 @@ function WebSearchDetails({ action }) {
     /* @__PURE__ */ jsx(SectionContent, { children: /* @__PURE__ */ jsx("span", { className: "text-sm text-white/90", children: action.query }) })
   ] });
 }
-function McpToolDetails({ action }) {
+function McpToolDetails({ action, isError }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(SectionHeader, { children: "TOOL" }),
     /* @__PURE__ */ jsx(SectionContent, { children: /* @__PURE__ */ jsxs("code", { className: "text-xs font-mono bg-white/10 text-white/90 px-1 py-0.5 rounded", children: [
@@ -1077,20 +1124,20 @@ function McpToolDetails({ action }) {
       /* @__PURE__ */ jsx(SectionContent, { children: /* @__PURE__ */ jsx(JsonDisplay, { value: action.arguments }) })
     ] }),
     action.result && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(SectionHeader, { children: "RESULT" }),
-      /* @__PURE__ */ jsx(SectionContent, { children: action.result.type === "markdown" ? /* @__PURE__ */ jsx(CodeBlock, { children: String(action.result.value) }) : /* @__PURE__ */ jsx(JsonDisplay, { value: action.result.value }) })
+      /* @__PURE__ */ jsx(SectionHeader, { children: isError ? "ERROR" : "RESULT" }),
+      /* @__PURE__ */ jsx(SectionContent, { children: /* @__PURE__ */ jsx("div", { className: isError ? "text-red-400" : "", children: action.result.type === "markdown" ? /* @__PURE__ */ jsx(CodeBlock, { children: String(action.result.value) }) : /* @__PURE__ */ jsx(JsonDisplay, { value: action.result.value }) }) })
     ] })
   ] });
 }
-function GenericToolDetails({ action }) {
+function GenericToolDetails({ action, isError }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     action.arguments && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(SectionHeader, { children: "ARGS" }),
       /* @__PURE__ */ jsx(SectionContent, { children: /* @__PURE__ */ jsx(JsonDisplay, { value: action.arguments }) })
     ] }),
     action.result && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(SectionHeader, { children: "RESULT" }),
-      /* @__PURE__ */ jsx(SectionContent, { children: action.result.type === "markdown" ? /* @__PURE__ */ jsx(CodeBlock, { children: String(action.result.value) }) : /* @__PURE__ */ jsx(JsonDisplay, { value: action.result.value }) })
+      /* @__PURE__ */ jsx(SectionHeader, { children: isError ? "ERROR" : "RESULT" }),
+      /* @__PURE__ */ jsx(SectionContent, { children: /* @__PURE__ */ jsx("div", { className: isError ? "text-red-400" : "", children: action.result.type === "markdown" ? /* @__PURE__ */ jsx(CodeBlock, { children: String(action.result.value) }) : /* @__PURE__ */ jsx(JsonDisplay, { value: action.result.value }) }) })
     ] })
   ] });
 }
@@ -1162,7 +1209,7 @@ function TodoWriteDetails({ action }) {
     }) }) })
   ] });
 }
-function ToolDetails({ actionType }) {
+function ToolDetails({ actionType, isError }) {
   switch (actionType.action) {
     case "command_run":
       return /* @__PURE__ */ jsx(CommandRunDetails, { action: actionType });
@@ -1181,9 +1228,9 @@ function ToolDetails({ actionType }) {
     case "web_search":
       return /* @__PURE__ */ jsx(WebSearchDetails, { action: actionType });
     case "mcp_tool":
-      return /* @__PURE__ */ jsx(McpToolDetails, { action: actionType });
+      return /* @__PURE__ */ jsx(McpToolDetails, { action: actionType, isError });
     case "generic_tool":
-      return /* @__PURE__ */ jsx(GenericToolDetails, { action: actionType });
+      return /* @__PURE__ */ jsx(GenericToolDetails, { action: actionType, isError });
     case "todo_write":
       return /* @__PURE__ */ jsx(TodoWriteDetails, { action: actionType });
     default:
@@ -1244,7 +1291,7 @@ function ToolCallCard({ toolCall, defaultExpanded = false, className }) {
     "div",
     {
       className: cn(
-        "rounded-xl border bg-[var(--ash-surface-dark,#0a0a0a)] overflow-hidden",
+        "rounded-lg border bg-[var(--ash-surface-dark,#0a0a0a)] overflow-hidden",
         statusClasses[status],
         className
       ),
@@ -1254,35 +1301,35 @@ function ToolCallCard({ toolCall, defaultExpanded = false, className }) {
           {
             onClick: () => canExpand && setExpanded(!expanded),
             className: cn(
-              "w-full px-4 py-3 flex items-center justify-between transition-colors",
+              "w-full px-3 py-2 flex items-center justify-between transition-colors",
               canExpand ? "hover:bg-white/5 cursor-pointer" : "cursor-default"
             ),
             disabled: !canExpand,
             children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: [
                 /* @__PURE__ */ jsx("div", { className: cn(
-                  "w-6 h-6 rounded-lg flex items-center justify-center shrink-0",
+                  "w-5 h-5 rounded flex items-center justify-center shrink-0",
                   status === "pending" ? "bg-yellow-500/20" : status === "failed" ? "bg-red-500/20" : "bg-[var(--ash-accent)]/20"
                 ), children: /* @__PURE__ */ jsx(
                   ActionIcon,
                   {
                     actionType,
                     className: cn(
-                      "w-3.5 h-3.5",
+                      "w-3 h-3",
                       status === "pending" ? "text-yellow-400" : status === "failed" ? "text-red-400" : "text-[var(--ash-accent)]"
                     )
                   }
                 ) }),
-                /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-white shrink-0", children: getActionLabel(actionType) }),
-                /* @__PURE__ */ jsx("span", { className: "font-mono text-sm truncate text-white/60 min-w-0", children: summary })
+                /* @__PURE__ */ jsx("span", { className: "text-[13px] font-medium text-white shrink-0", children: getActionLabel(actionType) }),
+                /* @__PURE__ */ jsx("span", { className: "font-mono text-[12px] truncate text-white/50 min-w-0", children: summary })
               ] }),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 shrink-0", children: [
                 /* @__PURE__ */ jsx(StatusIndicator, { status, size: "sm" }),
                 canExpand && /* @__PURE__ */ jsx(
                   ChevronDownIcon,
                   {
                     className: cn(
-                      "w-4 h-4 text-white/40 transition-transform duration-200",
+                      "w-3.5 h-3.5 text-white/30 transition-transform duration-200",
                       expanded && "rotate-180"
                     )
                   }
@@ -1291,11 +1338,15 @@ function ToolCallCard({ toolCall, defaultExpanded = false, className }) {
             ]
           }
         ),
-        expanded && canExpand && /* @__PURE__ */ jsxs("div", { className: "border-t border-white/5 max-h-[400px] overflow-y-auto ash-scrollbar bg-black/20", children: [
-          /* @__PURE__ */ jsx(ToolDetails, { actionType }),
-          status === "success" && /* @__PURE__ */ jsx("div", { className: "px-4 py-3 border-t border-white/5 bg-[var(--ash-accent)]/5", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(CheckIcon, { className: "w-4 h-4 text-[var(--ash-accent)]" }),
-            /* @__PURE__ */ jsx("span", { className: "text-sm text-[var(--ash-accent)] font-medium", children: "Completed successfully" })
+        expanded && canExpand && /* @__PURE__ */ jsxs("div", { className: "border-t border-white/5 max-h-[350px] overflow-y-auto ash-scrollbar bg-black/20", children: [
+          /* @__PURE__ */ jsx(ToolDetails, { actionType, isError: toolCall.isError || status === "failed" }),
+          status === "success" && /* @__PURE__ */ jsx("div", { className: "px-3 py-2 border-t border-white/5 bg-[var(--ash-accent)]/5", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx(CheckIcon, { className: "w-3.5 h-3.5 text-[var(--ash-accent)]" }),
+            /* @__PURE__ */ jsx("span", { className: "text-[12px] text-[var(--ash-accent)] font-medium", children: "Completed" })
+          ] }) }),
+          status === "failed" && /* @__PURE__ */ jsx("div", { className: "px-3 py-2 border-t border-red-500/20 bg-red-500/10", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx(XCircleIcon, { className: "w-3.5 h-3.5 text-red-400" }),
+            /* @__PURE__ */ jsx("span", { className: "text-[12px] text-red-400 font-medium", children: "Failed" })
           ] }) })
         ] })
       ]
@@ -1303,15 +1354,69 @@ function ToolCallCard({ toolCall, defaultExpanded = false, className }) {
   );
 }
 var ReactMarkdown = lazy(() => import('react-markdown'));
-function LazyMarkdown({ children, fallback, className }) {
+function LazyMarkdown({ children, fallback, components, className }) {
   const [mounted, setMounted] = useState(false);
   useEffect(() => {
     setMounted(true);
   }, []);
+  const markdownComponents = useMemo(() => {
+    if (!components) return void 0;
+    return components;
+  }, [components]);
   if (!mounted) {
     return /* @__PURE__ */ jsx("span", { className, children: fallback ?? children });
   }
-  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("span", { className, children: fallback ?? children }), children: /* @__PURE__ */ jsx(ReactMarkdown, { children }) });
+  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("span", { className, children: fallback ?? children }), children: /* @__PURE__ */ jsx(ReactMarkdown, { components: markdownComponents, children }) });
+}
+function DefaultMentionBadge({ segment }) {
+  const bgColor = segment.color ? `${segment.color}20` : "rgba(34, 197, 94, 0.2)";
+  const textColor = segment.color || "#22c55e";
+  const borderColor = segment.color ? `${segment.color}40` : "rgba(34, 197, 94, 0.4)";
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: "inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium mx-0.5",
+      style: {
+        backgroundColor: bgColor,
+        color: textColor,
+        border: `1px solid ${borderColor}`
+      },
+      title: segment.id ? `ID: ${segment.id}` : void 0,
+      children: [
+        "@",
+        segment.name
+      ]
+    }
+  );
+}
+function RichContentRenderer({
+  content,
+  renderers,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("rich-content", className), children: content.map((segment, index) => {
+    const key = `segment-${index}`;
+    switch (segment.type) {
+      case "text":
+        return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(LazyMarkdown, { children: segment.content }) }, key);
+      case "mention":
+        if (renderers?.renderMention) {
+          return /* @__PURE__ */ jsx(Fragment$1, { children: renderers.renderMention({ segment }) }, key);
+        }
+        return /* @__PURE__ */ jsx(DefaultMentionBadge, { segment }, key);
+      case "component":
+        if (renderers?.renderComponent) {
+          return /* @__PURE__ */ jsx(Fragment$1, { children: renderers.renderComponent({ segment }) }, key);
+        }
+        return /* @__PURE__ */ jsxs("code", { className: "text-xs text-orange-400", children: [
+          "[component: ",
+          segment.componentType,
+          "]"
+        ] }, key);
+      default:
+        return null;
+    }
+  }) });
 }
 function OptionCards({ options, onSelect, className }) {
   return /* @__PURE__ */ jsx("div", { className: cn("grid gap-2 mt-3", className), style: {
@@ -1361,6 +1466,36 @@ function OptionCards({ options, onSelect, className }) {
     option.id
   )) });
 }
+var scaleClasses = {
+  dense: {
+    text: "text-xs",
+    padding: "px-2 py-1",
+    gap: "gap-1.5",
+    avatar: "w-4 h-4",
+    messageGap: "space-y-0.5"
+  },
+  compact: {
+    text: "text-[13px]",
+    padding: "px-3 py-2",
+    gap: "gap-2",
+    avatar: "w-5 h-5",
+    messageGap: "space-y-1"
+  },
+  default: {
+    text: "text-sm",
+    padding: "px-4 py-3",
+    gap: "gap-3",
+    avatar: "w-6 h-6",
+    messageGap: "space-y-2"
+  },
+  comfortable: {
+    text: "text-[15px]",
+    padding: "px-5 py-4",
+    gap: "gap-4",
+    avatar: "w-7 h-7",
+    messageGap: "space-y-3"
+  }
+};
 function parseFilesFromContent(content) {
   const fileMarker = "[Uploaded files available at /uploads/]";
   const markerIndex = content.indexOf(fileMarker);
@@ -1372,97 +1507,229 @@ function parseFilesFromContent(content) {
   const files = fileSection.split("\n").filter((line) => line.startsWith("- ")).map((line) => line.substring(2).trim());
   return { text, files };
 }
-function UserMessage({ entry, className }) {
+function UserMessage({
+  entry,
+  variant = "bubble",
+  scale = "compact",
+  showAvatar = false,
+  // Hidden by default for ChatGPT style
+  showTimestamp = true,
+  renderMetadata,
+  metadata,
+  className
+}) {
   const { text, files } = parseFilesFromContent(entry.content);
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex gap-3 justify-end ash-animate-fade-in", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "max-w-[85%]", children: [
-      /* @__PURE__ */ jsx("div", { className: "rounded-2xl p-4 bg-[var(--ash-accent)] text-[var(--ash-accent-foreground)]", children: /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed whitespace-pre-wrap", children: text || "(files attached)" }) }),
-      files.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-2 pt-2 border-t border-[var(--ash-accent-foreground)]/20", children: [
-        /* @__PURE__ */ jsxs("div", { className: "text-xs text-[var(--ash-accent-foreground)]/60 mb-1 flex items-center gap-1", children: [
-          /* @__PURE__ */ jsx(PaperclipIcon, { className: "w-3 h-3" }),
-          "Attached Files"
+  const s = scaleClasses[scale];
+  const variantClasses = {
+    bubble: "rounded-[20px] bg-[var(--ash-user-bg)] text-[var(--ash-user-text)] border border-[var(--ash-user-border)]",
+    plain: "bg-transparent text-[var(--ash-text-primary)]",
+    minimal: "bg-transparent text-[var(--ash-text-secondary)]"
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-message-role": "user",
+      className: cn("flex justify-end ash-animate-fade-in pr-1", s.gap, className),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "max-w-[85%] flex flex-col items-end", children: [
+          /* @__PURE__ */ jsxs("div", { className: cn(variantClasses[variant], variant === "bubble" && "px-4 py-3"), children: [
+            /* @__PURE__ */ jsx("p", { className: cn(s.text, "leading-snug whitespace-pre-wrap"), children: text || "(files attached)" }),
+            files.length > 0 && variant === "bubble" && /* @__PURE__ */ jsx("div", { className: "mt-1.5 pt-1.5 border-t border-[var(--ash-user-text)]/15 flex flex-wrap gap-1", children: files.map((file, index) => /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: "inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-[var(--ash-user-text)]/10 text-[11px]",
+                title: file,
+                children: [
+                  /* @__PURE__ */ jsx(PaperclipIcon, { className: "w-2.5 h-2.5 opacity-60" }),
+                  file.split(" (")[0]
+                ]
+              },
+              index
+            )) })
+          ] }),
+          renderMetadata ? renderMetadata({ entry, metadata }) : showTimestamp && entry.timestamp && /* @__PURE__ */ jsxs("div", { className: "text-[10px] text-[var(--ash-text-faint)] mt-0.5 mr-1 tabular-nums flex items-center gap-1.5", children: [
+            metadata?.model && /* @__PURE__ */ jsx("span", { children: metadata.model }),
+            metadata?.model && /* @__PURE__ */ jsx("span", { className: "opacity-50", children: "\xB7" }),
+            formatTimestamp(entry.timestamp)
+          ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: files.map((file, index) => /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: "inline-flex items-center px-2 py-0.5 rounded-lg bg-[var(--ash-accent-foreground)]/10 text-xs",
-            title: file,
-            children: file.split(" (")[0]
-          },
-          index
-        )) })
-      ] }),
-      entry.timestamp && /* @__PURE__ */ jsx("div", { className: "text-xs text-white/40 mt-2", children: formatTimestamp(entry.timestamp) })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "w-7 h-7 rounded-full bg-white/10 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(UserIcon, { className: "w-4 h-4 text-white/50" }) })
-  ] });
+        showAvatar && /* @__PURE__ */ jsx("div", { className: cn(s.avatar, "rounded-full bg-[var(--ash-avatar-user-bg)] flex items-center justify-center shrink-0 mt-0.5"), children: /* @__PURE__ */ jsx(UserIcon, { className: "w-3 h-3 text-[var(--ash-text-muted)]" }) })
+      ]
+    }
+  );
 }
-function AssistantMessage({ entry, onOptionSelect, className }) {
-  const parsedOptions = parseOptionsFromContent(entry.content);
+function AssistantMessage({
+  entry,
+  variant = "bubble",
+  scale = "compact",
+  showAvatar = true,
+  showTimestamp = true,
+  onOptionSelect,
+  richContentRenderers,
+  markdownComponents,
+  renderMetadata,
+  metadata,
+  className
+}) {
+  const parsedOptions = !entry.richContent ? parseOptionsFromContent(entry.content) : null;
+  const s = scaleClasses[scale];
   const handleOptionSelect = (option) => {
     if (onOptionSelect) {
       onOptionSelect(`Option ${option.id}: ${option.label}`);
     }
   };
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex gap-3 ash-animate-fade-in", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "w-7 h-7 rounded-full bg-[var(--ash-accent)]/20 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(BotIcon, { className: "w-4 h-4 text-[var(--ash-accent)]" }) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex-1 max-w-[85%]", children: [
-      /* @__PURE__ */ jsx("div", { className: "ash-card-glass rounded-2xl p-4", children: /* @__PURE__ */ jsx("div", { className: "ash-message-content prose prose-sm prose-invert max-w-none text-sm leading-relaxed", children: parsedOptions ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        parsedOptions.preamble && /* @__PURE__ */ jsx(LazyMarkdown, { children: parsedOptions.preamble }),
-        /* @__PURE__ */ jsx(
-          OptionCards,
-          {
-            options: parsedOptions.options,
-            onSelect: handleOptionSelect
-          }
-        )
-      ] }) : /* @__PURE__ */ jsx(LazyMarkdown, { children: entry.content }) }) }),
-      entry.timestamp && /* @__PURE__ */ jsx("div", { className: "text-xs text-white/40 mt-2", children: formatTimestamp(entry.timestamp) })
-    ] })
-  ] });
+  const variantClasses = {
+    bubble: "rounded-[16px] bg-[var(--ash-assistant-bg)] border border-[var(--ash-assistant-border)]",
+    plain: "bg-transparent",
+    minimal: "bg-transparent"
+  };
+  const renderContent = (textContent) => {
+    if (entry.richContent && entry.richContent.length > 0) {
+      return /* @__PURE__ */ jsx(
+        RichContentRenderer,
+        {
+          content: entry.richContent,
+          renderers: richContentRenderers
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(LazyMarkdown, { components: markdownComponents, children: textContent || entry.content });
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-message-role": "assistant",
+      className: cn("flex ash-animate-fade-in pl-1", s.gap, className),
+      children: [
+        showAvatar && /* @__PURE__ */ jsx("div", { className: cn(s.avatar, "rounded-full bg-[var(--ash-avatar-assistant-bg)] flex items-center justify-center shrink-0 mt-0.5"), children: /* @__PURE__ */ jsx(SparklesIcon, { className: "w-3 h-3 text-white" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx("div", { className: cn(variantClasses[variant], variant === "bubble" && "px-4 py-3"), children: /* @__PURE__ */ jsx("div", { className: cn("ash-message-content prose prose-sm prose-invert max-w-none leading-relaxed text-[var(--ash-assistant-text)]", s.text), children: parsedOptions ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            parsedOptions.preamble && renderContent(parsedOptions.preamble),
+            /* @__PURE__ */ jsx(
+              OptionCards,
+              {
+                options: parsedOptions.options,
+                onSelect: handleOptionSelect
+              }
+            )
+          ] }) : renderContent() }) }),
+          renderMetadata ? renderMetadata({ entry, metadata }) : showTimestamp && entry.timestamp && /* @__PURE__ */ jsxs("div", { className: "text-[10px] text-[var(--ash-text-faint)] mt-0.5 ml-1 tabular-nums flex items-center gap-1.5", children: [
+            metadata?.model && /* @__PURE__ */ jsx("span", { children: metadata.model }),
+            metadata?.model && /* @__PURE__ */ jsx("span", { className: "opacity-50", children: "\xB7" }),
+            formatTimestamp(entry.timestamp)
+          ] })
+        ] })
+      ]
+    }
+  );
 }
-function ThinkingMessage({ entry, className }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex gap-3 ash-animate-fade-in", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "w-7 h-7 rounded-full bg-purple-500/20 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(SparklesIcon, { className: "w-4 h-4 text-purple-400" }) }),
-    /* @__PURE__ */ jsx("div", { className: "flex-1 max-w-[85%]", children: /* @__PURE__ */ jsxs("div", { className: "rounded-2xl p-4 bg-purple-500/10 border border-purple-500/30", children: [
-      /* @__PURE__ */ jsx("div", { className: "text-xs text-purple-400 mb-2 font-medium", children: "Thinking" }),
-      /* @__PURE__ */ jsx("div", { className: "text-sm text-purple-300 italic opacity-80 whitespace-pre-wrap leading-relaxed", children: entry.content })
-    ] }) })
-  ] });
+function ThinkingMessage({ entry, scale = "compact", showAvatar = true, className }) {
+  const s = scaleClasses[scale];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-message-role": "thinking",
+      className: cn("flex ash-animate-fade-in pl-1", s.gap, className),
+      children: [
+        showAvatar && /* @__PURE__ */ jsx("div", { className: cn(s.avatar, "rounded-md bg-[var(--ash-avatar-thinking-bg)] flex items-center justify-center shrink-0 mt-0.5"), children: /* @__PURE__ */ jsx(SparklesIcon, { className: "w-3 h-3 text-purple-400" }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg bg-[var(--ash-thinking-bg)] border border-[var(--ash-thinking-border)]", s.padding), children: [
+          /* @__PURE__ */ jsx("div", { className: "text-[10px] text-[var(--ash-thinking-text)] opacity-80 mb-1 font-medium uppercase tracking-wide", children: "Thinking" }),
+          /* @__PURE__ */ jsx("div", { className: cn(s.text, "text-[var(--ash-thinking-text)] opacity-70 italic whitespace-pre-wrap leading-relaxed"), children: entry.content })
+        ] }) })
+      ]
+    }
+  );
 }
-function ToolCallMessage({ entry, defaultExpanded = false, className }) {
+function ToolCallMessage({ entry, scale = "compact", showAvatar = true, defaultExpanded = false, className }) {
   if (entry.entryType.type !== "tool_call") return null;
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex gap-3 ash-animate-fade-in", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "w-7 h-7 rounded-full bg-[var(--ash-accent)]/20 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(BotIcon, { className: "w-4 h-4 text-[var(--ash-accent)]" }) }),
-    /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(ToolCallCard, { toolCall: entry.entryType.toolCall, defaultExpanded }) })
-  ] });
+  const s = scaleClasses[scale];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-message-role": "tool",
+      className: cn("flex ash-animate-fade-in pl-1", s.gap, className),
+      children: [
+        showAvatar && /* @__PURE__ */ jsx("div", { className: cn(s.avatar, "rounded-md bg-[var(--ash-avatar-assistant-bg)] flex items-center justify-center shrink-0 mt-0.5"), children: /* @__PURE__ */ jsx(BotIcon, { className: "w-3 h-3 text-[var(--ash-accent)]" }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx(ToolCallCard, { toolCall: entry.entryType.toolCall, defaultExpanded }) })
+      ]
+    }
+  );
 }
-function ErrorMessage({ entry, className }) {
+function ErrorMessage({ entry, scale = "compact", showAvatar = true, className }) {
   if (entry.entryType.type !== "error") return null;
-  return /* @__PURE__ */ jsxs("div", { className: cn("flex gap-3 ash-animate-fade-in", className), children: [
-    /* @__PURE__ */ jsx("div", { className: "w-7 h-7 rounded-full bg-red-500/20 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(AlertTriangleIcon, { className: "w-4 h-4 text-red-400" }) }),
-    /* @__PURE__ */ jsx("div", { className: "flex-1 max-w-[85%]", children: /* @__PURE__ */ jsxs("div", { className: "rounded-2xl p-4 bg-red-500/10 border border-red-500/30", children: [
-      /* @__PURE__ */ jsx("div", { className: "text-xs text-red-400 mb-2 font-medium", children: "Error" }),
-      /* @__PURE__ */ jsx("p", { className: "text-sm text-red-300", children: entry.entryType.message }),
-      entry.entryType.code && /* @__PURE__ */ jsxs("p", { className: "text-xs text-red-400/70 mt-2 font-mono", children: [
-        "Code: ",
-        entry.entryType.code
-      ] })
-    ] }) })
-  ] });
+  const s = scaleClasses[scale];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-message-role": "error",
+      className: cn("flex ash-animate-fade-in pl-1", s.gap, className),
+      children: [
+        showAvatar && /* @__PURE__ */ jsx("div", { className: cn(s.avatar, "rounded-md bg-[var(--ash-avatar-error-bg)] flex items-center justify-center shrink-0 mt-0.5"), children: /* @__PURE__ */ jsx(AlertTriangleIcon, { className: "w-3 h-3 text-red-400" }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg bg-[var(--ash-error-bg)] border border-[var(--ash-error-border)]", s.padding), children: [
+          /* @__PURE__ */ jsx("div", { className: "text-[10px] text-[var(--ash-error-text)] opacity-80 mb-1 font-medium uppercase tracking-wide", children: "Error" }),
+          /* @__PURE__ */ jsx("p", { className: cn(s.text, "text-[var(--ash-error-text)] opacity-90"), children: entry.entryType.message }),
+          entry.entryType.code && /* @__PURE__ */ jsxs("p", { className: "text-[11px] text-[var(--ash-error-text)] opacity-60 mt-1 font-mono", children: [
+            "Code: ",
+            entry.entryType.code
+          ] })
+        ] }) })
+      ]
+    }
+  );
 }
-function MessageEntry({ entry, onOptionSelect, defaultExpanded, className }) {
+function MessageEntry({
+  entry,
+  onOptionSelect,
+  defaultExpanded,
+  richContentRenderers,
+  markdownComponents,
+  userVariant,
+  assistantVariant,
+  scale,
+  showAvatars = true,
+  showTimestamp = true,
+  renderMetadata,
+  metadata,
+  className
+}) {
   switch (entry.entryType.type) {
     case "user_message":
-      return /* @__PURE__ */ jsx(UserMessage, { entry, className });
+      return /* @__PURE__ */ jsx(
+        UserMessage,
+        {
+          entry,
+          variant: userVariant,
+          scale,
+          showAvatar: showAvatars,
+          showTimestamp,
+          renderMetadata,
+          metadata,
+          className
+        }
+      );
     case "assistant_message":
-      return /* @__PURE__ */ jsx(AssistantMessage, { entry, onOptionSelect, className });
+      return /* @__PURE__ */ jsx(
+        AssistantMessage,
+        {
+          entry,
+          variant: assistantVariant,
+          scale,
+          showAvatar: showAvatars,
+          showTimestamp,
+          onOptionSelect,
+          richContentRenderers,
+          markdownComponents,
+          renderMetadata,
+          metadata,
+          className
+        }
+      );
     case "thinking":
-      return /* @__PURE__ */ jsx(ThinkingMessage, { entry, className });
+      return /* @__PURE__ */ jsx(ThinkingMessage, { entry, scale, showAvatar: showAvatars, className });
     case "tool_call":
-      return /* @__PURE__ */ jsx(ToolCallMessage, { entry, defaultExpanded, className });
+      return /* @__PURE__ */ jsx(ToolCallMessage, { entry, scale, showAvatar: showAvatars, defaultExpanded, className });
     case "error":
-      return /* @__PURE__ */ jsx(ErrorMessage, { entry, className });
+      return /* @__PURE__ */ jsx(ErrorMessage, { entry, scale, showAvatar: showAvatars, className });
     default:
       return null;
   }
@@ -2081,6 +2348,13 @@ var DEFAULT_DISPLAY_CONFIG = {
   defaultExpanded: false,
   animationDuration: 300
 };
+var DEFAULT_STYLE_CONFIG = {
+  userVariant: "bubble",
+  assistantVariant: "bubble",
+  scale: "compact",
+  showTimestamp: true,
+  showAvatars: true
+};
 var DisplayModeContext = createContext(null);
 function DisplayModeProvider({ children, initialConfig }) {
   const [config, setConfigState] = useState({
@@ -2133,6 +2407,15 @@ function MessageList({
   renderWidget,
   onWidgetAction,
   autoScroll = true,
+  richContentRenderers,
+  userVariant,
+  assistantVariant,
+  scale,
+  showAvatars = true,
+  showTimestamp = true,
+  markdownComponents,
+  renderMetadata,
+  metadata,
   className
 }) {
   const contextConfig = useDisplayConfig();
@@ -2167,7 +2450,8 @@ function MessageList({
     }
     return groupEntriesForCompactMode(entries, config);
   }, [entries, config]);
-  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: cn("flex-1 overflow-y-auto p-4 space-y-4 ash-scrollbar", className), children: [
+  const densityClass = scale ? `ash-density-${scale}` : void 0;
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: cn("flex-1 overflow-y-auto px-3 py-2 space-y-1 ash-scrollbar", densityClass, className), children: [
     groupedEntries.map((groupedEntry) => {
       if (groupedEntry.type === "single") {
         const entry = groupedEntry.entry;
@@ -2183,12 +2467,29 @@ function MessageList({
             return /* @__PURE__ */ jsx("div", { className: "ash-animate-fade-in", children: widgetContent }, entry.id);
           }
         }
-        return /* @__PURE__ */ jsx(MessageEntry, { entry, onOptionSelect, defaultExpanded: config.defaultExpanded }, entry.id);
+        return /* @__PURE__ */ jsx(
+          MessageEntry,
+          {
+            entry,
+            onOptionSelect,
+            defaultExpanded: config.defaultExpanded,
+            richContentRenderers,
+            markdownComponents,
+            userVariant,
+            assistantVariant,
+            scale,
+            showAvatars,
+            showTimestamp,
+            renderMetadata,
+            metadata
+          },
+          entry.id
+        );
       }
       const toolCalls = extractToolCallsFromGroup(groupedEntry.entries);
-      return /* @__PURE__ */ jsxs("div", { className: "flex gap-3 ash-animate-fade-in", children: [
-        /* @__PURE__ */ jsx("div", { className: "w-7 h-7 rounded-full bg-[var(--ash-accent)]/20 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(BotIcon, { className: "w-4 h-4 text-[var(--ash-accent)]" }) }),
-        /* @__PURE__ */ jsx("div", { className: "flex-1", children: config.mode === "accordion" ? /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsxs("div", { className: "ash-message-row flex ash-animate-fade-in pl-1", style: { gap: "var(--ash-message-gap, 0.5rem)" }, children: [
+        showAvatars && /* @__PURE__ */ jsx("div", { className: "ash-avatar rounded-md bg-[var(--ash-avatar-assistant-bg)] flex items-center justify-center shrink-0 mt-0.5", style: { width: "var(--ash-avatar-size, 1.25rem)", height: "var(--ash-avatar-size, 1.25rem)" }, children: /* @__PURE__ */ jsx(BotIcon, { className: "w-3 h-3 text-[var(--ash-accent)]" }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: config.mode === "accordion" ? /* @__PURE__ */ jsx(
           StepAccordion,
           {
             toolCalls,
@@ -2204,13 +2505,13 @@ function MessageList({
         ) })
       ] }, groupedEntry.id);
     }),
-    streamingContent && /* @__PURE__ */ jsxs("div", { className: "flex gap-3 ash-animate-fade-in", children: [
-      /* @__PURE__ */ jsx("div", { className: "w-7 h-7 rounded-full bg-[var(--ash-accent)]/20 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(BotIcon, { className: "w-4 h-4 text-[var(--ash-accent)]" }) }),
-      /* @__PURE__ */ jsx("div", { className: "flex-1 max-w-[85%]", children: /* @__PURE__ */ jsx("div", { className: "rounded-xl p-3 bg-white/5 text-white/80", children: /* @__PURE__ */ jsx(StreamingText, { content: streamingContent, isStreaming: true }) }) })
+    streamingContent && /* @__PURE__ */ jsxs("div", { className: "ash-message-row flex ash-animate-fade-in pl-1", style: { gap: "var(--ash-message-gap, 0.5rem)" }, children: [
+      showAvatars && /* @__PURE__ */ jsx("div", { className: "ash-avatar rounded-md bg-[var(--ash-avatar-assistant-bg)] flex items-center justify-center shrink-0 mt-0.5", style: { width: "var(--ash-avatar-size, 1.25rem)", height: "var(--ash-avatar-size, 1.25rem)" }, children: /* @__PURE__ */ jsx(BotIcon, { className: "w-3 h-3 text-[var(--ash-accent)]" }) }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx("div", { className: "ash-message-bubble rounded-lg bg-white/[0.03] text-white/80 leading-relaxed", style: { padding: "var(--ash-message-padding, 0.5rem 0.75rem)", fontSize: "var(--ash-font-size-base, 13px)" }, children: /* @__PURE__ */ jsx(StreamingText, { content: streamingContent, isStreaming: true }) }) })
     ] }),
-    loading && !streamingContent && /* @__PURE__ */ jsxs("div", { className: "flex gap-3 ash-animate-fade-in", children: [
-      /* @__PURE__ */ jsx("div", { className: "w-7 h-7 rounded-full bg-[var(--ash-accent)]/20 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(BotIcon, { className: "w-4 h-4 text-[var(--ash-accent)]" }) }),
-      /* @__PURE__ */ jsx("div", { className: "rounded-xl p-3 bg-white/5", children: /* @__PURE__ */ jsx(LoadingIndicator, { variant: "dots" }) })
+    loading && !streamingContent && /* @__PURE__ */ jsxs("div", { className: "ash-message-row flex ash-animate-fade-in pl-1", style: { gap: "var(--ash-message-gap, 0.5rem)" }, children: [
+      showAvatars && /* @__PURE__ */ jsx("div", { className: "ash-avatar rounded-md bg-[var(--ash-avatar-assistant-bg)] flex items-center justify-center shrink-0 mt-0.5", style: { width: "var(--ash-avatar-size, 1.25rem)", height: "var(--ash-avatar-size, 1.25rem)" }, children: /* @__PURE__ */ jsx(BotIcon, { className: "w-3 h-3 text-[var(--ash-accent)]" }) }),
+      /* @__PURE__ */ jsx("div", { className: "rounded-lg px-3 py-1.5 bg-white/[0.03]", children: /* @__PURE__ */ jsx(LoadingIndicator, { variant: "dots" }) })
     ] }),
     /* @__PURE__ */ jsx("div", { ref: messagesEndRef })
   ] });
@@ -3027,6 +3328,21 @@ var typography = {
     relaxed: "1.75"
   }
 };
+var cssVars = {
+  fontSize: {
+    base: "--ash-font-size-base",
+    sm: "--ash-font-size-sm",
+    xs: "--ash-font-size-xs",
+    code: "--ash-font-size-code"
+  },
+  accent: "--ash-accent",
+  accentForeground: "--ash-accent-foreground",
+  surfaceDark: "--ash-surface-dark",
+  surfaceDarker: "--ash-surface-darker",
+  surfaceCard: "--ash-surface-card",
+  surfaceElevated: "--ash-surface-elevated",
+  surfaceBorder: "--ash-surface-border"
+};
 var keyframes = {
   slideUp: {
     from: { opacity: "0", transform: "translateY(20px)" },
@@ -3145,6 +3461,10 @@ function tokensToCssVariables(prefix = "ash") {
     if (key !== "DEFAULT") vars[`--${prefix}-border-${key}`] = value;
     else vars[`--${prefix}-border`] = value;
   });
+  vars[`--${prefix}-font-size-base`] = "14px";
+  vars[`--${prefix}-font-size-sm`] = "12px";
+  vars[`--${prefix}-font-size-xs`] = "11px";
+  vars[`--${prefix}-font-size-code`] = "13px";
   return vars;
 }
 var inlineStyles = {
@@ -3400,19 +3720,95 @@ function useFileUpload({
     openFilePicker
   };
 }
+
+// src/hooks/middleware.ts
+async function applyRequestMiddleware(middlewares, request) {
+  let current = { ...request };
+  for (const mw of middlewares) {
+    if (mw.onRequest) {
+      try {
+        const result = await mw.onRequest(current);
+        if (result?.error) {
+          return { request: current, error: result.error };
+        }
+        if (result) {
+          current = {
+            ...current,
+            prompt: result.prompt ?? current.prompt,
+            sessionContext: result.sessionContext ?? current.sessionContext,
+            metadata: {
+              ...current.metadata,
+              ...result.metadata
+            }
+          };
+        }
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : "Middleware error";
+        return { request: current, error: errorMessage };
+      }
+    }
+  }
+  return { request: current };
+}
+async function applyEventMiddleware(middlewares, event) {
+  let current = event;
+  for (const mw of middlewares) {
+    if (!current) break;
+    if (mw.onEvent) {
+      try {
+        current = await mw.onEvent(current);
+      } catch (err) {
+        console.error("[middleware] onEvent error:", err);
+      }
+    }
+  }
+  return current;
+}
+async function callMiddlewareComplete(middlewares, sessionId) {
+  for (const mw of middlewares) {
+    if (mw.onComplete) {
+      try {
+        await mw.onComplete(sessionId);
+      } catch (err) {
+        console.error("[middleware] onComplete error:", err);
+      }
+    }
+  }
+}
+async function callMiddlewareError(middlewares, error) {
+  for (const mw of middlewares) {
+    if (mw.onError) {
+      try {
+        await mw.onError(error);
+      } catch (err) {
+        console.error("[middleware] onError error:", err);
+      }
+    }
+  }
+}
+
+// src/hooks/useAgentChat.ts
 function useAgentChat(options) {
   const {
     createStream,
+    subscribeToSession,
     initialSessionId,
     initialEntries = [],
     onSessionStart,
     onSessionEnd,
     onError,
-    onSandboxLog
+    onSandboxLog,
+    onReconnect,
+    maxReconnectAttempts = 3,
+    reconnectBaseDelay = 1e3,
+    onBeforeSend,
+    onEvent,
+    middleware
   } = options;
   const [historyEntries, setHistoryEntries] = useState(initialEntries);
   const [streamingEntries, setStreamingEntries] = useState([]);
   const [isStreaming, setIsStreaming] = useState(false);
+  const [isReconnecting, setIsReconnecting] = useState(false);
   const [error, setError] = useState(null);
   const [sessionId, setSessionId] = useState(initialSessionId || null);
   const abortControllerRef = useRef(null);
@@ -3420,6 +3816,16 @@ function useAgentChat(options) {
   const currentTextIdRef = useRef(null);
   const pendingToolCallsRef = useRef(/* @__PURE__ */ new Map());
   const hadToolCallSinceTextRef = useRef(false);
+  const reconnectAttemptsRef = useRef(0);
+  const eventCountRef = useRef(0);
+  const sessionIdRef = useRef(sessionId);
+  const streamingEntriesRef = useRef([]);
+  useEffect(() => {
+    sessionIdRef.current = sessionId;
+  }, [sessionId]);
+  useEffect(() => {
+    streamingEntriesRef.current = streamingEntries;
+  }, [streamingEntries]);
   const entries = [...historyEntries, ...streamingEntries];
   const emitStreamingEntries = useCallback((newEntries) => {
     setStreamingEntries([...newEntries]);
@@ -3534,7 +3940,7 @@ function useAgentChat(options) {
           setError(event.error);
           onError?.(event.error);
           newEntries.push({
-            id: `error-${Date.now()}`,
+            id: `error-${Date.now()}-${Math.random().toString(36).slice(2)}`,
             timestamp: (/* @__PURE__ */ new Date()).toISOString(),
             entryType: { type: "error", message: event.error, code: event.code },
             content: event.error
@@ -3553,12 +3959,112 @@ function useAgentChat(options) {
     }
     return newEntries;
   }, [sessionId, onSessionStart, onSessionEnd, onError, onSandboxLog, createTextEntry, resetStreamingState]);
+  const attemptReconnect = useCallback(async (targetSessionId, currentEntries) => {
+    if (!subscribeToSession) {
+      return false;
+    }
+    const attempt = reconnectAttemptsRef.current + 1;
+    if (attempt > maxReconnectAttempts) {
+      console.warn(`[useAgentChat] Max reconnection attempts (${maxReconnectAttempts}) exceeded`);
+      return false;
+    }
+    reconnectAttemptsRef.current = attempt;
+    setIsReconnecting(true);
+    onReconnect?.(attempt, targetSessionId);
+    const delay = reconnectBaseDelay * Math.pow(2, attempt - 1);
+    console.log(`[useAgentChat] Reconnection attempt ${attempt}/${maxReconnectAttempts} in ${delay}ms`);
+    await new Promise((resolve) => setTimeout(resolve, delay));
+    const controller = new AbortController();
+    abortControllerRef.current = controller;
+    try {
+      const stream = subscribeToSession(targetSessionId, controller.signal);
+      let localStreamingEntries = [...currentEntries];
+      for await (const event of stream) {
+        if (controller.signal.aborted) break;
+        eventCountRef.current++;
+        localStreamingEntries = processEvent(event, localStreamingEntries);
+        emitStreamingEntries(localStreamingEntries);
+        if (event.type === "complete" || event.type === "session_end" || event.type === "error") {
+          reconnectAttemptsRef.current = 0;
+          setIsReconnecting(false);
+          if (event.type === "complete" && localStreamingEntries.length > 0) {
+            setHistoryEntries((prev) => [...prev, ...localStreamingEntries]);
+            setStreamingEntries([]);
+          }
+          return true;
+        }
+      }
+      reconnectAttemptsRef.current = 0;
+      setIsReconnecting(false);
+      if (localStreamingEntries.length > 0) {
+        setHistoryEntries((prev) => [...prev, ...localStreamingEntries]);
+        setStreamingEntries([]);
+      }
+      return true;
+    } catch (err) {
+      const isAbort = err.name === "AbortError" || err.message?.includes("aborted") || err.message?.includes("BodyStreamBuffer");
+      if (isAbort && !controller.signal.aborted) {
+        console.log(`[useAgentChat] Reconnection stream interrupted, will retry...`);
+        setIsReconnecting(false);
+        return attemptReconnect(targetSessionId, streamingEntriesRef.current);
+      }
+      setIsReconnecting(false);
+      if (!controller.signal.aborted) {
+        const errorMessage = err instanceof Error ? err.message : "Reconnection failed";
+        console.error(`[useAgentChat] Reconnection failed:`, errorMessage);
+      }
+      return false;
+    }
+  }, [subscribeToSession, maxReconnectAttempts, reconnectBaseDelay, onReconnect, processEvent, emitStreamingEntries]);
   const send = useCallback(async (prompt) => {
     if (isStreaming) return;
+    let finalPrompt = prompt;
+    let additionalMetadata = {};
+    let additionalContext;
+    if (onBeforeSend) {
+      try {
+        const result = await onBeforeSend({
+          prompt,
+          sessionId,
+          entries: [...historyEntries, ...streamingEntries]
+        });
+        if (result?.cancel) {
+          return;
+        }
+        if (result?.prompt !== void 0) finalPrompt = result.prompt;
+        if (result?.metadata) additionalMetadata = result.metadata;
+        if (result?.sessionContext) additionalContext = result.sessionContext;
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : "Send cancelled";
+        setError(errorMessage);
+        onError?.(errorMessage);
+        return;
+      }
+    }
+    if (middleware?.length) {
+      const middlewareRequest = {
+        prompt: finalPrompt,
+        sessionId,
+        metadata: additionalMetadata,
+        sessionContext: additionalContext
+      };
+      const { request, error: middlewareError } = await applyRequestMiddleware(middleware, middlewareRequest);
+      if (middlewareError) {
+        setError(middlewareError);
+        onError?.(middlewareError);
+        await callMiddlewareError(middleware, middlewareError);
+        return;
+      }
+      finalPrompt = request.prompt;
+      additionalMetadata = request.metadata || {};
+      additionalContext = request.sessionContext;
+    }
     setIsStreaming(true);
     setError(null);
+    reconnectAttemptsRef.current = 0;
+    eventCountRef.current = 0;
     const userEntry = {
-      id: `user-${Date.now()}`,
+      id: `user-${Date.now()}-${Math.random().toString(36).slice(2)}`,
       timestamp: (/* @__PURE__ */ new Date()).toISOString(),
       entryType: { type: "user_message" },
       content: prompt
@@ -3568,39 +4074,91 @@ function useAgentChat(options) {
     const controller = new AbortController();
     abortControllerRef.current = controller;
     let localStreamingEntries = [];
+    let completedSessionId = null;
     try {
-      const stream = createStream(prompt, sessionId || void 0, controller.signal);
+      const stream = createStream(finalPrompt, sessionId || void 0, {
+        signal: controller.signal,
+        metadata: Object.keys(additionalMetadata).length > 0 ? additionalMetadata : void 0,
+        sessionContext: additionalContext
+      });
       for await (const event of stream) {
         if (controller.signal.aborted) break;
-        localStreamingEntries = processEvent(event, localStreamingEntries);
+        eventCountRef.current++;
+        if (event.type === "session_start" && event.sessionId) {
+          completedSessionId = event.sessionId;
+        }
+        if (onEvent) {
+          try {
+            await onEvent(event);
+          } catch (err) {
+            console.error("[useAgentChat] onEvent error:", err);
+          }
+        }
+        let processedEvent = event;
+        if (middleware?.length) {
+          processedEvent = await applyEventMiddleware(middleware, event);
+        }
+        if (!processedEvent) continue;
+        localStreamingEntries = processEvent(processedEvent, localStreamingEntries);
         emitStreamingEntries(localStreamingEntries);
       }
       if (localStreamingEntries.length > 0) {
         setHistoryEntries((prev) => [...prev, ...localStreamingEntries]);
         setStreamingEntries([]);
       }
+      reconnectAttemptsRef.current = 0;
+      if (middleware?.length && (completedSessionId || sessionIdRef.current)) {
+        await callMiddlewareComplete(middleware, completedSessionId || sessionIdRef.current || "");
+      }
     } catch (err) {
-      if (err.name !== "AbortError") {
+      const isAbort = err.name === "AbortError" || err.message?.includes("aborted") || err.message?.includes("BodyStreamBuffer");
+      if (isAbort && !controller.signal.aborted) {
+        const currentSessionId = sessionIdRef.current;
+        const hadEvents = eventCountRef.current > 0;
+        console.log(`[useAgentChat] Stream interrupted. sessionId=${currentSessionId}, events=${eventCountRef.current}`);
+        if (currentSessionId && hadEvents && subscribeToSession) {
+          console.log(`[useAgentChat] Attempting auto-reconnection...`);
+          const reconnected = await attemptReconnect(currentSessionId, streamingEntriesRef.current);
+          if (reconnected) {
+            return;
+          }
+          const errorMsg = "Connection lost. Please try again.";
+          setError(errorMsg);
+          onError?.(errorMsg);
+          if (middleware?.length) {
+            await callMiddlewareError(middleware, errorMsg);
+          }
+        }
+      } else if (!isAbort) {
         const errorMessage = err instanceof Error ? err.message : "Unknown error";
         setError(errorMessage);
         onError?.(errorMessage);
+        if (middleware?.length) {
+          await callMiddlewareError(middleware, errorMessage);
+        }
       }
     } finally {
       setIsStreaming(false);
+      setIsReconnecting(false);
       abortControllerRef.current = null;
       resetStreamingState();
     }
-  }, [isStreaming, sessionId, createStream, processEvent, emitStreamingEntries, resetStreamingState, onError]);
+  }, [isStreaming, sessionId, historyEntries, streamingEntries, createStream, subscribeToSession, processEvent, emitStreamingEntries, resetStreamingState, onError, attemptReconnect, onBeforeSend, onEvent, middleware]);
   const stop = useCallback(() => {
+    reconnectAttemptsRef.current = maxReconnectAttempts + 1;
+    setIsReconnecting(false);
     if (abortControllerRef.current) {
       abortControllerRef.current.abort();
     }
-  }, []);
+  }, [maxReconnectAttempts]);
   const clear = useCallback(() => {
     setHistoryEntries([]);
     resetStreamingState();
     setSessionId(initialSessionId || null);
     setError(null);
+    setIsReconnecting(false);
+    reconnectAttemptsRef.current = 0;
+    eventCountRef.current = 0;
   }, [initialSessionId, resetStreamingState]);
   const setEntries = useCallback((newEntries) => {
     resetStreamingState();
@@ -3616,6 +4174,7 @@ function useAgentChat(options) {
   return {
     entries,
     isStreaming,
+    isReconnecting,
     error,
     sessionId,
     send,
@@ -3697,6 +4256,6 @@ function useLongTextConversion({
   };
 }
 
-export { ActionIcon, AgentToolCard, AlertCircleIcon, AlertTriangleIcon, AssistantMessage, BotIcon, BrainIcon, BugIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, ClipboardListIcon, ClockIcon, CodeBlock, CodeIcon, CompactToolRow, CompactToolStatusLine, CopyIcon, DEFAULT_DISPLAY_CONFIG, DisplayModeProvider, DisplayModeToggle, EditIcon, EnvVarsPanel, ErrorIcon, ErrorMessage, FileBadge, FileIcon, FilePlusIcon, FolderSearchIcon, GlobeIcon, InfoIcon, JsonDisplay, LazyMarkdown, ListChecksIcon, LoaderIcon, LoadingIndicator, LogsPanel, MessageEntry, MessageList, MessageSquareIcon, MoonIcon, OptionCards, PaperclipIcon, PlugIcon, SearchIcon, SendIcon, SparklesIcon, SpinnerIcon, StatusIndicator, StepAccordion, StopCircleIcon, StreamingText, SunIcon, TerminalIcon, ThemeProvider, ThinkingMessage, TodoPanel, ToolCallCard, ToolCallMessage, ToolExecutionGroup, ToolIcon, TypewriterText, UserIcon, UserMessage, XCircleIcon, XIcon, allKeyframesCss, borderRadius, cn, colors, createToolCall, extractTextContent, extractToolCallsFromGroup, formatElapsedTime, formatFileSize, formatTimestamp, formatToolName, generateToolSummary, getActionIcon, getActionLabel, groupEntriesForCompactMode, inlineStyles, isAgentToolAction, isCommandRunAction, isErrorEntry, isFileEditAction, isFileReadAction, isFileWriteAction, isGenericToolAction, isGlobAction, isMcpToolAction, isSearchAction, isTodoWriteAction, isToolCallEntry, isWebFetchAction, isWebSearchAction, isWidgetEntry, keyframes, keyframesCss, mapToolToActionType, normalizeToolResult, parseCommandResult, parseMcpToolName, parseOptionsFromContent, shadows, spacing, tokensToCssVariables, transitions, truncate, typography, updateToolCallWithResult, useAgentChat, useDisplayConfig, useDisplayMode, useFileUpload, useLongTextConversion, useMessageQueue, useStopExecution, useTheme, widget, zIndex };
+export { ActionIcon, AgentToolCard, AlertCircleIcon, AlertTriangleIcon, ArrowUpIcon, AssistantMessage, BotIcon, BrainIcon, BugIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, ClipboardListIcon, ClockIcon, CodeBlock, CodeIcon, CompactToolRow, CompactToolStatusLine, CopyIcon, DEFAULT_DISPLAY_CONFIG, DEFAULT_STYLE_CONFIG, DisplayModeProvider, DisplayModeToggle, EditIcon, EnvVarsPanel, ErrorIcon, ErrorMessage, FileBadge, FileIcon, FilePlusIcon, FolderSearchIcon, GlobeIcon, HomeIcon, InfoIcon, JsonDisplay, LazyMarkdown, ListChecksIcon, LoaderIcon, LoadingIndicator, LogsPanel, MessageEntry, MessageList, MessageSquareIcon, MicrophoneIcon, MoonIcon, OptionCards, PaperclipIcon, PlugIcon, RichContentRenderer, SearchIcon, SendIcon, SparklesIcon, SpinnerIcon, StatusIndicator, StepAccordion, StopCircleIcon, StreamingText, SunIcon, TerminalIcon, ThemeProvider, ThinkingMessage, TodoPanel, ToolCallCard, ToolCallMessage, ToolExecutionGroup, ToolIcon, TypewriterText, UserIcon, UserMessage, XCircleIcon, XIcon, allKeyframesCss, applyEventMiddleware, applyRequestMiddleware, borderRadius, callMiddlewareComplete, callMiddlewareError, cn, colors, createToolCall, cssVars, extractTextContent, extractToolCallsFromGroup, formatElapsedTime, formatFileSize, formatTimestamp, formatToolName, generateToolSummary, getActionIcon, getActionLabel, groupEntriesForCompactMode, inlineStyles, isAgentToolAction, isCommandRunAction, isErrorEntry, isFileEditAction, isFileReadAction, isFileWriteAction, isGenericToolAction, isGlobAction, isMcpToolAction, isSearchAction, isTodoWriteAction, isToolCallEntry, isWebFetchAction, isWebSearchAction, isWidgetEntry, keyframes, keyframesCss, mapToolToActionType, normalizeToolResult, parseCommandResult, parseMcpToolName, parseOptionsFromContent, shadows, spacing, tokensToCssVariables, transitions, truncate, typography, updateToolCallWithResult, useAgentChat, useDisplayConfig, useDisplayMode, useFileUpload, useLongTextConversion, useMessageQueue, useStopExecution, useTheme, widget, zIndex };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map