@ash-cloud/ash-ui 0.1.0 → 0.1.1

package/dist/index.cjs

@@ -694,6 +694,26 @@ function ErrorIcon({ className }) {
     /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15" })
   ] });
 }
+function MicrophoneIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "19", x2: "12", y2: "23" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "8", y1: "23", x2: "16", y2: "23" })
+  ] });
+}
+function HomeIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }),
+    /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "9 22 9 12 15 12 15 22" })
+  ] });
+}
+function ArrowUpIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "19", x2: "12", y2: "5" }),
+    /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "5 12 12 5 19 12" })
+  ] });
+}
 function StatusIndicator({ status, size = "sm", className }) {
   const sizeClasses = {
     sm: "w-2 h-2",
@@ -754,14 +774,41 @@ function CodeBlock({
   className
 }) {
   const [expanded, setExpanded] = react.useState(false);
+  const [copied, setCopied] = react.useState(false);
   const lines = children.split("\n");
   const isLong = lines.length > 10 || children.length > 500;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative", className), children: [
+  const handleCopy = react.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__ */ jsxRuntime.jsxs("div", { className: cn("relative rounded-lg overflow-hidden border border-white/10", className), children: [
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-xs text-white/60 font-medium", children: language || "code" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: handleCopy,
+          className: "flex items-center gap-1.5 text-xs text-white/60 hover:text-white transition-colors",
+          children: copied ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "w-3.5 h-3.5" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Copied!" })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(CopyIcon, { className: "w-3.5 h-3.5" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Copy" })
+          ] })
+        }
+      )
+    ] }),
     /* @__PURE__ */ jsxRuntime.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,
@@ -945,7 +992,7 @@ function SectionHeader({ children }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ash-tool-section-header", children });
 }
 function SectionContent({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2", children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-1.5", children });
 }
 function CommandRunDetails({ action }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -1066,7 +1113,7 @@ function WebSearchDetails({ action }) {
     /* @__PURE__ */ jsxRuntime.jsx(SectionContent, { children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-white/90", children: action.query }) })
   ] });
 }
-function McpToolDetails({ action }) {
+function McpToolDetails({ action, isError }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "TOOL" }),
     /* @__PURE__ */ jsxRuntime.jsx(SectionContent, { children: /* @__PURE__ */ jsxRuntime.jsxs("code", { className: "text-xs font-mono bg-white/10 text-white/90 px-1 py-0.5 rounded", children: [
@@ -1079,20 +1126,20 @@ function McpToolDetails({ action }) {
       /* @__PURE__ */ jsxRuntime.jsx(SectionContent, { children: /* @__PURE__ */ jsxRuntime.jsx(JsonDisplay, { value: action.arguments }) })
     ] }),
     action.result && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "RESULT" }),
-      /* @__PURE__ */ jsxRuntime.jsx(SectionContent, { children: action.result.type === "markdown" ? /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, { children: String(action.result.value) }) : /* @__PURE__ */ jsxRuntime.jsx(JsonDisplay, { value: action.result.value }) })
+      /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: isError ? "ERROR" : "RESULT" }),
+      /* @__PURE__ */ jsxRuntime.jsx(SectionContent, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: isError ? "text-red-400" : "", children: action.result.type === "markdown" ? /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, { children: String(action.result.value) }) : /* @__PURE__ */ jsxRuntime.jsx(JsonDisplay, { value: action.result.value }) }) })
     ] })
   ] });
 }
-function GenericToolDetails({ action }) {
+function GenericToolDetails({ action, isError }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     action.arguments && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "ARGS" }),
       /* @__PURE__ */ jsxRuntime.jsx(SectionContent, { children: /* @__PURE__ */ jsxRuntime.jsx(JsonDisplay, { value: action.arguments }) })
     ] }),
     action.result && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: "RESULT" }),
-      /* @__PURE__ */ jsxRuntime.jsx(SectionContent, { children: action.result.type === "markdown" ? /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, { children: String(action.result.value) }) : /* @__PURE__ */ jsxRuntime.jsx(JsonDisplay, { value: action.result.value }) })
+      /* @__PURE__ */ jsxRuntime.jsx(SectionHeader, { children: isError ? "ERROR" : "RESULT" }),
+      /* @__PURE__ */ jsxRuntime.jsx(SectionContent, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: isError ? "text-red-400" : "", children: action.result.type === "markdown" ? /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, { children: String(action.result.value) }) : /* @__PURE__ */ jsxRuntime.jsx(JsonDisplay, { value: action.result.value }) }) })
     ] })
   ] });
 }
@@ -1164,7 +1211,7 @@ function TodoWriteDetails({ action }) {
     }) }) })
   ] });
 }
-function ToolDetails({ actionType }) {
+function ToolDetails({ actionType, isError }) {
   switch (actionType.action) {
     case "command_run":
       return /* @__PURE__ */ jsxRuntime.jsx(CommandRunDetails, { action: actionType });
@@ -1183,9 +1230,9 @@ function ToolDetails({ actionType }) {
     case "web_search":
       return /* @__PURE__ */ jsxRuntime.jsx(WebSearchDetails, { action: actionType });
     case "mcp_tool":
-      return /* @__PURE__ */ jsxRuntime.jsx(McpToolDetails, { action: actionType });
+      return /* @__PURE__ */ jsxRuntime.jsx(McpToolDetails, { action: actionType, isError });
     case "generic_tool":
-      return /* @__PURE__ */ jsxRuntime.jsx(GenericToolDetails, { action: actionType });
+      return /* @__PURE__ */ jsxRuntime.jsx(GenericToolDetails, { action: actionType, isError });
     case "todo_write":
       return /* @__PURE__ */ jsxRuntime.jsx(TodoWriteDetails, { action: actionType });
     default:
@@ -1246,7 +1293,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
       ),
@@ -1256,35 +1303,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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: [
                 /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-white shrink-0", children: getActionLabel(actionType) }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-sm truncate text-white/60 min-w-0", children: summary })
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[13px] font-medium text-white shrink-0", children: getActionLabel(actionType) }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono text-[12px] truncate text-white/50 min-w-0", children: summary })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 shrink-0", children: [
                 /* @__PURE__ */ jsxRuntime.jsx(StatusIndicator, { status, size: "sm" }),
                 canExpand && /* @__PURE__ */ jsxRuntime.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"
                     )
                   }
@@ -1293,11 +1340,15 @@ function ToolCallCard({ toolCall, defaultExpanded = false, className }) {
             ]
           }
         ),
-        expanded && canExpand && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-white/5 max-h-[400px] overflow-y-auto ash-scrollbar bg-black/20", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ToolDetails, { actionType }),
-          status === "success" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-3 border-t border-white/5 bg-[var(--ash-accent)]/5", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "w-4 h-4 text-[var(--ash-accent)]" }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-[var(--ash-accent)] font-medium", children: "Completed successfully" })
+        expanded && canExpand && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-white/5 max-h-[350px] overflow-y-auto ash-scrollbar bg-black/20", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ToolDetails, { actionType, isError: toolCall.isError || status === "failed" }),
+          status === "success" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 border-t border-white/5 bg-[var(--ash-accent)]/5", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "w-3.5 h-3.5 text-[var(--ash-accent)]" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-[var(--ash-accent)] font-medium", children: "Completed" })
+          ] }) }),
+          status === "failed" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 py-2 border-t border-red-500/20 bg-red-500/10", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(XCircleIcon, { className: "w-3.5 h-3.5 text-red-400" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-red-400 font-medium", children: "Failed" })
           ] }) })
         ] })
       ]
@@ -1305,15 +1356,19 @@ function ToolCallCard({ toolCall, defaultExpanded = false, className }) {
   );
 }
 var ReactMarkdown = react.lazy(() => import('react-markdown'));
-function LazyMarkdown({ children, fallback, className }) {
+function LazyMarkdown({ children, fallback, components, className }) {
   const [mounted, setMounted] = react.useState(false);
   react.useEffect(() => {
     setMounted(true);
   }, []);
+  const markdownComponents = react.useMemo(() => {
+    if (!components) return void 0;
+    return components;
+  }, [components]);
   if (!mounted) {
     return /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: fallback ?? children });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: fallback ?? children }), children: /* @__PURE__ */ jsxRuntime.jsx(ReactMarkdown, { children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: fallback ?? children }), children: /* @__PURE__ */ jsxRuntime.jsx(ReactMarkdown, { components: markdownComponents, children }) });
 }
 function DefaultMentionBadge({ segment }) {
   const bgColor = segment.color ? `${segment.color}20` : "rgba(34, 197, 94, 0.2)";
@@ -1413,6 +1468,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);
@@ -1424,43 +1509,82 @@ 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__ */ jsxRuntime.jsxs("div", { className: cn("flex gap-3 justify-end ash-animate-fade-in", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-[85%]", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-2xl p-4 bg-[var(--ash-accent)] text-[var(--ash-accent-foreground)]", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm leading-relaxed whitespace-pre-wrap", children: text || "(files attached)" }) }),
-      files.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 pt-2 border-t border-[var(--ash-accent-foreground)]/20", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-[var(--ash-accent-foreground)]/60 mb-1 flex items-center gap-1", children: [
-          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-message-role": "user",
+      className: cn("flex justify-end ash-animate-fade-in pr-1", s.gap, className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-[85%] flex flex-col items-end", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(variantClasses[variant], variant === "bubble" && "px-4 py-3"), children: [
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(s.text, "leading-snug whitespace-pre-wrap"), children: text || "(files attached)" }),
+            files.length > 0 && variant === "bubble" && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(PaperclipIcon, { className: "w-2.5 h-2.5 opacity-60" }),
+                  file.split(" (")[0]
+                ]
+              },
+              index
+            )) })
+          ] }),
+          renderMetadata ? renderMetadata({ entry, metadata }) : showTimestamp && entry.timestamp && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { children: metadata.model }),
+            metadata?.model && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-50", children: "\xB7" }),
+            formatTimestamp(entry.timestamp)
+          ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1", children: files.map((file, index) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "text-xs text-white/40 mt-2", children: formatTimestamp(entry.timestamp) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-7 h-7 rounded-full bg-white/10 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(UserIcon, { className: "w-4 h-4 text-white/50" }) })
-  ] });
+        showAvatar && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(UserIcon, { className: "w-3 h-3 text-[var(--ash-text-muted)]" }) })
+      ]
+    }
+  );
 }
 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}`);
     }
   };
+  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__ */ jsxRuntime.jsx(
@@ -1471,81 +1595,143 @@ function AssistantMessage({
         }
       );
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(LazyMarkdown, { children: textContent || entry.content });
+    return /* @__PURE__ */ jsxRuntime.jsx(LazyMarkdown, { components: markdownComponents, children: textContent || entry.content });
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex gap-3 ash-animate-fade-in", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-7 h-7 rounded-full bg-[var(--ash-accent)]/20 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(BotIcon, { className: "w-4 h-4 text-[var(--ash-accent)]" }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 max-w-[85%]", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ash-card-glass rounded-2xl p-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ash-message-content prose prose-sm prose-invert max-w-none text-sm leading-relaxed", children: parsedOptions ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        parsedOptions.preamble && renderContent(parsedOptions.preamble),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          OptionCards,
-          {
-            options: parsedOptions.options,
-            onSelect: handleOptionSelect
-          }
-        )
-      ] }) : renderContent() }) }),
-      entry.timestamp && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-white/40 mt-2", children: formatTimestamp(entry.timestamp) })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-message-role": "assistant",
+      className: cn("flex ash-animate-fade-in pl-1", s.gap, className),
+      children: [
+        showAvatar && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(SparklesIcon, { className: "w-3 h-3 text-white" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(variantClasses[variant], variant === "bubble" && "px-4 py-3"), children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            parsedOptions.preamble && renderContent(parsedOptions.preamble),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              OptionCards,
+              {
+                options: parsedOptions.options,
+                onSelect: handleOptionSelect
+              }
+            )
+          ] }) : renderContent() }) }),
+          renderMetadata ? renderMetadata({ entry, metadata }) : showTimestamp && entry.timestamp && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { children: metadata.model }),
+            metadata?.model && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "opacity-50", children: "\xB7" }),
+            formatTimestamp(entry.timestamp)
+          ] })
+        ] })
+      ]
+    }
+  );
 }
-function ThinkingMessage({ entry, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex gap-3 ash-animate-fade-in", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-7 h-7 rounded-full bg-purple-500/20 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(SparklesIcon, { className: "w-4 h-4 text-purple-400" }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 max-w-[85%]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-2xl p-4 bg-purple-500/10 border border-purple-500/30", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-purple-400 mb-2 font-medium", children: "Thinking" }),
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-message-role": "thinking",
+      className: cn("flex ash-animate-fade-in pl-1", s.gap, className),
+      children: [
+        showAvatar && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(SparklesIcon, { className: "w-3 h-3 text-purple-400" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("rounded-lg bg-[var(--ash-thinking-bg)] border border-[var(--ash-thinking-border)]", s.padding), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] text-[var(--ash-thinking-text)] opacity-80 mb-1 font-medium uppercase tracking-wide", children: "Thinking" }),
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: cn("flex gap-3 ash-animate-fade-in", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-7 h-7 rounded-full bg-[var(--ash-accent)]/20 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(BotIcon, { className: "w-4 h-4 text-[var(--ash-accent)]" }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(ToolCallCard, { toolCall: entry.entryType.toolCall, defaultExpanded }) })
-  ] });
+  const s = scaleClasses[scale];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-message-role": "tool",
+      className: cn("flex ash-animate-fade-in pl-1", s.gap, className),
+      children: [
+        showAvatar && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(BotIcon, { className: "w-3 h-3 text-[var(--ash-accent)]" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: cn("flex gap-3 ash-animate-fade-in", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-7 h-7 rounded-full bg-red-500/20 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(AlertTriangleIcon, { className: "w-4 h-4 text-red-400" }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 max-w-[85%]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-2xl p-4 bg-red-500/10 border border-red-500/30", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-red-400 mb-2 font-medium", children: "Error" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-300", children: entry.entryType.message }),
-      entry.entryType.code && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-red-400/70 mt-2 font-mono", children: [
-        "Code: ",
-        entry.entryType.code
-      ] })
-    ] }) })
-  ] });
+  const s = scaleClasses[scale];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-message-role": "error",
+      className: cn("flex ash-animate-fade-in pl-1", s.gap, className),
+      children: [
+        showAvatar && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(AlertTriangleIcon, { className: "w-3 h-3 text-red-400" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("rounded-lg bg-[var(--ash-error-bg)] border border-[var(--ash-error-border)]", s.padding), children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] text-[var(--ash-error-text)] opacity-80 mb-1 font-medium uppercase tracking-wide", children: "Error" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn(s.text, "text-[var(--ash-error-text)] opacity-90"), children: entry.entryType.message }),
+          entry.entryType.code && /* @__PURE__ */ jsxRuntime.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,
   richContentRenderers,
+  markdownComponents,
+  userVariant,
+  assistantVariant,
+  scale,
+  showAvatars = true,
+  showTimestamp = true,
+  renderMetadata,
+  metadata,
   className
 }) {
   switch (entry.entryType.type) {
     case "user_message":
-      return /* @__PURE__ */ jsxRuntime.jsx(UserMessage, { entry, className });
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        UserMessage,
+        {
+          entry,
+          variant: userVariant,
+          scale,
+          showAvatar: showAvatars,
+          showTimestamp,
+          renderMetadata,
+          metadata,
+          className
+        }
+      );
     case "assistant_message":
       return /* @__PURE__ */ jsxRuntime.jsx(
         AssistantMessage,
         {
           entry,
+          variant: assistantVariant,
+          scale,
+          showAvatar: showAvatars,
+          showTimestamp,
           onOptionSelect,
           richContentRenderers,
+          markdownComponents,
+          renderMetadata,
+          metadata,
           className
         }
       );
     case "thinking":
-      return /* @__PURE__ */ jsxRuntime.jsx(ThinkingMessage, { entry, className });
+      return /* @__PURE__ */ jsxRuntime.jsx(ThinkingMessage, { entry, scale, showAvatar: showAvatars, className });
     case "tool_call":
-      return /* @__PURE__ */ jsxRuntime.jsx(ToolCallMessage, { entry, defaultExpanded, className });
+      return /* @__PURE__ */ jsxRuntime.jsx(ToolCallMessage, { entry, scale, showAvatar: showAvatars, defaultExpanded, className });
     case "error":
-      return /* @__PURE__ */ jsxRuntime.jsx(ErrorMessage, { entry, className });
+      return /* @__PURE__ */ jsxRuntime.jsx(ErrorMessage, { entry, scale, showAvatar: showAvatars, className });
     default:
       return null;
   }
@@ -2164,6 +2350,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 = react.createContext(null);
 function DisplayModeProvider({ children, initialConfig }) {
   const [config, setConfigState] = react.useState({
@@ -2217,6 +2410,14 @@ function MessageList({
   onWidgetAction,
   autoScroll = true,
   richContentRenderers,
+  userVariant,
+  assistantVariant,
+  scale,
+  showAvatars = true,
+  showTimestamp = true,
+  markdownComponents,
+  renderMetadata,
+  metadata,
   className
 }) {
   const contextConfig = useDisplayConfig();
@@ -2251,7 +2452,8 @@ function MessageList({
     }
     return groupEntriesForCompactMode(entries, config);
   }, [entries, config]);
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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;
@@ -2273,15 +2475,23 @@ function MessageList({
             entry,
             onOptionSelect,
             defaultExpanded: config.defaultExpanded,
-            richContentRenderers
+            richContentRenderers,
+            markdownComponents,
+            userVariant,
+            assistantVariant,
+            scale,
+            showAvatars,
+            showTimestamp,
+            renderMetadata,
+            metadata
           },
           entry.id
         );
       }
       const toolCalls = extractToolCallsFromGroup(groupedEntry.entries);
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 ash-animate-fade-in", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-7 h-7 rounded-full bg-[var(--ash-accent)]/20 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(BotIcon, { className: "w-4 h-4 text-[var(--ash-accent)]" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: config.mode === "accordion" ? /* @__PURE__ */ jsxRuntime.jsx(
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ash-message-row flex ash-animate-fade-in pl-1", style: { gap: "var(--ash-message-gap, 0.5rem)" }, children: [
+        showAvatars && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(BotIcon, { className: "w-3 h-3 text-[var(--ash-accent)]" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: config.mode === "accordion" ? /* @__PURE__ */ jsxRuntime.jsx(
           StepAccordion,
           {
             toolCalls,
@@ -2297,13 +2507,13 @@ function MessageList({
         ) })
       ] }, groupedEntry.id);
     }),
-    streamingContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 ash-animate-fade-in", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-7 h-7 rounded-full bg-[var(--ash-accent)]/20 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(BotIcon, { className: "w-4 h-4 text-[var(--ash-accent)]" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 max-w-[85%]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-xl p-3 bg-white/5 text-white/80", children: /* @__PURE__ */ jsxRuntime.jsx(StreamingText, { content: streamingContent, isStreaming: true }) }) })
+    streamingContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ash-message-row flex ash-animate-fade-in pl-1", style: { gap: "var(--ash-message-gap, 0.5rem)" }, children: [
+      showAvatars && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(BotIcon, { className: "w-3 h-3 text-[var(--ash-accent)]" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(StreamingText, { content: streamingContent, isStreaming: true }) }) })
     ] }),
-    loading && !streamingContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 ash-animate-fade-in", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-7 h-7 rounded-full bg-[var(--ash-accent)]/20 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(BotIcon, { className: "w-4 h-4 text-[var(--ash-accent)]" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-xl p-3 bg-white/5", children: /* @__PURE__ */ jsxRuntime.jsx(LoadingIndicator, { variant: "dots" }) })
+    loading && !streamingContent && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ash-message-row flex ash-animate-fade-in pl-1", style: { gap: "var(--ash-message-gap, 0.5rem)" }, children: [
+      showAvatars && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(BotIcon, { className: "w-3 h-3 text-[var(--ash-accent)]" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg px-3 py-1.5 bg-white/[0.03]", children: /* @__PURE__ */ jsxRuntime.jsx(LoadingIndicator, { variant: "dots" }) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { ref: messagesEndRef })
   ] });
@@ -3120,6 +3330,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)" },
@@ -3238,6 +3463,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 = {
@@ -3493,19 +3722,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] = react.useState(initialEntries);
   const [streamingEntries, setStreamingEntries] = react.useState([]);
   const [isStreaming, setIsStreaming] = react.useState(false);
+  const [isReconnecting, setIsReconnecting] = react.useState(false);
   const [error, setError] = react.useState(null);
   const [sessionId, setSessionId] = react.useState(initialSessionId || null);
   const abortControllerRef = react.useRef(null);
@@ -3513,6 +3818,16 @@ function useAgentChat(options) {
   const currentTextIdRef = react.useRef(null);
   const pendingToolCallsRef = react.useRef(/* @__PURE__ */ new Map());
   const hadToolCallSinceTextRef = react.useRef(false);
+  const reconnectAttemptsRef = react.useRef(0);
+  const eventCountRef = react.useRef(0);
+  const sessionIdRef = react.useRef(sessionId);
+  const streamingEntriesRef = react.useRef([]);
+  react.useEffect(() => {
+    sessionIdRef.current = sessionId;
+  }, [sessionId]);
+  react.useEffect(() => {
+    streamingEntriesRef.current = streamingEntries;
+  }, [streamingEntries]);
   const entries = [...historyEntries, ...streamingEntries];
   const emitStreamingEntries = react.useCallback((newEntries) => {
     setStreamingEntries([...newEntries]);
@@ -3627,7 +3942,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
@@ -3646,12 +3961,112 @@ function useAgentChat(options) {
     }
     return newEntries;
   }, [sessionId, onSessionStart, onSessionEnd, onError, onSandboxLog, createTextEntry, resetStreamingState]);
+  const attemptReconnect = react.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 = react.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
@@ -3661,39 +4076,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 = react.useCallback(() => {
+    reconnectAttemptsRef.current = maxReconnectAttempts + 1;
+    setIsReconnecting(false);
     if (abortControllerRef.current) {
       abortControllerRef.current.abort();
     }
-  }, []);
+  }, [maxReconnectAttempts]);
   const clear = react.useCallback(() => {
     setHistoryEntries([]);
     resetStreamingState();
     setSessionId(initialSessionId || null);
     setError(null);
+    setIsReconnecting(false);
+    reconnectAttemptsRef.current = 0;
+    eventCountRef.current = 0;
   }, [initialSessionId, resetStreamingState]);
   const setEntries = react.useCallback((newEntries) => {
     resetStreamingState();
@@ -3709,6 +4176,7 @@ function useAgentChat(options) {
   return {
     entries,
     isStreaming,
+    isReconnecting,
     error,
     sessionId,
     send,
@@ -3794,6 +4262,7 @@ exports.ActionIcon = ActionIcon;
 exports.AgentToolCard = AgentToolCard;
 exports.AlertCircleIcon = AlertCircleIcon;
 exports.AlertTriangleIcon = AlertTriangleIcon;
+exports.ArrowUpIcon = ArrowUpIcon;
 exports.AssistantMessage = AssistantMessage;
 exports.BotIcon = BotIcon;
 exports.BrainIcon = BrainIcon;
@@ -3813,6 +4282,7 @@ exports.CompactToolRow = CompactToolRow;
 exports.CompactToolStatusLine = CompactToolStatusLine;
 exports.CopyIcon = CopyIcon;
 exports.DEFAULT_DISPLAY_CONFIG = DEFAULT_DISPLAY_CONFIG;
+exports.DEFAULT_STYLE_CONFIG = DEFAULT_STYLE_CONFIG;
 exports.DisplayModeProvider = DisplayModeProvider;
 exports.DisplayModeToggle = DisplayModeToggle;
 exports.EditIcon = EditIcon;
@@ -3824,6 +4294,7 @@ exports.FileIcon = FileIcon;
 exports.FilePlusIcon = FilePlusIcon;
 exports.FolderSearchIcon = FolderSearchIcon;
 exports.GlobeIcon = GlobeIcon;
+exports.HomeIcon = HomeIcon;
 exports.InfoIcon = InfoIcon;
 exports.JsonDisplay = JsonDisplay;
 exports.LazyMarkdown = LazyMarkdown;
@@ -3834,6 +4305,7 @@ exports.LogsPanel = LogsPanel;
 exports.MessageEntry = MessageEntry;
 exports.MessageList = MessageList;
 exports.MessageSquareIcon = MessageSquareIcon;
+exports.MicrophoneIcon = MicrophoneIcon;
 exports.MoonIcon = MoonIcon;
 exports.OptionCards = OptionCards;
 exports.PaperclipIcon = PaperclipIcon;
@@ -3862,10 +4334,15 @@ exports.UserMessage = UserMessage;
 exports.XCircleIcon = XCircleIcon;
 exports.XIcon = XIcon;
 exports.allKeyframesCss = allKeyframesCss;
+exports.applyEventMiddleware = applyEventMiddleware;
+exports.applyRequestMiddleware = applyRequestMiddleware;
 exports.borderRadius = borderRadius;
+exports.callMiddlewareComplete = callMiddlewareComplete;
+exports.callMiddlewareError = callMiddlewareError;
 exports.cn = cn;
 exports.colors = colors;
 exports.createToolCall = createToolCall;
+exports.cssVars = cssVars;
 exports.extractTextContent = extractTextContent;
 exports.extractToolCallsFromGroup = extractToolCallsFromGroup;
 exports.formatElapsedTime = formatElapsedTime;