@tangle-network/sandbox-ui 0.9.0 → 0.10.1

package/dist/{chunk-EXSOPXIY.js → chunk-QOL4ZB24.js}

@@ -7,6 +7,9 @@ import {
   getToolDisplayMetadata,
   getToolErrorText
 } from "./chunk-BX6AQMUS.js";
+import {
+  OpenUIArtifactRenderer
+} from "./chunk-ZNCEM5CD.js";
 import {
   CodeBlock,
   CopyButton,
@@ -979,6 +982,26 @@ var DEFAULT_BRANDING = {
   iconClass: "",
   textClass: "text-primary"
 };
+var ASSISTANT_SHELL = "min-w-0 flex-1 space-y-3 rounded-[26px] border border-[var(--border-subtle)] bg-[color:color-mix(in_srgb,var(--bg-card)_94%,transparent)] px-5 py-4 shadow-[0_1px_2px_rgba(15,23,42,0.04)]";
+function AssistantShell({
+  branding,
+  isStreaming,
+  children
+}) {
+  return /* @__PURE__ */ jsxs12("div", { className: "flex gap-3", children: [
+    /* @__PURE__ */ jsx13("div", { className: "mt-1 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[var(--brand-primary)] text-white", children: /* @__PURE__ */ jsx13(Bot2, { className: "h-4 w-4" }) }),
+    /* @__PURE__ */ jsxs12("div", { className: ASSISTANT_SHELL, children: [
+      /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.14em] text-[var(--text-muted)]", children: [
+        /* @__PURE__ */ jsx13("span", { children: branding.label }),
+        isStreaming ? /* @__PURE__ */ jsxs12("span", { className: "inline-flex items-center gap-1.5 text-[var(--text-muted)]", children: [
+          /* @__PURE__ */ jsx13(Loader25, { className: "h-3 w-3 animate-spin" }),
+          "Thinking"
+        ] }) : null
+      ] }),
+      children
+    ] })
+  ] });
+}
 var CATEGORY_ICON_MAP = {
   command: Terminal3,
   write: FileEdit3,
@@ -1001,6 +1024,67 @@ var CATEGORY_ORDER = [
   "todo",
   "other"
 ];
+var OPENUI_NODE_TYPES = /* @__PURE__ */ new Set([
+  "heading",
+  "text",
+  "badge",
+  "stat",
+  "key_value",
+  "code",
+  "markdown",
+  "table",
+  "actions",
+  "separator",
+  "stack",
+  "grid",
+  "card"
+]);
+function isOpenUINode(value) {
+  return typeof value === "object" && value !== null && "type" in value && typeof value.type === "string" && OPENUI_NODE_TYPES.has(value.type);
+}
+function extractOpenUISchema(output) {
+  if (output == null) return null;
+  if (isOpenUINode(output)) return [output];
+  if (Array.isArray(output) && output.length > 0 && output.every(isOpenUINode)) {
+    return output;
+  }
+  if (typeof output === "object" && !Array.isArray(output)) {
+    const obj = output;
+    for (const key of ["openui", "schema", "ui"]) {
+      if (obj[key] == null) continue;
+      const inner = obj[key];
+      if (typeof inner === "string") {
+        try {
+          const parsed = JSON.parse(inner);
+          return extractOpenUISchema(parsed);
+        } catch {
+          continue;
+        }
+      }
+      const nested = extractOpenUISchema(inner);
+      if (nested) return nested;
+    }
+  }
+  if (typeof output === "string") {
+    try {
+      return extractOpenUISchema(JSON.parse(output));
+    } catch {
+      return null;
+    }
+  }
+  return null;
+}
+function getOpenUISummary(output) {
+  if (!output || typeof output !== "object" || Array.isArray(output)) {
+    return null;
+  }
+  const summary = output.summary;
+  return typeof summary === "string" && summary.trim() ? summary.trim() : null;
+}
+function isOpenUITool(part) {
+  const normalized = part.tool.toLowerCase().replace(/^tool:/, "");
+  return normalized.includes("openui");
+}
 function CategoryBadges({ categories }) {
   const sorted = useMemo5(
     () => CATEGORY_ORDER.filter((category) => categories.has(category)),
@@ -1072,10 +1156,66 @@ var RunGroup = memo11(
       return part.type === "text" && !part.synthetic && part.text.trim().length > 0;
     });
     if (!hasRenderableParts) {
-      return null;
+      if (!isStreaming) {
+        return null;
+      }
+      return /* @__PURE__ */ jsx13(AssistantShell, { branding, isStreaming: true, children: /* @__PURE__ */ jsx13("div", { className: "flex items-center gap-2 px-0.5 py-0.5 text-sm text-[var(--text-muted)]", children: /* @__PURE__ */ jsxs12("span", { className: "flex gap-[5px]", children: [
+        /* @__PURE__ */ jsx13("span", { className: "h-2 w-2 animate-bounce rounded-full bg-[var(--brand-glow)]", style: { animationDelay: "0ms" } }),
+        /* @__PURE__ */ jsx13("span", { className: "h-2 w-2 animate-bounce rounded-full bg-[var(--brand-glow)]", style: { animationDelay: "150ms" } }),
+        /* @__PURE__ */ jsx13("span", { className: "h-2 w-2 animate-bounce rounded-full bg-[var(--brand-glow)]", style: { animationDelay: "300ms" } })
+      ] }) }) });
+    }
+    const showTraceChrome = allParts.some(({ part }) => {
+      if (part.type === "reasoning") {
+        return true;
+      }
+      if (part.type === "tool") {
+        return !isOpenUITool(part);
+      }
+      return false;
+    });
+    if (!showTraceChrome) {
+      return /* @__PURE__ */ jsx13(AssistantShell, { branding, isStreaming, children: allParts.map(({ part, msgId, index }) => {
+        const key = `${msgId}-${index}`;
+        if (part.type === "tool" && isOpenUITool(part)) {
+          const toolPart = part;
+          const schema = extractOpenUISchema(toolPart.state.output);
+          const summary = getOpenUISummary(toolPart.state.output);
+          if (toolPart.state.status === "completed" && schema) {
+            return /* @__PURE__ */ jsxs12(
+              "div",
+              {
+                className: "overflow-hidden rounded-[22px] border border-[var(--border-subtle)] bg-[var(--bg-root)]",
+                children: [
+                  summary ? /* @__PURE__ */ jsx13("div", { className: "border-b border-[var(--border-subtle)] px-4 py-3 text-sm leading-6 text-foreground", children: summary }) : null,
+                  /* @__PURE__ */ jsx13("div", { className: "p-4", children: /* @__PURE__ */ jsx13(OpenUIArtifactRenderer, { schema }) })
+                ]
+              },
+              key
+            );
+          }
+          if (toolPart.state.status === "running") {
+            return /* @__PURE__ */ jsxs12(
+              "div",
+              {
+                className: "flex items-center gap-2 rounded-[18px] border border-[var(--border-subtle)] bg-[var(--bg-root)] px-4 py-3 text-sm text-muted-foreground",
+                children: [
+                  /* @__PURE__ */ jsx13(Loader25, { className: "h-4 w-4 animate-spin text-primary" }),
+                  "Building view\u2026"
+                ]
+              },
+              key
+            );
+          }
+        }
+        if (part.type === "text" && !part.synthetic && part.text.trim()) {
+          return /* @__PURE__ */ jsx13("div", { className: "px-0.5", children: /* @__PURE__ */ jsx13(Markdown, { className: "tangle-prose text-[15px] leading-7 text-[var(--text-primary)]", children: part.text }) }, key);
+        }
+        return null;
+      }) });
     }
-    return /* @__PURE__ */ jsx13(Collapsible3.Root, { open: !collapsed, onOpenChange: () => onToggle(), children: /* @__PURE__ */ jsxs12("div", { className: "rounded-[var(--radius-xl)] border border-border bg-card shadow-[var(--shadow-card)]", children: [
-      /* @__PURE__ */ jsxs12("div", { className: "flex items-start gap-3 px-4 py-4", children: [
+    return /* @__PURE__ */ jsx13(Collapsible3.Root, { open: !collapsed, onOpenChange: () => onToggle(), children: /* @__PURE__ */ jsxs12("div", { className: "rounded-[28px] border border-[var(--border-subtle)] bg-[var(--bg-card)] shadow-none", children: [
+      /* @__PURE__ */ jsxs12("div", { className: "flex items-start gap-3 px-4 py-3.5", children: [
         /* @__PURE__ */ jsx13(Collapsible3.Trigger, { asChild: true, children: /* @__PURE__ */ jsx13(
           "button",
           {
@@ -1113,54 +1253,80 @@ var RunGroup = memo11(
         headerActions ? /* @__PURE__ */ jsx13("div", { className: "flex shrink-0 flex-wrap items-center justify-end gap-1.5 pt-1", children: headerActions }) : null
       ] }),
       collapsed && run.summaryText && /* @__PURE__ */ jsx13("div", { className: "px-4 pb-4 text-sm leading-6 text-muted-foreground line-clamp-2", children: run.summaryText }),
-      /* @__PURE__ */ jsx13(Collapsible3.Content, { className: "overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp", children: /* @__PURE__ */ jsx13(
-        "div",
-        {
-          className: cn(
-            "space-y-3 border-t border-border px-4 pb-4 pt-3"
-          ),
-          children: allParts.map(({ part, msgId, index }, partIndex) => {
-            const key = `${msgId}-${index}`;
-            if (part.type === "tool") {
-              return /* @__PURE__ */ jsx13(
-                InlineToolItem,
-                {
-                  part,
-                  renderToolDetail,
-                  groupPosition: getToolGroupPosition(partIndex, allParts),
-                  actions: renderToolActions?.(part, {
-                    run,
-                    messageId: msgId,
-                    partIndex: index
-                  })
-                },
-                key
-              );
-            }
-            if (part.type === "reasoning") {
-              return /* @__PURE__ */ jsx13(
-                InlineThinkingItem,
+      /* @__PURE__ */ jsx13(Collapsible3.Content, { className: "overflow-hidden data-[state=open]:animate-slideDown data-[state=closed]:animate-slideUp", children: /* @__PURE__ */ jsx13("div", { className: cn("space-y-3 border-t border-[var(--border-subtle)] px-4 pb-4 pt-3"), children: allParts.map(({ part, msgId, index }, partIndex) => {
+        const key = `${msgId}-${index}`;
+        if (part.type === "tool") {
+          if (isOpenUITool(part)) {
+            const toolPart = part;
+            const schema = extractOpenUISchema(toolPart.state.output);
+            const summary = getOpenUISummary(toolPart.state.output);
+            if (toolPart.state.status === "completed" && schema) {
+              return /* @__PURE__ */ jsxs12(
+                "div",
                 {
-                  part,
-                  defaultOpen: isStreaming
+                  className: "overflow-hidden rounded-[24px] border border-[var(--border-subtle)] bg-[var(--bg-card)]",
+                  children: [
+                    summary ? /* @__PURE__ */ jsxs12("div", { className: "border-b border-[var(--border-subtle)] px-4 py-3", children: [
+                      /* @__PURE__ */ jsx13("div", { className: "text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground", children: "View" }),
+                      /* @__PURE__ */ jsx13("div", { className: "mt-1 text-sm leading-6 text-foreground", children: summary })
+                    ] }) : null,
+                    /* @__PURE__ */ jsx13("div", { className: "p-4", children: /* @__PURE__ */ jsx13(OpenUIArtifactRenderer, { schema }) })
+                  ]
                 },
                 key
               );
             }
-            if (part.type === "text" && !part.synthetic && part.text.trim()) {
-              return /* @__PURE__ */ jsx13(
+            if (toolPart.state.status === "running") {
+              return /* @__PURE__ */ jsxs12(
                 "div",
                 {
-                  className: "px-1 py-1",
-                  children: /* @__PURE__ */ jsx13(Markdown, { className: "tangle-prose text-[15px] leading-7", children: part.text })
+                  className: "flex items-center gap-3 rounded-[20px] border border-[var(--border-subtle)] bg-[var(--bg-card)] px-4 py-3 text-sm text-muted-foreground",
+                  children: [
+                    /* @__PURE__ */ jsx13(Loader25, { className: "h-4 w-4 animate-spin text-primary" }),
+                    "Building view\u2026"
+                  ]
                 },
                 key
               );
             }
-            return null;
-          })
+          }
+          return /* @__PURE__ */ jsx13(
+            InlineToolItem,
+            {
+              part,
+              renderToolDetail,
+              groupPosition: getToolGroupPosition(partIndex, allParts),
+              actions: renderToolActions?.(part, {
+                run,
+                messageId: msgId,
+                partIndex: index
+              })
+            },
+            key
+          );
+        }
+        if (part.type === "reasoning") {
+          return /* @__PURE__ */ jsx13(
+            InlineThinkingItem,
+            {
+              part,
+              defaultOpen: isStreaming
+            },
+            key
+          );
+        }
+        if (part.type === "text" && !part.synthetic && part.text.trim()) {
+          return /* @__PURE__ */ jsx13(
+            "div",
+            {
+              className: "px-1 py-1",
+              children: /* @__PURE__ */ jsx13(Markdown, { className: "tangle-prose text-[15px] leading-7", children: part.text })
+            },
+            key
+          );
         }
-      ) })
+        return null;
+      }) }) })
     ] }) });
   }
 );

package/dist/{chunk-JLKYXLFN.js → chunk-WKSGQVLI.js}

@@ -6,7 +6,7 @@ import {
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-EXSOPXIY.js";
+} from "./chunk-QOL4ZB24.js";
 import {
   ToolCallGroup,
   ToolCallStep
@@ -16,7 +16,7 @@ import {
 } from "./chunk-BX6AQMUS.js";
 import {
   OpenUIArtifactRenderer
-} from "./chunk-PLTZB5BC.js";
+} from "./chunk-ZNCEM5CD.js";
 import {
   Markdown
 } from "./chunk-T7HMZEVO.js";
@@ -30,10 +30,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 var UserMessage = memo(({ message, parts, actions }) => {
   const textContent = parts.filter((p) => p.type === "text").map((p) => p.text).join("\n");
   if (!textContent.trim()) return null;
-  return /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs("div", { className: "flex max-w-[82%] flex-col items-end gap-2", children: [
-    /* @__PURE__ */ jsxs("div", { className: "w-full rounded-[var(--radius-xl)] rounded-br-[var(--radius-sm)] border border-border bg-muted/50 px-4 py-3.5", children: [
-      /* @__PURE__ */ jsx("div", { className: "mb-1.5 text-[11px] font-semibold uppercase tracking-[0.14em] text-primary", children: "You" }),
-      /* @__PURE__ */ jsx("div", { className: "text-[15px] leading-7 text-foreground", children: /* @__PURE__ */ jsx(Markdown, { className: "tangle-prose", children: textContent }) })
+  return /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs("div", { className: "flex max-w-[78%] flex-col items-end gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "w-full rounded-[26px] rounded-br-[12px] bg-[var(--brand-primary)] px-4 py-3 text-white shadow-[0_8px_20px_rgba(15,23,42,0.12)]", children: [
+      /* @__PURE__ */ jsx("div", { className: "mb-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-white/60", children: "You" }),
+      /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap text-[15px] leading-6.5 text-white", children: textContent })
     ] }),
     actions ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-end gap-1.5 text-xs text-muted-foreground", children: actions }) : null
   ] }) });
@@ -55,7 +55,7 @@ var MessageList = memo2(
     renderUserMessageActions,
     renderToolActions
   }) => {
-    return /* @__PURE__ */ jsx2("div", { className: "space-y-3", children: groups.map((group) => {
+    return /* @__PURE__ */ jsx2("div", { className: "space-y-4", children: groups.map((group) => {
       if (group.type === "user") {
         const messageParts = partMap[group.message.id] ?? [];
         return /* @__PURE__ */ jsx2(
@@ -396,7 +396,7 @@ function ChatInput({
   return /* @__PURE__ */ jsxs4(
     "div",
     {
-      className: cn("px-4 py-3 relative", className),
+      className: cn("relative", className),
       onDragEnter: onAttach ? handleDragEnter : void 0,
       onDragLeave: onAttach ? handleDragLeave : void 0,
       onDragOver: onAttach ? handleDragOver : void 0,
@@ -468,12 +468,12 @@ function ChatInput({
             f.id
           ))
         ] }),
-        /* @__PURE__ */ jsx5("div", { className: "rounded-[var(--radius-xl)] border border-[var(--chat-input-border,var(--border-default))] [background:var(--chat-input-bg,var(--depth-2))] shadow-[var(--chat-input-shadow,var(--shadow-card))] transition-all focus-within:border-[var(--chat-input-focus-border,var(--border-accent))] focus-within:shadow-[var(--chat-input-focus-shadow,var(--shadow-card))]", children: /* @__PURE__ */ jsxs4("div", { className: "rounded-[var(--radius-xl)] px-3 py-[var(--chat-input-py)]", children: [
+        /* @__PURE__ */ jsx5("div", { className: "rounded-[24px] border border-[var(--chat-input-border,var(--border-default))] [background:var(--chat-input-bg,var(--bg-card))] shadow-[var(--chat-input-shadow,0_1px_2px_rgba(15,23,42,0.05))] transition-all focus-within:border-[var(--chat-input-focus-border,var(--border-accent))] focus-within:shadow-[var(--chat-input-focus-shadow,0_10px_30px_rgba(15,23,42,0.08))]", children: /* @__PURE__ */ jsxs4("div", { className: "rounded-[24px] px-4 py-[var(--chat-input-py)]", children: [
           (inputLabel !== null || idleStatus !== null || streamingStatus !== null) && /* @__PURE__ */ jsxs4("div", { className: "mb-1.5 flex items-center justify-between gap-3 px-1", children: [
             inputLabel !== null && /* @__PURE__ */ jsx5("div", { className: "text-[var(--chat-label-size,11px)] font-[var(--chat-label-weight,600)] uppercase tracking-[var(--chat-label-tracking,0.16em)] text-[var(--text-muted)]", children: inputLabel }),
             (idleStatus !== null || streamingStatus !== null) && /* @__PURE__ */ jsx5("div", { className: "text-[var(--chat-label-size,11px)] text-[var(--text-muted)]", children: isStreaming ? streamingStatus ?? "" : idleStatus ?? "" })
           ] }),
-          /* @__PURE__ */ jsxs4("div", { className: "flex items-end gap-2", children: [
+          /* @__PURE__ */ jsxs4("div", { className: "flex items-end gap-2.5", children: [
             onAttach && /* @__PURE__ */ jsxs4(Fragment, { children: [
               /* @__PURE__ */ jsx5(
                 "button",
@@ -535,7 +535,7 @@ function ChatInput({
                 disabled: isStreaming || disabled,
                 rows: 1,
                 "aria-label": "Message input",
-                className: "min-h-[32px] max-h-[120px] flex-1 resize-none bg-transparent text-[14px] leading-6 text-foreground placeholder:text-muted-foreground disabled:opacity-50 focus-visible:outline-none"
+                className: "min-h-[42px] max-h-[160px] flex-1 resize-none bg-transparent py-2 text-[15px] leading-6 text-foreground placeholder:text-muted-foreground disabled:opacity-50 focus-visible:outline-none"
               }
             ),
             isStreaming ? /* @__PURE__ */ jsx5(
@@ -547,15 +547,18 @@ function ChatInput({
                 className: "mb-0.5 shrink-0 rounded-[var(--radius-lg)] border border-[var(--code-error)]/20 bg-[var(--code-error)]/14 p-2.5 text-[var(--code-error)] transition-colors hover:bg-[var(--code-error)]/24 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--code-error)]/50",
                 children: /* @__PURE__ */ jsx5(Square, { className: "h-4 w-4" })
               }
-            ) : /* @__PURE__ */ jsx5(
+            ) : /* @__PURE__ */ jsxs4(
               "button",
               {
                 type: "button",
                 onClick: handleSend,
                 disabled: !value.trim() || disabled,
                 "aria-label": "Send message",
-                className: "mb-0.5 shrink-0 rounded-[var(--chat-send-radius,var(--radius-lg))] border border-[var(--chat-send-border,var(--border-accent))] [background:var(--chat-send-bg,var(--accent-surface-soft))] p-2.5 text-[var(--chat-send-color,var(--accent-text))] shadow-[var(--chat-send-shadow,none)] transition-all hover:translate-y-[-1px] hover:[background:var(--chat-send-hover-bg,var(--accent-surface-strong))] disabled:opacity-30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--chat-send-ring,var(--border-accent))]",
-                children: /* @__PURE__ */ jsx5(Send, { className: "h-4 w-4" })
+                className: "mb-0.5 inline-flex shrink-0 items-center gap-1.5 rounded-full border border-[var(--chat-send-border,var(--border-accent))] [background:var(--chat-send-bg,var(--brand-primary))] px-3.5 py-2.5 text-sm font-medium text-[var(--chat-send-color,white)] shadow-[var(--chat-send-shadow,0_6px_16px_rgba(15,23,42,0.12))] transition-all hover:translate-y-[-1px] hover:[background:var(--chat-send-hover-bg,var(--brand-strong))] disabled:opacity-30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--chat-send-ring,var(--border-accent))]",
+                children: [
+                  /* @__PURE__ */ jsx5(Send, { className: "h-4 w-4" }),
+                  /* @__PURE__ */ jsx5("span", { children: "Send" })
+                ]
               }
             )
           ] })
@@ -861,16 +864,13 @@ var ChatContainer = memo3(
       },
       [onSend]
     );
-    return /* @__PURE__ */ jsxs5("div", { className: cn("flex flex-col h-full", className), children: [
+    return /* @__PURE__ */ jsxs5("div", { className: cn("flex h-full flex-col", className), children: [
       /* @__PURE__ */ jsx6(
         "div",
         {
           ref: scrollRef,
-          className: "flex-1 overflow-y-auto px-4 py-2 [scrollbar-gutter:stable]",
-          children: messages.length === 0 ? /* @__PURE__ */ jsx6("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsxs5("div", { className: "max-w-md rounded-[var(--radius-xl)] border border-border bg-[linear-gradient(180deg,rgba(255,255,255,0.03),transparent)] px-5 py-5 text-center shadow-[var(--shadow-card)]", children: [
-            /* @__PURE__ */ jsx6("div", { className: "text-sm font-semibold text-foreground", children: "Start the filing workflow" }),
-            /* @__PURE__ */ jsx6("div", { className: "mt-2 text-sm leading-relaxed text-muted-foreground", children: "Ask the agent to analyze documents, generate forms, explain a calculation, or review the current filing package." })
-          ] }) }) : presentation === "timeline" ? /* @__PURE__ */ jsx6(AgentTimeline, { items: timeline.items, isThinking: timeline.showThinking }) : /* @__PURE__ */ jsx6("div", { className: "mx-auto flex w-full max-w-5xl flex-col gap-3", children: /* @__PURE__ */ jsx6(
+          className: "flex-1 overflow-y-auto [scrollbar-gutter:stable]",
+          children: messages.length === 0 ? /* @__PURE__ */ jsx6("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ jsx6("div", { className: "max-w-md text-center", children: /* @__PURE__ */ jsx6("div", { className: "text-sm font-medium text-muted-foreground", children: "Start a conversation." }) }) }) : presentation === "timeline" ? /* @__PURE__ */ jsx6("div", { className: "mx-auto flex min-h-full w-full max-w-3xl flex-col justify-end", children: /* @__PURE__ */ jsx6(AgentTimeline, { items: timeline.items, isThinking: timeline.showThinking }) }) : /* @__PURE__ */ jsx6("div", { className: "mx-auto flex min-h-full w-full max-w-3xl flex-col justify-end", children: /* @__PURE__ */ jsx6(
             MessageList,
             {
               groups,
@@ -886,13 +886,13 @@ var ChatContainer = memo3(
           ) })
         }
       ),
-      !isAtBottom && /* @__PURE__ */ jsx6("div", { className: "flex justify-center -mt-10 relative z-10", children: /* @__PURE__ */ jsxs5(
+      !isAtBottom && /* @__PURE__ */ jsx6("div", { className: "relative z-10 -mt-10 flex justify-center", children: /* @__PURE__ */ jsxs5(
         "button",
         {
           onClick: scrollToBottom,
           className: cn(
             "flex items-center gap-1.5 px-3 py-1.5 rounded-full",
-            "border border-border bg-card shadow-[var(--shadow-card)]",
+            "border border-border bg-card shadow-[0_6px_16px_rgba(15,23,42,0.08)]",
             "text-xs text-foreground transition-colors hover:bg-accent",
             "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/60"
           ),

package/dist/{chunk-PLTZB5BC.js → chunk-ZNCEM5CD.js}

@@ -43,8 +43,23 @@ function InlineCode({ className, children, ...props }) {
 
 // src/openui/openui-artifact-renderer.tsx
 import { Fragment } from "react";
-import { ArrowRight, Minus } from "lucide-react";
+import { Minus } from "lucide-react";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var NODE_TYPES = /* @__PURE__ */ new Set([
+  "heading",
+  "text",
+  "badge",
+  "stat",
+  "key_value",
+  "code",
+  "markdown",
+  "table",
+  "actions",
+  "separator",
+  "stack",
+  "grid",
+  "card"
+]);
 var GAP_STYLES = {
   sm: "gap-2",
   md: "gap-4",
@@ -71,6 +86,12 @@ function formatValue(value) {
   }
   return value;
 }
+function asArray(value) {
+  return Array.isArray(value) ? value : [];
+}
+function isOpenUIComponentNode(value) {
+  return typeof value === "object" && value !== null && "type" in value && typeof value.type === "string" && NODE_TYPES.has(value.type);
+}
 function renderActions(actions, onAction) {
   if (actions.length === 0) return null;
   return /* @__PURE__ */ jsx2("div", { className: "flex flex-wrap items-center gap-2", children: actions.map((action) => /* @__PURE__ */ jsx2(
@@ -149,7 +170,10 @@ function renderNode(node, onAction) {
         )
       ] }) });
     case "key_value":
-      return /* @__PURE__ */ jsx2("dl", { className: "grid gap-3 sm:grid-cols-2", children: node.items.map((item, index) => /* @__PURE__ */ jsxs(
+      if (asArray(node.items).length === 0) {
+        return null;
+      }
+      return /* @__PURE__ */ jsx2("dl", { className: "grid gap-3 sm:grid-cols-2", children: asArray(node.items).map((item, index) => /* @__PURE__ */ jsxs(
         "div",
         {
           className: "rounded-[var(--radius-lg)] border border-border bg-card px-4 py-3",
@@ -185,9 +209,12 @@ function renderNode(node, onAction) {
     case "markdown":
       return /* @__PURE__ */ jsx2("div", { className: "rounded-[var(--radius-lg)] border border-border bg-card p-5", children: /* @__PURE__ */ jsx2(Markdown, { className: "prose-sm max-w-none", children: node.content }) });
     case "table":
+      if (asArray(node.columns).length === 0) {
+        return null;
+      }
       return /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-[var(--radius-lg)] border border-border bg-card", children: [
         /* @__PURE__ */ jsxs(Table, { children: [
-          /* @__PURE__ */ jsx2(TableHeader, { children: /* @__PURE__ */ jsx2(TableRow, { className: "border-border", children: node.columns.map((column) => /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsx2(TableHeader, { children: /* @__PURE__ */ jsx2(TableRow, { className: "border-border", children: asArray(node.columns).map((column) => /* @__PURE__ */ jsx2(
             TableHead,
             {
               className: cn(
@@ -198,7 +225,7 @@ function renderNode(node, onAction) {
             },
             column.key
           )) }) }),
-          /* @__PURE__ */ jsx2(TableBody, { children: node.rows.map((row, rowIndex) => /* @__PURE__ */ jsx2(TableRow, { className: "border-border", children: node.columns.map((column) => /* @__PURE__ */ jsx2(
+          /* @__PURE__ */ jsx2(TableBody, { children: asArray(node.rows).map((row, rowIndex) => /* @__PURE__ */ jsx2(TableRow, { className: "border-border", children: asArray(node.columns).map((column) => /* @__PURE__ */ jsx2(
             TableCell,
             {
               className: cn(
@@ -213,7 +240,7 @@ function renderNode(node, onAction) {
         node.caption && /* @__PURE__ */ jsx2("div", { className: "border-t border-border px-4 py-2 text-xs text-muted-foreground", children: node.caption })
       ] });
     case "actions":
-      return renderActions(node.actions, onAction);
+      return renderActions(asArray(node.actions), onAction);
     case "separator":
       return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
         /* @__PURE__ */ jsx2("div", { className: "h-px flex-1 bg-border" }),
@@ -221,6 +248,9 @@ function renderNode(node, onAction) {
         /* @__PURE__ */ jsx2("div", { className: "h-px flex-1 bg-border" })
       ] });
     case "stack":
+      if (asArray(node.children).length === 0) {
+        return null;
+      }
       return /* @__PURE__ */ jsx2(
         "div",
         {
@@ -231,14 +261,17 @@ function renderNode(node, onAction) {
             ALIGN_STYLES[node.align ?? "stretch"],
             node.wrap && "flex-wrap"
           ),
-          children: node.children.map((child, index) => /* @__PURE__ */ jsx2(Fragment, { children: renderNode(child, onAction) }, child.id ?? `${child.type}-${index}`))
+          children: asArray(node.children).map((child, index) => /* @__PURE__ */ jsx2(Fragment, { children: renderNode(child, onAction) }, child.id ?? `${child.type}-${index}`))
         }
       );
     case "grid":
-      return /* @__PURE__ */ jsx2("div", { className: cn("grid", GRID_STYLES[node.columns ?? 2], GAP_STYLES[node.gap ?? "md"]), children: node.children.map((child, index) => /* @__PURE__ */ jsx2(Fragment, { children: renderNode(child, onAction) }, child.id ?? `${child.type}-${index}`)) });
+      if (asArray(node.children).length === 0) {
+        return null;
+      }
+      return /* @__PURE__ */ jsx2("div", { className: cn("grid", GRID_STYLES[node.columns ?? 2], GAP_STYLES[node.gap ?? "md"]), children: asArray(node.children).map((child, index) => /* @__PURE__ */ jsx2(Fragment, { children: renderNode(child, onAction) }, child.id ?? `${child.type}-${index}`)) });
     case "card":
       return /* @__PURE__ */ jsxs(Card, { variant: "glass", className: "border-border shadow-[var(--shadow-card)]", children: [
-        (node.eyebrow || node.title || node.description || node.badge || node.actions) && /* @__PURE__ */ jsxs(CardHeader, { className: "gap-2 p-4 pb-0", children: [
+        (node.eyebrow || node.title || node.description || node.badge || asArray(node.actions).length > 0) && /* @__PURE__ */ jsxs(CardHeader, { className: "gap-2 p-4 pb-0", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
             /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-1", children: [
               node.eyebrow && /* @__PURE__ */ jsx2("div", { className: "text-[10px] font-semibold uppercase tracking-[0.16em] text-muted-foreground", children: node.eyebrow }),
@@ -247,9 +280,9 @@ function renderNode(node, onAction) {
             ] }),
             node.badge && /* @__PURE__ */ jsx2(Badge, { variant: node.badge.tone ?? "outline", children: node.badge.label })
           ] }),
-          node.actions && renderActions(node.actions, onAction)
+          asArray(node.actions).length > 0 && renderActions(asArray(node.actions), onAction)
         ] }),
-        node.children && node.children.length > 0 && /* @__PURE__ */ jsx2(CardContent, { className: "space-y-4 p-4", children: node.children.map((child, index) => /* @__PURE__ */ jsx2(Fragment, { children: renderNode(child, onAction) }, child.id ?? `${child.type}-${index}`)) })
+        asArray(node.children).length > 0 && /* @__PURE__ */ jsx2(CardContent, { className: "space-y-4 p-4", children: asArray(node.children).map((child, index) => /* @__PURE__ */ jsx2(Fragment, { children: renderNode(child, onAction) }, child.id ?? `${child.type}-${index}`)) })
       ] });
   }
 }
@@ -258,30 +291,23 @@ function OpenUIArtifactRenderer({
   onAction,
   className
 }) {
-  const nodes = Array.isArray(schema) ? schema : [schema];
+  const nodes = (Array.isArray(schema) ? schema : [schema]).filter(isOpenUIComponentNode);
   if (nodes.length === 0) {
     return /* @__PURE__ */ jsx2(
       "div",
       {
         className: cn(
-          "flex h-full min-h-[16rem] items-center justify-center rounded-[var(--radius-xl)] border border-dashed border-border bg-card p-6 text-center",
+          "flex min-h-[6rem] items-center justify-center rounded-[var(--radius-xl)] border border-dashed border-border bg-card p-5 text-center",
           className
         ),
         children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsx2("div", { className: "mx-auto flex h-10 w-10 items-center justify-center rounded-full bg-muted/50 text-muted-foreground", children: /* @__PURE__ */ jsx2(Minus, { className: "h-4 w-4" }) }),
-          /* @__PURE__ */ jsx2("div", { className: "text-sm font-medium text-foreground", children: "No structured artifact payload" }),
-          /* @__PURE__ */ jsx2("div", { className: "text-sm text-muted-foreground", children: "Pass an OpenUI-like schema to render dynamic result panels with sandbox-ui primitives." })
+          /* @__PURE__ */ jsx2("div", { className: "text-sm font-medium text-foreground", children: "No view was generated." })
         ] })
       }
     );
   }
-  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-4 p-4", className), children: [
-    nodes.map((node, index) => /* @__PURE__ */ jsx2(Fragment, { children: renderNode(node, onAction) }, node.id ?? `${node.type}-${index}`)),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-[var(--radius-lg)] border border-border bg-card px-3 py-2 text-xs text-muted-foreground", children: [
-      /* @__PURE__ */ jsx2(ArrowRight, { className: "h-3.5 w-3.5" }),
-      "Structured artifact rendered through sandbox-ui primitives"
-    ] })
-  ] });
+  return /* @__PURE__ */ jsx2("div", { className: cn("space-y-4", className), children: nodes.map((node, index) => /* @__PURE__ */ jsx2(Fragment, { children: renderNode(node, onAction) }, node.id ?? `${node.type}-${index}`)) });
 }
 
 export {

package/dist/dashboard.d.ts

@@ -1,4 +1,4 @@
-export { B as Backend, a as BackendSelector, b as BackendSelectorProps, C as ClusterStatusBar, c as ClusterStatusBarProps, d as ClusterStatusItem, e as CreditBalance, f as CreditBalanceProps, D as DashboardLayout, g as DashboardLayoutProps, ag as DashboardProfile, h as DashboardUser, I as Invoice, i as InvoiceTable, j as InvoiceTableProps, N as NavItem, k as NewSandboxCard, l as NewSandboxCardProps, m as PlanCardData, n as PlanCards, o as PlanCardsProps, ah as PlanFeature, p as ProductVariant, q as ProfileAvatar, r as ProfileAvatarProps, s as ProfileComparison, t as ProfileComparisonProps, u as ProfileSelector, v as ProfileSelectorProps, R as RailButton, w as RailButtonProps, x as RailModeButton, y as RailModeButtonProps, z as RailSeparator, A as RailSeparatorProps, E as ResourceMeter, F as ResourceMeterProps, S as SIDEBAR_PANEL_WIDTH, G as SIDEBAR_RAIL_WIDTH, H as SIDEBAR_TOTAL_WIDTH, J as SandboxCard, K as SandboxCardData, L as SandboxCardProps, M as SandboxStatus, O as SandboxTable, Q as SandboxTableProps, T as Sidebar, U as SidebarContent, V as SidebarContentProps, W as SidebarPanel, X as SidebarPanelContent, Y as SidebarPanelContentProps, Z as SidebarPanelHeader, _ as SidebarPanelHeaderProps, $ as SidebarPanelProps, a0 as SidebarProps, a1 as SidebarProvider, a2 as SidebarProviderProps, a3 as SidebarRail, a4 as SidebarRailFooter, a5 as SidebarRailFooterProps, a6 as SidebarRailHeader, a7 as SidebarRailHeaderProps, a8 as SidebarRailNav, a9 as SidebarRailNavProps, aa as SidebarRailProps, ab as SidebarUser, ai as Variant, ad as VariantList, ae as VariantListProps, aj as VariantOutcome, ak as VariantStatus, af as useSidebar } from './variant-list-CsS6ydgm.js';
+export { B as Backend, a as BackendSelector, b as BackendSelectorProps, C as ClusterStatusBar, c as ClusterStatusBarProps, d as ClusterStatusItem, e as CreditBalance, f as CreditBalanceProps, D as DashboardLayout, g as DashboardLayoutProps, ag as DashboardProfile, h as DashboardUser, I as Invoice, i as InvoiceTable, j as InvoiceTableProps, N as NavItem, k as NewSandboxCard, l as NewSandboxCardProps, m as PlanCardData, n as PlanCards, o as PlanCardsProps, ah as PlanFeature, p as ProductVariant, q as ProfileAvatar, r as ProfileAvatarProps, s as ProfileComparison, t as ProfileComparisonProps, u as ProfileSelector, v as ProfileSelectorProps, R as RailButton, w as RailButtonProps, x as RailModeButton, y as RailModeButtonProps, z as RailSeparator, A as RailSeparatorProps, E as ResourceMeter, F as ResourceMeterProps, S as SIDEBAR_PANEL_WIDTH, G as SIDEBAR_RAIL_WIDTH, H as SIDEBAR_TOTAL_WIDTH, J as SandboxCard, K as SandboxCardData, L as SandboxCardProps, M as SandboxStatus, O as SandboxTable, Q as SandboxTableProps, T as Sidebar, U as SidebarContent, V as SidebarContentProps, W as SidebarPanel, X as SidebarPanelContent, Y as SidebarPanelContentProps, Z as SidebarPanelHeader, _ as SidebarPanelHeaderProps, $ as SidebarPanelProps, a0 as SidebarProps, a1 as SidebarProvider, a2 as SidebarProviderProps, a3 as SidebarRail, a4 as SidebarRailFooter, a5 as SidebarRailFooterProps, a6 as SidebarRailHeader, a7 as SidebarRailHeaderProps, a8 as SidebarRailNav, a9 as SidebarRailNavProps, aa as SidebarRailProps, ab as SidebarUser, ai as Variant, ad as VariantList, ae as VariantListProps, aj as VariantOutcome, ak as VariantStatus, af as useSidebar } from './variant-list-BNwUOSgz.js';
 export { a as BillingBalance, c as BillingDashboard, d as BillingDashboardProps, B as BillingSubscription, b as BillingUsage, e as PricingPage, f as PricingPageProps, P as PricingTier, g as UsageChart, h as UsageChartProps, U as UsageDataPoint } from './usage-chart-SSiOgeQI.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 export { a as TemplateCard, T as TemplateCardData, b as TemplateCardProps } from './template-card-BAtvcAkU.js';
@@ -128,10 +128,11 @@ interface SnapshotListProps {
     snapshots: SnapshotInfo[];
     onCreate: (tags?: string[]) => void;
     onRestore: (snapshotId: string) => void;
+    onSaveAsTemplate?: (snapshotId: string) => void;
     loading?: boolean;
     className?: string;
 }
-declare function SnapshotList({ snapshots, onCreate, onRestore, loading, className }: SnapshotListProps): react_jsx_runtime.JSX.Element;
+declare function SnapshotList({ snapshots, onCreate, onRestore, onSaveAsTemplate, loading, className }: SnapshotListProps): react_jsx_runtime.JSX.Element;
 
 interface PromoBannerProps {
     title: string;