@lukeashford/aurelius 2.19.0 → 2.21.0

package/dist/index.js

@@ -38,6 +38,8 @@ __export(index_exports, {
   Alert: () => Alert,
   AlertDialog: () => AlertDialog,
   ArtifactCard: () => ArtifactCard,
+  ArtifactGroup: () => ArtifactGroup,
+  ArtifactVariantStack: () => ArtifactVariantStack,
   ArtifactsPanel: () => ArtifactsPanel,
   ArtifactsPanelToggle: () => ArtifactsPanelToggle,
   AttachmentPreview: () => AttachmentPreview,
@@ -88,6 +90,7 @@ __export(index_exports, {
   ListItemText: () => ListItemText,
   ListSubheader: () => ListSubheader,
   MarkdownContent: () => MarkdownContent,
+  MediaIcon: () => MediaIcon,
   Menu: () => Menu,
   MenuContent: () => MenuContent,
   MenuItem: () => MenuItem,
@@ -97,6 +100,7 @@ __export(index_exports, {
   Message: () => Message,
   MessageActions: () => MessageActions,
   Modal: () => Modal,
+  NODE_TYPES: () => NODE_TYPES,
   Navbar: () => Navbar,
   NavbarBrand: () => NavbarBrand,
   NavbarContent: () => NavbarContent,
@@ -141,9 +145,12 @@ __export(index_exports, {
   ThinkingIndicator: () => ThinkingIndicator,
   ToastProvider: () => ToastProvider,
   TodosList: () => TodosList,
+  ToolPanelContainer: () => ToolPanelContainer,
+  ToolSidebar: () => ToolSidebar,
   Tooltip: () => Tooltip,
   VideoCard: () => VideoCard,
   addMessageToTree: () => addMessageToTree,
+  areAllTasksSettled: () => areAllTasksSettled,
   createEmptyTree: () => createEmptyTree,
   createPreviewUrl: () => createPreviewUrl,
   generateId: () => generateId,
@@ -155,6 +162,7 @@ __export(index_exports, {
   revokePreviewUrl: () => revokePreviewUrl,
   switchBranch: () => switchBranch,
   updateNodeContent: () => updateNodeContent,
+  useArtifactTreeNavigation: () => useArtifactTreeNavigation,
   useArtifacts: () => useArtifacts,
   useResizable: () => useResizable,
   useScrollAnchor: () => useScrollAnchor,
@@ -274,8 +282,18 @@ var Skeleton = import_react3.default.forwardRef(
 Skeleton.displayName = "Skeleton";
 
 // src/components/Card.tsx
-var CardContext = (0, import_react4.createContext)({ isLoading: false });
+var CardContext = (0, import_react4.createContext)({ loading: void 0 });
 var useCardContext = () => (0, import_react4.useContext)(CardContext);
+function slotLoading(loading, path) {
+  if (!loading) {
+    return false;
+  }
+  if (Array.isArray(path)) {
+    const [section, field] = path;
+    return !!loading[section]?.[field];
+  }
+  return !!loading[path];
+}
 var VARIANT_STYLES = {
   default: "bg-charcoal shadow-sm border border-gold/30",
   elevated: "bg-charcoal shadow-lg border-0",
@@ -289,12 +307,12 @@ var CardBase = import_react4.default.forwardRef(
     interactive = false,
     selected = false,
     noPadding = false,
-    isLoading = false,
+    loading,
     className,
     children,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ import_react4.default.createElement(CardContext.Provider, { value: { isLoading } }, /* @__PURE__ */ import_react4.default.createElement(
+    return /* @__PURE__ */ import_react4.default.createElement(CardContext.Provider, { value: { loading } }, /* @__PURE__ */ import_react4.default.createElement(
       "div",
       {
         ref,
@@ -322,9 +340,12 @@ var CardBase = import_react4.default.forwardRef(
 CardBase.displayName = "Card";
 var CardHeader = import_react4.default.forwardRef(
   ({ title, subtitle, action, className, children, ...props }, ref) => {
-    const { isLoading } = useCardContext();
+    const { loading } = useCardContext();
+    const titleIsLoading = slotLoading(loading, ["header", "title"]);
+    const subtitleIsLoading = slotLoading(loading, ["header", "subtitle"]);
+    const actionIsLoading = slotLoading(loading, ["header", "action"]);
     const hasContent = title || subtitle || action || children;
-    if (!hasContent && !isLoading) {
+    if (!hasContent && !titleIsLoading && !subtitleIsLoading && !actionIsLoading) {
       return null;
     }
     return /* @__PURE__ */ import_react4.default.createElement(
@@ -334,18 +355,19 @@ var CardHeader = import_react4.default.forwardRef(
         className: cx("px-6 py-4 border-b border-ash", className),
         ...props
       },
-      isLoading && !title && !subtitle ? /* @__PURE__ */ import_react4.default.createElement("div", { className: "flex flex-col gap-2" }, /* @__PURE__ */ import_react4.default.createElement(Skeleton, { className: "h-5 w-3/4" }), /* @__PURE__ */ import_react4.default.createElement(Skeleton, { className: "h-4 w-1/2" })) : title || subtitle || action ? /* @__PURE__ */ import_react4.default.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "flex-1 min-w-0" }, title ? /* @__PURE__ */ import_react4.default.createElement("h3", { className: "text-lg font-semibold text-white m-0" }, title) : isLoading ? /* @__PURE__ */ import_react4.default.createElement(Skeleton, { className: "h-5 w-3/4 mb-1" }) : null, subtitle ? /* @__PURE__ */ import_react4.default.createElement("p", { className: "text-sm text-silver mt-1 m-0" }, subtitle) : isLoading ? /* @__PURE__ */ import_react4.default.createElement(Skeleton, { className: "h-4 w-1/2 mt-1" }) : null), action && /* @__PURE__ */ import_react4.default.createElement("div", { className: "shrink-0" }, action)) : children
+      title || subtitle || action || titleIsLoading || subtitleIsLoading || actionIsLoading ? /* @__PURE__ */ import_react4.default.createElement("div", { className: "flex items-start justify-between gap-4" }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "flex-1 min-w-0" }, title ? /* @__PURE__ */ import_react4.default.createElement("h3", { className: "text-lg font-semibold text-white m-0" }, title) : titleIsLoading ? /* @__PURE__ */ import_react4.default.createElement(Skeleton, { className: "h-5 w-3/4 mb-1" }) : null, subtitle ? /* @__PURE__ */ import_react4.default.createElement("p", { className: "text-sm text-silver mt-1 m-0" }, subtitle) : subtitleIsLoading ? /* @__PURE__ */ import_react4.default.createElement(Skeleton, { className: "h-4 w-1/2 mt-1" }) : null), action ? /* @__PURE__ */ import_react4.default.createElement("div", { className: "shrink-0" }, action) : actionIsLoading ? /* @__PURE__ */ import_react4.default.createElement(Skeleton, { className: "h-8 w-8 shrink-0" }) : null) : children
     );
   }
 );
 CardHeader.displayName = "CardHeader";
 var CardBody = import_react4.default.forwardRef(
   ({ className, children, ...props }, ref) => {
-    const { isLoading } = useCardContext();
-    if (!children && !isLoading) {
+    const { loading } = useCardContext();
+    const isBodyLoading = slotLoading(loading, "body");
+    if (!children && !isBodyLoading) {
       return null;
     }
-    return /* @__PURE__ */ import_react4.default.createElement("div", { ref, className: cx("px-6 py-4", className), ...props }, isLoading && !children ? /* @__PURE__ */ import_react4.default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ import_react4.default.createElement(Skeleton, { className: "h-4 w-full" }), /* @__PURE__ */ import_react4.default.createElement(Skeleton, { className: "h-4 w-full" }), /* @__PURE__ */ import_react4.default.createElement(Skeleton, { className: "h-4 w-3/4" })) : children);
+    return /* @__PURE__ */ import_react4.default.createElement("div", { ref, className: cx("px-6 py-4", className), ...props }, isBodyLoading ? /* @__PURE__ */ import_react4.default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ import_react4.default.createElement(Skeleton, { className: "h-4 w-full" }), /* @__PURE__ */ import_react4.default.createElement(Skeleton, { className: "h-4 w-full" }), /* @__PURE__ */ import_react4.default.createElement(Skeleton, { className: "h-4 w-3/4" })) : children);
   }
 );
 CardBody.displayName = "CardBody";
@@ -381,13 +403,14 @@ var CardMedia = import_react4.default.forwardRef(
     children,
     ...props
   }, ref) => {
-    const { isLoading } = useCardContext();
+    const { loading } = useCardContext();
+    const isMediaLoading = slotLoading(loading, "media");
     const aspectClass = aspect && aspect !== "none" ? {
       video: "aspect-video",
       square: "aspect-square",
       wide: "aspect-wide"
     }[aspect] : "";
-    if (!children && !isLoading) {
+    if (!children && !isMediaLoading) {
       return null;
     }
     return /* @__PURE__ */ import_react4.default.createElement(
@@ -403,7 +426,7 @@ var CardMedia = import_react4.default.forwardRef(
         ),
         ...props
       },
-      isLoading && !children ? /* @__PURE__ */ import_react4.default.createElement(Skeleton, { className: "w-full h-full" }) : children
+      isMediaLoading ? /* @__PURE__ */ import_react4.default.createElement(Skeleton, { className: "w-full h-full" }) : children
     );
   }
 );
@@ -2319,7 +2342,7 @@ var Modal = ({ isOpen, onClose, title, children, className }) => {
         role: "dialog",
         "aria-modal": "true",
         className: cx(
-          "bg-charcoal border border-gold/30 shadow-2xl z-50 w-full max-w-lg p-6 rounded-none relative",
+          "bg-charcoal border border-gold/30 shadow-2xl z-50 w-full max-w-lg p-6 rounded-none relative flex flex-col",
           className
         ),
         "data-state": "open",
@@ -2334,7 +2357,7 @@ var Modal = ({ isOpen, onClose, title, children, className }) => {
         /* @__PURE__ */ import_react30.default.createElement(import_lucide_react5.X, { className: "h-5 w-5" }),
         /* @__PURE__ */ import_react30.default.createElement("span", { className: "sr-only" }, "Close")
       )),
-      /* @__PURE__ */ import_react30.default.createElement("div", null, children)
+      /* @__PURE__ */ import_react30.default.createElement("div", { className: "overflow-y-auto min-h-0" }, children)
     )
   );
   return (0, import_react_dom2.createPortal)(content, document.body);
@@ -3596,9 +3619,9 @@ function LayersIcon({ className, ...props }) {
   );
 }
 
-// src/components/icons/PlusIcon.tsx
+// src/components/icons/MediaIcon.tsx
 var import_react47 = __toESM(require("react"));
-function PlusIcon({ className, ...props }) {
+function MediaIcon({ className, ...props }) {
   return /* @__PURE__ */ import_react47.default.createElement(
     "svg",
     {
@@ -3609,6 +3632,29 @@ function PlusIcon({ className, ...props }) {
       ...props
     },
     /* @__PURE__ */ import_react47.default.createElement(
+      "path",
+      {
+        fillRule: "evenodd",
+        d: "M2 4.5A1.5 1.5 0 013.5 3h13A1.5 1.5 0 0118 4.5v11a1.5 1.5 0 01-1.5 1.5h-13A1.5 1.5 0 012 15.5v-11zM4 5v1h1V5H4zm2 0v1h1V5H6zm7 0v1h1V5h-1zm2 0v1h1V5h-1zM4 14v1h1v-1H4zm2 0v1h1v-1H6zm7 0v1h1v-1h-1zm2 0v1h1v-1h-1zM8 8.118a.5.5 0 01.757-.429l4 2.382a.5.5 0 010 .858l-4 2.382A.5.5 0 018 12.882V8.118z",
+        clipRule: "evenodd"
+      }
+    )
+  );
+}
+
+// src/components/icons/PlusIcon.tsx
+var import_react48 = __toESM(require("react"));
+function PlusIcon({ className, ...props }) {
+  return /* @__PURE__ */ import_react48.default.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 20 20",
+      fill: "currentColor",
+      className,
+      ...props
+    },
+    /* @__PURE__ */ import_react48.default.createElement(
       "path",
       {
         d: "M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"
@@ -3618,9 +3664,9 @@ function PlusIcon({ className, ...props }) {
 }
 
 // src/components/icons/CheckSquareIcon.tsx
-var import_react48 = __toESM(require("react"));
+var import_react49 = __toESM(require("react"));
 function CheckSquareIcon({ className, ...props }) {
-  return /* @__PURE__ */ import_react48.default.createElement(
+  return /* @__PURE__ */ import_react49.default.createElement(
     "div",
     {
       className: cx(
@@ -3629,14 +3675,14 @@ function CheckSquareIcon({ className, ...props }) {
       ),
       ...props
     },
-    /* @__PURE__ */ import_react48.default.createElement(
+    /* @__PURE__ */ import_react49.default.createElement(
       "svg",
       {
         viewBox: "0 0 16 16",
         fill: "none",
         className: "absolute inset-0 w-full h-full p-0.5"
       },
-      /* @__PURE__ */ import_react48.default.createElement(
+      /* @__PURE__ */ import_react49.default.createElement(
         "path",
         {
           d: "M3 8l3 3 7-7",
@@ -3652,9 +3698,9 @@ function CheckSquareIcon({ className, ...props }) {
 }
 
 // src/components/icons/EmptySquareIcon.tsx
-var import_react49 = __toESM(require("react"));
+var import_react50 = __toESM(require("react"));
 function EmptySquareIcon({ className, ...props }) {
-  return /* @__PURE__ */ import_react49.default.createElement(
+  return /* @__PURE__ */ import_react50.default.createElement(
     "div",
     {
       className: cx(
@@ -3667,9 +3713,9 @@ function EmptySquareIcon({ className, ...props }) {
 }
 
 // src/components/icons/CrossSquareIcon.tsx
-var import_react50 = __toESM(require("react"));
+var import_react51 = __toESM(require("react"));
 function CrossSquareIcon({ className, variant = "cancelled", ...props }) {
-  return /* @__PURE__ */ import_react50.default.createElement(
+  return /* @__PURE__ */ import_react51.default.createElement(
     "div",
     {
       className: cx(
@@ -3679,14 +3725,14 @@ function CrossSquareIcon({ className, variant = "cancelled", ...props }) {
       ),
       ...props
     },
-    /* @__PURE__ */ import_react50.default.createElement(
+    /* @__PURE__ */ import_react51.default.createElement(
       "svg",
       {
         viewBox: "0 0 16 16",
         fill: "none",
         className: "absolute inset-0 w-full h-full p-0.5"
       },
-      /* @__PURE__ */ import_react50.default.createElement(
+      /* @__PURE__ */ import_react51.default.createElement(
         "path",
         {
           d: "M4 4l8 8M12 4l-8 8",
@@ -3701,15 +3747,15 @@ function CrossSquareIcon({ className, variant = "cancelled", ...props }) {
 }
 
 // src/components/icons/SquareLoaderIcon.tsx
-var import_react51 = __toESM(require("react"));
+var import_react52 = __toESM(require("react"));
 function SquareLoaderIcon({ className, ...props }) {
-  return /* @__PURE__ */ import_react51.default.createElement("div", { className: cx("relative w-4 h-4 flex-shrink-0", className), ...props }, /* @__PURE__ */ import_react51.default.createElement(
+  return /* @__PURE__ */ import_react52.default.createElement("div", { className: cx("relative w-4 h-4 flex-shrink-0", className), ...props }, /* @__PURE__ */ import_react52.default.createElement(
     "svg",
     {
       viewBox: "0 0 16 16",
       className: "w-full h-full animate-snake-spin"
     },
-    /* @__PURE__ */ import_react51.default.createElement(
+    /* @__PURE__ */ import_react52.default.createElement(
       "rect",
       {
         x: "1",
@@ -3722,7 +3768,7 @@ function SquareLoaderIcon({ className, ...props }) {
         className: "text-ash/40"
       }
     ),
-    /* @__PURE__ */ import_react51.default.createElement(
+    /* @__PURE__ */ import_react52.default.createElement(
       "rect",
       {
         x: "1",
@@ -3741,10 +3787,10 @@ function SquareLoaderIcon({ className, ...props }) {
 }
 
 // src/components/Message.tsx
-var import_react53 = __toESM(require("react"));
+var import_react54 = __toESM(require("react"));
 
 // src/components/MarkdownContent.tsx
-var import_react52 = __toESM(require("react"));
+var import_react53 = __toESM(require("react"));
 var import_dompurify = __toESM(require("dompurify"));
 var import_marked = require("marked");
 var DEFAULT_SANITIZE_CONFIG = {
@@ -3815,7 +3861,7 @@ var DEFAULT_SANITIZE_CONFIG = {
   ALLOWED_URI_REGEXP: /^(?:(?:https?|mailto|tel):|[^a-z]|[a-z+.-]+(?:[^a-z+.\-:]|$))/i
 };
 function useDOMPurifySetup() {
-  (0, import_react52.useMemo)(() => {
+  (0, import_react53.useMemo)(() => {
     import_dompurify.default.addHook("afterSanitizeAttributes", (node) => {
       if (node.tagName === "A") {
         node.setAttribute("target", "_blank");
@@ -3851,10 +3897,10 @@ function injectStreamingCursor(html, cursorClassName) {
   target.insertAdjacentHTML("beforeend", cursorHtml);
   return container.innerHTML;
 }
-var MarkdownContent = import_react52.default.forwardRef(
+var MarkdownContent = import_react53.default.forwardRef(
   ({ className, content, isMarkdown = true, sanitizeConfig, isStreaming, cursorClassName, ...rest }, ref) => {
     useDOMPurifySetup();
-    const sanitizedHtml = (0, import_react52.useMemo)(() => {
+    const sanitizedHtml = (0, import_react53.useMemo)(() => {
       if (!content && !isStreaming) {
         return "";
       }
@@ -3876,7 +3922,7 @@ var MarkdownContent = import_react52.default.forwardRef(
       }
       return sanitized;
     }, [content, sanitizeConfig, isStreaming, cursorClassName]);
-    return /* @__PURE__ */ import_react52.default.createElement(
+    return /* @__PURE__ */ import_react53.default.createElement(
       "div",
       {
         ref,
@@ -3894,7 +3940,7 @@ var variantStyles2 = {
   user: "bg-gold text-obsidian ml-auto",
   assistant: "bg-charcoal border border-ash text-white mr-auto"
 };
-var ActionButton = ({ onClick, label, children, className, disabled }) => /* @__PURE__ */ import_react53.default.createElement(
+var ActionButton = ({ onClick, label, children, className, disabled }) => /* @__PURE__ */ import_react54.default.createElement(
   "button",
   {
     type: "button",
@@ -3910,7 +3956,7 @@ var ActionButton = ({ onClick, label, children, className, disabled }) => /* @__
   },
   children
 );
-var CopyIcon = () => /* @__PURE__ */ import_react53.default.createElement(
+var CopyIcon = () => /* @__PURE__ */ import_react54.default.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -3922,10 +3968,10 @@ var CopyIcon = () => /* @__PURE__ */ import_react53.default.createElement(
     strokeLinejoin: "round",
     className: "w-3.5 h-3.5"
   },
-  /* @__PURE__ */ import_react53.default.createElement("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
-  /* @__PURE__ */ import_react53.default.createElement("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
+  /* @__PURE__ */ import_react54.default.createElement("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
+  /* @__PURE__ */ import_react54.default.createElement("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
 );
-var CheckIcon = () => /* @__PURE__ */ import_react53.default.createElement(
+var CheckIcon = () => /* @__PURE__ */ import_react54.default.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -3937,9 +3983,9 @@ var CheckIcon = () => /* @__PURE__ */ import_react53.default.createElement(
     strokeLinejoin: "round",
     className: "w-3.5 h-3.5 text-success"
   },
-  /* @__PURE__ */ import_react53.default.createElement("polyline", { points: "20 6 9 17 4 12" })
+  /* @__PURE__ */ import_react54.default.createElement("polyline", { points: "20 6 9 17 4 12" })
 );
-var PencilIcon = () => /* @__PURE__ */ import_react53.default.createElement(
+var PencilIcon = () => /* @__PURE__ */ import_react54.default.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -3951,10 +3997,10 @@ var PencilIcon = () => /* @__PURE__ */ import_react53.default.createElement(
     strokeLinejoin: "round",
     className: "w-3.5 h-3.5"
   },
-  /* @__PURE__ */ import_react53.default.createElement("path", { d: "M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" }),
-  /* @__PURE__ */ import_react53.default.createElement("path", { d: "m15 5 4 4" })
+  /* @__PURE__ */ import_react54.default.createElement("path", { d: "M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" }),
+  /* @__PURE__ */ import_react54.default.createElement("path", { d: "m15 5 4 4" })
 );
-var RetryIcon = () => /* @__PURE__ */ import_react53.default.createElement(
+var RetryIcon = () => /* @__PURE__ */ import_react54.default.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -3966,12 +4012,12 @@ var RetryIcon = () => /* @__PURE__ */ import_react53.default.createElement(
     strokeLinejoin: "round",
     className: "w-3.5 h-3.5"
   },
-  /* @__PURE__ */ import_react53.default.createElement("path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }),
-  /* @__PURE__ */ import_react53.default.createElement("path", { d: "M21 3v5h-5" }),
-  /* @__PURE__ */ import_react53.default.createElement("path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" }),
-  /* @__PURE__ */ import_react53.default.createElement("path", { d: "M8 16H3v5" })
+  /* @__PURE__ */ import_react54.default.createElement("path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }),
+  /* @__PURE__ */ import_react54.default.createElement("path", { d: "M21 3v5h-5" }),
+  /* @__PURE__ */ import_react54.default.createElement("path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" }),
+  /* @__PURE__ */ import_react54.default.createElement("path", { d: "M8 16H3v5" })
 );
-var ChevronLeftIcon2 = () => /* @__PURE__ */ import_react53.default.createElement(
+var ChevronLeftIcon2 = () => /* @__PURE__ */ import_react54.default.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -3983,9 +4029,9 @@ var ChevronLeftIcon2 = () => /* @__PURE__ */ import_react53.default.createElemen
     strokeLinejoin: "round",
     className: "w-3 h-3"
   },
-  /* @__PURE__ */ import_react53.default.createElement("path", { d: "m15 18-6-6 6-6" })
+  /* @__PURE__ */ import_react54.default.createElement("path", { d: "m15 18-6-6 6-6" })
 );
-var ChevronRightIcon2 = () => /* @__PURE__ */ import_react53.default.createElement(
+var ChevronRightIcon2 = () => /* @__PURE__ */ import_react54.default.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -3997,9 +4043,9 @@ var ChevronRightIcon2 = () => /* @__PURE__ */ import_react53.default.createEleme
     strokeLinejoin: "round",
     className: "w-3 h-3"
   },
-  /* @__PURE__ */ import_react53.default.createElement("path", { d: "m9 18 6-6-6-6" })
+  /* @__PURE__ */ import_react54.default.createElement("path", { d: "m9 18 6-6-6-6" })
 );
-var GitBranchIcon = () => /* @__PURE__ */ import_react53.default.createElement(
+var GitBranchIcon = () => /* @__PURE__ */ import_react54.default.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -4011,12 +4057,12 @@ var GitBranchIcon = () => /* @__PURE__ */ import_react53.default.createElement(
     strokeLinejoin: "round",
     className: "w-3 h-3 mr-0.5 text-silver/50"
   },
-  /* @__PURE__ */ import_react53.default.createElement("line", { x1: "6", x2: "6", y1: "3", y2: "15" }),
-  /* @__PURE__ */ import_react53.default.createElement("circle", { cx: "18", cy: "6", r: "3" }),
-  /* @__PURE__ */ import_react53.default.createElement("circle", { cx: "6", cy: "18", r: "3" }),
-  /* @__PURE__ */ import_react53.default.createElement("path", { d: "M18 9a9 9 0 0 1-9 9" })
+  /* @__PURE__ */ import_react54.default.createElement("line", { x1: "6", x2: "6", y1: "3", y2: "15" }),
+  /* @__PURE__ */ import_react54.default.createElement("circle", { cx: "18", cy: "6", r: "3" }),
+  /* @__PURE__ */ import_react54.default.createElement("circle", { cx: "6", cy: "18", r: "3" }),
+  /* @__PURE__ */ import_react54.default.createElement("path", { d: "M18 9a9 9 0 0 1-9 9" })
 );
-var XIcon = () => /* @__PURE__ */ import_react53.default.createElement(
+var XIcon = () => /* @__PURE__ */ import_react54.default.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -4028,10 +4074,10 @@ var XIcon = () => /* @__PURE__ */ import_react53.default.createElement(
     strokeLinejoin: "round",
     className: "w-4 h-4"
   },
-  /* @__PURE__ */ import_react53.default.createElement("path", { d: "M18 6 6 18" }),
-  /* @__PURE__ */ import_react53.default.createElement("path", { d: "m6 6 12 12" })
+  /* @__PURE__ */ import_react54.default.createElement("path", { d: "M18 6 6 18" }),
+  /* @__PURE__ */ import_react54.default.createElement("path", { d: "m6 6 12 12" })
 );
-var SendIcon = () => /* @__PURE__ */ import_react53.default.createElement(
+var SendIcon = () => /* @__PURE__ */ import_react54.default.createElement(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -4043,10 +4089,10 @@ var SendIcon = () => /* @__PURE__ */ import_react53.default.createElement(
     strokeLinejoin: "round",
     className: "w-4 h-4"
   },
-  /* @__PURE__ */ import_react53.default.createElement("path", { d: "m22 2-7 20-4-9-9-4Z" }),
-  /* @__PURE__ */ import_react53.default.createElement("path", { d: "M22 2 11 13" })
+  /* @__PURE__ */ import_react54.default.createElement("path", { d: "m22 2-7 20-4-9-9-4Z" }),
+  /* @__PURE__ */ import_react54.default.createElement("path", { d: "M22 2 11 13" })
 );
-var Message = import_react53.default.forwardRef(
+var Message = import_react54.default.forwardRef(
   ({
     variant = "assistant",
     className,
@@ -4058,13 +4104,13 @@ var Message = import_react53.default.forwardRef(
     ...rest
   }, ref) => {
     const isUser = variant === "user";
-    const [copied, setCopied] = (0, import_react53.useState)(false);
-    const [isEditing, setIsEditing] = (0, import_react53.useState)(false);
-    const [editValue, setEditValue] = (0, import_react53.useState)(content);
-    const textareaRef = (0, import_react53.useRef)(null);
+    const [copied, setCopied] = (0, import_react54.useState)(false);
+    const [isEditing, setIsEditing] = (0, import_react54.useState)(false);
+    const [editValue, setEditValue] = (0, import_react54.useState)(content);
+    const textareaRef = (0, import_react54.useRef)(null);
     const showBranchNav = branchInfo && branchInfo.total > 1;
     const showActions = actions && !hideActions && !isStreaming;
-    (0, import_react53.useEffect)(() => {
+    (0, import_react54.useEffect)(() => {
       if (isEditing && textareaRef.current) {
         const textarea = textareaRef.current;
         textarea.style.height = "auto";
@@ -4118,7 +4164,7 @@ var Message = import_react53.default.forwardRef(
       textarea.style.height = "auto";
       textarea.style.height = `${textarea.scrollHeight}px`;
     };
-    return /* @__PURE__ */ import_react53.default.createElement(
+    return /* @__PURE__ */ import_react54.default.createElement(
       "div",
       {
         ref,
@@ -4129,7 +4175,7 @@ var Message = import_react53.default.forwardRef(
         ),
         ...rest
       },
-      isUser && isEditing ? /* @__PURE__ */ import_react53.default.createElement("div", { className: "w-full max-w-11/12" }, /* @__PURE__ */ import_react53.default.createElement("div", { className: "relative bg-gold" }, /* @__PURE__ */ import_react53.default.createElement(
+      isUser && isEditing ? /* @__PURE__ */ import_react54.default.createElement("div", { className: "w-full max-w-11/12" }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "relative bg-gold" }, /* @__PURE__ */ import_react54.default.createElement(
         "textarea",
         {
           ref: textareaRef,
@@ -4139,7 +4185,7 @@ var Message = import_react53.default.forwardRef(
           className: "w-full bg-transparent text-obsidian px-3 py-2 pr-20 resize-none outline-none min-h-10 text-sm",
           rows: 1
         }
-      ), /* @__PURE__ */ import_react53.default.createElement("div", { className: "absolute right-1 top-1/2 -translate-y-1/2 flex gap-0.5" }, /* @__PURE__ */ import_react53.default.createElement(
+      ), /* @__PURE__ */ import_react54.default.createElement("div", { className: "absolute right-1 top-1/2 -translate-y-1/2 flex gap-0.5" }, /* @__PURE__ */ import_react54.default.createElement(
         "button",
         {
           type: "button",
@@ -4147,8 +4193,8 @@ var Message = import_react53.default.forwardRef(
           className: "p-1.5 text-obsidian/60 hover:text-obsidian transition-colors",
           "aria-label": "Cancel edit"
         },
-        /* @__PURE__ */ import_react53.default.createElement(XIcon, null)
-      ), /* @__PURE__ */ import_react53.default.createElement(
+        /* @__PURE__ */ import_react54.default.createElement(XIcon, null)
+      ), /* @__PURE__ */ import_react54.default.createElement(
         "button",
         {
           type: "button",
@@ -4157,8 +4203,8 @@ var Message = import_react53.default.forwardRef(
           className: "p-1.5 text-obsidian/60 hover:text-obsidian transition-colors disabled:opacity-30",
           "aria-label": "Submit edit"
         },
-        /* @__PURE__ */ import_react53.default.createElement(SendIcon, null)
-      )))) : /* @__PURE__ */ import_react53.default.createElement(
+        /* @__PURE__ */ import_react54.default.createElement(SendIcon, null)
+      )))) : /* @__PURE__ */ import_react54.default.createElement(
         "div",
         {
           className: cx(
@@ -4166,7 +4212,7 @@ var Message = import_react53.default.forwardRef(
             variantStyles2[variant]
           )
         },
-        /* @__PURE__ */ import_react53.default.createElement(
+        /* @__PURE__ */ import_react54.default.createElement(
           MarkdownContent,
           {
             content,
@@ -4176,17 +4222,17 @@ var Message = import_react53.default.forwardRef(
           }
         )
       ),
-      showActions && !isEditing && /* @__PURE__ */ import_react53.default.createElement("div", { className: cx(
+      showActions && !isEditing && /* @__PURE__ */ import_react54.default.createElement("div", { className: cx(
         "flex items-center gap-0.5 mt-1",
         isUser ? "mr-1" : "ml-1"
-      ) }, actions.showCopy !== false && /* @__PURE__ */ import_react53.default.createElement(
+      ) }, actions.showCopy !== false && /* @__PURE__ */ import_react54.default.createElement(
         ActionButton,
         {
           onClick: handleCopy,
           label: copied ? "Copied!" : "Copy message"
         },
-        copied ? /* @__PURE__ */ import_react53.default.createElement(CheckIcon, null) : /* @__PURE__ */ import_react53.default.createElement(CopyIcon, null)
-      ), isUser && actions.onEdit && /* @__PURE__ */ import_react53.default.createElement(ActionButton, { onClick: handleStartEdit, label: "Edit message" }, /* @__PURE__ */ import_react53.default.createElement(PencilIcon, null)), !isUser && actions.onRetry && /* @__PURE__ */ import_react53.default.createElement(ActionButton, { onClick: actions.onRetry, label: "Regenerate response" }, /* @__PURE__ */ import_react53.default.createElement(RetryIcon, null)), showBranchNav && /* @__PURE__ */ import_react53.default.createElement(import_react53.default.Fragment, null, /* @__PURE__ */ import_react53.default.createElement("div", { className: "w-px h-4 bg-ash/40 mx-1" }), /* @__PURE__ */ import_react53.default.createElement("div", { className: "flex items-center gap-0.5 text-silver/70" }, /* @__PURE__ */ import_react53.default.createElement(GitBranchIcon, null), /* @__PURE__ */ import_react53.default.createElement(
+        copied ? /* @__PURE__ */ import_react54.default.createElement(CheckIcon, null) : /* @__PURE__ */ import_react54.default.createElement(CopyIcon, null)
+      ), isUser && actions.onEdit && /* @__PURE__ */ import_react54.default.createElement(ActionButton, { onClick: handleStartEdit, label: "Edit message" }, /* @__PURE__ */ import_react54.default.createElement(PencilIcon, null)), !isUser && actions.onRetry && /* @__PURE__ */ import_react54.default.createElement(ActionButton, { onClick: actions.onRetry, label: "Regenerate response" }, /* @__PURE__ */ import_react54.default.createElement(RetryIcon, null)), showBranchNav && /* @__PURE__ */ import_react54.default.createElement(import_react54.default.Fragment, null, /* @__PURE__ */ import_react54.default.createElement("div", { className: "w-px h-4 bg-ash/40 mx-1" }), /* @__PURE__ */ import_react54.default.createElement("div", { className: "flex items-center gap-0.5 text-silver/70" }, /* @__PURE__ */ import_react54.default.createElement(GitBranchIcon, null), /* @__PURE__ */ import_react54.default.createElement(
         "button",
         {
           type: "button",
@@ -4198,8 +4244,8 @@ var Message = import_react53.default.forwardRef(
           ),
           "aria-label": "Previous branch"
         },
-        /* @__PURE__ */ import_react53.default.createElement(ChevronLeftIcon2, null)
-      ), /* @__PURE__ */ import_react53.default.createElement("span", { className: "text-xs tabular-nums min-w-6 text-center" }, branchInfo.current, "/", branchInfo.total), /* @__PURE__ */ import_react53.default.createElement(
+        /* @__PURE__ */ import_react54.default.createElement(ChevronLeftIcon2, null)
+      ), /* @__PURE__ */ import_react54.default.createElement("span", { className: "text-xs tabular-nums min-w-6 text-center" }, branchInfo.current, "/", branchInfo.total), /* @__PURE__ */ import_react54.default.createElement(
         "button",
         {
           type: "button",
@@ -4211,7 +4257,7 @@ var Message = import_react53.default.forwardRef(
           ),
           "aria-label": "Next branch"
         },
-        /* @__PURE__ */ import_react53.default.createElement(ChevronRightIcon2, null)
+        /* @__PURE__ */ import_react54.default.createElement(ChevronRightIcon2, null)
       ))))
     );
   }
@@ -4219,15 +4265,15 @@ var Message = import_react53.default.forwardRef(
 Message.displayName = "Message";
 
 // src/components/StreamingCursor.tsx
-var import_react54 = __toESM(require("react"));
-var StreamingCursor = import_react54.default.forwardRef(
+var import_react55 = __toESM(require("react"));
+var StreamingCursor = import_react55.default.forwardRef(
   ({ className, variant = "line", ...rest }, ref) => {
     const variantStyles3 = {
       block: "w-2.5 h-cursor translate-y-cursor-offset",
       line: "w-0.5 h-cursor translate-y-cursor-offset",
       underscore: "w-2.5 h-0.5 self-end mb-0.5"
     };
-    return /* @__PURE__ */ import_react54.default.createElement(
+    return /* @__PURE__ */ import_react55.default.createElement(
       "span",
       {
         ref,
@@ -4245,18 +4291,18 @@ var StreamingCursor = import_react54.default.forwardRef(
 StreamingCursor.displayName = "StreamingCursor";
 
 // src/components/chat/ChatInterface.tsx
-var import_react72 = __toESM(require("react"));
+var import_react78 = __toESM(require("react"));
 
 // src/components/chat/ChatView.tsx
-var import_react58 = __toESM(require("react"));
+var import_react59 = __toESM(require("react"));
 
 // src/components/chat/hooks/useScrollAnchor.ts
-var import_react55 = require("react");
+var import_react56 = require("react");
 function useScrollAnchor(options = {}) {
   const { behavior = "smooth", block = "start" } = options;
-  const containerRef = (0, import_react55.useRef)(null);
-  const anchorRef = (0, import_react55.useRef)(null);
-  const scrollToAnchor = (0, import_react55.useCallback)(() => {
+  const containerRef = (0, import_react56.useRef)(null);
+  const anchorRef = (0, import_react56.useRef)(null);
+  const scrollToAnchor = (0, import_react56.useCallback)(() => {
     const el = anchorRef.current;
     if (!el) {
       return;
@@ -4267,7 +4313,7 @@ function useScrollAnchor(options = {}) {
       });
     });
   }, [behavior, block]);
-  const scrollToBottom = (0, import_react55.useCallback)(() => {
+  const scrollToBottom = (0, import_react56.useCallback)(() => {
     const container = containerRef.current;
     if (!container) {
       return;
@@ -4278,7 +4324,7 @@ function useScrollAnchor(options = {}) {
       container.scrollTop = container.scrollHeight;
     }
   }, [behavior]);
-  const isScrolledToBottom = (0, import_react55.useCallback)(() => {
+  const isScrolledToBottom = (0, import_react56.useCallback)(() => {
     const container = containerRef.current;
     if (!container) {
       return true;
@@ -4297,15 +4343,15 @@ function useScrollAnchor(options = {}) {
 }
 
 // src/components/chat/hooks/useAdaptiveSpacer.ts
-var import_react56 = require("react");
+var import_react57 = require("react");
 function useAdaptiveSpacer(options = {}) {
   const { minHeight = 0, containerRef: externalContainerRef, anchorRef } = options;
-  const internalContainerRef = (0, import_react56.useRef)(null);
+  const internalContainerRef = (0, import_react57.useRef)(null);
   const containerRef = externalContainerRef ?? internalContainerRef;
-  const contentRef = (0, import_react56.useRef)(null);
-  const spacerRef = (0, import_react56.useRef)(null);
-  const [spacerHeight, setSpacerHeight] = (0, import_react56.useState)(0);
-  const recalculate = (0, import_react56.useCallback)(() => {
+  const contentRef = (0, import_react57.useRef)(null);
+  const spacerRef = (0, import_react57.useRef)(null);
+  const [spacerHeight, setSpacerHeight] = (0, import_react57.useState)(0);
+  const recalculate = (0, import_react57.useCallback)(() => {
     const container = containerRef.current;
     const content = contentRef.current;
     if (!container || !content) {
@@ -4329,7 +4375,7 @@ function useAdaptiveSpacer(options = {}) {
     }
     setSpacerHeight(newSpacerHeight);
   }, [minHeight, anchorRef]);
-  (0, import_react56.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     const container = containerRef.current;
     const content = contentRef.current;
     if (!container || !content) {
@@ -4364,7 +4410,7 @@ function useAdaptiveSpacer(options = {}) {
 }
 
 // src/components/chat/ThinkingIndicator.tsx
-var import_react57 = __toESM(require("react"));
+var import_react58 = __toESM(require("react"));
 var THINKING_PHRASES = [
   "Consulting the ancient tomes...",
   "Parsing the ineffable...",
@@ -4380,7 +4426,7 @@ var THINKING_PHRASES = [
   "Consulting my inner monologue...",
   "Summoning the muse..."
 ];
-var ThinkingIndicator = import_react57.default.forwardRef(
+var ThinkingIndicator = import_react58.default.forwardRef(
   ({
     isVisible = true,
     phraseInterval = 2500,
@@ -4388,11 +4434,11 @@ var ThinkingIndicator = import_react57.default.forwardRef(
     className,
     ...rest
   }, ref) => {
-    const [currentIndex, setCurrentIndex] = (0, import_react57.useState)(
+    const [currentIndex, setCurrentIndex] = (0, import_react58.useState)(
       () => Math.floor(Math.random() * phrases.length)
     );
-    const [isTransitioning, setIsTransitioning] = (0, import_react57.useState)(false);
-    (0, import_react57.useEffect)(() => {
+    const [isTransitioning, setIsTransitioning] = (0, import_react58.useState)(false);
+    (0, import_react58.useEffect)(() => {
       if (!isVisible || phrases.length <= 1) {
         return;
       }
@@ -4408,7 +4454,7 @@ var ThinkingIndicator = import_react57.default.forwardRef(
     if (!isVisible) {
       return null;
     }
-    return /* @__PURE__ */ import_react57.default.createElement(
+    return /* @__PURE__ */ import_react58.default.createElement(
       "div",
       {
         ref,
@@ -4422,26 +4468,26 @@ var ThinkingIndicator = import_react57.default.forwardRef(
         "aria-live": "polite",
         ...rest
       },
-      /* @__PURE__ */ import_react57.default.createElement("div", { className: "flex gap-1", "aria-hidden": "true" }, /* @__PURE__ */ import_react57.default.createElement(
+      /* @__PURE__ */ import_react58.default.createElement("div", { className: "flex gap-1", "aria-hidden": "true" }, /* @__PURE__ */ import_react58.default.createElement(
         "span",
         {
           className: "w-1.5 h-1.5 bg-gold/60 rounded-full animate-pulse",
           style: { animationDelay: "0ms" }
         }
-      ), /* @__PURE__ */ import_react57.default.createElement(
+      ), /* @__PURE__ */ import_react58.default.createElement(
         "span",
         {
           className: "w-1.5 h-1.5 bg-gold/60 rounded-full animate-pulse",
           style: { animationDelay: "150ms" }
         }
-      ), /* @__PURE__ */ import_react57.default.createElement(
+      ), /* @__PURE__ */ import_react58.default.createElement(
         "span",
         {
           className: "w-1.5 h-1.5 bg-gold/60 rounded-full animate-pulse",
           style: { animationDelay: "300ms" }
         }
       )),
-      /* @__PURE__ */ import_react57.default.createElement(
+      /* @__PURE__ */ import_react58.default.createElement(
         "span",
         {
           className: cx(
@@ -4457,7 +4503,7 @@ var ThinkingIndicator = import_react57.default.forwardRef(
 ThinkingIndicator.displayName = "ThinkingIndicator";
 
 // src/components/chat/ChatView.tsx
-var ChatView = import_react58.default.forwardRef(
+var ChatView = import_react59.default.forwardRef(
   ({ messages, latestUserMessageIndex, isStreaming, isThinking, onScroll, className, ...rest }, ref) => {
     const { containerRef, anchorRef, scrollToAnchor } = useScrollAnchor({
       behavior: "smooth",
@@ -4467,7 +4513,7 @@ var ChatView = import_react58.default.forwardRef(
       containerRef,
       anchorRef
     });
-    (0, import_react58.useEffect)(() => {
+    (0, import_react59.useEffect)(() => {
       if (latestUserMessageIndex !== void 0 && latestUserMessageIndex >= 0) {
         scrollToAnchor();
       }
@@ -4479,7 +4525,7 @@ var ChatView = import_react58.default.forwardRef(
       return found;
     }, -1);
     const showThinking = isThinking && messages.length > 0 && messages[messages.length - 1]?.variant === "user";
-    return /* @__PURE__ */ import_react58.default.createElement(
+    return /* @__PURE__ */ import_react59.default.createElement(
       "div",
       {
         ref: (node) => {
@@ -4499,7 +4545,7 @@ var ChatView = import_react58.default.forwardRef(
         ),
         ...rest
       },
-      /* @__PURE__ */ import_react58.default.createElement("div", { ref: contentRef, className: "relative flex flex-col gap-3" }, messages.map(({
+      /* @__PURE__ */ import_react59.default.createElement("div", { ref: contentRef, className: "relative flex flex-col gap-3" }, messages.map(({
         id,
         variant,
         className: messageClassName,
@@ -4512,14 +4558,14 @@ var ChatView = import_react58.default.forwardRef(
         const isLastMessage = index === messages.length - 1;
         const showStreaming = isLastMessage && isStreaming && variant === "assistant";
         const isMessageStreaming = showStreaming || !!nodeIsStreaming;
-        return /* @__PURE__ */ import_react58.default.createElement(
+        return /* @__PURE__ */ import_react59.default.createElement(
           "div",
           {
             key: id ?? `msg-${index}`,
             ref: isAnchor ? anchorRef : void 0,
             className: isAnchor ? "scroll-mt-4" : void 0
           },
-          /* @__PURE__ */ import_react58.default.createElement(
+          /* @__PURE__ */ import_react59.default.createElement(
             Message,
             {
               variant,
@@ -4532,8 +4578,8 @@ var ChatView = import_react58.default.forwardRef(
             }
           )
         );
-      }), showThinking && /* @__PURE__ */ import_react58.default.createElement(ThinkingIndicator, { isVisible: true })),
-      /* @__PURE__ */ import_react58.default.createElement(
+      }), showThinking && /* @__PURE__ */ import_react59.default.createElement(ThinkingIndicator, { isVisible: true })),
+      /* @__PURE__ */ import_react59.default.createElement(
         "div",
         {
           ref: spacerRef,
@@ -4548,7 +4594,7 @@ var ChatView = import_react58.default.forwardRef(
 ChatView.displayName = "ChatView";
 
 // src/components/chat/ChatInput.tsx
-var import_react59 = __toESM(require("react"));
+var import_react60 = __toESM(require("react"));
 var import_lucide_react11 = require("lucide-react");
 
 // src/components/chat/types.ts
@@ -4717,7 +4763,7 @@ function isBranchPoint(tree, nodeId) {
 }
 
 // src/components/chat/ChatInput.tsx
-var ChatInput = import_react59.default.forwardRef(
+var ChatInput = import_react60.default.forwardRef(
   ({
     position = "bottom",
     placeholder = "Send a message...",
@@ -4734,13 +4780,13 @@ var ChatInput = import_react59.default.forwardRef(
     className,
     ...rest
   }, ref) => {
-    const [value, setValue] = (0, import_react59.useState)("");
-    const [localAttachments, setLocalAttachments] = (0, import_react59.useState)([]);
-    const [isDragOver, setIsDragOver] = (0, import_react59.useState)(false);
-    const textareaRef = (0, import_react59.useRef)(null);
-    const fileInputRef = (0, import_react59.useRef)(null);
+    const [value, setValue] = (0, import_react60.useState)("");
+    const [localAttachments, setLocalAttachments] = (0, import_react60.useState)([]);
+    const [isDragOver, setIsDragOver] = (0, import_react60.useState)(false);
+    const textareaRef = (0, import_react60.useRef)(null);
+    const fileInputRef = (0, import_react60.useRef)(null);
     const attachments = controlledAttachments ?? localAttachments;
-    const setAttachments = (0, import_react59.useCallback)(
+    const setAttachments = (0, import_react60.useCallback)(
       (newAttachments) => {
         if (onAttachmentsChange) {
           if (typeof newAttachments === "function") {
@@ -4754,7 +4800,7 @@ var ChatInput = import_react59.default.forwardRef(
       },
       [attachments, onAttachmentsChange]
     );
-    const handleSubmit = (0, import_react59.useCallback)(() => {
+    const handleSubmit = (0, import_react60.useCallback)(() => {
       const trimmed = value.trim();
       if (!trimmed || disabled || isStreaming) {
         return;
@@ -4766,7 +4812,7 @@ var ChatInput = import_react59.default.forwardRef(
         textareaRef.current.style.height = "auto";
       }
     }, [value, disabled, isStreaming, onSubmit, attachments, setAttachments]);
-    const handleKeyDown = (0, import_react59.useCallback)(
+    const handleKeyDown = (0, import_react60.useCallback)(
       (e) => {
         if (e.key === "Enter" && !e.shiftKey) {
           e.preventDefault();
@@ -4775,18 +4821,18 @@ var ChatInput = import_react59.default.forwardRef(
       },
       [handleSubmit]
     );
-    const handleChange = (0, import_react59.useCallback)((e) => {
+    const handleChange = (0, import_react60.useCallback)((e) => {
       setValue(e.target.value);
       const textarea = e.target;
       textarea.style.height = "auto";
       textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
     }, []);
-    (0, import_react59.useEffect)(() => {
+    (0, import_react60.useEffect)(() => {
       if (!disabled && !isStreaming && textareaRef.current) {
         textareaRef.current.focus();
       }
     }, [disabled, isStreaming]);
-    const addFiles = (0, import_react59.useCallback)(
+    const addFiles = (0, import_react60.useCallback)(
       (files) => {
         const newAttachments = Array.from(files).map((file) => ({
           id: generateId(),
@@ -4798,7 +4844,7 @@ var ChatInput = import_react59.default.forwardRef(
       },
       [setAttachments]
     );
-    const handleFileSelect = (0, import_react59.useCallback)(
+    const handleFileSelect = (0, import_react60.useCallback)(
       (e) => {
         const files = e.target.files;
         if (files && files.length > 0) {
@@ -4808,7 +4854,7 @@ var ChatInput = import_react59.default.forwardRef(
       },
       [addFiles]
     );
-    const handleRemoveAttachment = (0, import_react59.useCallback)(
+    const handleRemoveAttachment = (0, import_react60.useCallback)(
       (id) => {
         setAttachments((prev) => {
           const attachment = prev.find((a) => a.id === id);
@@ -4820,23 +4866,23 @@ var ChatInput = import_react59.default.forwardRef(
       },
       [setAttachments]
     );
-    const handleDragEnter = (0, import_react59.useCallback)((e) => {
+    const handleDragEnter = (0, import_react60.useCallback)((e) => {
       e.preventDefault();
       e.stopPropagation();
       setIsDragOver(true);
     }, []);
-    const handleDragLeave = (0, import_react59.useCallback)((e) => {
+    const handleDragLeave = (0, import_react60.useCallback)((e) => {
       e.preventDefault();
       e.stopPropagation();
       if (!e.currentTarget.contains(e.relatedTarget)) {
         setIsDragOver(false);
       }
     }, []);
-    const handleDragOver = (0, import_react59.useCallback)((e) => {
+    const handleDragOver = (0, import_react60.useCallback)((e) => {
       e.preventDefault();
       e.stopPropagation();
     }, []);
-    const handleDrop = (0, import_react59.useCallback)(
+    const handleDrop = (0, import_react60.useCallback)(
       (e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -4851,7 +4897,7 @@ var ChatInput = import_react59.default.forwardRef(
     const isCentered = position === "centered";
     const hasAttachments = attachments.length > 0;
     const canSubmit = value.trim() && !disabled && !isStreaming;
-    return /* @__PURE__ */ import_react59.default.createElement(
+    return /* @__PURE__ */ import_react60.default.createElement(
       "div",
       {
         ref,
@@ -4863,8 +4909,8 @@ var ChatInput = import_react59.default.forwardRef(
         ),
         ...rest
       },
-      isCentered && helperText && /* @__PURE__ */ import_react59.default.createElement("p", { className: "text-silver text-sm mb-4 text-center" }, helperText),
-      /* @__PURE__ */ import_react59.default.createElement(
+      isCentered && helperText && /* @__PURE__ */ import_react60.default.createElement("p", { className: "text-silver text-sm mb-4 text-center" }, helperText),
+      /* @__PURE__ */ import_react60.default.createElement(
         "div",
         {
           className: cx(
@@ -4879,7 +4925,7 @@ var ChatInput = import_react59.default.forwardRef(
           onDragOver: showAttachmentButton ? handleDragOver : void 0,
           onDrop: showAttachmentButton ? handleDrop : void 0
         },
-        hasAttachments && /* @__PURE__ */ import_react59.default.createElement("div", { className: "px-3 pt-3 pb-1" }, /* @__PURE__ */ import_react59.default.createElement(
+        hasAttachments && /* @__PURE__ */ import_react60.default.createElement("div", { className: "px-3 pt-3 pb-1" }, /* @__PURE__ */ import_react60.default.createElement(
           AttachmentPreview,
           {
             attachments,
@@ -4887,14 +4933,14 @@ var ChatInput = import_react59.default.forwardRef(
             removable: !isStreaming
           }
         )),
-        isDragOver && /* @__PURE__ */ import_react59.default.createElement(
+        isDragOver && /* @__PURE__ */ import_react60.default.createElement(
           "div",
           {
             className: "absolute inset-0 bg-gold/10 flex items-center justify-center z-10 pointer-events-none"
           },
-          /* @__PURE__ */ import_react59.default.createElement("span", { className: "text-gold text-sm font-medium" }, "Drop files here")
+          /* @__PURE__ */ import_react60.default.createElement("span", { className: "text-gold text-sm font-medium" }, "Drop files here")
         ),
-        /* @__PURE__ */ import_react59.default.createElement("div", { className: "flex items-end" }, showAttachmentButton && /* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, /* @__PURE__ */ import_react59.default.createElement(
+        /* @__PURE__ */ import_react60.default.createElement("div", { className: "flex items-end" }, showAttachmentButton && /* @__PURE__ */ import_react60.default.createElement(import_react60.default.Fragment, null, /* @__PURE__ */ import_react60.default.createElement(
           "button",
           {
             type: "button",
@@ -4906,8 +4952,8 @@ var ChatInput = import_react59.default.forwardRef(
             ),
             "aria-label": "Attach file"
           },
-          /* @__PURE__ */ import_react59.default.createElement(import_lucide_react11.Paperclip, { className: "w-5 h-5" })
-        ), /* @__PURE__ */ import_react59.default.createElement(
+          /* @__PURE__ */ import_react60.default.createElement(import_lucide_react11.Paperclip, { className: "w-5 h-5" })
+        ), /* @__PURE__ */ import_react60.default.createElement(
           "input",
           {
             ref: fileInputRef,
@@ -4918,7 +4964,7 @@ var ChatInput = import_react59.default.forwardRef(
             className: "hidden",
             "aria-hidden": "true"
           }
-        )), /* @__PURE__ */ import_react59.default.createElement(
+        )), /* @__PURE__ */ import_react60.default.createElement(
           "textarea",
           {
             ref: textareaRef,
@@ -4936,7 +4982,7 @@ var ChatInput = import_react59.default.forwardRef(
             ),
             style: { maxHeight: 200 }
           }
-        ), isStreaming ? /* @__PURE__ */ import_react59.default.createElement(
+        ), isStreaming ? /* @__PURE__ */ import_react60.default.createElement(
           "button",
           {
             type: "button",
@@ -4947,8 +4993,8 @@ var ChatInput = import_react59.default.forwardRef(
             ),
             "aria-label": "Stop generation"
           },
-          /* @__PURE__ */ import_react59.default.createElement(import_lucide_react11.Square, { className: "w-5 h-5 fill-current" })
-        ) : /* @__PURE__ */ import_react59.default.createElement(
+          /* @__PURE__ */ import_react60.default.createElement(import_lucide_react11.Square, { className: "w-5 h-5 fill-current" })
+        ) : /* @__PURE__ */ import_react60.default.createElement(
           "button",
           {
             type: "button",
@@ -4961,7 +5007,7 @@ var ChatInput = import_react59.default.forwardRef(
             ),
             "aria-label": "Send message"
           },
-          /* @__PURE__ */ import_react59.default.createElement(import_lucide_react11.Send, { className: "w-5 h-5" })
+          /* @__PURE__ */ import_react60.default.createElement(import_lucide_react11.Send, { className: "w-5 h-5" })
         ))
       )
     );
@@ -4970,9 +5016,9 @@ var ChatInput = import_react59.default.forwardRef(
 ChatInput.displayName = "ChatInput";
 
 // src/components/chat/ConversationSidebar.tsx
-var import_react60 = __toESM(require("react"));
+var import_react61 = __toESM(require("react"));
 function HistoryIcon2({ className }) {
-  return /* @__PURE__ */ import_react60.default.createElement(
+  return /* @__PURE__ */ import_react61.default.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -4980,7 +5026,7 @@ function HistoryIcon2({ className }) {
       fill: "currentColor",
       className
     },
-    /* @__PURE__ */ import_react60.default.createElement(
+    /* @__PURE__ */ import_react61.default.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -4991,7 +5037,7 @@ function HistoryIcon2({ className }) {
   );
 }
 function ChevronLeftIcon3({ className }) {
-  return /* @__PURE__ */ import_react60.default.createElement(
+  return /* @__PURE__ */ import_react61.default.createElement(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -4999,7 +5045,7 @@ function ChevronLeftIcon3({ className }) {
       fill: "currentColor",
       className
     },
-    /* @__PURE__ */ import_react60.default.createElement(
+    /* @__PURE__ */ import_react61.default.createElement(
       "path",
       {
         fillRule: "evenodd",
@@ -5009,7 +5055,7 @@ function ChevronLeftIcon3({ className }) {
     )
   );
 }
-var ConversationSidebar = import_react60.default.forwardRef(
+var ConversationSidebar = import_react61.default.forwardRef(
   ({
     conversations,
     isCollapsed = false,
@@ -5022,7 +5068,7 @@ var ConversationSidebar = import_react60.default.forwardRef(
     ...rest
   }, ref) => {
     if (isCollapsed) {
-      return /* @__PURE__ */ import_react60.default.createElement(
+      return /* @__PURE__ */ import_react61.default.createElement(
         "div",
         {
           ref,
@@ -5033,7 +5079,7 @@ var ConversationSidebar = import_react60.default.forwardRef(
           ),
           ...rest
         },
-        /* @__PURE__ */ import_react60.default.createElement(
+        /* @__PURE__ */ import_react61.default.createElement(
           "button",
           {
             onClick: onToggleCollapse,
@@ -5044,11 +5090,11 @@ var ConversationSidebar = import_react60.default.forwardRef(
             ),
             "aria-label": "Expand sidebar"
           },
-          /* @__PURE__ */ import_react60.default.createElement(HistoryIcon2, { className: "w-5 h-5" })
+          /* @__PURE__ */ import_react61.default.createElement(HistoryIcon2, { className: "w-5 h-5" })
         )
       );
     }
-    return /* @__PURE__ */ import_react60.default.createElement(
+    return /* @__PURE__ */ import_react61.default.createElement(
       "div",
       {
         ref,
@@ -5062,7 +5108,7 @@ var ConversationSidebar = import_react60.default.forwardRef(
         style: width ? { width } : void 0,
         ...rest
       },
-      /* @__PURE__ */ import_react60.default.createElement(
+      /* @__PURE__ */ import_react61.default.createElement(
         "div",
         {
           onMouseDown: onResizeStart,
@@ -5075,7 +5121,7 @@ var ConversationSidebar = import_react60.default.forwardRef(
           )
         }
       ),
-      /* @__PURE__ */ import_react60.default.createElement("div", { className: "p-3 border-b border-ash/40 flex-shrink-0 flex items-center gap-2" }, /* @__PURE__ */ import_react60.default.createElement(
+      /* @__PURE__ */ import_react61.default.createElement("div", { className: "p-3 border-b border-ash/40 flex-shrink-0 flex items-center gap-2" }, /* @__PURE__ */ import_react61.default.createElement(
         "button",
         {
           onClick: onToggleCollapse,
@@ -5086,8 +5132,8 @@ var ConversationSidebar = import_react60.default.forwardRef(
           ),
           "aria-label": "Collapse sidebar"
         },
-        /* @__PURE__ */ import_react60.default.createElement(ChevronLeftIcon3, { className: "w-5 h-5" })
-      ), /* @__PURE__ */ import_react60.default.createElement(
+        /* @__PURE__ */ import_react61.default.createElement(ChevronLeftIcon3, { className: "w-5 h-5" })
+      ), /* @__PURE__ */ import_react61.default.createElement(
         "button",
         {
           onClick: onNewChat,
@@ -5099,7 +5145,7 @@ var ConversationSidebar = import_react60.default.forwardRef(
             "transition-colors duration-200"
           )
         },
-        /* @__PURE__ */ import_react60.default.createElement(
+        /* @__PURE__ */ import_react61.default.createElement(
           "svg",
           {
             xmlns: "http://www.w3.org/2000/svg",
@@ -5107,16 +5153,16 @@ var ConversationSidebar = import_react60.default.forwardRef(
             fill: "currentColor",
             className: "w-4 h-4"
           },
-          /* @__PURE__ */ import_react60.default.createElement(
+          /* @__PURE__ */ import_react61.default.createElement(
             "path",
             {
               d: "M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"
             }
           )
         ),
-        /* @__PURE__ */ import_react60.default.createElement("span", { className: "text-sm font-medium" }, "New Chat")
+        /* @__PURE__ */ import_react61.default.createElement("span", { className: "text-sm font-medium" }, "New Chat")
       )),
-      /* @__PURE__ */ import_react60.default.createElement("div", { className: "flex-1 overflow-y-auto py-2" }, conversations.length === 0 ? /* @__PURE__ */ import_react60.default.createElement("p", { className: "px-4 py-2 text-sm text-silver/60" }, "No conversations yet") : /* @__PURE__ */ import_react60.default.createElement("div", { className: "space-y-1 px-2" }, conversations.map((conversation) => /* @__PURE__ */ import_react60.default.createElement(
+      /* @__PURE__ */ import_react61.default.createElement("div", { className: "flex-1 overflow-y-auto py-2" }, conversations.length === 0 ? /* @__PURE__ */ import_react61.default.createElement("p", { className: "px-4 py-2 text-sm text-silver/60" }, "No conversations yet") : /* @__PURE__ */ import_react61.default.createElement("div", { className: "space-y-1 px-2" }, conversations.map((conversation) => /* @__PURE__ */ import_react61.default.createElement(
         "button",
         {
           key: conversation.id,
@@ -5127,16 +5173,16 @@ var ConversationSidebar = import_react60.default.forwardRef(
             conversation.isActive ? "bg-ash/40 text-white" : "text-silver hover:bg-ash/20 hover:text-white"
           )
         },
-        /* @__PURE__ */ import_react60.default.createElement("p", { className: "text-sm font-medium truncate" }, conversation.title),
-        conversation.preview && /* @__PURE__ */ import_react60.default.createElement("p", { className: "text-xs text-silver/60 truncate mt-0.5" }, conversation.preview),
-        conversation.timestamp && /* @__PURE__ */ import_react60.default.createElement("p", { className: "text-xs text-silver/40 mt-1" }, conversation.timestamp)
+        /* @__PURE__ */ import_react61.default.createElement("p", { className: "text-sm font-medium truncate" }, conversation.title),
+        conversation.preview && /* @__PURE__ */ import_react61.default.createElement("p", { className: "text-xs text-silver/60 truncate mt-0.5" }, conversation.preview),
+        conversation.timestamp && /* @__PURE__ */ import_react61.default.createElement("p", { className: "text-xs text-silver/40 mt-1" }, conversation.timestamp)
       ))))
     );
   }
 );
 ConversationSidebar.displayName = "ConversationSidebar";
-var CollapsedSidebarToggle = import_react60.default.forwardRef(({ onExpand, className, ...rest }, ref) => {
-  return /* @__PURE__ */ import_react60.default.createElement(
+var CollapsedSidebarToggle = import_react61.default.forwardRef(({ onExpand, className, ...rest }, ref) => {
+  return /* @__PURE__ */ import_react61.default.createElement(
     "button",
     {
       ref,
@@ -5151,19 +5197,19 @@ var CollapsedSidebarToggle = import_react60.default.forwardRef(({ onExpand, clas
       "aria-label": "Expand sidebar",
       ...rest
     },
-    /* @__PURE__ */ import_react60.default.createElement(HistoryIcon2, { className: "w-5 h-5" })
+    /* @__PURE__ */ import_react61.default.createElement(HistoryIcon2, { className: "w-5 h-5" })
   );
 });
 CollapsedSidebarToggle.displayName = "CollapsedSidebarToggle";
 
 // src/components/chat/ArtifactsPanel.tsx
-var import_react68 = __toESM(require("react"));
+var import_react72 = __toESM(require("react"));
 
 // src/components/ArtifactCard.tsx
-var import_react67 = __toESM(require("react"));
+var import_react68 = __toESM(require("react"));
 
 // src/components/ImageCard.tsx
-var import_react61 = __toESM(require("react"));
+var import_react62 = __toESM(require("react"));
 var ASPECT_RATIO_PRESETS = {
   landscape: "3 / 2",
   portrait: "2 / 3",
@@ -5175,7 +5221,7 @@ function resolveAspectRatio(ratio) {
   }
   return ratio.replace("/", " / ");
 }
-var ImageCard = import_react61.default.forwardRef(
+var ImageCard = import_react62.default.forwardRef(
   ({
     src,
     alt = "",
@@ -5188,24 +5234,24 @@ var ImageCard = import_react61.default.forwardRef(
     contentClassName,
     className,
     children,
-    isLoading,
+    loading,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ import_react61.default.createElement(
+    return /* @__PURE__ */ import_react62.default.createElement(
       Card,
       {
         ref,
         className: cx("p-0 overflow-hidden w-full", className),
-        isLoading,
+        loading,
         ...props
       },
-      /* @__PURE__ */ import_react61.default.createElement(
+      /* @__PURE__ */ import_react62.default.createElement(
         Card.Media,
         {
           className: mediaClassName,
           style: { aspectRatio: resolveAspectRatio(aspectRatio) }
         },
-        src && /* @__PURE__ */ import_react61.default.createElement(
+        /* @__PURE__ */ import_react62.default.createElement(import_react62.default.Fragment, null, src && /* @__PURE__ */ import_react62.default.createElement(
           "img",
           {
             src,
@@ -5215,16 +5261,15 @@ var ImageCard = import_react61.default.forwardRef(
               objectFit === "cover" ? "object-cover" : "object-contain"
             )
           }
-        ),
-        overlay && /* @__PURE__ */ import_react61.default.createElement(
+        ), overlay && /* @__PURE__ */ import_react62.default.createElement(
           "div",
           {
             className: "absolute inset-0 bg-obsidian/80 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center justify-center"
           },
           overlay
-        )
+        ))
       ),
-      /* @__PURE__ */ import_react61.default.createElement(
+      /* @__PURE__ */ import_react62.default.createElement(
         Card.Header,
         {
           title,
@@ -5232,14 +5277,14 @@ var ImageCard = import_react61.default.forwardRef(
           className: contentClassName
         }
       ),
-      children && /* @__PURE__ */ import_react61.default.createElement(Card.Body, { className: contentClassName }, children)
+      children && /* @__PURE__ */ import_react62.default.createElement(Card.Body, { className: contentClassName }, children)
     );
   }
 );
 ImageCard.displayName = "ImageCard";
 
 // src/components/VideoCard.tsx
-var import_react62 = __toESM(require("react"));
+var import_react63 = __toESM(require("react"));
 var import_react_player = __toESM(require("react-player"));
 var ASPECT_RATIO_PRESETS2 = {
   video: "16 / 9",
@@ -5252,7 +5297,7 @@ function resolveAspectRatio2(ratio) {
   }
   return ratio.replace("/", " / ");
 }
-var VideoCard = import_react62.default.forwardRef(
+var VideoCard = import_react63.default.forwardRef(
   ({
     src,
     title,
@@ -5269,24 +5314,24 @@ var VideoCard = import_react62.default.forwardRef(
     className,
     children,
     playerProps,
-    isLoading,
+    loading,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ import_react62.default.createElement(
+    return /* @__PURE__ */ import_react63.default.createElement(
       Card,
       {
         ref,
         className: cx("p-0 overflow-hidden w-full", className),
-        isLoading,
+        loading,
         ...props
       },
-      /* @__PURE__ */ import_react62.default.createElement(
+      /* @__PURE__ */ import_react63.default.createElement(
         Card.Media,
         {
           className: mediaClassName,
           style: { aspectRatio: resolveAspectRatio2(aspectRatio) }
         },
-        src && /* @__PURE__ */ import_react62.default.createElement(
+        src && /* @__PURE__ */ import_react63.default.createElement(
           import_react_player.default,
           {
             src,
@@ -5303,7 +5348,7 @@ var VideoCard = import_react62.default.forwardRef(
           }
         )
       ),
-      /* @__PURE__ */ import_react62.default.createElement(
+      /* @__PURE__ */ import_react63.default.createElement(
         Card.Header,
         {
           title,
@@ -5311,17 +5356,17 @@ var VideoCard = import_react62.default.forwardRef(
           className: contentClassName
         }
       ),
-      children && /* @__PURE__ */ import_react62.default.createElement(Card.Body, { className: contentClassName }, children)
+      children && /* @__PURE__ */ import_react63.default.createElement(Card.Body, { className: contentClassName }, children)
     );
   }
 );
 VideoCard.displayName = "VideoCard";
 
 // src/components/AudioCard.tsx
-var import_react63 = __toESM(require("react"));
+var import_react64 = __toESM(require("react"));
 var import_react_player2 = __toESM(require("react-player"));
 var import_lucide_react12 = require("lucide-react");
-var AudioCard = import_react63.default.forwardRef(
+var AudioCard = import_react64.default.forwardRef(
   ({
     src,
     title,
@@ -5337,21 +5382,21 @@ var AudioCard = import_react63.default.forwardRef(
     children,
     playerProps,
     height = "40px",
-    isLoading,
+    loading,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ import_react63.default.createElement(
+    return /* @__PURE__ */ import_react64.default.createElement(
       Card,
       {
         ref,
         className: cx("p-0 overflow-hidden w-full", className),
-        isLoading,
+        loading,
         ...props
       },
-      /* @__PURE__ */ import_react63.default.createElement(Card.Media, { className: cx(
+      /* @__PURE__ */ import_react64.default.createElement(Card.Media, { className: cx(
         "bg-obsidian py-8 flex flex-col items-center justify-center",
         mediaClassName
-      ) }, /* @__PURE__ */ import_react63.default.createElement("div", { className: "mb-4 text-gold" }, /* @__PURE__ */ import_react63.default.createElement(import_lucide_react12.Music, { size: 48 })), src && /* @__PURE__ */ import_react63.default.createElement("div", { className: "w-full px-4" }, /* @__PURE__ */ import_react63.default.createElement(
+      ) }, /* @__PURE__ */ import_react64.default.createElement("div", { className: "mb-4 text-gold" }, /* @__PURE__ */ import_react64.default.createElement(import_lucide_react12.Music, { size: 48 })), src && /* @__PURE__ */ import_react64.default.createElement("div", { className: "w-full px-4" }, /* @__PURE__ */ import_react64.default.createElement(
         import_react_player2.default,
         {
           src,
@@ -5374,7 +5419,7 @@ var AudioCard = import_react63.default.forwardRef(
           ...playerProps
         }
       ))),
-      /* @__PURE__ */ import_react63.default.createElement(
+      /* @__PURE__ */ import_react64.default.createElement(
         Card.Header,
         {
           title,
@@ -5382,16 +5427,16 @@ var AudioCard = import_react63.default.forwardRef(
           className: contentClassName
         }
       ),
-      children && /* @__PURE__ */ import_react63.default.createElement(Card.Body, { className: contentClassName }, children)
+      children && /* @__PURE__ */ import_react64.default.createElement(Card.Body, { className: contentClassName }, children)
     );
   }
 );
 AudioCard.displayName = "AudioCard";
 
 // src/components/PdfCard.tsx
-var import_react64 = __toESM(require("react"));
+var import_react65 = __toESM(require("react"));
 var import_lucide_react13 = require("lucide-react");
-var PdfCard = import_react64.default.forwardRef(
+var PdfCard = import_react65.default.forwardRef(
   ({
     src,
     title,
@@ -5401,24 +5446,24 @@ var PdfCard = import_react64.default.forwardRef(
     contentClassName,
     className,
     children,
-    isLoading,
+    loading,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ import_react64.default.createElement(
+    return /* @__PURE__ */ import_react65.default.createElement(
       Card,
       {
         ref,
         className: cx("p-0 overflow-hidden w-full", className),
-        isLoading,
+        loading,
         ...props
       },
-      /* @__PURE__ */ import_react64.default.createElement(
+      /* @__PURE__ */ import_react65.default.createElement(
         Card.Media,
         {
           className: cx("bg-obsidian", mediaClassName),
           style: { height }
         },
-        src && /* @__PURE__ */ import_react64.default.createElement(
+        src && /* @__PURE__ */ import_react65.default.createElement(
           "iframe",
           {
             src: `${src}#view=FitH`,
@@ -5427,23 +5472,23 @@ var PdfCard = import_react64.default.forwardRef(
           }
         )
       ),
-      /* @__PURE__ */ import_react64.default.createElement(
+      /* @__PURE__ */ import_react65.default.createElement(
         Card.Header,
         {
           title,
           subtitle,
           className: contentClassName,
-          action: /* @__PURE__ */ import_react64.default.createElement("div", { className: "p-2 bg-ash/20 text-gold shrink-0" }, /* @__PURE__ */ import_react64.default.createElement(import_lucide_react13.FileText, { size: 20 }))
+          action: /* @__PURE__ */ import_react65.default.createElement("div", { className: "p-2 bg-ash/20 text-gold shrink-0" }, /* @__PURE__ */ import_react65.default.createElement(import_lucide_react13.FileText, { size: 20 }))
         }
       ),
-      children && /* @__PURE__ */ import_react64.default.createElement(Card.Body, { className: contentClassName }, children)
+      children && /* @__PURE__ */ import_react65.default.createElement(Card.Body, { className: contentClassName }, children)
     );
   }
 );
 PdfCard.displayName = "PdfCard";
 
 // src/components/ScriptCard.tsx
-var import_react65 = __toESM(require("react"));
+var import_react66 = __toESM(require("react"));
 var SCRIPT_ELEMENT_TYPES = {
   SCENE_HEADING: "scene-heading",
   ACTION: "action",
@@ -5457,49 +5502,49 @@ var SCRIPT_ELEMENT_TYPES = {
 function ScriptElementRenderer({ element }) {
   switch (element.type) {
     case "scene-heading":
-      return /* @__PURE__ */ import_react65.default.createElement("p", { className: "mt-4 mb-2 font-bold uppercase text-gold text-xs tracking-wide" }, element.content);
+      return /* @__PURE__ */ import_react66.default.createElement("p", { className: "mt-4 mb-2 font-bold uppercase text-gold text-xs tracking-wide" }, element.content);
     case "action":
-      return /* @__PURE__ */ import_react65.default.createElement("p", { className: "my-2 text-silver text-xs leading-relaxed" }, element.content);
+      return /* @__PURE__ */ import_react66.default.createElement("p", { className: "my-2 text-silver text-xs leading-relaxed" }, element.content);
     case "character":
-      return /* @__PURE__ */ import_react65.default.createElement("p", { className: "mt-4 mb-0.5 ml-8 font-bold text-white text-xs uppercase tracking-wide" }, element.content);
+      return /* @__PURE__ */ import_react66.default.createElement("p", { className: "mt-4 mb-0.5 ml-8 font-bold text-white text-xs uppercase tracking-wide" }, element.content);
     case "parenthetical":
-      return /* @__PURE__ */ import_react65.default.createElement("p", { className: "ml-6 text-silver/70 text-xs italic" }, "(", element.content, ")");
+      return /* @__PURE__ */ import_react66.default.createElement("p", { className: "ml-6 text-silver/70 text-xs italic" }, "(", element.content, ")");
     case "dialogue":
-      return /* @__PURE__ */ import_react65.default.createElement("p", { className: "ml-4 mr-8 text-silver text-xs leading-relaxed" }, element.content);
+      return /* @__PURE__ */ import_react66.default.createElement("p", { className: "ml-4 mr-8 text-silver text-xs leading-relaxed" }, element.content);
     case "transition":
-      return /* @__PURE__ */ import_react65.default.createElement("p", { className: "mt-4 mb-2 text-right font-bold uppercase text-gold/80 text-xs tracking-wide" }, element.content);
+      return /* @__PURE__ */ import_react66.default.createElement("p", { className: "mt-4 mb-2 text-right font-bold uppercase text-gold/80 text-xs tracking-wide" }, element.content);
     case "title":
-      return /* @__PURE__ */ import_react65.default.createElement("p", { className: "mt-6 mb-2 text-center font-bold text-gold text-sm" }, element.content);
+      return /* @__PURE__ */ import_react66.default.createElement("p", { className: "mt-6 mb-2 text-center font-bold text-gold text-sm" }, element.content);
     case "subtitle":
-      return /* @__PURE__ */ import_react65.default.createElement("p", { className: "text-center italic text-gold/70 text-xs" }, element.content);
+      return /* @__PURE__ */ import_react66.default.createElement("p", { className: "text-center italic text-gold/70 text-xs" }, element.content);
     default:
       return null;
   }
 }
-var ScriptCard = import_react65.default.forwardRef(
-  ({ title, subtitle, elements, maxHeight = "16rem", className, style, isLoading, ...rest }, ref) => {
-    return /* @__PURE__ */ import_react65.default.createElement(
+var ScriptCard = import_react66.default.forwardRef(
+  ({ title, subtitle, elements, maxHeight = "16rem", className, style, loading, ...rest }, ref) => {
+    return /* @__PURE__ */ import_react66.default.createElement(
       Card,
       {
         ref,
         className: cx("p-0 overflow-hidden w-full", className),
-        isLoading,
+        loading,
         ...rest
       },
-      /* @__PURE__ */ import_react65.default.createElement(
+      /* @__PURE__ */ import_react66.default.createElement(
         Card.Header,
         {
           title,
           subtitle
         }
       ),
-      /* @__PURE__ */ import_react65.default.createElement(
+      /* @__PURE__ */ import_react66.default.createElement(
         Card.Body,
         {
           className: "font-mono overflow-y-auto",
           style: { maxHeight, ...style }
         },
-        elements.map((element, index) => /* @__PURE__ */ import_react65.default.createElement(ScriptElementRenderer, { key: index, element }))
+        elements.map((element, index) => /* @__PURE__ */ import_react66.default.createElement(ScriptElementRenderer, { key: index, element }))
       )
     );
   }
@@ -5507,8 +5552,8 @@ var ScriptCard = import_react65.default.forwardRef(
 ScriptCard.displayName = "ScriptCard";
 
 // src/components/TextCard.tsx
-var import_react66 = __toESM(require("react"));
-var TextCard = import_react66.default.forwardRef(
+var import_react67 = __toESM(require("react"));
+var TextCard = import_react67.default.forwardRef(
   ({
     content,
     title,
@@ -5517,31 +5562,31 @@ var TextCard = import_react66.default.forwardRef(
     maxHeight = "16rem",
     contentClassName,
     className,
-    isLoading,
+    loading,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ import_react66.default.createElement(
+    return /* @__PURE__ */ import_react67.default.createElement(
       Card,
       {
         ref,
         className: cx("p-0 overflow-hidden w-full", className),
-        isLoading,
+        loading,
         ...props
       },
-      /* @__PURE__ */ import_react66.default.createElement(
+      /* @__PURE__ */ import_react67.default.createElement(
         Card.Header,
         {
           title,
           subtitle
         }
       ),
-      /* @__PURE__ */ import_react66.default.createElement(
+      /* @__PURE__ */ import_react67.default.createElement(
         Card.Body,
         {
           className: cx("overflow-y-auto", contentClassName),
           style: { maxHeight }
         },
-        /* @__PURE__ */ import_react66.default.createElement(
+        /* @__PURE__ */ import_react67.default.createElement(
           MarkdownContent,
           {
             content,
@@ -5555,6 +5600,21 @@ var TextCard = import_react66.default.forwardRef(
 );
 TextCard.displayName = "TextCard";
 
+// src/utils/artifactLoading.ts
+function deriveCardSlotLoading(a) {
+  if (!a.isPending) {
+    return void 0;
+  }
+  const header = {
+    title: !a.title,
+    subtitle: !a.subtitle
+  };
+  const mediaNeeded = (type) => ["IMAGE", "VIDEO", "AUDIO", "PDF"].includes(type);
+  const media = mediaNeeded(a.type) && !a.url;
+  const body = a.type === "TEXT" && !(a.inlineContent && a.inlineContent.trim().length) || a.type === "SCRIPT" && !(a.scriptElements && a.scriptElements.length > 0);
+  return { header, media, body };
+}
+
 // src/components/ArtifactCard.tsx
 var ARTIFACT_TYPES = {
   TEXT: "TEXT",
@@ -5564,12 +5624,13 @@ var ARTIFACT_TYPES = {
   SCRIPT: "SCRIPT",
   PDF: "PDF"
 };
-var ArtifactCard = import_react67.default.forwardRef(
-  ({ artifact, onExpand, isLoading, className, ...props }, ref) => {
+var ArtifactCard = import_react68.default.forwardRef(
+  ({ artifact, onExpand, loading, className, ...props }, ref) => {
+    const derivedLoading = deriveCardSlotLoading(artifact);
     const commonProps = {
       title: artifact.title,
       subtitle: artifact.subtitle,
-      isLoading: isLoading || artifact.isPending,
+      loading: loading || derivedLoading,
       className: "w-full"
     };
     const handleExpand = (e) => {
@@ -5581,7 +5642,7 @@ var ArtifactCard = import_react67.default.forwardRef(
     const renderContent = () => {
       switch (artifact.type) {
         case "IMAGE":
-          return /* @__PURE__ */ import_react67.default.createElement(
+          return /* @__PURE__ */ import_react68.default.createElement(
             ImageCard,
             {
               ...commonProps,
@@ -5591,7 +5652,7 @@ var ArtifactCard = import_react67.default.forwardRef(
             }
           );
         case "VIDEO":
-          return /* @__PURE__ */ import_react67.default.createElement(
+          return /* @__PURE__ */ import_react68.default.createElement(
             VideoCard,
             {
               ...commonProps,
@@ -5601,7 +5662,7 @@ var ArtifactCard = import_react67.default.forwardRef(
             }
           );
         case "AUDIO":
-          return /* @__PURE__ */ import_react67.default.createElement(
+          return /* @__PURE__ */ import_react68.default.createElement(
             AudioCard,
             {
               ...commonProps,
@@ -5610,7 +5671,7 @@ var ArtifactCard = import_react67.default.forwardRef(
             }
           );
         case "PDF":
-          return /* @__PURE__ */ import_react67.default.createElement(
+          return /* @__PURE__ */ import_react68.default.createElement(
             PdfCard,
             {
               ...commonProps,
@@ -5618,7 +5679,7 @@ var ArtifactCard = import_react67.default.forwardRef(
             }
           );
         case "SCRIPT":
-          return /* @__PURE__ */ import_react67.default.createElement(
+          return /* @__PURE__ */ import_react68.default.createElement(
             ScriptCard,
             {
               ...commonProps,
@@ -5627,7 +5688,7 @@ var ArtifactCard = import_react67.default.forwardRef(
             }
           );
         case "TEXT":
-          return /* @__PURE__ */ import_react67.default.createElement(
+          return /* @__PURE__ */ import_react68.default.createElement(
             TextCard,
             {
               ...commonProps,
@@ -5643,7 +5704,7 @@ var ArtifactCard = import_react67.default.forwardRef(
       }
     };
     const isCardExpandable = !!onExpand && (artifact.type === "IMAGE" || artifact.type === "PDF" || artifact.type === "SCRIPT" || artifact.type === "TEXT");
-    return /* @__PURE__ */ import_react67.default.createElement(
+    return /* @__PURE__ */ import_react68.default.createElement(
       "div",
       {
         ref,
@@ -5656,7 +5717,7 @@ var ArtifactCard = import_react67.default.forwardRef(
         onClick: isCardExpandable ? handleExpand : void 0,
         ...props
       },
-      onExpand && /* @__PURE__ */ import_react67.default.createElement(
+      onExpand && /* @__PURE__ */ import_react68.default.createElement(
         "button",
         {
           onClick: handleExpand,
@@ -5667,7 +5728,7 @@ var ArtifactCard = import_react67.default.forwardRef(
           ),
           "aria-label": "Expand artifact"
         },
-        /* @__PURE__ */ import_react67.default.createElement(ExpandIcon, { className: "w-4 h-4" })
+        /* @__PURE__ */ import_react68.default.createElement(ExpandIcon, { className: "w-4 h-4" })
       ),
       renderContent()
     );
@@ -5675,12 +5736,178 @@ var ArtifactCard = import_react67.default.forwardRef(
 );
 ArtifactCard.displayName = "ArtifactCard";
 
+// src/components/ArtifactGroup.tsx
+var import_react69 = __toESM(require("react"));
+var LAYER_OFFSET = "8px";
+var LAYER_OFFSET_2X = "16px";
+var ArtifactGroup = import_react69.default.forwardRef(
+  ({ node, onClick, className, ...props }, ref) => {
+    const children = node.children;
+    const count = children.length;
+    const frontChild = children[0];
+    const prevCountRef = (0, import_react69.useRef)(count);
+    const [badgePing, setBadgePing] = (0, import_react69.useState)(false);
+    (0, import_react69.useEffect)(() => {
+      if (count !== prevCountRef.current) {
+        prevCountRef.current = count;
+        setBadgePing(true);
+        const timer = setTimeout(() => setBadgePing(false), 500);
+        return () => clearTimeout(timer);
+      }
+    }, [count]);
+    const handleClick = () => {
+      if (onClick) {
+        onClick(node);
+      }
+    };
+    const renderFrontContent = () => {
+      if (!frontChild) {
+        return /* @__PURE__ */ import_react69.default.createElement("div", { className: "w-full aspect-video bg-graphite border border-ash/40 flex items-center justify-center" }, /* @__PURE__ */ import_react69.default.createElement("span", { className: "text-silver text-sm" }, "Empty group"));
+      }
+      if (frontChild.type === "ARTIFACT" && frontChild.artifact) {
+        return /* @__PURE__ */ import_react69.default.createElement(ArtifactCard, { artifact: frontChild.artifact, className: "w-full" });
+      }
+      return /* @__PURE__ */ import_react69.default.createElement(
+        "div",
+        {
+          className: "w-full aspect-video bg-graphite border border-gold/30 flex flex-col items-center justify-center gap-2 p-4"
+        },
+        /* @__PURE__ */ import_react69.default.createElement("span", { className: "text-sm text-silver uppercase tracking-wider" }, frontChild.type === "GROUP" ? "Group" : "Variants"),
+        /* @__PURE__ */ import_react69.default.createElement("span", { className: "text-white font-semibold" }, frontChild.label)
+      );
+    };
+    return /* @__PURE__ */ import_react69.default.createElement(
+      "div",
+      {
+        ref,
+        className: cx(
+          "cursor-pointer group",
+          className
+        ),
+        onClick: handleClick,
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleClick();
+          }
+        },
+        "aria-label": `${node.label} \u2014 ${count} items`,
+        ...props
+      },
+      /* @__PURE__ */ import_react69.default.createElement(Card, { noPadding: true, className: "p-5" }, /* @__PURE__ */ import_react69.default.createElement("h3", { className: "text-lg font-semibold text-white m-0 mb-4" }, node.label), /* @__PURE__ */ import_react69.default.createElement("div", { style: { paddingRight: LAYER_OFFSET_2X, paddingBottom: LAYER_OFFSET_2X } }, /* @__PURE__ */ import_react69.default.createElement("div", { className: "relative" }, /* @__PURE__ */ import_react69.default.createElement(
+        "div",
+        {
+          className: "absolute inset-0 bg-charcoal border border-ash/30 pointer-events-none",
+          style: { transform: `translate(${LAYER_OFFSET_2X}, ${LAYER_OFFSET_2X})` },
+          "aria-hidden": "true"
+        }
+      ), /* @__PURE__ */ import_react69.default.createElement(
+        "div",
+        {
+          className: "absolute inset-0 bg-charcoal border border-ash/40 pointer-events-none",
+          style: { transform: `translate(${LAYER_OFFSET}, ${LAYER_OFFSET})` },
+          "aria-hidden": "true"
+        }
+      ), /* @__PURE__ */ import_react69.default.createElement("div", { className: "relative transition-transform duration-200 group-hover:-translate-y-0.5" }, renderFrontContent()), /* @__PURE__ */ import_react69.default.createElement(
+        "div",
+        {
+          className: "absolute -top-2 -right-2 z-10 min-w-6 h-6 px-1.5 flex items-center justify-center bg-gold text-obsidian text-xs font-bold",
+          style: badgePing ? { animation: "badge-invert 0.6s ease-in-out" } : void 0
+        },
+        count
+      ))))
+    );
+  }
+);
+ArtifactGroup.displayName = "ArtifactGroup";
+
+// src/components/ArtifactVariantStack.tsx
+var import_react70 = __toESM(require("react"));
+var ArtifactVariantStack = import_react70.default.forwardRef(
+  ({ node, onExpandArtifact, onGroupClick, className, ...props }, ref) => {
+    const children = node.children;
+    const renderChild = (child) => {
+      if (child.type === "ARTIFACT" && child.artifact) {
+        return /* @__PURE__ */ import_react70.default.createElement("div", { key: child.id, className: "flex-1 min-w-0" }, /* @__PURE__ */ import_react70.default.createElement(
+          ArtifactCard,
+          {
+            artifact: child.artifact,
+            onExpand: onExpandArtifact,
+            className: "w-full"
+          }
+        ));
+      }
+      if (child.type === "GROUP") {
+        return /* @__PURE__ */ import_react70.default.createElement("div", { key: child.id, className: "flex-1 min-w-0" }, /* @__PURE__ */ import_react70.default.createElement(ArtifactGroup, { node: child, onClick: onGroupClick }));
+      }
+      return /* @__PURE__ */ import_react70.default.createElement("div", { key: child.id, className: "flex-1 min-w-0" }, /* @__PURE__ */ import_react70.default.createElement(
+        "div",
+        {
+          className: "aspect-video bg-graphite border border-gold/30 flex flex-col items-center justify-center gap-2 p-4"
+        },
+        /* @__PURE__ */ import_react70.default.createElement("span", { className: "text-xs text-silver uppercase tracking-wider" }, "Variants"),
+        /* @__PURE__ */ import_react70.default.createElement("span", { className: "text-sm text-white font-semibold truncate max-w-full" }, child.label)
+      ));
+    };
+    return /* @__PURE__ */ import_react70.default.createElement(
+      Card,
+      {
+        ref,
+        noPadding: true,
+        className: cx("w-full p-5", className),
+        ...props
+      },
+      /* @__PURE__ */ import_react70.default.createElement("h3", { className: "text-lg font-semibold text-white m-0 mb-4" }, node.label),
+      /* @__PURE__ */ import_react70.default.createElement("div", { className: "flex gap-3" }, children.map(renderChild))
+    );
+  }
+);
+ArtifactVariantStack.displayName = "ArtifactVariantStack";
+
+// src/components/chat/hooks/useArtifactTreeNavigation.ts
+var import_react71 = require("react");
+function useArtifactTreeNavigation(rootNodes) {
+  const [stack, setStack] = (0, import_react71.useState)([]);
+  const currentNodes = (0, import_react71.useMemo)(() => {
+    if (stack.length === 0) return rootNodes;
+    return stack[stack.length - 1].children;
+  }, [rootNodes, stack]);
+  const breadcrumbs = (0, import_react71.useMemo)(() => {
+    const entries = [{ label: "Project", node: null }];
+    for (const node of stack) {
+      entries.push({ label: node.label, node });
+    }
+    return entries;
+  }, [stack]);
+  const isAtRoot = stack.length === 0;
+  const navigateInto = (0, import_react71.useCallback)((node) => {
+    setStack((prev) => [...prev, node]);
+  }, []);
+  const navigateTo = (0, import_react71.useCallback)((index) => {
+    setStack((prev) => prev.slice(0, index));
+  }, []);
+  const navigateBack = (0, import_react71.useCallback)(() => {
+    setStack((prev) => prev.slice(0, -1));
+  }, []);
+  return {
+    currentNodes,
+    breadcrumbs,
+    isAtRoot,
+    navigateInto,
+    navigateTo,
+    navigateBack
+  };
+}
+
 // src/components/chat/ArtifactsPanel.tsx
+var ZOOM_LEVELS = [0.25, 0.5, 0.75, 1];
 function ArtifactModal({
   artifact,
   onClose
 }) {
-  (0, import_react68.useEffect)(() => {
+  (0, import_react72.useEffect)(() => {
     const handleKeyDown = (e) => {
       if (e.key === "Escape") {
         onClose();
@@ -5689,46 +5916,46 @@ function ArtifactModal({
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [onClose]);
-  const handleBackdropClick = (0, import_react68.useCallback)((e) => {
+  const handleBackdropClick = (0, import_react72.useCallback)((e) => {
     if (e.target === e.currentTarget) {
       onClose();
     }
   }, [onClose]);
-  return /* @__PURE__ */ import_react68.default.createElement(
+  return /* @__PURE__ */ import_react72.default.createElement(
     "div",
     {
       className: "fixed inset-0 z-50 flex items-center justify-center bg-void/90 backdrop-blur-sm animate-fade-in",
       onClick: handleBackdropClick
     },
-    /* @__PURE__ */ import_react68.default.createElement(
+    /* @__PURE__ */ import_react72.default.createElement(
       "div",
       {
         className: "relative w-11/12 h-5/6 max-w-6xl bg-charcoal border border-ash/40 flex flex-col overflow-hidden"
       },
-      /* @__PURE__ */ import_react68.default.createElement(
+      /* @__PURE__ */ import_react72.default.createElement(
         "div",
         {
           className: "flex items-center justify-between p-4 border-b border-ash/40 shrink-0"
         },
-        /* @__PURE__ */ import_react68.default.createElement("div", null, artifact.title && /* @__PURE__ */ import_react68.default.createElement("h3", { className: "text-sm font-semibold text-white" }, artifact.title), artifact.subtitle && /* @__PURE__ */ import_react68.default.createElement("p", { className: "text-xs text-silver" }, artifact.subtitle)),
-        /* @__PURE__ */ import_react68.default.createElement(
+        /* @__PURE__ */ import_react72.default.createElement("div", null, artifact.title && /* @__PURE__ */ import_react72.default.createElement("h3", { className: "text-sm font-semibold text-white" }, artifact.title), artifact.subtitle && /* @__PURE__ */ import_react72.default.createElement("p", { className: "text-xs text-silver" }, artifact.subtitle)),
+        /* @__PURE__ */ import_react72.default.createElement(
           "button",
           {
             onClick: onClose,
             className: "p-2 text-silver hover:text-white hover:bg-ash/20 transition-colors",
             "aria-label": "Close modal"
           },
-          /* @__PURE__ */ import_react68.default.createElement(CloseIcon, { className: "w-5 h-5" })
+          /* @__PURE__ */ import_react72.default.createElement(CloseIcon, { className: "w-5 h-5" })
         )
       ),
-      /* @__PURE__ */ import_react68.default.createElement("div", { className: "flex-1 overflow-auto p-4" }, artifact.type === "IMAGE" && /* @__PURE__ */ import_react68.default.createElement(
+      /* @__PURE__ */ import_react72.default.createElement("div", { className: "flex-1 overflow-auto p-4" }, artifact.type === "IMAGE" && /* @__PURE__ */ import_react72.default.createElement(
         "img",
         {
           src: artifact.url,
           alt: artifact.alt || "Artifact image",
           className: "max-w-full max-h-full object-contain mx-auto"
         }
-      ), artifact.type === "VIDEO" && /* @__PURE__ */ import_react68.default.createElement(
+      ), artifact.type === "VIDEO" && /* @__PURE__ */ import_react72.default.createElement(
         VideoCard,
         {
           src: artifact.url || "",
@@ -5736,30 +5963,30 @@ function ArtifactModal({
           controls: true,
           className: "max-w-full max-h-full mx-auto"
         }
-      ), artifact.type === "AUDIO" && /* @__PURE__ */ import_react68.default.createElement(
+      ), artifact.type === "AUDIO" && /* @__PURE__ */ import_react72.default.createElement(
         AudioCard,
         {
           src: artifact.url || "",
           controls: true,
           className: "max-w-xl mx-auto"
         }
-      ), artifact.type === "PDF" && /* @__PURE__ */ import_react68.default.createElement(
+      ), artifact.type === "PDF" && /* @__PURE__ */ import_react72.default.createElement(
         PdfCard,
         {
           src: artifact.url || "",
           className: "h-full border-0"
         }
-      ), artifact.type === "TEXT" && /* @__PURE__ */ import_react68.default.createElement(
+      ), artifact.type === "TEXT" && /* @__PURE__ */ import_react72.default.createElement(
         MarkdownContent,
         {
           content: artifact.inlineContent || "",
-          isMarkdown: artifact.mimeType === "text/markdown",
+          isMarkdown: artifact.mimeType !== "text/plain",
           className: cx(
             "prose prose-invert max-w-none",
             artifact.mimeType === "text/plain" && "whitespace-pre-wrap"
           )
         }
-      ), artifact.type === "SCRIPT" && artifact.scriptElements && /* @__PURE__ */ import_react68.default.createElement(
+      ), artifact.type === "SCRIPT" && artifact.scriptElements && /* @__PURE__ */ import_react72.default.createElement(
         ScriptCard,
         {
           elements: artifact.scriptElements,
@@ -5770,138 +5997,190 @@ function ArtifactModal({
     )
   );
 }
-function ArtifactRenderer({
-  artifact,
-  isLoading,
-  onExpand
+function NodeRenderer({
+  node,
+  loading,
+  onExpandArtifact,
+  onGroupClick
 }) {
-  return /* @__PURE__ */ import_react68.default.createElement(
-    ArtifactCard,
-    {
-      artifact,
-      isLoading,
-      onExpand
-    }
-  );
+  if (node.type === "ARTIFACT" && node.artifact) {
+    return /* @__PURE__ */ import_react72.default.createElement(
+      ArtifactCard,
+      {
+        artifact: node.artifact,
+        loading,
+        onExpand: onExpandArtifact
+      }
+    );
+  }
+  if (node.type === "GROUP") {
+    return /* @__PURE__ */ import_react72.default.createElement(ArtifactGroup, { node, onClick: onGroupClick });
+  }
+  if (node.type === "VARIANT_SET") {
+    return /* @__PURE__ */ import_react72.default.createElement(
+      ArtifactVariantStack,
+      {
+        node,
+        onExpandArtifact,
+        onGroupClick
+      }
+    );
+  }
+  return null;
 }
-var ArtifactsPanel = import_react68.default.forwardRef(
+var ArtifactsPanel = import_react72.default.forwardRef(
   ({
+    nodes,
     artifacts,
-    isOpen = false,
-    onClose,
-    isLoading = false,
-    width,
-    widthPercent,
-    onResizeStart,
+    loading,
     className,
     ...rest
   }, ref) => {
-    const [expandedArtifact, setExpandedArtifact] = (0, import_react68.useState)(null);
-    const columns = widthPercent && widthPercent > 55 ? 3 : widthPercent && widthPercent > 35 ? 2 : 1;
-    if (!isOpen) {
-      return /* @__PURE__ */ import_react68.default.createElement(
-        "div",
-        {
-          ref,
-          className: cx(
-            "h-full bg-charcoal/80 border-l border-ash/40 flex flex-col items-center py-3",
-            "w-12 shrink-0",
-            className
-          ),
-          ...rest
-        },
-        /* @__PURE__ */ import_react68.default.createElement(
-          "button",
-          {
-            onClick: onClose,
-            className: cx(
-              "p-2",
-              "text-silver hover:text-white hover:bg-ash/20",
-              "transition-colors duration-150",
-              "relative"
-            ),
-            "aria-label": "Expand artifacts panel"
-          },
-          /* @__PURE__ */ import_react68.default.createElement(LayersIcon, { className: "w-5 h-5" }),
-          artifacts.length > 0 && /* @__PURE__ */ import_react68.default.createElement(
-            "span",
-            {
-              className: "absolute -top-1 -right-1 w-4 h-4 bg-gold text-obsidian text-xs font-medium flex items-center justify-center rounded-full"
-            },
-            artifacts.length
-          )
-        )
-      );
-    }
-    return /* @__PURE__ */ import_react68.default.createElement(import_react68.default.Fragment, null, /* @__PURE__ */ import_react68.default.createElement(
+    const [expandedArtifact, setExpandedArtifact] = (0, import_react72.useState)(null);
+    const [zoomIndex, setZoomIndex] = (0, import_react72.useState)(ZOOM_LEVELS.length - 1);
+    const treeNav = useArtifactTreeNavigation(nodes || []);
+    const isTreeMode = !!nodes && nodes.length > 0;
+    const handleExpandArtifact = (0, import_react72.useCallback)((artifact) => {
+      setExpandedArtifact(artifact);
+    }, []);
+    const handleGroupClick = (0, import_react72.useCallback)((node) => {
+      treeNav.navigateInto(node);
+    }, [treeNav]);
+    const zoomIn = (0, import_react72.useCallback)(() => {
+      setZoomIndex((prev) => Math.min(prev + 1, ZOOM_LEVELS.length - 1));
+    }, []);
+    const zoomOut = (0, import_react72.useCallback)(() => {
+      setZoomIndex((prev) => Math.max(prev - 1, 0));
+    }, []);
+    const currentZoom = ZOOM_LEVELS[zoomIndex];
+    const contentRef = (0, import_react72.useRef)(null);
+    const [contentHeight, setContentHeight] = (0, import_react72.useState)(void 0);
+    (0, import_react72.useEffect)(() => {
+      const el = contentRef.current;
+      if (!el) return;
+      const observer = new ResizeObserver(([entry]) => {
+        setContentHeight(entry.contentRect.height);
+      });
+      observer.observe(el);
+      return () => observer.disconnect();
+    }, []);
+    return /* @__PURE__ */ import_react72.default.createElement(import_react72.default.Fragment, null, /* @__PURE__ */ import_react72.default.createElement(
       "div",
       {
         ref,
         "data-testid": "artifacts-panel",
         className: cx(
-          "h-full bg-charcoal/50 border-l border-ash/40 flex flex-col relative",
-          !width && "w-96",
-          "shrink-0",
+          "h-full flex flex-col relative",
           className
         ),
-        style: width ? { width } : void 0,
         ...rest
       },
-      /* @__PURE__ */ import_react68.default.createElement(
-        "div",
-        {
-          onMouseDown: onResizeStart,
-          "data-testid": "artifacts-resize-handle",
-          className: cx(
-            "absolute top-0 left-0 w-1 h-full cursor-col-resize z-50",
-            "hover:bg-gold/50 transition-colors",
-            "after:absolute after:inset-y-0 after:-left-1 after:w-2"
-            // Larger hit area
-          )
-        }
-      ),
-      /* @__PURE__ */ import_react68.default.createElement(
+      /* @__PURE__ */ import_react72.default.createElement(
         "div",
         {
           className: "flex items-center justify-between p-4 border-b border-ash/40 shrink-0"
         },
-        /* @__PURE__ */ import_react68.default.createElement("h3", { className: "text-sm font-semibold text-white" }, "Artifacts"),
-        /* @__PURE__ */ import_react68.default.createElement(
-          "button",
+        /* @__PURE__ */ import_react72.default.createElement("h3", { className: "text-sm font-semibold text-white" }, "Artifacts"),
+        isTreeMode && /* @__PURE__ */ import_react72.default.createElement(
+          "div",
           {
-            onClick: onClose,
-            className: cx(
-              "p-1.5",
-              "text-silver hover:text-white hover:bg-ash/20",
-              "transition-colors duration-150"
-            ),
-            "aria-label": "Collapse artifacts panel"
+            className: "flex items-center gap-0.5",
+            "data-testid": "zoom-controls"
           },
-          /* @__PURE__ */ import_react68.default.createElement(ChevronRightIcon, { className: "w-5 h-5" })
+          /* @__PURE__ */ import_react72.default.createElement(
+            "button",
+            {
+              onClick: zoomOut,
+              disabled: zoomIndex === 0,
+              className: cx(
+                "w-6 h-6 flex items-center justify-center text-xs font-bold",
+                "bg-charcoal border border-ash/40",
+                zoomIndex === 0 ? "text-silver/30 cursor-not-allowed" : "text-silver hover:text-gold hover:border-gold/40 transition-colors"
+              ),
+              "aria-label": "Zoom out"
+            },
+            "\u2212"
+          ),
+          /* @__PURE__ */ import_react72.default.createElement("span", { className: "text-xs text-silver w-8 text-center tabular-nums", "data-testid": "zoom-level" }, Math.round(currentZoom * 100), "%"),
+          /* @__PURE__ */ import_react72.default.createElement(
+            "button",
+            {
+              onClick: zoomIn,
+              disabled: zoomIndex === ZOOM_LEVELS.length - 1,
+              className: cx(
+                "w-6 h-6 flex items-center justify-center text-xs font-bold",
+                "bg-charcoal border border-ash/40",
+                zoomIndex === ZOOM_LEVELS.length - 1 ? "text-silver/30 cursor-not-allowed" : "text-silver hover:text-gold hover:border-gold/40 transition-colors"
+              ),
+              "aria-label": "Zoom in"
+            },
+            "+"
+          )
         )
       ),
-      /* @__PURE__ */ import_react68.default.createElement(
+      isTreeMode && !treeNav.isAtRoot && /* @__PURE__ */ import_react72.default.createElement(
+        "nav",
+        {
+          className: "flex items-center gap-1 px-4 py-2 border-b border-ash/40 shrink-0 overflow-x-auto text-xs",
+          "aria-label": "Breadcrumb",
+          "data-testid": "breadcrumb-nav"
+        },
+        treeNav.breadcrumbs.map((crumb, i) => {
+          const isLast = i === treeNav.breadcrumbs.length - 1;
+          return /* @__PURE__ */ import_react72.default.createElement("span", { key: i, className: "flex items-center gap-1 shrink-0" }, i > 0 && /* @__PURE__ */ import_react72.default.createElement(ChevronRightIcon, { className: "w-3 h-3 text-silver/50", "aria-hidden": true }), isLast ? /* @__PURE__ */ import_react72.default.createElement("span", { className: "text-gold font-medium" }, crumb.label) : /* @__PURE__ */ import_react72.default.createElement(
+            "button",
+            {
+              onClick: () => treeNav.navigateTo(i),
+              className: "text-silver hover:text-white transition-colors"
+            },
+            crumb.label
+          ));
+        })
+      ),
+      /* @__PURE__ */ import_react72.default.createElement(
         "div",
         {
-          "data-testid": "artifacts-grid",
-          className: cx(
-            "flex-1 overflow-y-auto p-4",
-            columns === 1 ? "space-y-4" : "grid gap-4",
-            columns === 2 && "grid-cols-2",
-            columns === 3 && "grid-cols-3"
-          )
+          className: "flex-1 overflow-auto relative",
+          "data-testid": "artifacts-scroll-area"
         },
-        artifacts.length === 0 && !isLoading ? /* @__PURE__ */ import_react68.default.createElement("p", { className: "text-xs text-silver/60 text-center py-8" }, "No artifacts to display") : artifacts.map((artifact) => /* @__PURE__ */ import_react68.default.createElement(
-          ArtifactRenderer,
+        /* @__PURE__ */ import_react72.default.createElement(
+          "div",
           {
-            key: artifact.id,
-            artifact,
-            isLoading,
-            onExpand: () => setExpandedArtifact(artifact)
-          }
-        ))
+            style: currentZoom !== 1 && contentHeight !== void 0 ? { height: contentHeight * currentZoom } : void 0
+          },
+          /* @__PURE__ */ import_react72.default.createElement(
+            "div",
+            {
+              ref: contentRef,
+              "data-testid": "artifacts-grid",
+              className: "p-4 space-y-4",
+              style: currentZoom !== 1 ? {
+                transform: `scale(${currentZoom})`,
+                transformOrigin: "top center"
+              } : void 0
+            },
+            isTreeMode ? treeNav.currentNodes.length === 0 ? /* @__PURE__ */ import_react72.default.createElement("p", { className: "text-xs text-silver/60 text-center py-8" }, "Empty group") : treeNav.currentNodes.map((node) => /* @__PURE__ */ import_react72.default.createElement(
+              NodeRenderer,
+              {
+                key: node.id,
+                node,
+                loading,
+                onExpandArtifact: handleExpandArtifact,
+                onGroupClick: handleGroupClick
+              }
+            )) : (!artifacts || artifacts.length === 0) && !loading ? /* @__PURE__ */ import_react72.default.createElement("p", { className: "text-xs text-silver/60 text-center py-8" }, "No artifacts to display") : artifacts?.map((artifact) => /* @__PURE__ */ import_react72.default.createElement(
+              ArtifactCard,
+              {
+                key: artifact.id,
+                artifact,
+                loading,
+                onExpand: handleExpandArtifact
+              }
+            ))
+          )
+        )
       )
-    ), expandedArtifact && /* @__PURE__ */ import_react68.default.createElement(
+    ), expandedArtifact && /* @__PURE__ */ import_react72.default.createElement(
       ArtifactModal,
       {
         artifact: expandedArtifact,
@@ -5911,8 +6190,8 @@ var ArtifactsPanel = import_react68.default.forwardRef(
   }
 );
 ArtifactsPanel.displayName = "ArtifactsPanel";
-var ArtifactsPanelToggle = import_react68.default.forwardRef(({ artifactCount = 0, onExpand, className, ...rest }, ref) => {
-  return /* @__PURE__ */ import_react68.default.createElement(
+var ArtifactsPanelToggle = import_react72.default.forwardRef(({ artifactCount = 0, onExpand, className, ...rest }, ref) => {
+  return /* @__PURE__ */ import_react72.default.createElement(
     "button",
     {
       ref,
@@ -5929,11 +6208,27 @@ var ArtifactsPanelToggle = import_react68.default.forwardRef(({ artifactCount =
       "aria-label": "Expand artifacts panel",
       ...rest
     },
-    /* @__PURE__ */ import_react68.default.createElement(LayersIcon, { className: "w-5 h-5" }),
-    artifactCount > 0 && /* @__PURE__ */ import_react68.default.createElement(
+    /* @__PURE__ */ import_react72.default.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 20 20",
+        fill: "currentColor",
+        className: "w-5 h-5"
+      },
+      /* @__PURE__ */ import_react72.default.createElement(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M2 4.5A1.5 1.5 0 013.5 3h13A1.5 1.5 0 0118 4.5v11a1.5 1.5 0 01-1.5 1.5h-13A1.5 1.5 0 012 15.5v-11zM4 5v1h1V5H4zm2 0v1h1V5H6zm7 0v1h1V5h-1zm2 0v1h1V5h-1zM4 14v1h1v-1H4zm2 0v1h1v-1H6zm7 0v1h1v-1h-1zm2 0v1h1v-1h-1zM8 8.118a.5.5 0 01.757-.429l4 2.382a.5.5 0 010 .858l-4 2.382A.5.5 0 018 12.882V8.118z",
+          clipRule: "evenodd"
+        }
+      )
+    ),
+    artifactCount > 0 && /* @__PURE__ */ import_react72.default.createElement(
       "span",
       {
-        className: "absolute -top-1 -right-1 w-4 h-4 bg-gold text-obsidian text-xs font-medium flex items-center justify-center rounded-full"
+        className: "absolute -top-1 -right-1 w-4 h-4 bg-gold text-obsidian text-xs font-medium flex items-center justify-center"
       },
       artifactCount
     )
@@ -5942,7 +6237,7 @@ var ArtifactsPanelToggle = import_react68.default.forwardRef(({ artifactCount =
 ArtifactsPanelToggle.displayName = "ArtifactsPanelToggle";
 
 // src/components/chat/TodosList.tsx
-var import_react69 = __toESM(require("react"));
+var import_react73 = __toESM(require("react"));
 var TASK_STATUSES = {
   PENDING: "pending",
   IN_PROGRESS: "in_progress",
@@ -5953,16 +6248,16 @@ var TASK_STATUSES = {
 function TaskIcon({ status }) {
   switch (status) {
     case "done":
-      return /* @__PURE__ */ import_react69.default.createElement(CheckSquareIcon, null);
+      return /* @__PURE__ */ import_react73.default.createElement(CheckSquareIcon, null);
     case "in_progress":
-      return /* @__PURE__ */ import_react69.default.createElement(SquareLoaderIcon, null);
+      return /* @__PURE__ */ import_react73.default.createElement(SquareLoaderIcon, null);
     case "cancelled":
-      return /* @__PURE__ */ import_react69.default.createElement(CrossSquareIcon, { variant: "cancelled" });
+      return /* @__PURE__ */ import_react73.default.createElement(CrossSquareIcon, { variant: "cancelled" });
     case "failed":
-      return /* @__PURE__ */ import_react69.default.createElement(CrossSquareIcon, { variant: "failed" });
+      return /* @__PURE__ */ import_react73.default.createElement(CrossSquareIcon, { variant: "failed" });
     case "pending":
     default:
-      return /* @__PURE__ */ import_react69.default.createElement(EmptySquareIcon, null);
+      return /* @__PURE__ */ import_react73.default.createElement(EmptySquareIcon, null);
   }
 }
 function sortTasks(tasks) {
@@ -5982,7 +6277,7 @@ function TaskItem({ task, depth = 0 }) {
   const isSubtle = task.status === "cancelled" || task.status === "failed";
   const showSubtasks = (task.status === "in_progress" || task.status === "done") && task.subtasks && task.subtasks.length > 0;
   const sortedSubtasks = showSubtasks ? sortTasks(task.subtasks) : [];
-  return /* @__PURE__ */ import_react69.default.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ import_react69.default.createElement(
+  return /* @__PURE__ */ import_react73.default.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ import_react73.default.createElement(
     "div",
     {
       className: cx(
@@ -5990,8 +6285,8 @@ function TaskItem({ task, depth = 0 }) {
         depth > 0 && "pl-6"
       )
     },
-    /* @__PURE__ */ import_react69.default.createElement(TaskIcon, { status: task.status }),
-    /* @__PURE__ */ import_react69.default.createElement(
+    /* @__PURE__ */ import_react73.default.createElement(TaskIcon, { status: task.status }),
+    /* @__PURE__ */ import_react73.default.createElement(
       "span",
       {
         className: cx(
@@ -6003,14 +6298,14 @@ function TaskItem({ task, depth = 0 }) {
         )
       },
       task.label,
-      task.status === "cancelled" && /* @__PURE__ */ import_react69.default.createElement("span", { className: "text-silver/40 ml-1" }, "(cancelled)"),
-      task.status === "failed" && /* @__PURE__ */ import_react69.default.createElement("span", { className: "text-error/60 ml-1" }, "(failed)")
+      task.status === "cancelled" && /* @__PURE__ */ import_react73.default.createElement("span", { className: "text-silver/40 ml-1" }, "(cancelled)"),
+      task.status === "failed" && /* @__PURE__ */ import_react73.default.createElement("span", { className: "text-error/60 ml-1" }, "(failed)")
     )
-  ), showSubtasks && /* @__PURE__ */ import_react69.default.createElement("div", { className: "flex flex-col" }, sortedSubtasks.map((subtask) => /* @__PURE__ */ import_react69.default.createElement(TaskItem, { key: subtask.id, task: subtask, depth: depth + 1 }))));
+  ), showSubtasks && /* @__PURE__ */ import_react73.default.createElement("div", { className: "flex flex-col" }, sortedSubtasks.map((subtask) => /* @__PURE__ */ import_react73.default.createElement(TaskItem, { key: subtask.id, task: subtask, depth: depth + 1 }))));
 }
-var TodosList = import_react69.default.forwardRef(
+var TodosList = import_react73.default.forwardRef(
   ({ tasks, title = "Tasks", className, ...rest }, ref) => {
-    const sortedTasks = (0, import_react69.useMemo)(() => sortTasks(tasks), [tasks]);
+    const sortedTasks = (0, import_react73.useMemo)(() => sortTasks(tasks), [tasks]);
     const countCompleted = (taskList) => {
       let count = 0;
       for (const task of taskList) {
@@ -6035,40 +6330,204 @@ var TodosList = import_react69.default.forwardRef(
     if (tasks.length === 0) {
       return null;
     }
-    return /* @__PURE__ */ import_react69.default.createElement(
+    return /* @__PURE__ */ import_react73.default.createElement(
       "div",
       {
         ref,
         className: cx(
-          "flex flex-col bg-charcoal/30 border-l border-ash/40",
+          "flex flex-col h-full",
           "overflow-hidden",
           className
         ),
-        style: { maxHeight: "25vh" },
         ...rest
       },
-      /* @__PURE__ */ import_react69.default.createElement(
+      /* @__PURE__ */ import_react73.default.createElement(
         "div",
         {
           className: "flex items-center justify-between px-4 py-2 border-b border-ash/40 flex-shrink-0"
         },
-        /* @__PURE__ */ import_react69.default.createElement("h4", { className: "text-xs font-medium text-white" }, title),
-        /* @__PURE__ */ import_react69.default.createElement("span", { className: "text-xs text-silver/60" }, countCompleted(tasks), "/", countTotal(tasks))
+        /* @__PURE__ */ import_react73.default.createElement("h4", { className: "text-xs font-medium text-white" }, title),
+        /* @__PURE__ */ import_react73.default.createElement("span", { className: "text-xs text-silver/60" }, countCompleted(tasks), "/", countTotal(tasks))
       ),
-      /* @__PURE__ */ import_react69.default.createElement("div", { className: "flex-1 overflow-y-auto px-4 py-2" }, sortedTasks.map((task) => /* @__PURE__ */ import_react69.default.createElement(TaskItem, { key: task.id, task })))
+      /* @__PURE__ */ import_react73.default.createElement("div", { className: "flex-1 overflow-y-auto px-4 py-2" }, sortedTasks.map((task) => /* @__PURE__ */ import_react73.default.createElement(TaskItem, { key: task.id, task })))
     );
   }
 );
 TodosList.displayName = "TodosList";
+function areAllTasksSettled(tasks) {
+  return tasks.every((t) => {
+    const settled = t.status === "done" || t.status === "cancelled" || t.status === "failed";
+    if (!settled) return false;
+    if (t.subtasks && t.subtasks.length > 0) return areAllTasksSettled(t.subtasks);
+    return true;
+  });
+}
+
+// src/components/chat/ToolSidebar.tsx
+var import_react74 = __toESM(require("react"));
+var ToolSidebar = import_react74.default.forwardRef(
+  ({ tools, activeTools, onToggleTool, className, ...rest }, ref) => {
+    const topTools = tools.filter((t) => t.group === "top");
+    const bottomTools = tools.filter((t) => t.group === "bottom");
+    const isActive = (toolId) => {
+      const tool = tools.find((t) => t.id === toolId);
+      if (!tool) return false;
+      return activeTools[tool.group] === toolId;
+    };
+    const renderButton = (tool) => {
+      const active = isActive(tool.id);
+      return /* @__PURE__ */ import_react74.default.createElement(
+        "button",
+        {
+          key: tool.id,
+          onClick: () => onToggleTool(tool.id),
+          className: cx(
+            "w-8 h-8 flex items-center justify-center transition-colors duration-150",
+            active ? "bg-gold/15 text-gold border border-gold/30" : "text-silver hover:text-white hover:bg-ash/20"
+          ),
+          "aria-label": tool.label,
+          "aria-pressed": active
+        },
+        /* @__PURE__ */ import_react74.default.createElement("span", { className: "w-4 h-4 block" }, tool.icon)
+      );
+    };
+    return /* @__PURE__ */ import_react74.default.createElement(
+      "div",
+      {
+        ref,
+        className: cx(
+          "h-full w-9 bg-charcoal/80 border-l border-ash/40 flex flex-col items-center shrink-0 py-2",
+          className
+        ),
+        ...rest
+      },
+      /* @__PURE__ */ import_react74.default.createElement("div", { className: "flex flex-col items-center gap-1" }, topTools.map(renderButton)),
+      /* @__PURE__ */ import_react74.default.createElement("div", { className: "flex-1 flex items-center justify-center" }, /* @__PURE__ */ import_react74.default.createElement("div", { className: "w-5 border-t border-ash/30" })),
+      /* @__PURE__ */ import_react74.default.createElement("div", { className: "flex flex-col items-center gap-1" }, bottomTools.map(renderButton))
+    );
+  }
+);
+ToolSidebar.displayName = "ToolSidebar";
+
+// src/components/chat/ToolPanelContainer.tsx
+var import_react75 = __toESM(require("react"));
+var ToolPanelContainer = import_react75.default.forwardRef(
+  ({ topContent, bottomContent, width, onResizeStart, className, ...rest }, ref) => {
+    const [topPercent, setTopPercent] = (0, import_react75.useState)(60);
+    const [isResizingHeight, setIsResizingHeight] = (0, import_react75.useState)(false);
+    const containerRef = (0, import_react75.useRef)(null);
+    const lastY = (0, import_react75.useRef)(null);
+    const hasBoth = topContent !== null && bottomContent !== null;
+    const startHeightResize = (0, import_react75.useCallback)((e) => {
+      e.preventDefault();
+      setIsResizingHeight(true);
+      lastY.current = e.clientY;
+    }, []);
+    const stopHeightResize = (0, import_react75.useCallback)(() => {
+      setIsResizingHeight(false);
+      lastY.current = null;
+    }, []);
+    const resizeHeight = (0, import_react75.useCallback)(
+      (e) => {
+        if (!isResizingHeight || lastY.current === null || !containerRef.current) return;
+        const containerHeight = containerRef.current.getBoundingClientRect().height;
+        if (containerHeight === 0) return;
+        const deltaY = e.clientY - lastY.current;
+        const deltaPercent = deltaY / containerHeight * 100;
+        setTopPercent((prev) => {
+          const next = prev + deltaPercent;
+          return Math.min(Math.max(next, 20), 80);
+        });
+        lastY.current = e.clientY;
+      },
+      [isResizingHeight]
+    );
+    (0, import_react75.useEffect)(() => {
+      if (isResizingHeight) {
+        window.addEventListener("mousemove", resizeHeight);
+        window.addEventListener("mouseup", stopHeightResize);
+        document.body.style.cursor = "row-resize";
+        document.body.style.userSelect = "none";
+      } else {
+        window.removeEventListener("mousemove", resizeHeight);
+        window.removeEventListener("mouseup", stopHeightResize);
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+      }
+      return () => {
+        window.removeEventListener("mousemove", resizeHeight);
+        window.removeEventListener("mouseup", stopHeightResize);
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+      };
+    }, [isResizingHeight, resizeHeight, stopHeightResize]);
+    return /* @__PURE__ */ import_react75.default.createElement(
+      "div",
+      {
+        ref: (node) => {
+          containerRef.current = node;
+          if (typeof ref === "function") ref(node);
+          else if (ref) ref.current = node;
+        },
+        className: cx(
+          "h-full bg-charcoal/50 border-l border-ash/40 flex flex-col relative shrink-0",
+          className
+        ),
+        style: width ? { width } : void 0,
+        ...rest
+      },
+      /* @__PURE__ */ import_react75.default.createElement(
+        "div",
+        {
+          onMouseDown: onResizeStart,
+          className: cx(
+            "absolute top-0 left-0 w-1 h-full cursor-col-resize z-50",
+            "hover:bg-gold/50 transition-colors",
+            "after:absolute after:inset-y-0 after:-left-1 after:w-2"
+          )
+        }
+      ),
+      topContent !== null && /* @__PURE__ */ import_react75.default.createElement(
+        "div",
+        {
+          className: "min-h-0 overflow-hidden flex flex-col",
+          style: hasBoth ? { height: `${topPercent}%` } : { flex: "1 1 0%" }
+        },
+        topContent
+      ),
+      hasBoth && /* @__PURE__ */ import_react75.default.createElement(
+        "div",
+        {
+          onMouseDown: startHeightResize,
+          className: cx(
+            "h-1 cursor-row-resize z-50 shrink-0",
+            "bg-ash/40 hover:bg-gold/50 transition-colors",
+            "relative",
+            "after:absolute after:-top-1 after:left-0 after:right-0 after:h-3"
+          )
+        }
+      ),
+      bottomContent !== null && /* @__PURE__ */ import_react75.default.createElement(
+        "div",
+        {
+          className: "min-h-0 overflow-hidden flex flex-col",
+          style: hasBoth ? { height: `${100 - topPercent}%` } : { flex: "1 1 0%" }
+        },
+        bottomContent
+      )
+    );
+  }
+);
+ToolPanelContainer.displayName = "ToolPanelContainer";
 
 // src/components/chat/hooks/useArtifacts.ts
-var import_react70 = require("react");
+var import_react76 = require("react");
 function useArtifacts() {
-  const [artifacts, setArtifacts] = (0, import_react70.useState)([]);
-  const scheduleArtifact = (0, import_react70.useCallback)((artifact) => {
+  const [artifacts, setArtifacts] = (0, import_react76.useState)([]);
+  const scheduleArtifact = (0, import_react76.useCallback)((artifact) => {
     setArtifacts((prev) => [...prev, { ...artifact, isPending: true }]);
   }, []);
-  const showArtifact = (0, import_react70.useCallback)(
+  const showArtifact = (0, import_react76.useCallback)(
     (artifactId, updates) => {
       setArtifacts((prev) => {
         const existingIndex = prev.findIndex((a) => a.id === artifactId);
@@ -6083,36 +6542,36 @@ function useArtifacts() {
     },
     []
   );
-  const removeArtifact = (0, import_react70.useCallback)((artifactId) => {
+  const removeArtifact = (0, import_react76.useCallback)((artifactId) => {
     setArtifacts((prev) => prev.filter((a) => a.id !== artifactId));
   }, []);
-  const clearArtifacts = (0, import_react70.useCallback)(() => {
+  const clearArtifacts = (0, import_react76.useCallback)(() => {
     setArtifacts([]);
   }, []);
   return { artifacts, scheduleArtifact, showArtifact, removeArtifact, clearArtifacts };
 }
 
 // src/components/chat/hooks/useResizable.ts
-var import_react71 = require("react");
+var import_react77 = require("react");
 function useResizable({
   initialWidthPercent,
   minWidthPercent,
   maxWidthPercent,
   direction
 }) {
-  const [widthPercent, setWidthPercent] = (0, import_react71.useState)(initialWidthPercent);
-  const [isResizing, setIsResizing] = (0, import_react71.useState)(false);
-  const lastX = (0, import_react71.useRef)(null);
-  const startResizing = (0, import_react71.useCallback)((e) => {
+  const [widthPercent, setWidthPercent] = (0, import_react77.useState)(initialWidthPercent);
+  const [isResizing, setIsResizing] = (0, import_react77.useState)(false);
+  const lastX = (0, import_react77.useRef)(null);
+  const startResizing = (0, import_react77.useCallback)((e) => {
     e.preventDefault();
     setIsResizing(true);
     lastX.current = e.clientX;
   }, []);
-  const stopResizing = (0, import_react71.useCallback)(() => {
+  const stopResizing = (0, import_react77.useCallback)(() => {
     setIsResizing(false);
     lastX.current = null;
   }, []);
-  const resize = (0, import_react71.useCallback)(
+  const resize = (0, import_react77.useCallback)(
     (e) => {
       if (!isResizing || lastX.current === null) {
         return;
@@ -6128,7 +6587,7 @@ function useResizable({
     },
     [isResizing, direction, minWidthPercent, maxWidthPercent]
   );
-  (0, import_react71.useEffect)(() => {
+  (0, import_react77.useEffect)(() => {
     if (isResizing) {
       window.addEventListener("mousemove", resize);
       window.addEventListener("mouseup", stopResizing);
@@ -6152,7 +6611,7 @@ function useResizable({
 }
 
 // src/components/chat/ChatInterface.tsx
-var ChatInterface = import_react72.default.forwardRef(
+var ChatInterface = import_react78.default.forwardRef(
   ({
     messages = [],
     conversationTree,
@@ -6175,6 +6634,7 @@ var ChatInterface = import_react72.default.forwardRef(
     attachments: propsAttachments,
     onAttachmentsChange,
     artifacts = [],
+    artifactNodes,
     isArtifactsPanelOpen,
     onArtifactsPanelOpenChange,
     tasks = [],
@@ -6182,10 +6642,25 @@ var ChatInterface = import_react72.default.forwardRef(
     className,
     ...rest
   }, ref) => {
-    const [sidebarCollapsed, setSidebarCollapsed] = (0, import_react72.useState)(initialSidebarCollapsed);
-    const [internalPanelOpen, setInternalPanelOpen] = (0, import_react72.useState)(false);
-    const prevArtifactsRef = (0, import_react72.useRef)([]);
-    const prevTasksRef = (0, import_react72.useRef)([]);
+    const [sidebarCollapsed, setSidebarCollapsed] = (0, import_react78.useState)(initialSidebarCollapsed);
+    const prevArtifactsRef = (0, import_react78.useRef)([]);
+    const prevTasksRef = (0, import_react78.useRef)([]);
+    const [internalTools, setInternalTools] = (0, import_react78.useState)({
+      top: null,
+      bottom: null
+    });
+    const dismissedToolsRef = (0, import_react78.useRef)(/* @__PURE__ */ new Set());
+    const isPanelControlled = isArtifactsPanelOpen !== void 0;
+    const activeTools = (0, import_react78.useMemo)(() => {
+      if (isPanelControlled) {
+        return {
+          top: isArtifactsPanelOpen ? "artifacts" : internalTools.top,
+          bottom: internalTools.bottom
+        };
+      }
+      return internalTools;
+    }, [isPanelControlled, isArtifactsPanelOpen, internalTools]);
+    const isAnyToolOpen = activeTools.top !== null || activeTools.bottom !== null;
     const {
       width: sidebarWidth,
       startResizing: startResizingSidebar
@@ -6196,19 +6671,43 @@ var ChatInterface = import_react72.default.forwardRef(
       direction: "right"
     });
     const {
-      width: artifactsWidth,
-      widthPercent: artifactsWidthPercent,
-      startResizing: startResizingArtifacts
+      width: toolsWidth,
+      startResizing: startResizingTools
     } = useResizable({
       initialWidthPercent: 50,
       minWidthPercent: 25,
       maxWidthPercent: 70,
       direction: "left"
     });
-    const isPanelControlled = isArtifactsPanelOpen !== void 0;
-    const artifactsPanelOpen = isPanelControlled ? isArtifactsPanelOpen : internalPanelOpen;
+    const toggleTool = (0, import_react78.useCallback)((toolId) => {
+      const toolDef = TOOL_DEFINITIONS.find((t) => t.id === toolId);
+      if (!toolDef) return;
+      const group = toolDef.group;
+      if (toolId === "artifacts" && isPanelControlled) {
+        const isCurrentlyOpen = activeTools.top === "artifacts";
+        if (isCurrentlyOpen) {
+          dismissedToolsRef.current.add("artifacts");
+        } else {
+          dismissedToolsRef.current.delete("artifacts");
+        }
+        onArtifactsPanelOpenChange?.(!isCurrentlyOpen);
+        return;
+      }
+      setInternalTools((prev) => {
+        const isCurrentlyOpen = prev[group] === toolId;
+        if (isCurrentlyOpen) {
+          dismissedToolsRef.current.add(toolId);
+        } else {
+          dismissedToolsRef.current.delete(toolId);
+        }
+        return {
+          ...prev,
+          [group]: isCurrentlyOpen ? null : toolId
+        };
+      });
+    }, [isPanelControlled, activeTools.top, onArtifactsPanelOpenChange]);
     const isTreeMode = !!conversationTree;
-    const effectiveMessages = (0, import_react72.useMemo)(() => {
+    const effectiveMessages = (0, import_react78.useMemo)(() => {
       if (isTreeMode && conversationTree) {
         const pathNodes = getActivePathMessages(conversationTree);
         return pathNodes.map((node) => ({
@@ -6220,66 +6719,48 @@ var ChatInterface = import_react72.default.forwardRef(
       }
       return messages;
     }, [isTreeMode, conversationTree, messages]);
-    const latestUserMessageIndex = (0, import_react72.useMemo)(() => {
+    const latestUserMessageIndex = (0, import_react78.useMemo)(() => {
       for (let i = effectiveMessages.length - 1; i >= 0; i--) {
-        if (effectiveMessages[i].variant === "user") {
-          return i;
-        }
+        if (effectiveMessages[i].variant === "user") return i;
       }
       return -1;
     }, [effectiveMessages]);
-    const hasPendingArtifact = (0, import_react72.useMemo)(() => {
-      return artifacts.some((a) => a.isPending);
-    }, [artifacts]);
-    (0, import_react72.useEffect)(() => {
-      if (isPanelControlled) {
-        return;
-      }
+    (0, import_react78.useEffect)(() => {
       const hasNewOrSignificantArtifact = artifacts.some((a) => {
         const p = prevArtifactsRef.current.find((prev) => prev.id === a.id);
-        if (!p) {
-          return true;
-        }
-        if (p.isPending && !a.isPending) {
-          return true;
-        }
-        if (p.title !== a.title || p.type !== a.type) {
-          return true;
-        }
+        if (!p) return true;
+        if (p.isPending && !a.isPending) return true;
+        if (p.title !== a.title || p.type !== a.type) return true;
         return false;
       });
+      const hasNodes = artifactNodes && artifactNodes.length > 0;
+      if (!isPanelControlled && (hasNewOrSignificantArtifact || hasNodes) && !dismissedToolsRef.current.has("artifacts")) {
+        setInternalTools((prev) => ({ ...prev, top: "artifacts" }));
+      }
       const hasNewOrUpdatedTask = (curr, prev) => {
         return curr.some((c) => {
           const p = prev.find((x) => x.id === c.id);
-          if (!p) {
-            return true;
-          }
-          if (c.status !== p.status || c.label !== p.label) {
-            return true;
-          }
-          if (c.subtasks && hasNewOrUpdatedTask(c.subtasks, p?.subtasks || [])) {
-            return true;
-          }
+          if (!p) return true;
+          if (c.status !== p.status || c.label !== p.label) return true;
+          if (c.subtasks && hasNewOrUpdatedTask(c.subtasks, p?.subtasks || [])) return true;
           return false;
         });
       };
-      if (hasNewOrSignificantArtifact || hasNewOrUpdatedTask(tasks, prevTasksRef.current)) {
-        setInternalPanelOpen(true);
+      if (hasNewOrUpdatedTask(tasks, prevTasksRef.current) && !dismissedToolsRef.current.has("todos")) {
+        setInternalTools((prev) => ({ ...prev, bottom: "todos" }));
       }
       prevArtifactsRef.current = artifacts;
       prevTasksRef.current = tasks;
-    }, [artifacts, tasks, isPanelControlled]);
-    const handleBranchSwitch = (0, import_react72.useCallback)(
+    }, [artifacts, artifactNodes, tasks, isPanelControlled]);
+    const handleBranchSwitch = (0, import_react78.useCallback)(
       (nodeId, direction) => {
-        if (!isTreeMode || !conversationTree || !onTreeChange) {
-          return;
-        }
+        if (!isTreeMode || !conversationTree || !onTreeChange) return;
         const newTree = switchBranch(conversationTree, nodeId, direction);
         onTreeChange(newTree);
       },
       [isTreeMode, conversationTree, onTreeChange]
     );
-    const displayMessages = (0, import_react72.useMemo)(() => {
+    const displayMessages = (0, import_react78.useMemo)(() => {
       return effectiveMessages.map((msg) => {
         let branchInfo = void 0;
         if (isTreeMode && conversationTree) {
@@ -6298,11 +6779,7 @@ var ChatInterface = import_react72.default.forwardRef(
           onEdit: msg.variant === "user" && onEditMessage ? (newContent) => onEditMessage(msg.id, newContent) : void 0,
           onRetry: msg.variant === "assistant" && onRetryMessage ? () => onRetryMessage(msg.id) : void 0
         } : void 0;
-        return {
-          ...msg,
-          branchInfo,
-          actions
-        };
+        return { ...msg, branchInfo, actions };
       });
     }, [
       effectiveMessages,
@@ -6313,31 +6790,57 @@ var ChatInterface = import_react72.default.forwardRef(
       onRetryMessage,
       handleBranchSwitch
     ]);
-    const handleSubmit = (0, import_react72.useCallback)(
+    const handleSubmit = (0, import_react78.useCallback)(
       (message, attachments) => {
         onMessageSubmit?.(message, attachments);
       },
       [onMessageSubmit]
     );
-    const toggleSidebar = (0, import_react72.useCallback)(() => {
+    const toggleSidebar = (0, import_react78.useCallback)(() => {
       setSidebarCollapsed((prev) => !prev);
     }, []);
-    const toggleArtifactsPanel = (0, import_react72.useCallback)(() => {
-      if (isPanelControlled) {
-        onArtifactsPanelOpenChange?.(!artifactsPanelOpen);
-      } else {
-        setInternalPanelOpen((prev) => !prev);
-      }
-    }, [isPanelControlled, artifactsPanelOpen, onArtifactsPanelOpenChange]);
     const isEmpty = effectiveMessages.length === 0;
-    return /* @__PURE__ */ import_react72.default.createElement(
+    const allSettled = tasks.length === 0 || areAllTasksSettled(tasks);
+    const toolDefinitions = (0, import_react78.useMemo)(() => [
+      {
+        id: "artifacts",
+        icon: /* @__PURE__ */ import_react78.default.createElement(MediaIcon, null),
+        label: "Artifacts",
+        group: "top"
+      },
+      {
+        id: "todos",
+        icon: allSettled ? /* @__PURE__ */ import_react78.default.createElement(CheckSquareIcon, null) : /* @__PURE__ */ import_react78.default.createElement(SquareLoaderIcon, null),
+        label: "Tasks",
+        group: "bottom"
+      }
+    ], [allSettled]);
+    const renderToolContent = (toolId) => {
+      if (!toolId) return null;
+      switch (toolId) {
+        case "artifacts":
+          return /* @__PURE__ */ import_react78.default.createElement(
+            ArtifactsPanel,
+            {
+              artifacts,
+              nodes: artifactNodes,
+              className: "h-full"
+            }
+          );
+        case "todos":
+          return tasks.length > 0 ? /* @__PURE__ */ import_react78.default.createElement(TodosList, { tasks, title: tasksTitle, className: "h-full" }) : /* @__PURE__ */ import_react78.default.createElement("div", { className: "h-full flex flex-col" }, /* @__PURE__ */ import_react78.default.createElement("div", { className: "flex items-center p-4 border-b border-ash/40 shrink-0" }, /* @__PURE__ */ import_react78.default.createElement("h3", { className: "text-xs font-medium text-white" }, "Tasks")), /* @__PURE__ */ import_react78.default.createElement("div", { className: "flex-1 flex items-center justify-center" }, /* @__PURE__ */ import_react78.default.createElement("p", { className: "text-xs text-silver/60" }, "No tasks")));
+        default:
+          return null;
+      }
+    };
+    return /* @__PURE__ */ import_react78.default.createElement(
       "div",
       {
         ref,
         className: cx("flex h-full w-full bg-obsidian overflow-hidden", className),
         ...rest
       },
-      /* @__PURE__ */ import_react72.default.createElement(
+      /* @__PURE__ */ import_react78.default.createElement(
         ConversationSidebar,
         {
           conversations,
@@ -6349,16 +6852,16 @@ var ChatInterface = import_react72.default.forwardRef(
           onResizeStart: startResizingSidebar
         }
       ),
-      /* @__PURE__ */ import_react72.default.createElement("div", { className: "flex-1 flex flex-col min-w-0 relative" }, /* @__PURE__ */ import_react72.default.createElement("div", { className: cx(
+      /* @__PURE__ */ import_react78.default.createElement("div", { className: "flex-1 flex flex-col min-w-0 relative" }, /* @__PURE__ */ import_react78.default.createElement("div", { className: cx(
         "flex-1 flex flex-col min-h-0 relative",
         isEmpty ? "justify-center" : "justify-start"
-      ) }, /* @__PURE__ */ import_react72.default.createElement("div", { className: cx(
+      ) }, /* @__PURE__ */ import_react78.default.createElement("div", { className: cx(
         "transition-all duration-500 ease-in-out",
         isEmpty ? "flex-1" : "flex-zero"
-      ) }), /* @__PURE__ */ import_react72.default.createElement("div", { className: cx(
+      ) }), /* @__PURE__ */ import_react78.default.createElement("div", { className: cx(
         "transition-all duration-500 ease-in-out overflow-hidden flex flex-col",
         isEmpty ? "flex-zero opacity-0" : "flex-1 opacity-100"
-      ) }, /* @__PURE__ */ import_react72.default.createElement(
+      ) }, /* @__PURE__ */ import_react78.default.createElement(
         ChatView,
         {
           messages: displayMessages,
@@ -6367,10 +6870,10 @@ var ChatInterface = import_react72.default.forwardRef(
           isThinking,
           className: "flex-1"
         }
-      )), /* @__PURE__ */ import_react72.default.createElement("div", { className: cx(
+      )), /* @__PURE__ */ import_react78.default.createElement("div", { className: cx(
         "transition-all duration-500 ease-in-out z-10 w-full flex flex-col items-center",
         isEmpty ? "p-4" : "shrink-0 p-4 border-t border-ash/40 bg-obsidian"
-      ) }, isEmpty && /* @__PURE__ */ import_react72.default.createElement("div", { className: "mb-8 text-center animate-fade-in duration-500" }, emptyState ? emptyState : /* @__PURE__ */ import_react72.default.createElement("h1", { className: "text-4xl md:text-5xl font-heading text-gold mb-2 tracking-tight" }, "Welcome!")), /* @__PURE__ */ import_react72.default.createElement(
+      ) }, isEmpty && /* @__PURE__ */ import_react78.default.createElement("div", { className: "mb-8 text-center animate-fade-in duration-500" }, emptyState ? emptyState : /* @__PURE__ */ import_react78.default.createElement("h1", { className: "text-4xl md:text-5xl font-heading text-gold mb-2 tracking-tight" }, "Welcome!")), /* @__PURE__ */ import_react78.default.createElement(
         ChatInput,
         {
           position: isEmpty ? "centered" : "bottom",
@@ -6384,39 +6887,40 @@ var ChatInterface = import_react72.default.forwardRef(
           attachments: propsAttachments,
           onAttachmentsChange
         }
-      )), /* @__PURE__ */ import_react72.default.createElement("div", { className: cx(
+      )), /* @__PURE__ */ import_react78.default.createElement("div", { className: cx(
         "transition-all duration-500 ease-in-out",
         isEmpty ? "flex-1" : "flex-zero"
       ) }))),
-      /* @__PURE__ */ import_react72.default.createElement("div", { className: "h-full flex flex-col shrink-0" }, /* @__PURE__ */ import_react72.default.createElement("div", { className: "flex-1 min-h-0" }, /* @__PURE__ */ import_react72.default.createElement(
-        ArtifactsPanel,
+      isAnyToolOpen && /* @__PURE__ */ import_react78.default.createElement(
+        ToolPanelContainer,
         {
-          artifacts,
-          isOpen: artifactsPanelOpen,
-          onClose: toggleArtifactsPanel,
-          isLoading: isStreaming && hasPendingArtifact,
-          width: artifactsWidth,
-          widthPercent: artifactsWidthPercent,
-          onResizeStart: startResizingArtifacts,
-          className: "h-full"
+          topContent: renderToolContent(activeTools.top),
+          bottomContent: renderToolContent(activeTools.bottom),
+          width: toolsWidth,
+          onResizeStart: startResizingTools
         }
-      )), tasks.length > 0 && artifactsPanelOpen && /* @__PURE__ */ import_react72.default.createElement(
-        TodosList,
+      ),
+      /* @__PURE__ */ import_react78.default.createElement(
+        ToolSidebar,
         {
-          tasks,
-          title: tasksTitle,
-          style: { width: artifactsWidth }
+          tools: toolDefinitions,
+          activeTools,
+          onToggleTool: toggleTool
         }
-      ))
+      )
     );
   }
 );
 ChatInterface.displayName = "ChatInterface";
+var TOOL_DEFINITIONS = [
+  { id: "artifacts", icon: null, label: "Artifacts", group: "top" },
+  { id: "todos", icon: null, label: "Tasks", group: "bottom" }
+];
 
 // src/components/chat/MessageActions.tsx
-var import_react73 = __toESM(require("react"));
+var import_react79 = __toESM(require("react"));
 var import_lucide_react14 = require("lucide-react");
-var ActionButton2 = ({ onClick, label, children, className, disabled }) => /* @__PURE__ */ import_react73.default.createElement(
+var ActionButton2 = ({ onClick, label, children, className, disabled }) => /* @__PURE__ */ import_react79.default.createElement(
   "button",
   {
     type: "button",
@@ -6432,7 +6936,7 @@ var ActionButton2 = ({ onClick, label, children, className, disabled }) => /* @_
   },
   children
 );
-var MessageActions = import_react73.default.forwardRef(
+var MessageActions = import_react79.default.forwardRef(
   ({
     variant,
     content,
@@ -6444,12 +6948,12 @@ var MessageActions = import_react73.default.forwardRef(
     className,
     ...rest
   }, ref) => {
-    const [localIsEditing, setLocalIsEditing] = (0, import_react73.useState)(false);
-    const [localEditValue, setLocalEditValue] = (0, import_react73.useState)(content);
-    const [copied, setCopied] = (0, import_react73.useState)(false);
+    const [localIsEditing, setLocalIsEditing] = (0, import_react79.useState)(false);
+    const [localEditValue, setLocalEditValue] = (0, import_react79.useState)(content);
+    const [copied, setCopied] = (0, import_react79.useState)(false);
     const isEditing = controlledIsEditing ?? localIsEditing;
     const editValue = controlledEditValue ?? localEditValue;
-    const setIsEditing = (0, import_react73.useCallback)(
+    const setIsEditing = (0, import_react79.useCallback)(
       (value) => {
         if (onEditingChange) {
           onEditingChange(value);
@@ -6459,10 +6963,10 @@ var MessageActions = import_react73.default.forwardRef(
       },
       [onEditingChange]
     );
-    const setEditValue = (0, import_react73.useCallback)((value) => {
+    const setEditValue = (0, import_react79.useCallback)((value) => {
       setLocalEditValue(value);
     }, []);
-    const handleCopy = (0, import_react73.useCallback)(async () => {
+    const handleCopy = (0, import_react79.useCallback)(async () => {
       try {
         await navigator.clipboard.writeText(content);
         setCopied(true);
@@ -6478,22 +6982,22 @@ var MessageActions = import_react73.default.forwardRef(
         setTimeout(() => setCopied(false), 2e3);
       }
     }, [content]);
-    const handleStartEdit = (0, import_react73.useCallback)(() => {
+    const handleStartEdit = (0, import_react79.useCallback)(() => {
       setLocalEditValue(content);
       setIsEditing(true);
     }, [content, setIsEditing]);
-    const handleCancelEdit = (0, import_react73.useCallback)(() => {
+    const handleCancelEdit = (0, import_react79.useCallback)(() => {
       setIsEditing(false);
       setLocalEditValue(content);
     }, [content, setIsEditing]);
-    const handleSubmitEdit = (0, import_react73.useCallback)(() => {
+    const handleSubmitEdit = (0, import_react79.useCallback)(() => {
       const trimmed = editValue.trim();
       if (trimmed && trimmed !== content) {
         onEdit?.(trimmed);
       }
       setIsEditing(false);
     }, [editValue, content, onEdit, setIsEditing]);
-    const handleEditKeyDown = (0, import_react73.useCallback)(
+    const handleEditKeyDown = (0, import_react79.useCallback)(
       (e) => {
         if (e.key === "Enter" && !e.shiftKey) {
           e.preventDefault();
@@ -6506,19 +7010,19 @@ var MessageActions = import_react73.default.forwardRef(
     );
     const isUser = variant === "user";
     if (isUser && isEditing) {
-      return /* @__PURE__ */ import_react73.default.createElement(
+      return /* @__PURE__ */ import_react79.default.createElement(
         "div",
         {
           ref,
           className: cx("mt-2", className),
           ...rest
         },
-        /* @__PURE__ */ import_react73.default.createElement(
+        /* @__PURE__ */ import_react79.default.createElement(
           "div",
           {
             className: "relative bg-charcoal border border-ash/60 focus-within:border-gold/60 focus-within:ring-1 focus-within:ring-gold/20"
           },
-          /* @__PURE__ */ import_react73.default.createElement(
+          /* @__PURE__ */ import_react79.default.createElement(
             "textarea",
             {
               value: editValue,
@@ -6529,15 +7033,15 @@ var MessageActions = import_react73.default.forwardRef(
               rows: 2
             }
           ),
-          /* @__PURE__ */ import_react73.default.createElement("div", { className: "absolute right-2 bottom-2 flex gap-1" }, /* @__PURE__ */ import_react73.default.createElement(
+          /* @__PURE__ */ import_react79.default.createElement("div", { className: "absolute right-2 bottom-2 flex gap-1" }, /* @__PURE__ */ import_react79.default.createElement(
             ActionButton2,
             {
               onClick: handleCancelEdit,
               label: "Cancel edit",
               className: "text-silver/60 hover:text-error"
             },
-            /* @__PURE__ */ import_react73.default.createElement(import_lucide_react14.X, { className: "w-4 h-4" })
-          ), /* @__PURE__ */ import_react73.default.createElement(
+            /* @__PURE__ */ import_react79.default.createElement(import_lucide_react14.X, { className: "w-4 h-4" })
+          ), /* @__PURE__ */ import_react79.default.createElement(
             ActionButton2,
             {
               onClick: handleSubmitEdit,
@@ -6545,13 +7049,13 @@ var MessageActions = import_react73.default.forwardRef(
               className: "text-silver/60 hover:text-gold",
               disabled: !editValue.trim() || editValue.trim() === content
             },
-            /* @__PURE__ */ import_react73.default.createElement(import_lucide_react14.Send, { className: "w-4 h-4" })
+            /* @__PURE__ */ import_react79.default.createElement(import_lucide_react14.Send, { className: "w-4 h-4" })
           ))
         ),
-        /* @__PURE__ */ import_react73.default.createElement("p", { className: "text-xs text-silver/50 mt-1" }, "Press Enter to submit, Esc to cancel. This will create a new branch.")
+        /* @__PURE__ */ import_react79.default.createElement("p", { className: "text-xs text-silver/50 mt-1" }, "Press Enter to submit, Esc to cancel. This will create a new branch.")
       );
     }
-    return /* @__PURE__ */ import_react73.default.createElement(
+    return /* @__PURE__ */ import_react79.default.createElement(
       "div",
       {
         ref,
@@ -6562,18 +7066,18 @@ var MessageActions = import_react73.default.forwardRef(
         ),
         ...rest
       },
-      /* @__PURE__ */ import_react73.default.createElement(ActionButton2, { onClick: handleCopy, label: copied ? "Copied!" : "Copy message" }, copied ? /* @__PURE__ */ import_react73.default.createElement(import_lucide_react14.Check, { className: "w-3.5 h-3.5 text-success" }) : /* @__PURE__ */ import_react73.default.createElement(import_lucide_react14.Copy, { className: "w-3.5 h-3.5" })),
-      isUser && onEdit && /* @__PURE__ */ import_react73.default.createElement(ActionButton2, { onClick: handleStartEdit, label: "Edit message" }, /* @__PURE__ */ import_react73.default.createElement(import_lucide_react14.Pencil, { className: "w-3.5 h-3.5" })),
-      !isUser && onRetry && /* @__PURE__ */ import_react73.default.createElement(ActionButton2, { onClick: onRetry, label: "Regenerate response" }, /* @__PURE__ */ import_react73.default.createElement(import_lucide_react14.RotateCcw, { className: "w-3.5 h-3.5" }))
+      /* @__PURE__ */ import_react79.default.createElement(ActionButton2, { onClick: handleCopy, label: copied ? "Copied!" : "Copy message" }, copied ? /* @__PURE__ */ import_react79.default.createElement(import_lucide_react14.Check, { className: "w-3.5 h-3.5 text-success" }) : /* @__PURE__ */ import_react79.default.createElement(import_lucide_react14.Copy, { className: "w-3.5 h-3.5" })),
+      isUser && onEdit && /* @__PURE__ */ import_react79.default.createElement(ActionButton2, { onClick: handleStartEdit, label: "Edit message" }, /* @__PURE__ */ import_react79.default.createElement(import_lucide_react14.Pencil, { className: "w-3.5 h-3.5" })),
+      !isUser && onRetry && /* @__PURE__ */ import_react79.default.createElement(ActionButton2, { onClick: onRetry, label: "Regenerate response" }, /* @__PURE__ */ import_react79.default.createElement(import_lucide_react14.RotateCcw, { className: "w-3.5 h-3.5" }))
     );
   }
 );
 MessageActions.displayName = "MessageActions";
 
 // src/components/chat/BranchNavigator.tsx
-var import_react74 = __toESM(require("react"));
+var import_react80 = __toESM(require("react"));
 var import_lucide_react15 = require("lucide-react");
-var BranchNavigator = import_react74.default.forwardRef(
+var BranchNavigator = import_react80.default.forwardRef(
   ({
     current,
     total,
@@ -6592,7 +7096,7 @@ var BranchNavigator = import_react74.default.forwardRef(
     const buttonSize = size === "sm" ? "p-0.5" : "p-1";
     const iconSize = size === "sm" ? "w-3 h-3" : "w-4 h-4";
     const textSize = size === "sm" ? "text-xs" : "text-sm";
-    return /* @__PURE__ */ import_react74.default.createElement(
+    return /* @__PURE__ */ import_react80.default.createElement(
       "div",
       {
         ref,
@@ -6604,8 +7108,8 @@ var BranchNavigator = import_react74.default.forwardRef(
         "aria-label": "Branch navigation",
         ...rest
       },
-      showIcon && /* @__PURE__ */ import_react74.default.createElement(import_lucide_react15.GitBranch, { className: cx(iconSize, "mr-0.5 text-silver/50"), "aria-hidden": "true" }),
-      /* @__PURE__ */ import_react74.default.createElement(
+      showIcon && /* @__PURE__ */ import_react80.default.createElement(import_lucide_react15.GitBranch, { className: cx(iconSize, "mr-0.5 text-silver/50"), "aria-hidden": "true" }),
+      /* @__PURE__ */ import_react80.default.createElement(
         "button",
         {
           type: "button",
@@ -6618,10 +7122,10 @@ var BranchNavigator = import_react74.default.forwardRef(
           ),
           "aria-label": "Previous branch"
         },
-        /* @__PURE__ */ import_react74.default.createElement(import_lucide_react15.ChevronLeft, { className: iconSize })
+        /* @__PURE__ */ import_react80.default.createElement(import_lucide_react15.ChevronLeft, { className: iconSize })
       ),
-      /* @__PURE__ */ import_react74.default.createElement("span", { className: cx(textSize, "tabular-nums min-w-6 text-center") }, current, "/", total),
-      /* @__PURE__ */ import_react74.default.createElement(
+      /* @__PURE__ */ import_react80.default.createElement("span", { className: cx(textSize, "tabular-nums min-w-6 text-center") }, current, "/", total),
+      /* @__PURE__ */ import_react80.default.createElement(
         "button",
         {
           type: "button",
@@ -6634,7 +7138,7 @@ var BranchNavigator = import_react74.default.forwardRef(
           ),
           "aria-label": "Next branch"
         },
-        /* @__PURE__ */ import_react74.default.createElement(import_lucide_react15.ChevronRight, { className: iconSize })
+        /* @__PURE__ */ import_react80.default.createElement(import_lucide_react15.ChevronRight, { className: iconSize })
       )
     );
   }
@@ -6642,16 +7146,16 @@ var BranchNavigator = import_react74.default.forwardRef(
 BranchNavigator.displayName = "BranchNavigator";
 
 // src/components/BrandIcon.tsx
-var import_react75 = __toESM(require("react"));
+var import_react81 = __toESM(require("react"));
 var sizeMap2 = {
   sm: "h-8 w-8 text-sm",
   md: "h-12 w-12 text-base",
   lg: "h-16 w-16 text-lg"
 };
-var BrandIcon = import_react75.default.forwardRef(
+var BrandIcon = import_react81.default.forwardRef(
   ({ size = "md", variant = "solid", children, className, ...rest }, ref) => {
     const variantClasses = variant === "solid" ? "bg-gold text-obsidian border-2 border-gold" : "bg-transparent text-gold border-2 border-gold";
-    return /* @__PURE__ */ import_react75.default.createElement(
+    return /* @__PURE__ */ import_react81.default.createElement(
       "div",
       {
         ref,
@@ -6670,17 +7174,17 @@ var BrandIcon = import_react75.default.forwardRef(
 BrandIcon.displayName = "BrandIcon";
 
 // src/components/ColorSwatch.tsx
-var import_react76 = __toESM(require("react"));
-var ColorSwatch = import_react76.default.forwardRef(
+var import_react82 = __toESM(require("react"));
+var ColorSwatch = import_react82.default.forwardRef(
   ({ color, label, className, ...rest }, ref) => {
-    return /* @__PURE__ */ import_react76.default.createElement(
+    return /* @__PURE__ */ import_react82.default.createElement(
       "div",
       {
         ref,
         className: cx("flex flex-col items-center gap-2", className),
         ...rest
       },
-      /* @__PURE__ */ import_react76.default.createElement(
+      /* @__PURE__ */ import_react82.default.createElement(
         "div",
         {
           className: "h-16 w-16 border-2 border-ash rounded-none shadow-sm",
@@ -6688,22 +7192,22 @@ var ColorSwatch = import_react76.default.forwardRef(
           "aria-label": label || color
         }
       ),
-      label && /* @__PURE__ */ import_react76.default.createElement("span", { className: "text-xs text-silver font-medium" }, label)
+      label && /* @__PURE__ */ import_react82.default.createElement("span", { className: "text-xs text-silver font-medium" }, label)
     );
   }
 );
 ColorSwatch.displayName = "ColorSwatch";
 
 // src/components/SectionHeading.tsx
-var import_react77 = __toESM(require("react"));
+var import_react83 = __toESM(require("react"));
 var levelStyles = {
   h2: "text-2xl mb-4",
   h3: "text-xl mb-3"
 };
-var SectionHeading = import_react77.default.forwardRef(
+var SectionHeading = import_react83.default.forwardRef(
   ({ level = "h2", children, className, ...rest }, ref) => {
     const Component = level;
-    return /* @__PURE__ */ import_react77.default.createElement(
+    return /* @__PURE__ */ import_react83.default.createElement(
       Component,
       {
         ref,
@@ -6720,6 +7224,13 @@ var SectionHeading = import_react77.default.forwardRef(
 );
 SectionHeading.displayName = "SectionHeading";
 
+// src/components/ArtifactNode.ts
+var NODE_TYPES = {
+  ARTIFACT: "ARTIFACT",
+  GROUP: "GROUP",
+  VARIANT_SET: "VARIANT_SET"
+};
+
 // src/index.ts
 var version = "2.0.0";
 // Annotate the CommonJS export names for ESM import in node:
@@ -6732,6 +7243,8 @@ var version = "2.0.0";
   Alert,
   AlertDialog,
   ArtifactCard,
+  ArtifactGroup,
+  ArtifactVariantStack,
   ArtifactsPanel,
   ArtifactsPanelToggle,
   AttachmentPreview,
@@ -6782,6 +7295,7 @@ var version = "2.0.0";
   ListItemText,
   ListSubheader,
   MarkdownContent,
+  MediaIcon,
   Menu,
   MenuContent,
   MenuItem,
@@ -6791,6 +7305,7 @@ var version = "2.0.0";
   Message,
   MessageActions,
   Modal,
+  NODE_TYPES,
   Navbar,
   NavbarBrand,
   NavbarContent,
@@ -6835,9 +7350,12 @@ var version = "2.0.0";
   ThinkingIndicator,
   ToastProvider,
   TodosList,
+  ToolPanelContainer,
+  ToolSidebar,
   Tooltip,
   VideoCard,
   addMessageToTree,
+  areAllTasksSettled,
   createEmptyTree,
   createPreviewUrl,
   generateId,
@@ -6849,6 +7367,7 @@ var version = "2.0.0";
   revokePreviewUrl,
   switchBranch,
   updateNodeContent,
+  useArtifactTreeNavigation,
   useArtifacts,
   useResizable,
   useScrollAnchor,